Design Gallery
良いUIを、再現できるかたちで。
First CH の制作現場で生まれたUIを、ソースコードとAI Scriptつきでストックしています。コピーして、そのまま次のプロジェクトへ。
10 designs / 4 categories
Elements5
ACC-01
FAQアコーディオン
よくある質問の開閉リスト。JavaScript不要の<details>で実装し、開くとプラス記号が45度回って×になる。1問目のみ初期表示。
BDG-01
ステータスバッジ
管理画面や一覧で状態を示すバッジ。淡い背景色+ドットの組み合わせで、4状態(公開中・レビュー待ち・停止中・下書き)。
BTN-01
スタンダードボタン
白基調サイトの基本となる3種のボタン。プライマリ(アンバー)・セカンダリ(枠線)・テキストの優先度3段階で構成。
CRD-01
フィーチャーカード
サービス紹介や特徴一覧に使うリンクカード。見出し+説明文+矢印リンクのシンプル構成。ホバーで上部にアンバーの罫線が伸び、わずかに浮き上がる。
INP-01
テキストフィールド
お問い合わせフォームの基本入力欄。通常状態とエラー状態のセット。ラベル・ヘルパーテキスト・エラーメッセージを含む。