ユーザーフレンドリーなナビゲーションバーを作る5つのポイント

Design the perfect navigation bar

シンプルなデザインと利便性の高さが人気の「ナビゲーションバー」は、今ではあらゆるアプリやWebサイトで取り入れられるようになりました。

しかし、ナビゲーションバーのデザインひとつでUX全体を台無しにする可能性も。

今回は、ユーザーフレンドリーなナビゲーションバーをデザインするために気をつけたい5つのポイントをご紹介します。

ポイント1. アクティブなタブを強調する

どのタブを使っているのかを明確にするために、利用中のタブは強調表示しましょう。

強調表示するために有効なのが、色の変化やマイクロインタラクションです。

Design the perfect navigation bar

▲出典:UX Planet

Googleはアイコンの色をグレーから青に変えることで、利用中のタブを強調しています。

Design the perfect navigation bar

▲出典:UX Planet

上の例からもわかるように、強調表示にはさまざまなスタイルがあります。

Design the perfect navigation bar

▲出典:UX Planet

Webベースのアプリでも、利用中のタブをわかりやすく差別化しましょう。

ポイント2. アニメーションをつける

アニメーションを設定して、使用感のいいUIを目指しましょう。

Design the perfect navigation bar

▲出典:UX Planet

シンプルなスライドアニメーションやマイクロインタラクションを取り入れるだけで、ナビゲーションバーがぐっと使いやすくなります。

Design the perfect navigation bar

▲出典:UX Planet

色を変えたり、テキストにアニメーションをつけたりするのもおすすめです。

ポイント3. アニメーションを過度に使わない

アニメーションを用いること自体はおすすめですが、それが過度にならないよう注意しましょう。アニメーションは魅力的な要素ですが、やりすぎるとUXを損なってしまいます。

Design the perfect navigation bar

▲出典:UX Planet

アニメーションが長いと、ページをはやく切り替えたいと考えているユーザーをイライラさせてしまう可能性も。

Design the perfect navigation bar

▲出典:UX Planet

アニメーションは、はじめて見るときは新鮮に感じられても、毎日アプリやWebページを使うユーザーにとってはうっとうしく感じられるかもしれません。

毎日サービスを使うユーザーのことを考慮して、あくまで使いやすさを意識しましょう。

ポイント4. テキストよりもアイコンを使う

テキストは、ナビゲーションバーを煩雑なものに変えてしまいます。

ターゲットがある程度デジタルに関する知識を持っている場合は、テキストではなくアイコンを使うようにしましょう。

もしテキストを使う場合でも、短い単語にとどめるのがおすすめです。

Design the perfect navigation bar

▲出典:UX Planet

テキストとアイコンをどちらも表示したい場合は、上のgifのようにアニメーションを使って切り替えてみましょう。

Design the perfect navigation bar

▲出典:UX Planet

または『Spotify』のように、アイコンの下に短いテキストを表示する方法もあります。

ポイント5. できるだけシンプルに

ナビゲーションバーに載せるのは重要な機能のみに絞り、その他の機能へのアクセスはメニューなどに振り分けましょう。

たとえば『Spotify』はナビゲーションバーのアイコン数を最重要機能のみに絞り、その他の機能はメニューから移動できるようになっています。

アイコン数を絞れば、押し間違いなどユーザーの操作ミスを少なくできるのです。

Design the perfect navigation bar

▲出典:UX Planet

上のGIFのように、特定のアイコンをタップするとメニューアイコンが出てくるというデザインは、一見魅力的です。しかしユーザーの立場から考えると、複雑で使いづらく感じるかもしれません。

シンプルに、使いやすく

今回はユーザーフレンドリーなナビゲーションバーを作るためのポイントを5つご紹介しました。もっとも大切なのは、5つめのポイント。

アプリやWebサイト制作ではさまざまな機能を詰め込みがちですが、本当に必要な機能だけを厳選するのが大切です。

(執筆:UI Blogger 翻訳:Nakajima Asuka 編集:泉知樹 提供元:UX Planet

40,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 累計40,000人以上のフリーランス・副業ワーカーが登録
  • 東証プライム上場企業からスタートアップまで多数参加
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 公開中の募集のうち66%がリモートOKのお仕事
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。また、本メディア内に掲載されているリンクには、アフィリエイトURLが含まれる可能性があります。

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
週2日20万円以上のお仕事多数
Workship