ウェブサイト分析: レスポンシブナビゲーションメニューを設計するための 5 つのルール

概要: この記事では、より難しいレスポンシブ Web デザイン、つまりレスポンシブ ナビゲーション メニュー デザインに焦点を当てています。ここでは、大画面と小画面の両方でレスポンシブ ナビゲーション メニューを簡単かつ効率的に設計するための 5 つのヒントを紹介します。

レスポンシブ Web デザインの概念は、ページのデザインと開発が、ユーザーの行動とデバイス環境 (システム プラットフォーム、画面サイズ、画面の向きなど) に基づいて応答し、それに応じて調整されるというものです。レスポンシブ デザインを使用すると、最小限のメンテナンスでさまざまなプラットフォーム上で独自のユーザー エクスペリエンスを作成できます。

レスポンシブ デザインを扱った記事は数多くあり、メディア クエリの役割を明らかにする学習ガイドやチュートリアルとともに、興味深いレスポンシブ デザイン コレクションも提供して、レスポンシブ Web デザインを理解し、分析するのに役立っています。

マクロレベルのレスポンシブ Web デザインについては今は脇に置いて、より難しい「レスポンシブ ナビゲーション メニュー デザイン」に焦点を当てましょう。デスクトップ バージョンでは、多層ナビゲーション レイアウトを表示するのに十分な画面スペースが提供されますが、画面が小さくなるほど、同じコンテンツを明確に表示することが難しくなります。ここでは、大画面と小画面の両方に対応したレスポンシブなナビゲーション メニューを簡単かつ効率的に設計するための 5 つのヒントを紹介します。

1. コンテンツを優先順位に従って表示する

おそらくこれは、ユーザーに応じて異なるコンテンツを強調表示する、画面が小さいデバイスで最も効果的なアプローチです。ユーザーはどのような状況でモバイル デバイスを使用して Web サイトにアクセスするのでしょうか? 訪問の目的は何でしょうか? 目的を満たすにはどのようなコンテンツを提供する必要がありますか? 以下では、コンテンツの優先順位に基づいてモバイル デバイスでの Web サイト ナビゲーションを簡素化する 2 つの例を示します。

1. 優先度の高いコンテンツのみを表示する

画面が小さいモバイル デバイスでは、コンテンツを優先し、小さな列を削除する必要があります。

Sweet Hat Club の Web サイトでは、モバイル デバイス向けにコンテンツを最適化し、ナビゲーション メニューを再構築します。モバイル バージョンのナビゲーションでは、すべての項目を水平に表示するのではなく、優先度の高い項目をいくつか垂直に表示します。Twitter と Facebook のリンクは削除されましたが、参加リンクはアップグレードされました。通常のテキストリンクではなく、人々の注目を集めるカラフルなボタンです。

2. 優先度の高いコンテンツを上部に表示する

最も重要なコンテンツを一番上に置く

バラク・オバマのウェブサイトは、資金調達とオバマの選挙運動に焦点を当てています。デスクトップ版のホームページでは、上部に 3 つの項目が表示され、そのうち 2 つは選挙への立候補に関するニュースです。モバイル版では、スペース全体が寄付ボタンで覆われ、その後にユーザーが興味を持つその他のコンテンツが表示されます。オバマ氏と彼の選挙運動に関する情報はページの下部に掲載されています。

2. 限られたスペースを創造力で活用する

ここで事実として、モバイル デバイスの画面スペースはデスクトップの画面スペースよりも大幅に小さいということがあります。デザイナーにとっての課題は、画面サイズに関係なく、レイアウトを再調整し、関連するすべてのコンテンツを見つけることです。同時に、デザインは、同じ Web サイトにアクセスした場合でも、顧客に一貫した外観と雰囲気を提供する必要があります。 、

1. 利用可能なスペースに合わせてデザインを調整する

柔軟なデザインにより、さまざまなデバイスで同じ外観と操作性を維持できます。

Oliver Russell の Web サイトの最も優れた点は、画面解像度が異なっても見た目や操作感が同じように保たれることです。ヘッダーとナビゲーション メニューはどちらも、有用なリソースを無駄にすることなく簡単にリファクタリングできます。異なるコンテンツを 90 度反転するだけで、色付きの背景をよりきつく圧縮できます。

2. すべての画面に対応したデザイン

簡単に調整できるデザインを選びましょう。

Flip の Web サイトでは、非常にシンプルでスマートなナビゲーション メニューが採用されています。すべてのデバイスでクリーンなレイアウトと鮮明な色を維持しながら、デスクトップ バージョンではコンテンツごとに異なるカラー コードが使用されています。これは、単純なテキスト リンクをボタンに変換するという非常に賢い手法です。モバイル デバイスでは、色の範囲によって不正確な指の範囲が許容されるため、ナビゲーション メニューも完璧に機能します。

3. ドロップダウンメニュー

ドロップダウン メニューを使用することは、複雑なコンテンツを整理するための非常に便利で一般的な方法です。複雑な Web サイトでは、複数レベルのドロップダウン メニューが使用されることもよくあります。小さい画面だけでなく、タッチ応答に依存するデバイスでは、ドロップダウン メニューを慎重に使用する必要があります。ここではホバー効果はなく、画面領域は非常に限られている可能性があります。ここでは、モバイル サイトでドロップダウン メニューを非常に実用的な方法で効果的に使用している 2 つのサイトを紹介します。

