MEGUMI

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

情報デザイン

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

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

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

 

テーマの決定

テーマの決定

① ゴール設定

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

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

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

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

 

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

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

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

 

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

 

 

② ペルソナ法

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

 

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

ペルソナ

 

 

③ コンセプト設計

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

そのために以下の2つの観点から分析をし、コンセプトを設定するのがいいでしょう。

自社の強み

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

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

 

競合のサイトデザイン

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

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

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

 

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

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

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

 

 

情報の収集

ブレイン・ストーミング

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

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

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

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

ブレストのルールは以下の通りです。

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

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

 

 

情報の整理

情報の整理

⑤ カード・ソーティング

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

手順は以下の通りです。

カードソーティング 1

カードソーティング 2

カードソーティング 3

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

 

 

⑥ プロトタイピング

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

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

 

1. ワイヤーフレーム

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

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

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

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

 

2. デザインカンプ

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

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

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

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

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

 

ここまでが、Web制作(プログラミング)の前行程になります。
その後の流れについても下記にまとめてみるのでぜひ参考にしてください。

 

 

情報の構造化と視覚化

プログラミング

⑦ HTML

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

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

 

 

⑧ CSS

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

派手な動的サイトを作る場合をのぞいて、大概の見た目をCSSで作ることができます。

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

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