コラム
2015/03/31

第5回 目的に近づけるための設計図!情報設計とサイトマップ

  • コンサルティング
WEBSASくん

Webのプロフェッショナルを目指して見習い中のWEBSASくんが、Webコンサルティングについてオラインに聞いてみた!

リーフレットダウンロード  「システム開発の流れ」をもっと知りたい方はこちらへ

関連製品

    WEBSASくん

    あ!オライン~!コンテンツ企画のポイントを教えてくれてありがとう!
    実は今ちょうど困っていることがあるんだ。ペルソナデザインを意識したらコンテンツについてのアイディアが膨らんじゃって!もうデザイナーさんにサイトの目的を伝えてデザインをお願いしてもいいよね?!(そわそわ)

    待った!!それはまだ早いんだよ~

    オライン
    WEBSASくん

    ええっ?どうして??

    WEBSASくん、設計図は作った??

    オライン
    WEBSASくん

    えっ、設計図…。(うっ、僕 技術2だったなあ…) デザインするにも設計図が必要なの?!

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

    ワイヤーフレーム
    ワイヤーフレーム

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

    コトバンクより
    おねえさん
    WEBSASくん

    そうか、言われてみれば。設計図がないと大変だね!

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

    おねえさん

    決まったよ。ユーザのたどり着くべきゴールも含め、、お客様にとっての長期的なゴールも…

    WEBSASくん

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

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

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

    情報設計

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

    おねえさん
    WEBSASくん

    うん、やってみるね。
    (しばらくしてから)ああ…ほんとうだ、こうしていくとおのずと画面の構成が出来上がってくるような…

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

    おねえさん
    WEBSASくん

    ひい!炎上こわい!

    炎上ならまだいいけど。一番怖いのは、目的に対してあさってなサイトになることだよね。

    オライン
    WEBSASくん

    そ…そうだね…なんだか想像したら具合が悪くなってきた…。情報設計って、大事なんだね。

    そうだね。それがすべてと言っても良いんじゃないかな。サイトのクオリティとスピードは情報設計で大きく決まってくる。
    この段階でお客様との良質なコミュニケーションもまた特に大事なことだよね!
    じゃっ。わしはこの辺で。お客様とのミーティングに行ってくる。一緒に行く?

    オライン
    WEBSASくん

    わーい!

    …次回「ワイヤーフレームの書き方」でWEBSASくんは?!
    1. <<
    2.   
    3. 1
    4.    
    5. 2
    6.    
    7. 3
    8.    
    9. 4
    10.    
    11. 5
    12.    
    13. 6
    14.    
    15. 7
    16.  
    17. >>