
ゲーム
イベント
マガジン
技術ブログ
Webサービスやアプリの開発現場で、「ここにハンバーガーメニューを置こう」といった会話を耳にしたことはないでしょうか。 「ハンバーガー」「ミートボール」「ケバブ」「ワッフル」「弁当箱」。おいしそうなランチのような名前が並んでいますが、これらは今のUIデザインに欠かせない「メニューアイコン」の俗称です。 スマートフォンの狭い画面にパソコンに準じた多くの情報を盛り込むために、これらのアイコンは「要素を隠すための魔法の箱」として多用されています。しかし、これらは便利であると同時に、使い方を間違えるとプロダクトの使い勝手を下げる「劇薬」でもあります。 今回は、それぞれのアイコンの暗黙的ルールと、メニューを隠すことの代償について紐解いていきます。 4つのメニューアイコンと意味 これらのアイコンは、どれも「クリック(タップ)すると何かメニューが開く」という点では同じですが、使われる文脈が異なります。 1. 三本線 名称、呼称: menu、ハンバーガーメニュー、… 役割: グローバルナビゲーション(アプリケーション全体に関わる主要なメニュー) 配置: 主に画面の左上(または右上) どの画面にいてもアクセスできる、プロダクトの根幹となるナビゲーションを隠すために使われます。 アイコンが三本線ではなく、二本線や、四本線の場合もあります。同様の役割で、三本線ではなくサイドバーを表すアイコンが配置されている場合もあります。 例: Google Material Designサイト 例: Anthropic Claude (Web) 2. 横の三点リーダー 名称、呼称: ellipsis horizon、more horizon、overflow menu、水平の三点リーダー、ミートボールメニュー、… 役割: 画面全体や、要素に対する追加のアクション 配置: 画面の右上や、要素の末尾など 文章の最後の「……(続く、省略されている)」と意味合いも形状も同じで、「この行(アイテム)に対して、編集・削除・共有などの操作」(コンテキストメニュー)や、「この画面に関するその他の操作」を示します。 「削除」操作は、誤操作を防ぐために、あえてコンテキストメニューに入れて隠す場合もあります。 例: OpenAI ChatGPT(Web) 例: Apple iOS Safari(Webブラウザー) 3. 縦の三点リーダー 名称、呼称: ellipsis vertical、more vertical、overflow menu、垂直の三点リーダー、ケバブメニュー、… 役割: 「横の三点リーダー」と同様 配置: 「横の三点リーダー」と同様 「縦」に並んだ点が、展開するアクションメニュー(メニューリスト)を想像させる形状です。 Googleのプロダクトにて標準的に利用されています。 「横の三点リーダー」と「縦の三点リーダー」は同様の役割で、同じサービス内で共存、使い分けるケースは少ないです。 例: Google Gemini(Web) 例: Google Chrome(Webブラウザー) 4. 九つの点 名称、呼称: Apps、launcher、launchpad、ワッフルメニュー、弁当箱メニュー、… 役割: 別のアプリケーションや、独立したモジュールへの切り替え 配置: 画面の左上、右上など ハンバーガーメニューがアプリケーション内のグローバルメニューなのに対して、ワッフルメニューは、現在のアプリケーション以外に切り替える(起動する)メニューに使われます。 現在のコンテキストを離れ、全く別の機能群にジャンプするための「ハブ」として機能します。 例: Microsoft 365(Web) 現時点では、これらの「暗黙のルール」が主流となっており、メニューアイコンを選ぶ際には、これらを踏まえるのがユーザーのためにも無難です。 メニューを隠すことの代償 これらのアイコンを使えば、どんなに複雑な機能でも小さなボタンの中に押し込むことができます。画面はスッキリと美しくなり、一見するとデザインが洗練されたように感じます。 しかし、UIデザインにおいて 「隠す」ことには代償 が伴います。 認知心理学の分野やUXデザインにおいては 「発見可能性(Discoverability)」 という言葉が使われます。英語のことわざに “Out of sight, out of mind”(見えなければ、忘れ去られる)とあるように、ユーザーは「画面に見えていない機能」はないものとして扱います。 メニューアイコンの中に機能を隠すということは、以下の2つの認知的負荷をユーザーに強いることになります。 推測の負荷: 「このアイコンを押せば、自分が求めている機能があるはずだ」とユーザー自身に推測させる必要がある。 操作の負荷: 目的の機能にたどり着くまでに、必ず「メニューを開く」という余分な1クリック(タップ)が発生する。 「画面をスッキリさせたい」という開発者側の都合で作られたハンバーガーメニューの奥底に、プロダクトにとって重要な機能(リンク)を隠してしまった結果、ユーザビリティや、ビジネス的な成果の悪化を招くこともあります。 見えるメニューも試す 「隠すことの代償」を軽減する具体策としては、例えばモバイルアプリでは、ボトムナビゲーション(タブバー)(見えるメニュー)に主たる項目を配置しハンバーガーメニュー内(見えないメニュー)にそれ以外の項目を並べることを試すとよいでしょう。 同様に、三点リーダーの場合も何を隠すのか、隠さないのか、よく検討することが大切です。 例: バーガーキング(App) まとめ:アイコンを「ガラクタ箱」にしないために ハンバーガーメニュー、三点リーダーメニュー。これらは限られた画面領域を有効活用するための素晴らしい発明です。しかし、これらを 「画面に収まりきらなかった機能をとりあえず放り込んでおくガラクタ箱」 として使ってはいけません。モバイル用、デスクトップ用ともに。 UIを設計する際、アイコンで隠す前に、まず 「情報設計(IA:Information Architecture)」 から見直す必要があります。 メニューアイコンは「デザインの魔法」ではなく、単に「整理のための引き出し」と捉えたほうがよいでしょう。内容、役割、頻度、数、ラベルなど、項目を論理的に整理することが、使いやすいプロダクトを生み出すための第一歩となります。 余談:「食べ物の呼び名(スラング)」の歴史 「三本線」や「横の三点リーダー」のアイコン自体は古くからありましたが、それらが「食べ物の名前」で呼ばれるようになったのは、スマートフォンが普及して画面の省略化が進んだ2010年代以降のことです。デザイナーたちの「連想ゲーム」で以下のように名付けられていったようです。 ハンバーガー iPhoneの登場後、Facebookなどの人気アプリが画面領域を節約するために「三本線」のアイコンでメニューを隠すUIを採用しました。この時、アイコンが爆発的に普及し、デザイナーや開発者の間で「ハンバーガー」と呼ばれ始め、UIデザインにおける最初にして最大の食べ物スラングとして定着しました。 ワッフル / 弁当箱 Googleが「9つの点」のランチャーを大々的に導入。すでに「ハンバーガー」という食べ物スラングが定着していた界隈で、「じゃあ、あの四角い格子状のやつはワッフルだ」「いや、おかずが詰まったBento Box(弁当箱)だ」と呼ばれるように。 ケバブ AndroidのMaterial Designにて標準化された「縦の3つの点」。「ハンバーガーがあるなら、肉が縦に並んでいるのは『ケバブ』だろう」というジョークが生まれました。 ミートボール ケバブ(縦)という呼び名に対して、昔から使われていた「横の3つの点」を呼び分ける必要が出てきました。「縦が串焼き(ケバブ)なら、お皿に横に転がっている肉団子だから『ミートボール』にしよう」という、後追いの連想ゲーム。 … UI界隈でも、どこまでこれらの俗称が通じるかは不明ですが …。 Photo by Jean-claude Attipoe , Olivier Amyot , Victoria Shes , Najmah Faisal on Unsplash ご覧いただきありがとうございます! この投稿はお役に立ちましたか? 役に立った 役に立たなかった 1人がこの投稿は役に立ったと言っています。 The post 「隠すUI」の功罪:それ、ハンバーガーで大丈夫? first appeared on SIOS Tech Lab .
はじめに 2026年3月26日、初の試みとして、リクルート本社オフィスにて 「産学連携技術交流会」 を開催しました。本イベント
2026 年 3 月 30 日週、私はチームと一緒に AWS 香港ユーザーグループ を訪問しました。香港には小さいながらも強力なコミュニティがあり、彼らにはすばらしいエネルギーと情熱があります。彼らは最近、新しい AI ユーザーグループを立ち上げたので、私たちはさらに多くの人が参加することを願っています。すばらしい料理と会話を通して、コミュニティとの絆を強めることもできました。 2026 年 4 月 6 日週は、まずいくつかの主要な発表について詳しく見ていきます。 AWS DevOps エージェントおよびセキュリティエージェント GA 前回の re:Invent では、複数のステップにわたって自律的に作業して成果を達成し、仕事が完了するまで継続的に活動する フロンティアエージェントの概念 を紹介しました。最初の 2 つ ( AWS DevOps エージェントと AWS セキュリティエージェント ) は、プレビュー後に一般提供されるようになりました。 AWS DevOps エージェント は、インシデントの調査、解決までの時間の短縮、問題の発生前の防止など、クラウド運用の実行に役立ちます。ユナイテッド航空、ウエスタンガバナーズ大学 (WGU)、T-モバイルなどのお客様は既に DevOps エージェントを使用してインシデント対応を加速し、大規模な運用を簡素化しています。WGU では、解決にかかる時間が数時間から数分に短縮され、プレビュー版では MTTR が最大 75% 短縮され、解決が 3~5 倍早くなったという報告が顧客から寄せられています。詳細については、 Sébastien のプレビューブログ投稿 と GA の発表 をご覧ください。 AWS セキュリティエージェント は、開発ライフサイクルに継続的かつ状況に応じたペネトレーションテストを行います。このエージェントは人間のペネトレーションテスターのように動作します。LG CNS、HENNGE、Wayspring などのお客様は好調な業績を上げています。LG CNS では、誤検出が大幅に減り、テストにかかる時間が 50% 以上短縮され、コストも最大 30% 削減されるという結果が出ています。詳細については、 Esra のプレビューブログ投稿 と GA の発表をご覧ください。 どちらも AWS クラウド、マルチクラウド、オンプレミス環境で機能するように設計されています。面倒な作業を処理できるチームメイトをいつでも確保できるので、最も重要なことに集中できます。 AWS サービス可用性アップデート AWS のサービスまたは機能の可用性が変化した場合、私たちは運用の中断を最小限に抑えるために、利用可能な代替案について AWS 製品ライフサイクル の変更に関するガイダンスをお客様に提供し、移行をサポートします。次のライフサイクル変更は、2026 年 3 月 31 日に更新されました。 メンテナンス中のサービスの可用性変更ガイド AWS App Runner AWS Audit Manager AWS CloudTrail – Lake AWS Glue – Ray のジョブ AWS IoT FleetWise Amazon Application Recovery Controller (ARC) – 準備状況チェック Amazon Comprehend – トピックモデリング、イベント検出、および迅速な安全分類 Amazon Rekognition – ストリーミングイベント と バッチイメージコンテンツモデレーション Amazon Simple Notification Service (Amazon SNS) – メッセージデータ保護 (MDP) 日没時のサービスの可用性変更ガイド: AWS Service Management Connector Amazon RDS Custom for Oracle Amazon WorkMail Amazon WorkSpaces – シンクライアント 日没時のサービスリーチ: Amazon Chime SDK – プロキシセッション 私たちは、可用性の変化がお客様の業務に影響を与える可能性があることを理解しています。具体的なガイダンスについては、関連するサービスドキュメントを参照するか、AWS サポートにお問い合わせください。 2026 年 3 月 30 日週のリリース 2026 年 3 月 30 日週のリリースのうち、私が注目したリリースをいくつかご紹介します。 Amazon ECS が ECS マネージドインスタンス用のマネージドデーモンを発表 新しい AWS サステナビリティコンソール: スコープ 1~3 のレポートを 1 か所に Amazon Bedrock AgentCore Evaluations が一般提供されました AWS Transform カスタムが自動コードベース分析の一般提供を発表 Amazon CloudWatch が OpenTelemetry Container Insights for Amazon EKS を発表 (プレビュー) 最大 72 個の vCPU を搭載した Amazon Lightsail 用の新しいコンピューティング最適化インスタンスバンドル Amazon CloudFront が署名付き URL と署名付きクッキーの SHA-256 をサポートするようになりました AWS のお知らせに関する詳しいリストについては、「 AWS の最新情報 」ページをご覧ください。 その他のアップデート 皆さんの関心を引くと思われるその他のニュースをいくつかご紹介します。 AWS 上のエージェンティック AI 開発のためのアーキテクチャ AWS Network Load Balancer を使用する際のデータ転送コストの最適化 AWS World Sports Innovation Cup の発表 – お客様のアイデアはゲームチェンジャーになるでしょうか? 本番環境での AI エージェントハルシネーションを阻止する 5 つのテクニック 3D インタラクティブグローブを通じてグローバルな AWS コミュニティを探索する AWS ブログ投稿の全リストについては、必ず AWS ブログ ページをご覧ください。 AWS の詳細について学び、今後予定されている AWS 主催の対面イベントやバーチャルイベント 、 スタートアップイベント 、 開発者向けイベント 、 AWS Summits や AWS Community Days を閲覧して、それらに参加してください。 AWS Builder Center に参加して、ビルダーとつながり、ソリューションを共有し、開発をサポートするコンテンツにアクセスしましょう。 2026 年 4 月 6 日週のニュースは以上です。2026 年 4 月 13 日週の Weekly Roundup もお楽しみに! – Channy 原文は こちら です。


























