スマートフォンサイトを表示する

  1. TOP
  2. 自分でできる!セルフJimdoリメイク塾 : 第9回 もう迷わない!使いやすいナビゲーションの作り方

エキスパートコラム

自分でできる!セルフJimdoリメイク塾(全12回)

第9回:もう迷わない!使いやすいナビゲーションの作り方

執筆:服部 雄樹(服部制作室)

2017年12月18日更新

  • このエントリーをはてなブックマークに追加

閲覧数810views

このコラムをPDF形式でダウンロードする

Jimdoで作られたWebサイトのリメイクを累計100件以上担当した筆者が、リメイクをする際にどこを見ているのか、どう手直しすれば見やすいWebサイトになるのか、具体的な事例とテクニックを交えながら紹介する本コラム。

第9回目となる今回は、ナビゲーションを最適化する手法について解説します。

ナビゲーションはWebサイト上の案内板

Webサイト上で、ユーザーがクリックしたり入力したりできる箇所をUI(ユーザーインターフェースの略)と言いますが、その中で最も身近なものがナビゲーションではないでしょうか。ナビゲーションとは文字通りユーザーをナビゲートする、つまりサイト内の各ページへ案内するためのもので、一般的にはメニューバーやサイドメニュー、パンくずリストなどがこれにあたります。

案内するためのものである以上、大切なのは分かりやすさです。例えばスーパーマーケットに行くと、各棚の目につく場所に「飲み物」「調味料」「日用品」などと書かれており、どこに何が置いてるかが分かるようになっているのを見かけます。さらに、大型のスーパーでは棚に番号が振られていて、「調味料はどこにありますか?」「3番の棚にあります」と言ったやり取りが行われています。このように、訪れた人が目的のものにスムーズに辿り着けるよう配慮することは、Webサイトにおいても非常に重要です。

まずは項目を分類することから始める

リメイクを依頼される方の中には「ナビゲーションがゴチャゴチャしてしまった…」「メニューを整理して欲しい」といったお悩みを抱えている方が多く、そうした方のサイトを見てみると、何十項目もメニューが並んでいて目的のページを探すのが難しい、というケースが見られます。ページを自由に増やせるのはJimdoの大きなメリットですが、反面、きちんと計画を立てないと収集がつかなくなってしまうことがあるのです。

そうは言ってももう作ってしまったし…という方もご安心ください。いくつかのポイントを抑えれば、複雑化してしまったナビゲーションもスッキリと整理することができます。具体的に見ていきましょう。

例えばこのようなナビゲーションがあるとします。「HOME」「新着情報」などの項目が並んでいますが、数が多いため何が書いてあるのかを理解するまでに少し時間がかかります。これは良いナビゲーションとは言えません。こういった時はまず、各項目を内容に応じたグループに分類することから始めます。

項目をずらっと並べてみると、以下の13項目がありました。

  • HOME
  • 新着情報
  • 誰でも簡単にできる!セルフJimdoリメイク塾とは
  • Lesson1.まずは下地作りから
  • Lesson2.フォントの選択とサイズ
  • Lesson3.トップページの作り方【前編】
  • 今日からすぐに使えるお手軽テクニック集
  • Jimdoのことならここを見れば完璧!おすすめリンク集
  • 筆者略歴
  • 著書について
  • オフ会のお知らせ
  • テレビに取材されました!
  • セルフJimdoリメイク塾へのメールはこちらから

付箋を使って整理するとグループ化しやすい

この13項目をグループに分けていきますが、このときにコツがあります。それは「付箋」を使うことです。画面上で文字だけを見ていると難しく感じますが、各項目をひとつずつ付箋に書き出して、内容の近いものをまとめていくと比較的簡単に整理することができます。グループ化が難しい、という方はぜひ一度お試しください。

そして最終的に7つ以下のグループに分けます。「7」という数字については、人間の脳が一度に処理できるのが7つまでとされているためで、メニューの項目数も7つ以内にするのが望ましいからです。

先ほどの13項目は下記の6グループに分けることができました。

■グループ1

  • HOME

■グループ2

  • 新着情報
  • オフ会のお知らせ
  • テレビに取材されました!

■グループ3

  • 誰でも簡単にできる!セルフJimdoリメイク塾とは
  • 筆者略歴
  • 著書について

■グループ4

  • Lesson1.まずは下地作りから
  • Lesson2.フォントの選択とサイズ
  • Lesson3.トップページの作り方【前編】

