投稿日：2019年3月20日
ラベル設計の方法｜UXデザイン／情報アーキテクチャ実践
みなさんはウェブサイトの設計におけるラベル設計という工程をご存知でしょうか？
UXデザインにおける情報アーキテクチャの一領域としてラベル設計という考え方がありますので、今日はラベル設計についてみていくことにしましょう。
ラベル定義 – サイト内の見出しのテキストを定義する
みんさんはウェブサイトを設計するときにグローバルナビゲーションなどに用いられるテキストを何気なく決めていませんか？ これらのナビゲーションなどに用いられるテキストを定義することをラベル定義と言います。ラベル定義の対象となるラベルになり得るものとしては以下のものが候補として挙げられます。
- メニューなどの各項目に用いられるテキスト
- リンクやボタンなどユーザーアクションにつながる要素のテキスト
ラベルとして重要な要素としては、その項目を実行したときに想定されるアクションがユーザーが容易に把握・想定できるかどうかが重要ということがポイントです。
ラベル定義のプロセスとして重要なのは第三者の意見
ウェブサイトのデザインに当たってラベル定義の工程を進めるときにはできる限り一人ですべてを判断するのではなく、第三者の意見を取り入れることが重要です。第三者といっても一人だけの評価ではなく、複数人の評価を得る方が好ましいと言えます。自分一人の価値観だけでラベルを定義していると、それらアクションを行うためのボタンなどの要素が思いもよらぬ利用のされかたをするユーザーがいるという可能性をすべてて否定してしまうことになりかねません。
「自分の感覚がすべて」とするのではなく、実地検証を大切にしてテストすることを通して、実際に感覚をつかみながら修正を積み重ねていくことが重要です。
用語をまとめて辞書を作る – 文章の統一
用語集を作成しておくことによって用語による表現の揺れを防止することができ、サイト全体を通して一貫して表現が可能となります。用語集を作成し、サイトストラクチャを作成する段階で、プロジェクトメンバーに共有すると同時に共有の会議を開いておくことによって共通認識を図ることにつながり、サイトのクオリティも一歩上の段階に進むことができるでしょう。
ウェブ制作ディレクションの仕事内容としてプロジェクトメンバーに共有すべきことがわからないといった初心者ディレクターの方がもし周囲にいるならば「用語集を作ってメンバーに共有することも一つの仕事だよ」と教えてあげてください。その他にもプロジェクト全体で共有すべき事項を整理して共有を図るということもディレクターの仕事です。プロジェクトを円滑に進めるにあたって有意義な時間を割くことが重要なのではないでしょうか。その後にデザインを行ったり、コーディングを行ったりするデザイナーやコーダー、エンジニアの方々の頭の中に入れておくことによってその後の制作の品質は大きく変わる可能性が否定できません。ハイクオリティなウェブサイトを限られた時間で制作するための手法としてこのような目線を持つことができればUXデザイナーとしても、もう一歩上を目指せますね。
自社内独自の用語は使用しない
当たり前と思われる方が多いかもしれませんが、一般的な言葉を使用してラベルを定義するようにしましょう。その言葉が一般的かどうかは同業者ではない方に質問して理解できるかどうかテストしてみる方法が効果的です。自社の社員にしかわからない用語や専門的な用語の使用は避けることによって、利用者に理解され難いラベルになってしまうことを防止することができます。理解され難いラベルを設計してしまった場合には、サイト全体ユーザービリティが低下しますので注意が必要です。
文脈依存の表現も使用しない
その時の文脈でしか通用しない用語を用いると突然その箇所だけを取りだした場合に理解が難しくなるケースもあります。くどいようですが、ラベルの定義について重要なことはユーザビリティテストを十分に行って想定しているユーザーにとって理解しがたい表現になっていないかどうかを実際に確認することがもっとも重要です。
メニューラベル
メニューラベルのラベル定義における重要事項
メニューラベルのラベル定義を進めるにあたって重要な事項として考えるべきポイントは次の視点です。
- 1つのラベルでそのアクション要素がなしえる行動すべてをカバーできているかどうか
- そのラベルの下位階層にあるページの内容を想起できるか
- 他のラベルとの違いを明確に理解できるか
インタビューの重要性
上記について制作プロジェクトのメンバーなどにインタビューを行うことによって複数人の知見を得ることができます。先ほども書きましたがラベル設計において重要なのは個人の感覚ではなく、複数人の感覚を実際にテストしてみて知ることが重要です。インタビューを通してどのような用語が最も適切かということを知ることが必要だと言えます。
例えば「ダウンロード」「お問い合わせ」「資料請求」などのアクションに対して想起するイメージは明確ですが、「サービス」や「ソリューション」といった同じような用語からは何がその内容に含まれているのかがわかりにくいといったケースが考えられるため、そのボタンから何が実現できるのかということをよりイメージしやすいような適切な用語を選ぶ必要性があると言えます。
ナビゲーションラベル
ナビゲーションラベルのラベル定義における重要事項
- 想起されるユーザーアクションを的確に表現できているか
- 全体としての一貫性を維持しているか
表記揺れが多いとユーザーの混乱の原因となります。必ず同じ用語を用いて一貫した表現を心がけてください。また、一貫した表現であっても、ナビゲーションの各ラベルがユーザーアクションを的確に表現できていなければラベル定義は失敗していると言えるでしょう。
ラベル定義における有効な手法
「1軸の表現によるラベルで理解が不十分であればサブラベルを付与することが有効」です。
例えばFLARESのサイトでも実現はできていませんが、会社概要ページにおいては、その会社概要ページのナビゲーションラベルとして「会社案内」と表現すると確かに会社案内だとはわかりますが、これにサブラベルとして「FLARESについて」と付け加えることによって更に詳細な情報をユーザーに伝えていくことが可能です。
良くあるサイトのデザインにおいては、日本語名のメニューに単純に英語名のメニューをサブラベルとして付与しているケースも少なくないのですが、これではあまり効果があるとは言えないでしょう。それよりも、補完的な意味を表すサブラベルを付与してあげることによってユーザーの理解を助け、強いてはユーザーのサイト全体における利便性の向上、サイトへの理解を助けることにつながっていきます。
まとめ
ラベルの付け方一つとっても色々な考えがあるとは思いますが、私のおすすめするラベル命名の手法として「複数軸によるサブラベル」を一度試してみてください。一度試してみるとわかりますがユーザーの理解度が一気に上がり利便性が確実に向上したことを感じることができるはずです。その他にもテクニック的な手法はあるかもしれません。もしこんな手法が有効だというオススメ手法があったら私にも是非教えてください。今日はラベル設計について学んでみました。
オススメの記事
UXデザインや情報アーキテクチャ関連の記事として、よかったら以下の記事もご覧ください。
https://flares.jp/digimag/how-to-make-a-wireframe-ux-design-information-architecture-practice/
書籍のご紹介
最後に私が学んできた情報アーキテクチャに関する書籍を少しだけご紹介します。オライリーの白くま本は少し内容が難しいし、実践というよりは割とアカデミックな内容が多い印象です。それよりかは実践的な内容で書かれたその他の2冊が読みやすいのでお勧めです。ちなみに僕が持っている白くま本は第2版（5年以上前に購入）なのに対して現在は第4版まで進んでいるのでそれだけ多くの方々に読まれている書籍と言えそうですね。「情報アーキテクチャを学ぶ」ということはウェブ／UXデザイナーやウェブディレクターとして専門知識を深めるには避けて通れない道ではないでしょうか。
INFORMATION ARCHITECT 100
ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計
https://amzn.to/2TGEwMF
100ページすべてに図解があり、デザイナーの方にオススメです。非常に視覚的にわかりやすい。
IAシンキング
Web制作者・担当者のためのIA思考術
https://amzn.to/2HsZWGo
ウェブディレクター向けです。実践的でわかりやすい。
情報アーキテクチャ
見つけやすく理解しやすい情報設計
https://amzn.to/2TLuYQo
内容は非常に学術的で難しいです。ボリュームも一番。実践するにはかみ砕いて理解する力と応用力が必要です。
