計算・変換・診断・あそび

UI/UX図鑑

動くUIパーツ 293 種・29 カテゴリ。見本を見て、気になったら仕様書とコードへ。

見本

カテゴリ

基本のUI部品ボタン・フォーム・ナビ・通知など、毎日使う部品。

動きと演出スクロール・トランジション・タイポ・没入表現。

画面のかたちレイアウトと、プロのサイトから学ぶページ・アプリ画面の実例。

領域別データ・EC・SaaS・AI・ソーシャルなど、用途で引く。

組み合わせると（応用例）

部品を組み合わせて1ページにした業種別の見本。「解説を重ねる」で使われている部品へ降りられます。

目的から引く

原則から引く

UI が効く理由。各原則から、それを体現するパーツへ。

どれを使う？（比較）

似た部品の決め方を、判断軸ごとの表で。

参考にしたプロのサイト・一次情報

見た目を真似る先ではなく、各サイトが「何を主役にし、何を退かせているか」を見るための一覧。実用サンプルの型と原則の出典はここから取っています。

実見した20サイト

fold（開いた最初の画面）を desktop / mobile で実採取して選別。実用サンプル（LP・アプリ画面）の型はここから取った。

デザインシステム

部品の名前・状態・アクセシビリティ契約の一次情報。「英語名」の出典としても使える。

原則・ガイドライン

個々の型が「なぜ効くか」を裏づける観察と規範。

よくある質問

どう見ればいいですか？

上から順に、見本 → カテゴリ → 応用例 → 目的 → 原則・比較と、絵から文章へ降りる並びです。見本の静止画にホバー（スマホはタップ）すると、その場で動きます。気に入ったら「コードを見る」で仕様書とコピーして使えるコードへ。

「図鑑」と「応用例」の違いは？

図鑑は部品を1つずつ見る場所（293 種・293 件に仕様書・62 件に読みものの解説）。応用例は部品を組み合わせて1ページにするとどうなるかを見る場所で、各ページの「解説を重ねる」で使われている部品へ降りられます。

名前がわからない動きも探せますか？

はい。全パーツ一覧で、日本語名・英語名・見た目の特徴（別名）・操作の種類（クリック／ホバー／ドラッグなど）から検索・絞り込みできます。

コードはどうやって使えばいいですか？

各パーツの詳細ページでプレビューを操作しながら、HTML/CSS/JSのコードをそのままコピーできます。「1ファイルでまとめてコピー」で、保存すればそのままブラウザで開ける完結HTMLも取れます。

実装の参考にする際の注意点はありますか？

プレビューはこのサイトのデザイントークンに合わせた簡易実装です。実際に組み込む際は、ご自身のサイトの配色やフォント、アクセシビリティ要件（reduced-motion対応など）に合わせて調整してください。参考サイトの記載は「型の使われ方」の観察で、コードやロゴの転載ではありません。