私たちがよく目にするWebサイトは、様々なデザイン要素やコンテンツで構成／制作されています。何気なく見ているサイトのページも実は、ページ毎の目的によってデザインが作られています。さらに、コンテンツの配置も工夫されています。
LPなら、ユーザーの購買意欲を刺激するデザイン且つ興味を持ってもらえるように制作されています。ブログなら最新の記事が見やすく配置されています。このようにWebサイト（ページ）は、ユーザーの目的が達成できるように構成され、デザインされています。
さらにコーポレートサイトの場合は、会社情報や事業内容など、どういった会社であるかをユーザーが理解しやすいように制作します。
もしWebサイトを訪問したユーザーが知りたい情報などに容易に辿り着けない場合、ページから離脱してしまいます。そうすると、サイト側とユーザー側、双方の目的を果たすことが出来なくなります。そのためWebサイトを制作するときは、双方の目的を達成させるために下記の視点を重点にデザイン制作します。
多々ある要素／コンテンツをどのように設置するべきか
どのようにビジュアル化するか
この要素やコンテンツを設計／デザインすることを『情報設計』と言います。
情報設計とは
情報設計とは、多々ある情報を分類でまとめます。そして、それら分類をどのように構成したら解りやすいかを考え設計することです。最も解りやすい例として、グローバルナビゲーションやボタンがあります。これら要素は適切にデザイン・配置し、ユーザーの目的が達成しやすくなるように設計します。
情報設計の流れ
クライアントから制作依頼を受けると先ず、どのようなサイトを作成したいかヒアリングを行います。そこで出た要望をベースに制作します。しかし、何も考えずに見た目だけを重視して制作してもクライアントの本当のニーズに応えることはできません。クライアントにとって効果的なものを制作するためには、情報設計をしっかり行うことが重要です。ここから、順を追って説明します
情報収集
クライアントとのヒアリングは、最初はざっくりした内容から始まることがほとんどです。しかし話を進めていくうちに具体的な目標や、現在抱えている課題など、様々なことが解ってきます。制作を依頼するということは、単純に「見栄えの良いページが欲しいから」ということではなく、必ず達成したい目的や改善したいことがあります。その目的を的確に叶えたいからこそ、プロに依頼するのです。そのため、できる限り多くの情報をヒアリング時はもちろん、その後も集めるようにします。
クライアントビジネスの理解
クライアントが行っているビジネスの理解度を深めます。一番最初に立てたビジネスコンセプトからマネタイズの構造、業界特有の専門用語、現業界のトレンドなど、情報設計に必要な知識を共有いただきます。全く知らない業界の情報設計を行うときは、顧客特性だけでなく、その業界の中で当たり前と認識されている情報も収集します。
分析・精査
ヒアリングから得た要望や課題をまとめ、１つずつ分析していきます。競合他社と比較し改善ポイントを洗い出したり、現在のトレンドや今後の動向などを精査します。そして肝心なことは、分析結果は必ず客観的な観点から説明できるようにまとめます。
戦略設定
クライアントの目的を達成するためにどのようにすれば良いか？分析や精査も踏まえ戦略を立てます。この戦略段階で、ターゲット層とペルソナを設定します。そして、新規や見込みの顧客をどのようにクライアントのビジネスまで導くか、カスタマージャーニーマップなどを作成してシミュレーションを行います。数パターン試作して、いくつかの成功例が見込めるようになると、それらを戦略の要素として取り入れます。
構成・設計
分析と戦略の立案により、クライアントの目的が明確になってきたところで、Webサイトをどのような構成にすれば良いかを考えます。ここで行うことは下記となります。
必要なページの洗い出し
階層化
サイトマップ作成
さらに、導線設定、UX設計も行います。サイト構成と導線設計、UX設計が揃わないと、この後作成していくデザイン（ビジュアル）設計にブレが生じやすくなります。
コンテンツ設計
カスタマージャーニーマップやUX設計を基に、必要なコンテンツを洗い出します。情報が多すぎると解りにくくなったり、迷いやすくなります。そのためユーザーにとって本当に必要なコンテンツなのかどうか、デザイン制作に入る前に必ず検討・確認を行います。
ここまでの流れは一般的なものとなります。そのため、制作する内容によって行う順序は柔軟に変えても大丈夫です。制作手順に正解はありません。内容や状況に合わせて、対応していきましょう。そして作成する資料はクライアントと認識を共有するための重要なものです。できる限り詳細に作るようにしましょう。
デザインの下描き
情報設計ができてやっと、デザイン（ビジュアル）作成の段階となります。しかし、いきなり作成するのではなく、デザインの下描きから着手します。ここではその『デザインの下描き』について解説していきます。
ワイヤーフレーム作成
デザインの下描きに必須となるのは、ワイヤフレームの作成です。ワイヤーフレームは、情報設計で定めたコンテンツや機能などを構成し配置して可視化された資料です。
ワイヤーフレームはデザインの骨組みとなるものですが、まだデザインの下描きではありません。サイト全体と、それぞれのページ構成がどのようになっているかを、プロジェクトメンバー全員で認識し把握するための、重要な資料です。その為、ワイヤーフレームにはフォントや色、装飾などデザイン要素は決めずに作成します。
コミュニケーションが必須
ワイヤーフレームを基にクライアントとコミュニケーションを図り、完成形のイメージを明確にします。例えば、車や家を思い浮かべてください。車も家も設計図での変更はできても、完成してからの変更はほぼできないですよね。Webサイトも同じことが言えます。
さらに、Webサイトは制作の後工程になるほど修正にコストとスケジュールが必要になります。できたデザインを見ないとフィードバックが出来ないというクライアントもいますが、ワイヤーフレームを見ながらコミュニケーションを図り、できるだけ前工程でフィードバックを受けるようにします。
ビジュアル作成／下描き
ワイヤーフレームをクライアントと共有し、提案とフィードバックを繰り返しながら少しずつ下描きを完成に近づけていく感じで、デザイン（ビジュアル）作成を進めます。ビジュアル作成が進むにつれてクライアントもより具体的な要望が出しやすくなります。
良い情報設計というのは、完成デザインが想像しやすい設計です。良い情報設計は高クオリティはもちろん、コスト削減やスケジュール短縮にも繋がります。ワイヤーフレーム作成を行わなかったり、中途半端なワイヤーフレームで進めたりすると、プロジェクト進行に支障をきたします。良い情報設計でより良いWebサイトを制作しましょう。
情報設計の注意点
情報設計は目的を達成するための重要な要素です。そこで、設計する上での注意したい重要な点を紹介します。
膨らみ続ける要望
サイトマップやワイヤーフレームで確認を行っていても、制作途中でクライアントからの追加要望が出ることはよくあります。そのため、最初から全てを設計しようとか、完璧にやろうとはしないことが肝心です。最低限の認識に齟齬が生まれないようにすることに注意を払いましょう。
認識合わせはこまめに
クライアントに「想像していたものと違う……」と思われることは、絶対に避けましょう。サイトマップやワイヤーフレームを作成する時に認識がずれると、その後の工程でさらにズレの幅は広がります。デザイン制作に入ってからでは取り返しのつかないことにも発展しかねません。企画・提案の段階から完成までの各フェーズごとに情報を共有し確認しあって、共通認識を持つようにすることが重要です。
まとめ
Webデザインは商業デザインです。見た目だけにこだわって作るのではなく、（クライアントの）目的が叶いやすくなるようにデザインを作る商業デザインです。
見た目も大切ですが、『どうしてその見た目なのか』といった理由が商業デザインには絶対必要です。この理由をきちんと提案したり、説明できて初めて商業デザインとして成り立ちます。しっかりと説明できるデザインには結果が伴いやすくなります。逆にいえば、結果が伴わないデザインは失敗の可能性が大です。
今回の記事があなたがWebサイトを作る時、情報設計を行うときに役立つことができれば、嬉しく思います。
今回も最後まで読んで頂き、ありがとうございます。
HS広告スタジオでは、単純に作るだけでなく、様々な手法を丁寧に駆使して、お客様の課題を解決しやすくするWebサイトを作っています。ぜひ専用ページをご覧ください。
