スマホ向けのナビゲーションにハンバーガーメニューを使うなら、ソーセージリンクを試してみて

スマホ向けのナビゲーションにハンバーガーメニューが使用されるのを多く見かけると思います。ハンバーガーメニューが必ずしも悪いということではないですが、ハンバーガーのコンセプトを乱用または誤用している場合は、ソーセージリンクが適しているかもしれません。

スマホ向けのナビゲーションデザインについての考察を紹介します。

Using Hamburger Menus? Try Sausage Links
by Bradley Taunt

ソーセージリンクは先週公開した記事「テキストだけのボタンは、なぜスマホでのユーザビリティを損なうのか」にも通じるものがあります。

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• ハンバーガーメニューを使うなら、ソーセージリンクを試してみて
• ハンバーガーメニューとは、長所と短所
• ソーセージリンクとは、長所と短所
• ハンバーガーメニューまたはソーセージリンクを使うべきですか？

ハンバーガーメニューを使うなら、ソーセージリンクを試してみて

スマホ向けに中規模から大規模サイト用のナビゲーションをデザインする際のデフォルトは、ここしばらくの間、ハンバーガーメニューが使われています。ハンバーガーメニューは必ずしも悪いということではありませんが、特定の場合にはより簡単な代替手段があります。

ソーセージリンクの特徴（と簡単なデモ）の前に、ハンバーガーメニューの長所と短所を見てましょう。

ハンバーガーメニューとは、長所と短所

ハンバーガーメニューのコンセプトは決して悪いものではなく、実際のところ視覚的な観点から多くの問題を解決しています。しかし残念なことに、いらいらさせる欠陥が全く無いという意味ではありません。
参考: CodePenのハンバーガーメニューの実装デモ

ハンバーガーメニューの長所

• メニューに必要な表示スペースは、最小限です。
• 多くのユーザーがその機能を理解している現在では、見慣れたメニューです。
• すべてのアイテムを収納することで、デザイナーの仕事は楽になります😛

ハンバーガーメニューの短所

• スクリーンリーダーやキーボードのみのユーザーが快適に利用できるようにするには、追加のテストや作業が必要です。
• 子ドロップダウン要素やヘルプテキストなどがあると、複雑になりすぎることがあります。
• メニューをレンダリングするために追加のJavaScriptを必要とする可能性があり、プロジェクトが肥大化します(CSSのみのハンバーガーメニューは除く)。
• ユーザーの必要な操作が多い(アイコンをタップして開き、次に使用可能なオプションを読んで、選択する)。

ハンバーガーメニューの短所はそれほど欠点ではないかもしれません。私はこれらの欠点は、エンドユーザーのためのUXにおける小さな穴だと見ています。ハンバーガーメニューの大部分は完璧に機能しており、そのままにしておくべきです。しかし、ハンバーガーのコンセプトを乱用または誤用している場合は、ソーセージリンクの使用を検討すべきです。

ソーセージリンクとは、長所と短所

まず最初に、このコンセプトが決して新しいものではない、ということを伝えておきます。このタイプのメニューを何らかの形で既に実装しているWebサイトは数多く存在します。この記事のポイントは、これまでに考えもしなかったナビゲーションの新しいデザインに驚かされることではありません。私はただ、スマホで利用可能なメニューのもう一つのコンセプトの認知度を高めようとしているだけです。

実際に、ソーセージリンクを見てみましょう。

上記のCodePenでは視覚的なデザインを加えているため、ソーセージリンクを実現するために必要な最小限のHTMLとCSSを見てみましょう。

HTML

HTMLは、nav要素とリスト要素で実装します。

CSS

CSSは少し長いですが、必要最小限の構成です。

簡単でしょ？
追記: -webkit-overflow-scrolling: touch;を含めるのを忘れていたことを指摘してくれた@dany0wに感謝します。

ソーセージリンクの長所

• CSSは、必要最小限の量。
• スクリーンリーダーやキーボードのみのユーザーが快適に利用できる。
• JavaScriptは、一切必要なし。
• 親コンテナを切り替えるためなど、ラジオボタンを使ったハックは不要。
• ユーザーは何もしなくても最初に利用可能なオプションを見ることができる。

ソーセージリンクの短所

• 特定のプロジェクトのデザインでは視覚的に魅力的に見えない場合があります（場合によっては見苦しいスクロールバー）。
• 大規模なサイト向けではなく、小規模から中規模のメニューに適しています。
• 適切にフェードアウト・カットされたビジュアルキューがなければ、ユーザーはスクロールできることを理解できない可能性があります。

ハンバーガーメニューまたはソーセージリンクを使うべきですか？

その答えは、使用するプロジェクトや全体的なデザインに依存します。例えば、トグル式のハンバーガーメニューの中にソーセージリンクがあることが理にかなっているような場合もあるでしょう。メニューの可能性は無限大です！

以上です。近い将来にソーセージリンクを試してみるか、少なくともスマホのナビゲーションデザインについてもっと深く考えるきっかけになれば、と願います。

、、、ハンバーガーとソーセージの話をしたので、少しお腹がすきました。