皆さま、こんにちは。
WEB制作の工程には多くの職種の方々が関わりますが、今回はWEBディレクターさんやWEBデザイナーさんに役立てていただける内容をお届けしたいと思います。
WEB制作を受注することが決まり、お客様からヒアリングを行った後に、コンセプトやデザインの方向性を決め、デザインカンプも作り、さぁここからWEBデザイン作業をスタートさせる！というタイミングがやってきます。
そのスタート前にもう一つ、”デザイン前作業”もしくは”デザイン前設計”と呼べるような工程を1ステップ追加すると、もっとお客様とイメージのズレをなくしたり、デザイン後のコーディングがスムーズになったりするのではと感じることがあります。
これはWEB制作の中では「スタイルガイド」と呼ばれることもある、WEBサイト全体に統一させるデザインルールです。最終的な仕上がり品質を下げずに、デザインやコーディングが時短できるので、非常に効果的な作業です。
ただ、しっかりと細部まで決め込んだスタイルガイドを作ろうとすると、そのステップにもかなり時間がかかります。大規模サイトでなければ、重要なポイントに絞ってもよいと思うので、どの項目について決めるかというのは案件の規模と納期までの時間バランスでご判断ください。
今回の記事では、決めておくと時短しやすい項目を重要なものから7つ、ピックアップしてご紹介します。
- デザインコンセプトの文章化
- ベースカラー、メインカラー、アクセントカラー
- 見出しと本文の基本のフォントサイズ
- あしらいのテイスト
- 画像サイズ
- 画像素材の調達先
- ボタンの基本デザインと動き
それでは一つひとつの項目を、詳しくご説明します。
1.デザインコンセプトの文章化
デザインの方向性やターゲット層など、ヒアリングで聞き取った情報を分析して設定するのが「デザインコンセプト」です。
打ち合わせの段階で方向性は決定していると思うのですが、言葉で表現しておくと、イメージの統一がしやすくオススメです。
■デザインコンセプト例文 ※ダミーで考えたものです
- 長い伝統を感じられ、誠実な印象を与える
- 食材の”おいしい”が伝わり、見るだけで気分が明るくなる
- 広々としたビーチとおしゃれな建物をシンボルにゆったりした空気が流れる
デザインで判断に迷ったとき、コンセプトを改めて見直すことで選択しやすくなり、デザインの理由づけにもなります。
2.ベースカラー、メインカラー、アクセントカラー
WEBサイトの配色は3つの色で調整するのがいいとされます。
全体の75%くらいを占め、基本の色となるベースカラー。WEBサイトの特徴を印象づけるために使われるメインカラー。そして訪問者様の注意を引くために使われるアクセントカラーです。
この基本の3色はデザイナーさんがご自身の作業用に作られることが多いと思うのですが、資料としてチーム内で共有しておくと、後から何か要素を足す時に色に迷いません。
色の設定はかなり難しいため、基本の3色はデザイナーさん主導で決めていただければよいと思うのですが、営業さんやディレクターさんも色の提案ができたほうがよいタイミングもあります。
例えば、企画提案時や新規のお客様との制作をスタートさせるときなど、いくつか色やデザインを見ながらイメージのすり合わせをしたいときは、配色パターンが参考になります。
■AIを使ったカラー生成ツール「Color Magic」
Color Magicはキーワードを入れると色をAIが選んでくれるツールです。
■無料、登録不要
■日本語利用OK
同じキーワードで何度も生成できるので、ピンと来る色が見つかるまでやり直せます。3つの配色を決めるのは難しいですが、AIのサポートがあると色の方向性を考えやすくなります。
３.見出しと本文の基本のフォントサイズ
WEBデザインは紙のデザインと違って自由度が高く、ページがそれぞれ独立しているため、仕組みの都合上でデザインにバラつきが出やすい傾向です。
基本となる見出し（H1,H2など）周りのデザインとフォントサイズ、そして本文のフォントサイズや行間を最初に決めると、統一した仕上がりにしやすくなります。
また、デザイナーさんもお客様やディレクターさんが納得して決めたルールがあると、迷いがなくなりデザイン作業が早く進められます。
紙のデザインとWEBデザインは基本とするフォントサイズが違う（紙のほうがサイズが小さめ）のですが、方向性を揃えておくと、その統一感でブランド力を高めることができます。
WEBサイトだけでなく制作物すべてに一貫して活用するデザインガイドという位置付けにし、他の制作物のときも利用するともっと作業がスムーズになります。
４.あしらいのテイスト
カンプには含まれていない、イラストやタイトル周りの細かな装飾部分のデザインを”あしらい”などと呼びます。あしらいは制作時期のトレンドやデザインの方向性、デザイナーの好みによってかなり変わってきます。
こちらも文章化しておくと、悩みが減って助かります。
- くっきりした太い罫線
- すりガラスのような透明感のあるテクスチャ
- クレヨンで描いたようなやわらかな手書き風
- 丸みを帯びた水彩画の風合い
以下のようなデザインサンプルもいくつか付けておくと、仕上がりのデザインも透けて見えてくる感じがしますね。
５.画像サイズ
これはデザイン面というよりもSEO対策や訪問者様の見やすさのために大切にしたい項目です。
また、WEBメディアなど、ページ内で写真を多く使うWEBサイトでは将来的に非常に多くの画像をコンテンツとして扱うため、コーディングやサーバー関係にも深く関わってきます。初期の段階で、どう扱うか設計しておきたいですね。
SEO対策の面から考えると、画像には適正とされるサイズや品質があります。
例えば、AndroidスマホやGoogleアプリで記事やニュースが自動表示される「Google Discover（ディスカバー）」に表示されるためには、幅1200px以上が必要です。
※もっとGoogle Discover対策について詳細を確認したい方は別記事：GoogleDiscover掲載対策のためにできることもぜひご参考になさってください。
■GoogleDiscoverの画面（例）
そのほか、レスポンシブデザイン時に画像をどうするか、高品質な画像を日常的にアップするような設計にする場合、サーバーは大丈夫かなど確認もいろいろと必要になるでしょう。
デザイン前にチーム内で相談し、更新型のWEBサイトの場合はサイズや品質など取り扱いについてもガイドラインを作っておくと便利です。
６.画像素材の調達先
WEB制作の途中で必要になった画像素材は、急ぎの場合は商用可能な画像を購入もしくはフリーのものを探して使用することになります。
デザイン段階ではお客様からOKが出るかどうかわからない状態のため、最初はイメージとしてネットで探したものや、画像素材サイトでカンプ（サンプル）を使用することが多くなります。
そして、お客様がカンプで入れた画像を気に入ってくださり、「いざ、購入」というタイミングで費用面でNGが出たり、デザイナーさんの費用負担でと言われてしまったりとトラブルになっているケースを見聞きすることがあります
・画像の購入費を制作費に上乗せ可能か確認する
・画像の購入にはいくらまで使えるか確認してから画像を探す
・デザイナーさんや制作会社さんが年間で有料契約している画像素材サイトなどから探す
・そもそもフリー素材から探しておく
など、せっかくOKが出た画像なのに使えないという事態を防ぐため、先に価格や調達先を確定しておくことをオススメします。
７.ボタンの基本デザインと動き
WEBサイト素材の中でボタンはとても重要な役割を果たします。購入や送信などお客様のアクションにつながる箇所に使われるためです。
クリックしたくなる色、大きさにすることが最優先事項ですが、全体のデザインとも調和しないと不自然になります。
ボタンは文字も載せるため、フォントやサイズも考える必要があります。また、クリックで色が変わる、大きさが変わるなどの動きもセットでデザイン作業前に考えておいたほうがスムーズに仕上がります。
デザイン的にはしっかりと調和がとれたボタンであっても、実際に訪問者様がクリック（タップ）してくれるかどうかのチェックも重要です。公開後にクリック数が少なければボタンデザインを変えることも大切かもしれません。
まとめ
デザインはビジュアル面を整える作業ですが、WEBサイトのデザインはコーディングにもつながっていますし、動きも考えて3次元的な方向性からもアプローチすることもあります。
要素が多く、できることの幅が広いものこそ、ルールを決めておくと共通解ができて時短になります。
WEBデザインとコーディングの間の作業を時短にするコツは別記事：WEBデザインとコーディングをうまくつなぐコツ6選に詳しく書いておりますので、時短ワザとしてご参考にしていただけますと幸いです。