<シリーズ04>第5回 目的に近づけるための設計図!情報設計とサイトマップ

Webコンサルティングについて聞いてみた
あ!レイチェル先輩~!先日はコンテンツ企画のポイントを教えてくださってありがとうございました!
実は今ちょうど進行中の案件がありまして、ペルソナデザインを経てコンテンツについてのアイディアが膨らんじゃいまして!もうデザイナーさんにサイトの目的を伝えてデザインをお願いしてもいいですよね?!(そわそわ)
ショーン
待った!!それはまだ早いんだよ~
レイチェル
ええっ?どうしてですか??
ショーン
ショーンくん、設計図は作った??
レイチェル
えっ、設計図・・・。(うっ、僕 技術2だったなあ…) デザインするにも設計図が必要なんですか?!
ショーン

必要です。あ、どうもキャサリンです。
何でもそうですが、ものづくりには設計図が不可欠です。私たちがよく作っている要件定義書は機能に対しての設計図ですよね。 画面を作る際にも、要素をレイアウトした設計図が必要です。これを「ワイヤーフレーム」と呼びます。デザイナーはこのワイヤーフレームを見ながら、画面をデザインしていくんですよ。
※情報設計の段階から関わり、Webにおける設計を熟知しているデザイナーなら、ワイヤーフレームからお願いすることもあります

ワイヤーフレーム

Webページの大まかなコンテンツやレイアウトを示した構成図。主にレイアウトの確認、メニュー構成の確認、要素の強弱の確認などを目的に作成する。(コトバンクより)

キャサリン
そうか、言われてみれば。設計図がないと大変ですね!
ショーン

でもその前にやることがあります。まずはサイトマップを作ることです。
ページを洗い出してサイト全体の構成を決めなければいけません。 ショーンくん、サイトの目的・ゴールは決まったんですよね??

キャサリン
はい、決まりました。ユーザのたどり着くべきゴールも含め、、お客様にとっての長期的なゴールも・・・
ショーン

では、その目的へどうやったらたどり着けるかを踏まえて、考えられるコンテンツを思い浮かぶ限り書き出してみてください。それができたら、目的へ導くために、伝えるためにはどのようにコンテンツをグルーピングすれば良いか考えましょう。・・・ええと・・・まとめますね。

  1. ゴールを踏まえて考えられるコンテンツをすべて書き出します
  2. 書き出したら、どうしたらわかりやすいかよく考えながらコンテンツをグルーピングしましょう
  3. [2]で得たグループに優先順位をつけて(この時ゴールを忘れないで!)
  4. ナビゲーションの策定、そしてどこにどの情報を置いていくのか設計図を描きます(ワイヤーフレーム)

このように情報を整理していくことを、「情報設計」といいますよね。

情報設計

情報設計(Information Architecture)とは、知識やデータの組織化を意味し、「情報をわかりやすく伝え」「受け手が情報を探しやすくする」ための表現技術である。 Webデザインの発展に伴い、従来のグラフィックデザイン(平面デザイン)に加え、編集・ビジュアルコミュニケーション・テクノロジーを融合したデザインが要求されるようになった。

キャサリン
はい、やってみます。
(しばらくしてから)ああ・・・・ほんとうですね、こうしていくとおのずと画面の構成が出来上がってくるような・・・・
ショーン

そうですね。
サイトマップが明確になってきたら、画面の設計図が引けますよね。これらの作業がないと、ナビゲーションに入る項目すらもはっきりしない。 この時前回やったような、ユーザのニーズ、ペルソナや、ターゲットユーザの行動が重要な判断材料になってくるんです。
画面の骨組みとなるレイアウトに関わる箇所はもちろん、きちんとここで決めておかないと、 制作段階であとあと辻褄が合わなくなったり、手戻りが多くなったり、現場が炎上しますよ~~~~(怖い顔)

キャサリン
ひい!炎上こわい!
ショーン
炎上ならまだいいけど。一番怖いのは、目的に対してあさってなサイトになることだよね。
レイチェル
そ・・・・そうですね・・・・・なんだか想像したら具合が悪くなってきました・・・。情報設計って、大事ですね。
ショーン
そうだね。それがすべてと言っても良いんじゃないかな。サイトのクオリティとスピードは情報設計で大きく決まってくる。
この段階でお客様との良質なコミュニケーションもまた特に大事なことだよね!
じゃっ。わたしはこの辺で。お客様とのミーティングに行ってくるわ。一緒に行く?
レイチェル
はいっ!ぜひご一緒させてくださいっ・・・!
ショーン
…次回「ワイヤーフレームの書き方」でショーンくんは?!