Webサイトを制作する際は企業やプロダクトのブランドを体現するとともに、販売機会の最大化につながる導線を設計しなくてはなりません。そこで重要課題となるのがWebサイトのデザイン性です。本記事ではWebサイトのデザイン性を高める上で押さえるべき原則や基本的な制作プロセスなどについて解説します。

Webデザインを作るには？制作の手順まとめ

クオリティの高いWebデザインを作成するためには、まずデザインという概念の本質を理解しなくてはなりません。例えば「アート」は制作者の自己表現そのものであり、必ずしも役割や目的を必要とはしません。しかし「デザイン」は多くの場合において販売促進や情報提供、認知度の拡大、課題の解決といった役割と目的があります。

そしてWebサイトの役割や目的を果たし、最終的な成果を得ることを「コンバージョン」と呼びます。したがって、事業領域のWebサイトに求められる良いデザインとは、「美麗なデザイン」や「独創的なデザイン」ではなく、「コンバージョンを獲得するデザイン」です。

もちろん人目を引くような独創的かつ美麗なデザインも優れたWebサイトには欠かせない要素ですが、それ自体は目的ではありません。コンバージョンの獲得に向けたWebデザインを設計するためには、デザインの工程へ移行する前に、以下のプロセスを段階的に踏破する必要があります。

1. コンセプトを決める
2. ターゲットの決定
3. 必要なコンテンツの洗い出し
4. サイトのイメージを作り上げる

1.コンセプトを決める

優れたWebデザインに欠かせない最初の要素が「明確なコンセプトの決定」です。
コンセプトを明確にすることは、Webサイト全体の基本的な観点を定めることです。つまり、どんなサイトにしたいのか、何をアピールしたいのかを最初に決定します。Webサイトに求められるデザイン性はコンセプトの方向性によって変動します。
決定したコンセプトに沿ってデザインの方向性や一貫性を確立することで、Webサイトの役割や目的を果たしやすくなります。ここでいう役割や目的とは、例えばECサイトであれば商材の販売、コーポレートサイトであればオンラインプレゼンスの強化、オウンドメディアは見込み客の獲得、リクルートサイトであれば求職者の採用など、です。

2.ターゲットの決定

コンセプトを明確化できたら、次はターゲットを決定するフェーズに移行します。Webサイトに求められるデザインの方向性はコンセプトに沿って行う必要があり、絶対的な正解はありません。デザインの方向性を定めるためには、Webサイトのターゲットを具体化し、どのような人にこのWebサイトで目標を達成してほしいのかを決定するプロセスが極めて重要です。

ECサイトであれば、まずはターゲットの年齢・性別・職業・趣味・家族構成・ライフスタイルなどの属性とともに、見込み客が抱えている悩みや課題を掘り下げてペルソナを設計します。ペルソナの設計によって見込み客の潜在的な需要を捉えられれば、購買に必要な要素を導き出せるため、Webデザインの方向性を決定できます。

3.必要なコンテンツの洗い出し

すべてのWebサイトにはコンセプトに基づく目的があり、その実現こそがWebサイトの存在意義です。したがって、Webサイトの普遍的な役割はコンバージョンの獲得と言い換えられます。そしてコンバージョンを獲得するためには、プロダクトの魅力をターゲットに伝える有益なコンテンツが必要です。

前工程のターゲティングによって見込み客の潜在需要を発掘したら、その見込み客が目的を達成できるコンテンツの洗い出しを行います。例えばその課題や疑問の解決に寄与する情報、競合他社にはない商材の独自性や参入市場における優位性、商材の魅力など、見込み顧客を満足させるさまざまなコンテンツを洗い出し、優先順位付けを行います。

4.サイトのイメージを作り上げる

コンセプト・ターゲット・コンテンツの方向性が定まったら、それぞれの要素がもつイメージを総合的に組み立てながらWebデザインに落とし込みます。この工程におけるファーストステップは「ワイヤーフレーム」の作成です。

ワイヤーフレームはWebサイトの配色、コンテンツの配置場所、フォントの種類や大きさなど、ユーザーが迷わず必要な情報にたどり着けることを目的に、基本的なレイアウトを視覚化した設計図を指します。ワイヤーフレームは簡易的な設計図ではあるものの、Webデザインの全体的な方向性やコンバージョンの獲得に至るフローを想定しながらレイアウトを設計する大事な工程です。

ワイヤーフレームの完成後は「デザインカンプ」の作成に移行します。デザインカンプは仕上がりの完成見本であり、Webデザイナーにとって最も重要な業務といっても過言ではありません。デザインカンプをベースに、HTMLとCSSを用いてコードに落とし込むというのがWebサイト制作の基本的なプロセスです。

Webデザインを作る際のコツ

Webサイトのデザインを作成する際はいくつかのコツが存在します。なかでも押さえるべき重要な要素として挙げられるのが以下の4点です。

配置や色のルールを決める

優れたWebデザインは配置や配色のルールが統一されています。例えば記事タイトルのフォントサイズは28px、h2の見出しは24px、記事の文字は16pxで統一する、またはアイキャッチ画像をコンテンツ幅100%で表示する、などのルールが挙げられます。
その他にもWebサイトのメインカラーとサブカラーを設定し、記事内の強調文字や枠線はメインカラーを使用するなど、ルールを定めることでWebサイト全体に統一感が生まれ、まとまりのあるデザインになります。

デザインの4大原則を活用する

「統一感」や「一貫性」という曖昧な概念を具体的なデザインに落とし込むためには、「デザインの4大原則」について理解を深めなくてはなりません。優れたデザインは多くの場合において「近接」「整列」「反復」「対比」という4原則が採用されています。

近接