1. 誰もが使っている構造に従う

注意: ホバー効果はモバイル デバイスでは機能しません。

Microsoft の新しい Web サイトは、小型のモバイル デバイス上で複雑なコンテンツを配置する方法の典型的な例です。デフォルトでは、ナビゲーション メニューはまったく表示されず、右上隅の指定された小さなアイコンをタッチしたときにのみ最初のコンテンツ レイヤーが開きます。いずれかの列をタッチすると、2 番目のコンテンツ レイヤーが徐々に拡大し、ユーザーに非常に明確なコンテンツ ナビゲーションを提供します。

2. 分かりやすく使いやすい指操作の接続を提供する

指のサイズが不正確であることを考慮に入れて、接続が十分に大きいことを確認してください。

スターバックスの Web サイトは、モバイル デバイスでドロップダウン メニューを効果的に使用するもう 1 つの優れた例です。また、デフォルトではメニューは小さなアイコンの後ろに隠れています。これは他のコンテンツ インターフェイスには影響しません。ユーザーがナビゲーションを使用して Web サイトにリンクする必要がある場合は、小さなアイコンをクリックするだけでメニューが開きます。異なるアイテム間の接続領域が指のタッチ領域を確保するのに十分な大きさであることを確認してください。項目を選択すると、メニューは自動的に消えます。

4. ナビゲーションメニューの位置を変更する

ナビゲーション メニューを小さい画面に適応させるもう 1 つの方法は、使い慣れた構造を使用することです。この方法を実行することでユーザーを混乱させないようにする必要がありますが、さまざまなデバイスに適応するにはおそらくこれが最善の方法です。

1. 配信ナビゲーションサイト

コンテンツを一度にすべて表示するのではなく、順番に提供してください。

ボストン・グローブのウェブサイトには豊富な情報が掲載されています。最初のコンテンツ レイヤーだけでなく、2 番目のコンテンツ レイヤーにも多くのエントリが含まれます。彼らの解決策は、モバイル デバイスのユーザーにとってナビゲーションをできるだけシンプルにすることだったので、ナビゲーションを 2 つのコンテンツ レイヤーに分割しました。ユーザーが第 1 レベルの項目を選択すると、対応する Web サイトに移動し、この新しい Web サイトに、第 2 レベルの詳細な分類である新しいドロップダウン メニュー コンテンツが表示されます。

2.まずは訪問者を歓迎する

ナビゲーション メニューを Web サイトの下部に配置すると、訪問者は次にどこに行くかを決める前にサイト全体を閲覧することになります。

Brickartist.com は、モバイル デバイス向けに Web サイトのナビゲーション メニューを再設計する方法を示す非常に興味深い例です。デスクトップ版には、非常に明確で目立つナビゲーション メニューがあります。ただし、画面が小さいモバイル デバイスでは、ナビゲーション メニューは Web サイトの下部に移動されます。こうすることで、訪問者はどのメニューをクリックするかを決める前に、ヘッダーと中央のコンテンツを確認する必要があります。

5. ナビゲーションメニューを廃止する

ナビゲーション メニューを完全に省略することもできます。もちろん、これは、Web サイトのコンテンツがそれほど複雑ではなく、訪問者が関連するコンテンツを簡単に見つけられる場合にのみ選択できるオプションです。

1. 訪問者を案内する

コンテンツがシンプルで明確な場合は、ナビゲーション メニューはおそらく必要ありません。

ユーザーが Happy Cog の Web サイトのデスクトップ バージョンにアクセスする場合、2 つの方法でアクセスできます。1 つはナビゲーション メニューからカテゴリを選択してアクセスする方法、もう 1 つは下にスクロールしてさまざまなコンテンツを徐々に表示する方法です。モバイル デバイスでは、ユーザーは 2 番目の方法のみを使用できます。次に、各コンテンツ カテゴリごとに、より詳細なリンクが提供されます。

2. 視覚効果

ビジュアルを使用して、ユーザーが道順を見つけられるようにします。

モバイル ウェブ ベスト プラクティスのデスクトップ バージョンでも、非常に明確で簡潔なナビゲーション メニューが表示されます。各カテゴリには、対応する名前に加えて、特定のアイコンも付いています。さらに、テキストの下にわかりやすいカテゴリアイコンが表示されます。モバイル デバイスでは、上部のテキスト メニューが消え、ユーザーは大きなアイコンを使用してサイトをナビゲートします。このウェブサイトでは、2 つの異なるナビゲーション スタイルが使用されています。それでも、分類は明確で、スタイルとアイコンは一貫しており、ユーザーに一定の視覚効果をもたらします。

元記事: http://blog.usabilla.com/10-tips-how-to-handle-responsive-navigation-menus-successfully/

出典: CSDN

元のタイトル: ウェブサイト分析: レスポンシブナビゲーションメニューを設計するための 5 つのルール

キーワード: ウェブサイトのスコアリング、レスポンス、応答性、ナビゲーション、メニュー、5つの主要項目、要約、この記事の焦点、ウェブマスター、ウェブサイトのプロモーション、収益化