参考サイトの調査とピックアップ

要件定義書の内容を元に、今回制作するデザインのコンセプトに近い参考サイトを調査し、ピックアップします。

完全に0からWebデザインを作ってお客様へ確認を行なってしまうと、方針に合わないデザインだった場合、一から作り直しになってしまいます。
作り直しが発生するということは、それだけ工数を消費してしまい、費用が嵩んでしまいます。

また、お客様によるデザイン確認の手間も発生するため、Webデザインの参考サイトをいくつかピックアップし、お客様との間で認識のズレがないようにプロジェクトを進めてまいります。

色彩設計

Webサイトの見栄えにも直結する色彩を設計するステップです。
特に、色彩は見ている人に与える印象をコントロールできます。
以下は色ごとに与える印象の代表例です。

一つだけ例を挙げると、赤色は力強さを印象付けますが、使い方次第では「危険」「リスク」などの印象を植え付けてしまいます。
そのため、赤を使うにしても、どのような色と組み合わせてどこに使うのかが重要となります。

色彩設計では、上記のような点を意識しながら、Webデザインの中でも重要なメインカラー・サブカラーを決定していきます。

タイポグラフィ、Webフォント検討

タイポグラフィとは、文字やテキスト自体のデザインや配置に関わる要素のことを指します。
該当する項目としては、文字のフォントやサイズ、行間、行長、配置などになり、これらを適切に組み合わせることで、読みやすさや情報の伝達効果を向上させることができます。
Webサイトにおけるタイポグラフィを設計する場合、以下のような点を考慮します。

• 戦略に合ったフォントイメージかどうか
• フォント同士の組み合わせは相性が良いか
• フォントのサイズは読みやすいか
• 行間は詰まり過ぎていないか
• 利用するフォントカラーの種類は適切か
• 太字にした時のウエイトは見やすいか

例えば、上記のうち「行間は詰まり過ぎていないか」については、見落としがちな項目です。
基本的にWebサイトの訪問者は、まずぱっと見で全体を閲覧し、瞬間的に読みやすそうだなと感じたら本文を具体的に読み始めます。

その際、行間が詰まった文章は、なんとなく読みづらさを感じてしまい、本文を読んでもらえません。

改行前

改行後

タイポグラフィの設計段階では、ただ単にどのようなフォントを利用するかだけでなく、このような点も考慮して進めます。

画像、イラストレーション検討

続いて、Webサイト内で利用する画像やイラストレーションのコンセプトについても検討します。
Webサイトの中で利用する画像（写真やロゴ）については、お客様にご用意いただくものもあります。

しかしそれ以外にも、説明を補足するための図解やイメージ画像なども差し込む必要があります。
もし、そのような画像を利用する場合、Webサイトでターゲットとするユーザー像に合ったものを選ぶ必要があるのです。

このステップでは、よりWebサイトの訪問者の方が違和感なく、コンテンツに対して魅力を感じてもらえるよう、画像やイラストレーションの検討をします。

フォーマットデザイン作成

色彩設計や画像・イラストレーション、タイポグラフィの設計が完了したら、フォーマットデザインを作成します。
フォーマットデザインとは、これからWebサイトのデザインを作成していくにあたり、指針となるデザイン資料のことです。

この資料があることで、例えばお客様にとっても今後どのような方針でデザインが行われるかが把握でき、きちんと意に沿ったものになっているかを判断することが可能です。
また、当社内においても、一つのプロジェクトに複数のWebデザイナーが参画する場合、資料があることでデザインのトーン&マナーを揃えることができます。

【ご確認】レビューと素材のご提供

当社側で作成したデザインフォーマットをお客様に提出し、確認とレビューを行なっていただきます。
また、確認後とくに問題がなければ、Webサイトのページごとのデザイン制作に進みます。

※この時点で、当社よりお客様に対し「提供していただきたい画像素材のリスト」をお渡しさせていただきます。
そのリストを参考に、画像素材のご提供をお願いいたします。
画像素材が出揃う前でもデザイン作成は進められますが、仮の画像を利用することになりますので、お早めにご提供いただけますと助かります。

フィードバック対応

お客様にフィードバックしていただいた内容に合わせ、方針から外れない範囲で資料の修正を行います。
再度確認をしていただき、問題がなければ次のステップへ進みます。