要素を近づけてグループ化することで、一貫性の高い情報のセクションが作成される

整列

要素を規則的に整列させることにより、視覚的な秩序とデザインの整合性が確保される

反復

要素を規則的に繰り返すことで、情報を階層化しながらデザインの一貫性を確保できる

対比

要素を比較して際立たせることにより、デザインに抑揚やコントラストが生まれる

この4原則が統一感や一貫性を生み出す仕組みであり、Webデザイン全体の調和を図る上で欠かせない重要な要素です。4原則に基づいて設計されたWebデザインは、サイト全体の一貫性が保たれており、多くの場合、分かりやすくまとまりがあります。

使う色の数を抑える

統一感のあるWebデザインを設計するコツは、Webサイト全体の配色を3色程度に抑えることです。カラフルなデザインはWebサイトの個性を引き立て、明るく華やかな印象を与えます。しかし多彩な色彩と整合性をデザインに落とし込むのは容易ではなく、ハイレベルなセンスと知識がなければ色調の一貫性に欠ける乱雑なWebサイトになりかねません。

そのため、メインカラー・サブカラー・アクセントカラーの3色を基本として、それぞれの使用比率を定めることでデザインの一貫性を保ちやすくなります。一般的にはメインカラー70%、サブカラー25%、アクセントカラー5%が美しいWebデザインの基本的な配色とされます。「ColorDrop」や「Colormind」のような配色を提案してくれるWebサービスの利用もお奨めです。

参照元：Colormind（https://colordrop.io/）
参照元：ColorDrop（http://colormind.io/）

最初はシンプルなデザインを作ることから始める

優れたWebデザインを設計するためには、シンプルなレイアウトを意識する必要があります。先述したように、Webサイトにおける「良いデザイン」とは「コンバージョンを獲得するデザイン」です。派手なアニメーションや奇抜なレイアウトはユーザーの注意がそちらに向いてしまい、コンバージョンに至る導線を邪魔する要素になりかねません。

一般的なコーポレートサイトやECサイトの場合、凝ったデザインは、コンバージョンの導線設計が困難です。そのため、まずはコンバージョンの獲得を目指してシンプルなWebデザインを設計し、ABテストを繰り返しながら段階的に創造性や独創性を取り入れることが推奨されます。

Webデザインを外部に依頼する際のポイント

WebデザインをWeb制作会社やWebデザイナーに依頼する際は「事前にしっかりとイメージを伝える」、「制作の流れや費用などを確認する」の2点を意識することが大切です。

事前にしっかりとイメージを伝える

Webデザインを外部に依頼するときは、発注側と受注側がイメージを共有するプロセスが極めて重要です。そのためにはコンセプトとターゲット、そしてコンテンツの方向性を言語化・数値化してRFP（提案依頼書）に落とし込み、何を目標として、どのようなWebサイトを作成したいのかというイメージをヒアリングの際にしっかりと伝える必要があります。

可能であれば、見本となるWebサイトをいくつかピックアップし、良いと感じた要素を言語化してまとめておくことで受注側に伝わりやすくなります。使用したい画像やキャッチコピーが用意できていれば、早めに提示してイメージをすり合わせるプロセスも重要です。

制作の流れや費用などを確認する

Webデザインを外部に委託する上で欠かせないのが、Webサイト制作のプロジェクト内容をまとめた仕様書です。Web制作の仕様書は一般的にプロジェクトの概要や制作スケジュール、サイトマップ、ワイヤーフレームなどの詳細を記載します。

仕様書がなければ発注者と受注者の意思疎通に齟齬が生じ、制作の流れや予算、実装する機能などが事前の打ち合わせと大きく異なってしまう恐れがあります。こうしたトラブルを避けるためにも発注側はRFP（提案依頼書）を作成し、受注側はそれらを仕様書としてまとめます。制作に取り掛かる前に、それぞれが全体の流れを確認・共有することが大切です。

事前に運用方法を検討する

Webサイトは設計・実装・公開して終わりではなく、その後もSEOやアクセス解析、コンバージョンに至る導線の改善、継続的なコンテンツ追加などに取り組む必要があります。そのため、自社のリソースを考慮した上でWebサイトの運用方法を事前に検討しなくてはなりません。

例えば継続的にコンテンツを配信するブログ型のWebサイトの場合、WordPressのようなCMSを用いて作成された動的サイトと、HTMLとCSSのみで作成された静的サイトではコンテンツ管理における業務負荷が大きく異なります。さらに公開後の保守・運用を内製化するのか、それとも外製化するのかでランニングコストが大きく変動します。

また、Webサイトを外部に委託して制作し、保守・運用は内製化する場合、コンテンツの更新や画像挿入の方法、テーブルやリストタグなどの簡単なソースコードを記したマニュアルが必要となるでしょう。このような点を踏まえながら、公開後の保守・運用やコンテンツの更新頻度、技術的な要件に関する資料作成などをWeb制作会社と相談しておく必要があります。

良いWebデザインを作るには、デザインの4大原則を活用し、まとまりと分かりやすさをプラスするのがコツです。最初は複雑な配置や配色で凝りすぎず、シンプルなデザインを作るところからはじめましょう。

まとめ

Webサイトに求められる良いデザインとは「コンバージョンを獲得するデザイン」です。そのためにはコンセプト・ターゲット・コンテンツの方向性を定めた上で、Webサイトのイメージを作り上げる必要があります。
優れたWebデザインは配置や配色のルールが統一されており、その源泉となるのが「デザインの4大原則」です。デコラティブなWebデザインはコンバージョンに至る導線を阻害する恐れがあるため、全体の配色を3色程度に抑えつつシンプリシティを意識することが大事です。