第8回 サイト構成の検討で重要なことは? | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて

タイトル画像、Webユーザビリティ―信頼を生む“使いやすさ”のデザイン

第8回 サイト構成の検討で重要なことは?


これらの構成を考える際、まず、そのサイトに対して運営サイドとして入れたいと考えるコンテンツとユーザーが望むコンテンツ、そしてその目的の達成までの細かなタスク(作業)を洗い出し、より重要度の高いコンテンツ、タスクを中心とした構成を検討する必要があります。ひとりでは視点が偏りますので、できれば複数人のブレーンストーミングのような形で開始するほうがよいでしょう。

(解説:石田優子)

著者プロフィール用イラスト [プロフィール]
いしだ・ゆうこ●クロッシングフィンガーズ代表。ユーザーエンパワーメントという手法により、ユーザー視点に立ったサイト構築、コミュニティ運営のコンサルティングなどを行っている。近著に『Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。』がある。
(イラスト:MIKAさん)
クロッシングフィンガーズ:http://www.crossingfingers.org/
KeiYu HelpLab:http://www.keiyu.com/


コンテンツの洗い出し


コンテンツについてはこの時点では具体的な内容は必要なく、どのようなものを入れるかの大枠でかまいません。本の見出しレベルと考えてもよいでしょう。ここでも、サイトの目的を基点として考えると用意するコンテンツが見えてきます。どの目的のためには、どんな情報やデータが必要なのか。運営サイドには運営サイドとしての目的があります。

たとえば、ブランドのイメージアップを図りたい、新製品の宣伝をしたい、サポートの効率化を図りたいなど、その会社によっていろいろな目的が考えられます。一方ユーザー側にも、商品を買いたい、その店に行きたい、投資先としての会社情報を知りたい、就職活動の中でその会社の内容を知りたい……といった目的があります。

まずは思いつくだけ、それらに名前をつけて紙などに書き出してください。「会社概要」だけを考えてみても、一般的な会社名や住所、役員名などのほかに、「事業所」、「組織」、「沿革」、「企業理念」が挙げられるでしょう。あるいはリクルーティングに力を入れたいのならば「代表者からのメッセージ」、「スタッフからの声」といった項目が入るかもしれません。

これらが最終的にはメニューやカテゴリー名になりますが、洗い出しの段階では確定した名前でなくてもかまいません。具体的な内容がわかる名前でリストアップしてください。

タスクの洗い出し


ユーザーがひとつの目的を達成するまでには、いろいろなタスクがあります。たとえば「夕食の宅配サービスを受けたい」という目的があったとします。食品の宅配サービスサイトにたどりついたユーザーが、そこで行うことには下記のようなものがあります。

  • 「夕食の宅配サービスを行っているかどうかの確認」
  • 「宅配地域、曜日、時間帯の確認」
  • 「配送方法の確認」
  • 「メニューの種類、料金の比較、検討」
  • 「カタログ請求」
  • 最終的な「申し込み」

さらに、「申し込み」の中には「新規会員登録」、「会員の詳細情報の登録」、「決済方法の登録」といった一連のタスクがあります。また会員登録後には

  • 「会員IDでのログイン」
  • 「注文内容の変更」
  • 「会員登録情報の変更」
  • 「現在ポイント数の確認」
  • 「ポイントによる料金割引の申し込み」

なども考えられるかもしれません。すべてのユーザーのためのすべての目的のタスクを洗い出すことは困難ですが、そのサイトのターゲットユーザーの主な目的と考えられるものに関しては、これぐらいのレベルまで目的を分解し、コンテンツの場合と同様に、タスクとしてリストアップしてください。

導線の設計


コンテンツとタスクを洗い出した後、コンテンツならば「会社概要」をひとつのカテゴリーとして、その下に個別の項目を並べるといったような分類作業をはじめます。そして親カテゴリーの中でも、「会社概要」よりは「商品情報」が必要度の高い情報だ、というようにカテゴリーの優先度をランク付けます。

同様に、タスクも、会員未登録のユーザーならば「メニューの種類、料金の比較、検討」から「申し込み」が重要な流れであり、会員登録済のユーザーならば「ログイン」から「注文内容の変更」が重要な流れである、というように個々のタスクを関連付けるとともに、一連の流れを組み立てます。

そして、より優先度の高いコンテンツに素早くたどりつけ、かつタスクの流れと整合するような組み合わせで階層と導線を設計します。

サイトのツリー構造。トップページから優先度の高いコンテンツへ、直接リンクするショートカットが配置されている
新商品をアピールしたいという運営サイドの目的と、まずは資料請求したいというユーザーの目的の優先度が高い場合は、それらへのショートカットとしての導線を追加する

通常のサイトではよくツリー構造が使われていますが、同じ階層や異なる階層を縦横に結び付けるとユーザーが混乱します。しかし、タスクから考えると、優先度の高いコンテンツでも下位の階層に配置しなければならないようなことも発生します。

そのような場合は、基本となる導線以外に、トップページから優先度の高いコンテンツに直接リンクするといったショートカットの配置が有効です。


次回につづく
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在