はじめに💫

こんにちわ、最近は金欠なので日本でおとなしく仕事する予定のノベルワークスのまとっち（@matoi_thai）です。Uiverseがかなり良くて、kintoneで色々活用できそうなので、試したことを記事で共有します。

こんな人に見てほしい👀

• イケてるUIコンポーネントを使いたい人

• kintoneの画面をかっこよくしたい人

Uiverseとは✨

HTMLとCSSで作られたイケてるUIコンポーネント（ボタン、チェックボックス、カード、スピナー等々）が無料で大量に公開されているサイトです。Figmaにコピーすることもできるので、WebアプリのUIデザインに使われます。

https://uiverse.io/

今回試したこと🎨

下記の手順でkintoneをカスタマイズしてみました。

• UiverseでイケてるUIのHTMLとCSSをコピーする

• 生成AIでkintone用Javascriptに変換する

• できたJavascriptをkintoneに設定する

① マリオコイン

使用したUiverse🧩

• マリオコイン

実装概要🛠️

• 編集画面

• スペースフィールドにマリオコインの絵を配置

• ？ブロックをクリックしたらコインの数値を1増やす

完成品🎉

② プロフィールカード

使用したUiverse🧩

• カード裏表

• カードSNS

• ネオンチェック

実装概要🛠️

• 一覧画面（カスタマイズビュー）

• プロフィールカード表裏にレコード情報を表示

• チェックを入れると一覧レコードを絞り込み

完成品🎉

おわりに💬

基本的には生成AIに丸投げで作りました。HTMLとCSSをJavascriptに変換した時に位置がズレたりしますが、何度もやり直しさせて、最終的にはいい感じに仕上がりました。