グローバルナビゲーションには、それぞれ名前がついています。
トップ、コンセプト、商品、会社概要、など、いくつか頻出する名前はありますが、固定する必然性はなく、WEBサイトによって様々です。
WEBサイトのページに入ると、各セクションごとにも見出しがあります。
お問合せ、最新情報、実績、など、エリアごとに見出しは異なります。
こうしたナビや見出しについた名前を総称してラベルと呼んでいます。
ラベルは、なんとなく決められて良いものではありません。
もしラベルに抱く印象と、ページに入った後得られる情報が食い違っていたら、ユーザーは混乱してストレスを感じてしまうでしょう。
また、万が一、見出しのラベルがユーザーのニーズと一致していなければ、ユーザーはそこに自分が望んでいる情報が無いと感じ、見過ごしてしまうかもしれません。
ユーザーにとって、ナビゲーション、リンク、そして見出し等のラベルは、WEBサイトを自由に探索するための「標識」なのです。
もしも、車を運転していて、道案内の標識がデタラメや勘違いを促してしまうものであれば、大きな事故にも繋がってしまいます。
今回は、ラベルの基本ルールをはじめ、どんなラベルがあり、それぞれのラベルがどんな用途、特徴を持っているのか学習していきます。
基本ルール
では、まず基本的なルールについてです。
ラベルは決して直感やフィーリングで作られるわけではありません。
まず、下記のルールは守るようにしましょう。
表現をあわせる
例えば、これまでラベルに対し、動詞を使っていたのにも関わらず、急に名詞のラベルが登場したら、どうでしょうか。
ナビゲーションでは「食べる」「遊ぶ」のように動詞を使っていて、クリックした先では「食事」「遊戯」といったラベルが使われていたとしたら。
違和感を感じることはともかく「食べる」と「食事」などは一緒のコンテンツと認識していいのだろうかと、ユーザーが迷いかねません。
食べるの意味は限定的ですが、食事については、レシピなのか作法なのかというように、様々な意味を内包しています。
STARTOUTの文章で「サムネイル」という言葉と「アイキャッチ」という言葉が、どちらも理由なしに五月雨に使われていたとしたら、どう思うでしょうか。
どちらもブログ等の見出し画像を意味するにも関わらず「これら2つは同様の意味と捉えていいのだろうか？」と迷いを感じてしまいます。
こうした細かい違いが、混乱のもとなのです。
紛らわしい表現や専門用語を使わない
例えば旅館のグローバルナビゲーションをイメージしてください。
そこに「スケジュール」という言葉があったら、どう思うでしょうか。
これは旅館の休館予定日などのスケジュールを表しているのでしょうか。
それとも、何かイベント等のスケジュールを意味しているのでしょうか。
WEBサイトを見ていると、こうした表現はたくさんあります。
飲食店のWEBサイトについて考えてみましょう。
「SHOP」という言葉は、オンラインショップのことでしょうか。
それとも店舗の場所を意味するのでしょうか。
会社名のような名詞でも、用途を勘違いすることもあります。
もし何の文脈もなくソフトバンクとだけ書かれていたら、それはモバイルのソフトバンクを意味するのか、それとも球団を意味するのでしょうか。
ラベルをつける時は、こうした紛らわしい表現を避けましょう。
分かりづらい言葉や、紛らわしい言葉は大きな混乱の原因です。
ユーザーが使う言葉を使う
一般ユーザーにとって、分かりづらい言葉もつかってはいけません。
基本的に専門用語などは避けましょう。
よく、身内だけ理解できる言葉を使ってしまうケースもあります。
例えば、STARTOUTでいきなりpinoという文字がグローバルナビゲーションに存在していたらどうでしょうか。
pinoはSTARTOUT内の通貨ですが、説明を受けていない人はわかりません。
ダッシュボードにある「実践と交流」も最初は「ギルド」のようなファンタジー感あふれるラベルをつけようと考えていました。
しかし、ほとんどの人が言われても分からないでしょう。
なので結果的に「実践と交流」になったのです。
ラベルはユーザーの情報探索をサポートするものです。
ユーザーがいつも使っている慣れ親しんだ言葉を使いましょう。
フォントなどの表示をあわせる
特にグローバルナビやローカルナビは当てはまります。
もし、ページ別にナビゲーションのフォントサイズや表示の仕方が変わっていたら、ユーザーは混乱するでしょう。
ボタンでも、役割ごとにラベルを統一することで、分かりやすくなります。
「お問合せ」のボタンは少し大きめのフォントサイズで表示する。
ブログの記事一覧から、詳細な記事内容に飛ぶような「続きを見る」などのボタンは、お問合せに比べて、少し小さめでも良いでしょう。
すべてのラベルが役割を持っています。
役割によって優先順位をつけ、デザインをパターン化するのも手です。
目立たせるラベルと目立たなくていいラベル。
それぞれ、表現を決めることで、情報を見つけやすくなるでしょう。
抜けをつくらない
ラベルによっては、無いと違和感のあるラベルが存在します。
例えば、食器を販売するショッピングサイトに行ったとしましょう。
商品一覧には、茶碗やコップなど、様々なカテゴリーが並んでいます。
しかし、商品一覧の中になぜかお皿がなかったらどうでしょう。
商品としては存在しているのに、ラベルは存在しない。
そんな状況になれば、当然、お皿を探しているユーザーは、なぜお皿が無いのかとストレスに感じてしまうはずです。
このように、抜けては行けないラベルも存在します。
表示すべきラベルを見誤って、抜けをつくってはいけません。
粒度を揃える
飲食店のWEBサイトをイメージしてください。
グローバルナビゲーションに料理というラベルがあったとして、さらにその隣にカレーというラベルがあったらどうでしょうか。
本来、カレーは料理の1つ。
料理というカテゴリの中に入れるべきです。
そして料理ページにカレーは無いのでしょうか。
各ページにはその階層で示すべき言葉があり、もし次の階層にあるべき言葉が1ページ目にきたら、導線がぐちゃぐちゃになってしまいます。
それぞれの階層に的確なラベルが存在しており、順序や使い所を間違えてしまうと、ユーザーが混乱してしまう要因になるのです。
以上、大まかにラベルを作る時に意識してみてください。
説明に上がった中で、どれか1つでも欠けると、違和感や混乱に繋がります。
では、基本的なルールを抑えたところで、ラベルの種類をご説明しましょう。
コンテキストリンク
主に文中で使われる「ハイパーリンク」のラベルです。
ハイパーリンクは情報アーキテクチャ的にも使い方が特殊で、グローバルナビゲーションなどの順路を無視して、いきなりどのページにも飛べる、クリエイティブなリンクと言って良いでしょう。
自由度が高いために、ハイパーリンクは気軽に使われていますが、使い所をかなり気をつけないと、ユーザーをたやすく混乱させてしまうのです。
例えば、本文のコンテンツにとって、理解に必ず必要になるような、重要な内容をハイパーリンクにしてしまってはいけません。
なぜなら、ユーザーが本文の内容を理解するために、リンク先に飛んで、その内容を読んでから本文に戻るのは、非常に面倒なことだからです。
より最悪なのは、リンク先のページにも、さらにその内容を理解するために必要な重要なリンクがあることです。
こうなると、本来のコンテンツを理解するために、どんどん深くコンテンツを掘り下げていってしまうので、結局、本来理解すべきことがしっかり理解できなくなってしまいます。
なので、ハイパーリンクを使う時は「補足」として使う必要があります。
また、1ページにたくさんのハイパーリンクを使いすぎても、どのリンクに目を通せばいいのかわかりにくいですし、単純に読みづらくなってしまいます。
数も、なるべく限られた箇所だけに貼るようにしましょう。
使い方次第で落とし穴が生まれるのは、ハイパーリンクのラベルも同じです。
ハイパーリンクのラベルは、文中にリンクが埋め込まれるため、適切なラベルをいつも貼れるというわけではありません。
ナビゲーションであれば、適切なラベルを考えて貼れるでしょうが、たいていの場合、本文の中にある1つの単語やフレーズに貼られます。
例えば、本文中に現れたHTMLという言葉に、リンクが貼られたとして、一体何を意味するのか、明確に分かる人はほとんどいません。
ユーザーによっては、言葉の意味を解説するページに飛ぶのか、それとも、HTMLに関する記事の一覧に飛ぶのか混乱するでしょう。
だからこそ、文脈で一体どんなリンク先に移動するのか示すか、または単語そのものにリンクを貼らずに、飛んだ先のページタイトルと同じフレーズで、リンクおよびラベルを別途、用意する必要があるかもしれません。
STARTOUTの事業開発コースを学んで頂いた方は見覚えがあるかもしれませんが、文章内にリンクがある場合、リンクのラベルを抜き出して、文章下に再表示するようにしています。
これは、ハイパーリンクのわかりにくさを解消するためです。
文章下に文中リンクがリスト化されて表示されるため、単純なリストだけでもハイパーリンクの飛び先がイメージできるように言葉を選んでいます。
このように、ただ単語や文章にハイパーリンクを貼るだけでなく、リンクの飛び先をイメージできるフレーズをラベルにすることで、よりわかり易さを高めることができます。
ヘッダー
ヘッダーとは、基本的にWEBサイトを開いて一番上にあるエリアです。
ロゴやナビゲーションなど、ページ遷移に必要なパーツが詰められています。
ただ、今回のヘッダーはWEBサイト上部だけを意味するものではありません。
各セクションのタイトルもあわせてヘッダーを意味します。
例えば、今回の記事の「ラベリングを理解しよう」もヘッダーですし、今読んで頂いている文章のタイトル「ヘッダー」という見出しもまたヘッダーです。
ヘッダーとは今回の場合「すべての見出し」を意味すると考えてください。
ヘッダーのラベル、つまり見出しを作る時に大切なのは、一貫性とコンテンツ内容との一致です。
例として、もし今読んで頂いている文章の見出しが「ヘッダーについて知ろう！」で、他の文章の見出しが「コンテキストリンク」や「ナビゲーション」のままだったらどうなるでしょう。
一貫性が崩れ、かつ1つだけ異なる表現をする見出しに意識が向きますので、読むユーザーは「ヘッダーだけ何か特別なのか？」と勘違いしてしまうかもしれません。
少なくとも同じページにおいてヘッダー表現は統一される必要があります。
または、もし今読んで頂いている文章の見出しがヘッダーではなく「コンテンツ」と書いてあれば、どうでしょう。
極端な例なので、そんな間違いはしないとは思いますが、もしそんな間違いをしたら、内容と見出しのラベルがずれているため、ユーザーの混乱は確実です。
内容と見出しのラベルは、常に一緒でなければならないのです。
ラベルの一貫性および内容との一致は常に守りましょう。
ナビゲーション
ナビゲーションと一言で言っても、様々なナビゲーションがあります。
まずひとつが、大抵WEBサイトの上部にある、グローバルナビゲーション。
そして、ページに入って、さらに分かれるローカルナビゲーション。
基本のナビゲーションは、この2つで完結します。
一方で、グローバルやローカルとは異なるナビゲーションが存在します。
まず、サイトマップ。
これもまた、グローバルやローカルとは異なるナビゲーションです。
さらに関連記事や商品のレコメンドのようなエリアもナビゲーションです。
なお、前述したハイパーリンクやボタンもまた、ナビゲーションの1つです。
WEBサイトの基本的な導線を司るナビゲーションですので、ナビゲーションのラベルが崩れたら、すべての導線がめちゃくちゃになってしまいます。
故に、ラベルは丁寧に決める必要があります。
ナビゲーションのラベルで注意することは「全体としての統一感」です。
グローバルナビを中心に、ナビゲーションは最も多く画面内に登場し、かつ最もユーザーが触れるラベルですので、どこにナビゲーションが存在しているのか、常に認知してもらう必要があります。
なので、例えばページ単位でナビゲーションの位置やラベルを変えてもいけませんし、常に統一したスタイル、レイアウト、ラベルを維持する必要があります。ナビゲーションは「使い回し出来るアセット」として考えてください。
アセットとはデザインのまとまりのことです。
基本はどのページにおいても「使い回す」ことが前提です。
グローバルナビのアセット、ローカルナビのアセット。
サイトマップのアセット、おすすめ商品のアセット。
基本的に、一度作ったアセットは、使い回しを前提とし、ページごとにデザインやラベル表現を変えてはいけません。
こうした統一感こそ、ナビゲーションをナビゲーションとして認知させるための、大事な要素なのです。
コンテンツやページのmetaラベル
コンテンツやページには、普段、見えないラベルがあります。
例えばHTMLにはtitleタグやkeywordタグがあります。
これはHTMLを学んだ人には、おなじみかと思いますが、Googleを始めとした検索エンジンで検索した時に表示されるサイト名を意味しています。
keywordも同じように、サイトにいくつかのキーワードを埋め込むことで、検索ワードに対して存在を伝える役目があります。
SNSが誕生してからはOGPタグと呼ばれるSNS専用のtitleタグも現れました。
これらのタグはデザイン上、表に出るものではありません。
しかし、たしかに設定されているのです。
コンテンツに関しては、主にブログの投稿記事や、ショッピングサイトの商品など、データベースに記録されたコンテンツを意味しています。
こうしたコンテンツにはHTMLのtitleやkeywordタグももちろん存在しますが、データベースを使えば、特定のデータを紐付けて自由に保存しておけます。
各コンテンツに紐付けたデータは一切、表に出ることはありません。
では、いつ使うかと言えば、検索ボックスから検索した時に使うのです。
例えば各記事に、投稿記事に関連するキーワードを、いくつか仕込みます。
そして、検索ボックスで検索する時は、記事に紐付けられたキーワードに一致した言葉がある時だけ、検索対象として表示させることも可能です。
また、キーワードだけじゃなく、様々なデータを持たせることができます。
例えば投稿時間や著者、カテゴリーや人気度、ランキング。
開発の仕方次第であらゆるデータを記事に持たせ、検索対象にできるでしょう。
HTMLのtitleタグもmetaタグも、設定次第で検索に大きな影響を与えます。
適切なラベルをデータとして持たせることで、ユーザーは情報に到達しやすくなりますし、逆にまったく的外れなデータをもたせれば、ユーザーにとって適切な情報は遠いものになるでしょう。
こうした検索時に活用される「見えないラベル」の注意点は、ユーザーが検索する際に、どんなキーワードや方法で検索するのか、徹底的に調べることです。
旅行サイトであれば、日時と地名で調べることもあるでしょう。
ただ、他にも様々な条件を付け加えて検索をかけるかもしれません。
検索の時に指定する条件が、あまりにも多かった場合、どうなるでしょう。
検索結果には、条件に合うものがなく、何も表示されない可能性もあります。
だからこそ、検索されそうなキーワードを調べ、適切なワードをもたせます。
まったく検索されないワードをもたせても意味がありません。
このように、見えないラベルを使って、的確な情報を提供できます。
エンジニアと相談し、アルゴリズムと合わせて決めていくと良いでしょう。
アイコンラベル
ラベルは文字だけではありません。
アイコンで文字を視覚的に補足することも可能です。
年齢層やWEBサイトの種類によっては、文字をすべて消して、アイコンだけで表現することもできるでしょう。
特に画面の領域が少ないスマートフォンサイトでは、よく使われます。
近年は、レスポンシブデザインで、画面の横幅が一定以上小さくなった時に、ローカルナビやグローバルナビをアイコンだけで表示させるケースも増えました。
アイコンを活用する時の注意点は、わかり易さです。
もしラベルをアイコン化して、まったく意味の伝わらないアイコンであれば、そのまま文字で表示したほうが良いでしょう。
たとえ、画面の表示領域が狭まったとしてもです。
意味の伝わらないアイコンを使ってしまえば、どのアイコンが何のページに繋がっているのか分かりませんから、無駄になってしまします。
どうやって分かりやすくするかは、あとで詳しく説明しますが、基本は何度もユーザーテストを繰り返す方が良いでしょう。
主観では、それが何を意味しているのか分かるかもしれません。
しかし、その主観が全員に当てはまるとは限らないのです。
ほとんどのユーザーがアイコンの意味するものを認識できなければ、無用です。
ラベル表示をアイコンのみにしてはいけません。
確かに、何度も繰り返してサービスやWEBサイトを訪れるユーザーなら、そのアイコンが何の機能を意味しているか、学習できる可能性もあります。
しかし、そこまで熱心に使ってくれるユーザーじゃないと理解できないなら、熱心でないユーザーはすべて離れていってしまうでしょう。
文字と併用するアイコンであれば、すぐ価値が出せます。
しかし、アイコンのみの表示となると、難易度はかなりあがります。
テストを繰り返しながら、慎重に使いましょう。
以上が、ラベリングについての説明になります。
ラベルは、情報をうまく伝えるための入り口です。
どうやって適切なラベルを決めていけばいいかは、後半の実践フェーズで改めてお伝えしますので、今はラベルの種類、内容、重要性を理解してみてください。
次は「ナビゲーション」についての説明を進めていきます。
今回、ラベルでもナビゲーションをご紹介しました。
しかし、今回はあくまでもラベルの決め方中心の説明でした。
次回のナビゲーションは「導線として」いかにユーザーが情報を見つけやすいナビゲーションを作るかを中心にお伝えしていきます。