Design Stock

デザインのアレコレ

  1. HOME
  2. コーディング
  3. Web制作の前に取りかかる情報デザインの手順をまとめてみる

Web制作の前に取りかかる情報デザインの手順をまとめてみる

情報デザイン

Web制作ではプログラミングに取りかかる前工程に「情報デザイン」がある。
制作会社だと、ディレクターなど上流工程の役職が携わっている仕事だ。

今までデザインやコーディングなどに関わっていたWeb担当者の方はどのようにして進めて行くのか戸惑うこともあるだろう。

そこで今回は情報デザインの一連の流れをまとめてみる。
(必ずしも全ての制作会社で同じ流れになるとは限らないので、ご了承を。)

 

テーマの決定

テーマの決定

①ゴール設定

まずは、サイトのゴールを設定する。
この出発点をきちんと明確にしてクライアントやチームメンバーと共有できているかどうかが、最終的な成果物のクオリティを左右する。

具体的には以下の質問から考えていくのが良い。

  1. どうしてサイトを作ろうと思ったのか?
  2. サイトをつくる目的は?
  3. サイトを通じて実現したい事は?

Whyを掘り下げていくと同じ結論に至ることもあるだろうが、結論が明確になったら言語化してきちんと共有できる形に残すことが大切だ。

 

ヨガスタジオのサイトリニューアルを想定して、クライアントのざっくりとした回答例を考えてみる。

  1. 競合のヨガスタジオがサイトをリニューアルしたから
  2. 競合に負けないため→競合に負けないくらい実績をアピールしてPRしたい
  3. PRを通じて、新しいお客さんを集客したい

今回の場合は、サイトを作る最終的なゴールが「新規顧客獲得」となる。

 

ディレクションを担当する方はクライアントから丁寧にヒアリングをしてゴールを明確にし、共有しておこう。

 

②ペルソナ法

次にターゲットユーザーを設定するために「ペルソナ法」を実施する。
ペルソナとは、あたかも実在しているかのような人物像のことだ。

特定の一人に刺さるサービスを作ることが成功の鍵とも言われるように、Web制作でもペルソナをきちんと設定することが訴求力の高いサイトをつくるのに必要だ。

 

先ほどと同じく、ヨガスタジオのサイトリニューアルを想定した、ペルソナの例を載せてみる。

ペルソナ

 

③コンセプト設計

さらに、デザインの根拠となるサイト全体のコンセプトを設定しよう。
「男らしくてカッコいいイメージ」や「ふんわり優しい感じ」といった曖昧な言葉ではなく、できるだけ明確な言葉で表現する。

そのために以下の2つの観点から分析をし、コンセプトを設定していく。

自社の強み

  • 競合他社にはない自社の強みは何か?

このポイントをクライアントからヒアリングをして洗い出し、整理して行く。
洗い出した強みはサイト上でアピールする材料となり、他の情報と比べ優先度を高くするなどレイアウトを設計する上で重要になる。

 

競合のサイトデザイン

  • 競合サイトはどういうデザインになっているのか?

という点も非常に重要だ。
なぜなら、競合サイトも同じようなターゲットを想定してサイト設計をしているため共通する部分が多いからだ。

競合と差別化をするためにあえてデザインを変えた方がいい、と主張するクライアントがいるかもしれないが、そこは慎重になった方がいい。
あくまでも大切なのはユーザーに訴求できるかどうかであって、作り手本位のデザインになってしまっては本末転倒である。

 

以上の2点を踏まえ、ヨガスタジオのデザインコンセプトを挙げてみる。

  • 20代後半から30代後半の女性層をもっと取り込みたい。
  • たった1時間のレッスンでダイエットと美肌効果を実感できることを知ってもらいたい。
  • 広い更衣室とシャワールーム、鏡の大きな化粧室が完備されているなどレッスン以外のサービスも充実していることを知ってほしい。

これくらいコンセプトがはっきりしてれば、どんなレイアウトにして、フォントや写真、色の組み合わせはどうすべきかなど根拠に基づいたデザインのサイトを作り上げることが可能だ。

 

情報の収集

ブレイン・ストーミング

④ブレイン・ストーミング

サイトのコンセプトが決まったらブレイン・ストーミングをして情報収集をする。
ブレイン・ストーミングとは、あるテーマに基づいて新しいアイデアを生み出す発想法のことだ。

ブレインストーミングは社内のチームメンバーや一人だけでやるのではなく、できるだけクライアントと一緒に行うようにしよう。

コツは、自分がユーザーの立場だったらどんな情報がほしいのかを考えることだ。

ブレインストーミングをするときのルールは以下の通りである。

  • 思いついたことを全て書き出す
  • 自由な意見を歓迎する(批判しない)
  • 1項目は20文字以内
  • 質より量を重視する
  • 関係ないと思われる項目も排除しない

また、どうしても一人でやる必要がある場合はXMindというマインドマップソフトウェアがおすすめだ。

 

情報の整理

情報の整理

⑤カード・ソーティング

次に、カードソーティングを行う。
この作業は、ブレインストーミングで出したバラバラな情報から関係性を見つけてひとつの固まりを作り出すものだ。

手順は以下の通りだ。

カードソーティング1

カードソーティング2

カードソーティング3

こうしてグループ化した項目がサイトマップの元となる。

 

⑥プロトタイピング

プロトタイピングとは、Webサイトの完成形をイメージするために不完全なモデルを作っておくことだ。
そうすることで、クライアントからのフィードバックを早めに得ることができ、完成してからの手戻りを防ぐことができる。

通常、Web制作では2つのプロトタイプを作成する。

ワイヤーフレーム

ワイヤーフレームとは、Webページのレイアウトを決めるための設計図のことだ。
どの情報をどこに配置するかを視覚化することにより、完成形をイメージしやすくする。

もちろんデザインの基本原則にしたがって、情報の優先度から大きさや配置する場所をきちんと設計する必要がある。

もっと詳しく知りたいという方はこちらの記事↓を参考にしてほしい。

ワイヤーフレームとは何か?webサイト制作に重要なページ設計図を理解しよう!

 

デザインカンプ

デザインカンプとは、ワイヤーフレームに具体的な色や画像の指定を行ったものだ。
モックアップとも呼ばれている。

ワイヤーフレームは単に要素の位置関係を指定したものに過ぎないが、デザインカンプは具体的な要素をそこに当てはめていくため、より完成形に近いものになる。

こちらも作る目的は、より完成形に近いイメージをクライアントに提案し、のちのち手戻りが起きないようにするためだ。

もっと詳しく知りたいという方はこちらの記事↓を参考にしてほしい。

作成方法も紹介!デザインカンプとは【初心者向け】

 

ここまでが、Web制作(プログラミング)の前行程になる。
一応その後の流れについてもまとめてみるので参考にしてほしい。

 

情報の構造化と視覚化

プログラミング

⑦HTML

HTMLとは、Webページのもっとも基本的なマークアップ言語のひとつだ。
全てのWebサイトはこの言語を基礎として成り立っている。

あるWebページのHTMLを知りたい場合は、画面上を右クリックして「ページのソースを表示」を押してみよう。
見るとわかると思うが、整理した情報がHTMLによって構造化されている。

 

⑧CSS

CSSとは、HTMLによって構造化した情報に色や大きさ、配置などを指定するための言語だ。
つまり、CSSによってWebページの見た目が作られている。

アニメーションなどをページ内で実装しない場合は、大概の見た目をCSSで作ることができる。

いまいち実感が湧かないという方はこちらの記事↓を参考にしてほしい。

今さら聞けない!CSSとは【初心者向け】