Good interfaces.
Better reasons.

EDITORIAL / 2026.09.22

見た目の参考を、使える設計に変える。

UIを探すと、美しいトップページがたくさん見つかります。しかし、利用者が料金を比較したいのか、宿を予約したいのか、手続きを終えたいのかで、必要な設計は変わります。参考サイトを集めるときは、最初に「この人が何をできれば成功か」を一文にします。

このページは、24ジャンルの事例候補を探索し、設計上の問いを見つけ、独自の小さなUIで試すための道具です。候補のURL・選定根拠・確認範囲を台帳に残し、受賞歴のない候補も区別して収録しています。

21st.devをどう使うか。

21st.devはReactコンポーネント、テンプレート、テーマを探せるサービスです。公式には12,000件以上が案内され、閲覧無料、日次のコピー枠、会員向けの機能、追加のAI生成が区別されています。CLI・MCPも提供されていますが、認証やプランに応じた条件があります。利用時は公式案内を確認してください。

参考として見ること、コードを自分のサイトに取り込むこと、コードや画像を配布することは、別の利用です。規約は無許可の自動収集や再掲載を制限しています。ここで提供する3つのUIは独自に実装した例で、21st.devや参考サイトの部品・画像を転載したものではありません。

1. 名前が分からなくても探せる入口。

旅行サイトDiscoverNEPAの公開ページには、活動、季節、飲食、イベントといった複数の入口があります。同サイトの2025年Webby Honoreeは主催者の記録で確認できます。ただし、それだけで現行ページの探索効率が証明されるわけではありません。

応用できるのは、利用者が知っている言葉から探せるようにする発想です。道具を紹介するサイトなら、専門的なツール名より「比較したい」「整理したい」が入口になり得ます。自作例「目的から探す」では、この分類と検索、0件時の案内を試せます。項目が数件しかない場合は、分類を増やすより短い一覧が適します。

2. 比較では、単位と条件を揃える。

料金表は数字を大きく見せるだけでは判断できません。誰に、どの単位で、何が含まれる価格なのかを揃える必要があります。自作例「条件を揃えて比較する」では、架空の個人プランとチームプランを同じ項目で表示し、必要な使い方を選ぶと候補と理由を変えます。

この実装は外部サービスの料金を再現したものではありません。数値はすべて説明用です。実案件では税込・税別、人数、契約期間、追加料金を入力データとして管理し、比較条件から外れる場合も説明します。推薦の色だけに頼らず、理由を文章でも示します。

3. 判断の根拠を、使う場所に置く。

参考事例の記事では、確認した事実と、そこから考えた設計上の仮説が混ざりがちです。自作例「根拠と判断を分ける」は、仮説、適用条件、未確認事項を表示し、検証手順を開いてメモを持ち帰れるようにしています。

短くても、何を確認すれば判断が変わるかが分かることが大切です。「良いデザイン」という形容だけで終わらず、利用者に同じ課題を試してもらい、到達できたか、迷ったか、どのくらい時間がかかったかを確かめます。このページでは効果を未測定のまま数値化していません。

小さく取り込み、実際の条件で確かめる。

1. 「UIを試す」で、解きたい課題に近い例を選びます。
2. 狭い幅や操作を確かめ、HTMLを保存します。HTMLにはスタイルと動作が含まれます。
3. 既存サイトの文字、色、用語、データに合わせ、実際の利用者の課題で確認します。

自作例は外部パッケージ不要のHTML/CSS/JavaScriptです。ネットワーク送信や決済は行いません。第三者のサイトと同じ成果が得られる保証はありません。利用条件は各HTML内のMITライセンス表示を確認してください。