real-world-metaphors

UIにおける現実世界のメタファー

現実世界から取り入れたUIパターンは、ユーザーがその仕組みをすでに知っているため、学習の負担を軽減します。カードは手に取れるもののように感じられます。カルーセルは積み重ねたものをめくるように感じられます。ドロワーは横からスライドして出てくるように感じられます。こうしたメタファーはアフォーダンスを備えているため、ユーザーは説明を読む前に何をすればよいかがわかります。

装飾としてではなく、意図を持って使いましょう。

よく使われるメタファーと使いどころ

カード

カードは、物理的なインデックスカードや棚に並ぶ商品と同じように、境界が明確で、それ自体で完結したコンテンツのまとまりです。

次のような場合に使用します：

• コンテンツ項目が個別に分かれていて、比較できる場合（商品、人、記事、タスクなど）
• 各項目をすばやく確認でき、必要に応じて操作できるようにする場合
• 各項目に視覚的なサムネイル、画像、アイコンがあると役立つ場合

主な特性：

• カードはつかめるように感じられる必要があります。立体感（--shadow-sm）、角丸、明確な境界を設けます
• 同じセット内のカードはすべて同じ幅にします。高さはコンテンツに応じて変えてかまいません
• 各カードには主なアクションを1つだけ設けます。副次的なアクションは、ホバー時または詳細ビュー内に表示します
• カードは「手に取って何かできる」ことを示唆します。クリックしても何も起きない場合は、カードではなくリストを使いましょう

カルーセル／横スクロール

カルーセルは、積み重ねたものをめくったり、レールに沿って項目をスライドさせたりする物理的な動作から着想を得ています。

次のような場合に使用します：

• ビューポートに収まらない数の項目があり、閲覧が主な操作となる場合
• 項目に自然な視覚的順序がある場合（ステップ、注目コンテンツ、メディアなど）
• ユーザーに特定の項目を探させるのではなく、探索してもらう場合

注意：

• カルーセルはコンテンツを隠します。重要な項目をカルーセル内だけに置かないでください
• 自動で切り替わるカルーセルはユーザーの操作性を損ないます。ユーザー自身が操作するナビゲーションを優先しましょう
• モバイルでは、明示的なナビゲーションドットのない横スクロールのほうが、矢印より自然に感じられます

ドロワー／サイドパネル

ドロワーは、物理的な机の引き出しのように端からスライドして表示され、現在のビューを置き換えることなく、追加のコンテキストを提供します。

次のような場合に使用します：

• メインビューのコンテキストを失わずに、補足的な詳細を確認する必要がある場合
• 背後にリストを表示したまま、項目を編集または設定する場合
• モバイルのナビゲーションパターン（ハンバーガーメニューからサイドドロワーを開くなど）

主な特性：

• ドロワーは端に固定されているように感じられる必要があります。ナビゲーションには左側、詳細や設定には右側を使います
• 明確な閉じる操作（×ボタンと外側のクリック）を必ず用意します
• ドロワーが上のレイヤーにあることを示すため、背後のコンテンツをオーバーレイで少し暗くします

アコーディオン

コンテンツを開いて見せる物理的なフォルダーのように、折りたたんでスペースを節約し、展開して詳細を表示します。

次のような場合に使用します：

• コンテンツに明確な親子関係がある場合
• ほとんどのユーザーが一度に必要とするセクションが少数の場合
• 縦方向のスペースが限られている場合

タブ

バインダーの物理的な仕切りタブのように、タブを選択して該当するセクションを表示します。

次のような場合に使用します：

• コンテンツが、互いに排他的で同じ階層にあるセクションに分かれている場合
• ユーザーがセクション間を頻繁に切り替える場合
• すべてのタブが同じコンテキストで等しく重要な場合

**注意：**タブは、同じ階層にある重要度の等しいセクションを示します。階層的なナビゲーションにはタブを使わないでください（代わりにパンくずリストまたはサイドバーを使います）。

ツールチップ

オブジェクトに貼り付けた付箋のように、ホバー時に表示され、短い補足情報を提供します。

次のような場合に使用します：

• アイコンやコントロールに短いラベルが必要だが、常に表示するとレイアウトが煩雑になる場合
• 用語や値について、その場で簡単な説明が必要な場合

**次の代わりにはなりません：**わかりやすいラベル、インラインのヘルプテキスト、複雑な機能のドキュメント。

メタファーをうまく使うための原則

1. メタファーは操作に合っている必要があります — クリックしても何も起きないカードは、誤った操作可能性を示します
2. メタファーを混在させないでください — カードの中にドロワーがあり、その中にカルーセルがあると、認知的なノイズが生じます
3. モバイルではデスクトップとは異なるメタファーが使われます — スワイプして閉じる操作、ボトムシート、プル・トゥ・リフレッシュはモバイルに適した操作です。それらをデスクトップに無理に取り入れると、どちらの環境でも違和感が生じます
4. 奥行きはメタファーを補強します — 影のないカードはつかめそうに感じられず、オーバーレイのないドロワーはレイヤー構造を感じさせません

レビューチェックリスト

• 選んだパターンは、ユーザーが直感的に理解する物理的なメタファーに合っていますか？
• カードには、単なる装飾ではなく、明確な主要アクションがありますか？
• カルーセルや横スクロールには、ナビゲーションの手がかり（ドット、矢印、または次の項目の一部を表示するなど）がありますか？
• ドロワーでは、レイヤー構造を示すために背景のコンテンツが暗くなりますか？
• 物理的なメタファーに一貫性がありますか — 同じ種類のコンテンツには、製品全体で同じパターンが使われていますか？