【UIデザイン】ケバブメニューとミートボールメニューの使い分けについて（３点リーダー）

モバイルアプリやWebアプリのUIデザインにおいて、メニューの配置やデザインはユーザーの操作性に大きな影響を与えます。その中でも「ケバブメニュー」と「ミートボールメニュー」は、いずれも3点リーダー（縦もしくは横の3つの点）を使用したメニューであり、しばしば混同されがちです。しかしこれらを適切に使い分けることで、より直感的な操作を提供することができます。

本記事ではケバブメニューとミートボールメニューの違いを明確にし、それぞれの適切な使い方について詳しく解説します。

ケバブメニューとは？

ケバブメニューの特徴

ケバブメニュー（Kebab Menu）は、縦に並んだ3つの点（⋮）を使用するメニューです。主にAndroidアプリやGoogleのデザインガイドラインにおいて多用されており、以下のような特徴があります。

• メニュー項目が「オプション」や「設定」に関連している
• ページの右上または右側に配置されることが多い
• 主に追加の操作を提供するために使用される
• 視覚的に控えめで、コンテンツの邪魔をしない

ケバブメニューの使用例

• テキストエディタで「コピー」「削除」「詳細を表示」といったアクションを提供する。
• SNSアプリで、投稿の管理（削除・編集・シェア）を行う。
• ファイル管理アプリで、ファイルのリネームや詳細情報の表示などを行う。

ミートボールメニューとは？

ミートボールメニューの特徴

ミートボールメニュー（Meatball Menu）は横に並んだ3つの点（…）を使用するメニューです。iOSアプリやWebアプリに多く見られ、以下の特徴があります。

• コンテキストメニューとして使用されることが多い
• ツールバーやナビゲーションバー内に配置されることが多い
• 他のUI要素と並列に並ぶことで、操作性を向上させる
• 主要なアクションではなく、補助的なオプションを提供する

ミートボールメニューの使用例

• ブラウザで「ブックマーク」「履歴の管理」「設定」などのオプションを表示する。
• 音楽アプリで「プレイリストに追加」「曲情報を表示」「ダウンロード」などのアクションを提供する。
• タスク管理アプリで、「タスクを削除」「リマインダーを設定」などを行う。

ケバブメニューとミートボールメニューの適切な使い分け

どちらのメニューも「追加のオプションを表示する」という目的は共通していますが、使い方を間違えるとユーザーの混乱を招く可能性があります。以下のガイドラインを参考に、適切な選択をしましょう。

コンテンツの種類に応じた選択

• ケバブメニュー（⋮）は、アイテム単位のオプションに適用
  • 例: 投稿ごとの操作（削除、編集、共有）
• ミートボールメニュー（…）は、全体的なオプションに適用
  • 例: アプリ全体の設定や機能（フィードバック送信、ヘルプ表示）

ユーザー体験を考慮した選択

• ユーザーがすぐに見つけられるよう、操作頻度が高いメニューはボタンとして直接表示
• メニューを開いたときの直感的な理解度を考慮し、適切なアイコンを選択
• プラットフォームごとのUIガイドラインに従う（例: Androidではケバブメニューを多用）

プラットフォームごとの違い

まとめ

ケバブメニューとミートボールメニューは、どちらも補助的な操作を提供するためのUI要素ですが、適切に使い分けることでユーザー体験を向上させることができます。

基本ルールのおさらい

• ケバブメニュー（⋮）は「個別アイテムのオプション」に適用
• ミートボールメニュー（…）は「全体またはコンテキストに応じたオプション」に適用
• プラットフォームのUIガイドラインに従う
• ユーザーの利便性を最優先し、適切な配置を選択する

UIデザインの細部にこだわることで、より直感的で使いやすいアプリやWebサイトを提供できます。ぜひ適切なメニュー選びを心がけてみてください。