■グループ5

  • 今日からすぐに使えるお手軽テクニック集
  • Jimdoのことならここを見れば完璧!おすすめリンク集

■グループ6

  • セルフJimdoリメイク塾へのメールはこちらから

親子関係にあるものは階層化する

グループに分けたら、各グループ内で親子関係にある項目がないかをチェックします。例えば、グループ2では、「新着情報」という大項目の中に「オフ会の…」「テレビに…」といった小項目を入れることができそうです。これを親子関係といい、こういった項目は階層化して整理します。親ページがない場合は新たにページを作っても良いでしょう。

  • HOME

  • 新着情報
    |_オフ会のお知らせ
    |_テレビに取材されました!

  • 誰でも簡単にできる!セルフJimdoリメイク塾とは
    |_筆者略歴
    |_著書について

  • Lesson(新設した親ページ)
    |_Lesson1.まずは下地作りから
    |_Lesson2.フォントの選択とサイズ
    |_Lesson3.トップページの作り方【前編】

  • 関連情報(新設した親ページ)
    |_今日からすぐに使えるお手軽テクニック集
    |_Jimdoのことならここを見れば完璧!おすすめリンク集

  • セルフJimdoリメイク塾へのメールはこちらから

こうして整理された表をサイトマップと言います。このサイトマップに合わせて、Jimdoの「ナビゲーションの編集」メニューを使い、順番の並び替えと階層化を行います。

ナビゲーションの編集をクリック

ページの表示順は簡単に変更することができる

「>」ボタンをクリックすると階層がひとつ下がる

サイトマップに合わせて並び替えと階層化を行う

ナビゲーションの項目が整理された

各項目の文言を短くして分かりやすくしよう

これでメニューの項目が6つになりすっきりしました。しかしまだ直感的ではありません。それは項目名が長いのが原因です。赤枠で囲った2つの項目に注目してください。

この2つの項目の文言が長く、パッと見てどこが境目か分かりません。メニューの項目名は端的に短くまとめたほうが内容をすぐに判別できます。例えば、それぞれを以下のように変更してみましょう。

  • 誰でも簡単にできる!セルフJimdoリメイク塾とは
    →私たちについて

  • セルフJimdoリメイク塾へのメールはこちらから
    →お問い合わせ

「ナビゲーションの編集」から適用すると以下のようになります。

いかがでしょうか。これなら一瞬で各項目の内容を判別することができます。

なお、階層化された子ページはこのように表示されます。
※子ページの表示位置はJimdoのレイアウトによって異なります。

リメイク前とリメイク後を見比べてみましょう。文字がズラッと並んで4段になってしまっていたナビゲーションが、スッキリと1段にまとまり各項目の文言も短く分かりやすくなりました。

項目がすっきりして使いやすくなったナビゲーション

Webサイトは使うものである以上、使いやすさが大切

Webサイトは、テレビのような一方向のメディアと違い、ユーザーがクリックや入力などのアクションを起こせる「使うもの」でもあります。使うものである以上、見た目を美しくかっこよくする前に、まず使いやすさに配慮されているべきです。

デザインの考え方のひとつに「機能美」というものがあります。これは、機能的で使いやすいものは必然的に美しい、という考え方です。つまり、使いやすいメニューにするにはどのように配置したら、どんな色だったら、文字の大きさはどれぐらいだろうか、と、使う人のことを考えてデザインされたものは自然ときれいにまとまっていくのです。ぜひ今回のコラムをご参考に、皆さまのサイトでも使いやすいナビゲーションを作成してみてください。

次回はJimdoでのスマートフォン対応のコツについて解説します。お楽しみに!

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

服部 雄樹(はっとり・ゆうき)

服部 雄樹(はっとり・ゆうき)

服部制作室 代表/JimdoExpert
http://www.hattori-studio.jp/
http://www.template-labo.com/

愛知県名古屋市出身。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。多くの海外案件に携わる。帰国後、服部制作室を設立。Webサイトの制作だけでなく、各種WebサービスのテンプレートデザインやUI設計、セミナー登壇、コラムへの寄稿など精力的に活動中。"かっこいいを簡単に"をモットーに、海外のWebデザインを日本向けにローカライズした新しいデザインを提案している。

著書に『いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方』など。

HTML&CSSとWebデザインが 1冊できちんと身につく本

  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2018/2/11~2018/2/17]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