UI/UX用語を共通言語に
素晴らしいプロダクトを作るには、デザイナーとエンジニア、そしてディレクターが「共通の言語」で会話することが不可欠です。この用語集は、その橋渡しを目的としています。
ツールの活用案
- 要件定義・ワイヤーフレーム作成: 「ここにはアコーディオンを使おう」「トーストで通知を出そう」といった具体的な名称を使うことで、認識のズレを防げます。
- AIプロンプトへの活用: 画像生成AIやコーディングAIに対して、正確なUIパーツ名を指定することで、意図通りのアウトプットを引き出しやすくなります。
- デザインレビューの円滑化: 抽象的な表現ではなく、専門用語を用いることで、フィードバックの質とスピードが向上します。
実装の工夫
単なるリスト表示ではなく、学習ツールとしての使い勝手を考慮した設計を行っています。
- 動的レンダリング: JavaScriptを用いてデータを動的に展開。将来的な項目の追加や整理を容易にしています。
- 瞬時のフィルタリング機能: ヘッダーの検索窓から、日本語・英語・説明文を横断して即座に目的の用語を見つけられます。
- 安全なサンプルプレビュー: 実際の挙動を確認できるサンプル集はiframeで分離。メインサイトに影響を与えずに動作を確認できます。
役立つ知識
UIデザインの背後にある、人間の心理や原則についての基礎知識です。
- メンタルモデル: ユーザーが「これはこう動くはずだ」という思い込み。既知のUIパターン（ハンバーガーメニューなど）に従うことで、学習コストを下げられます。
- アフォーダンス: 形そのものが「どう扱うか」を連想させること。例えば、影のついたボタンは「押せそう」だと認識されます。
- フィッツの法則: ターゲットが大きく、かつ近いほど、狙いやすくなるという法則。重要なボタンは大きく、押しやすい位置に配置するのが基本です。