【デザイン】どこから手をつければ良い？Webサイトのデザインをする際のポイント

今回は、0からWebサイトをデザインする際に「どこから手をつければ良いか分からない」と困る方も多いと思いますので、Webサイトをデザインをする際のポイントをお伝えします。

→0からコーディングをする際のポイントはこちら

サイト設計書を熟読する

まずは、何のためのサイトなのかを把握するために、サイト設計書の熟読が必要です。
サイトの目的を達成するためのデザイン、UI（ユーザーインターフェース）が必要になります。

UIとは、Webサイト（コンピュータやシステムなど）と、ユーザー（お客さん）との間で情報をやり取りするための方法のことで、このやり取りがしやすいことが重要になります。

Webサイトのデザインは、ただカッコいい、カワイイだけでは、良いデザインとは言えないので、サイト設計書を熟読し、どんなサイトにすれば目的が達成できるかをイメージしましょう。

参考サイトをたくさん見る

サイトのイメージができたら、次は参考サイトをたくさん見て、さらにイメージを大きくさせます。

参考サイトはネット上にたくさんあり、テーマやジャンル、色味などを絞って検索できます。
クライアントからサンプルや色味などの要望があれば、そのテーマで絞って探しましょう。

イメージと合ったサイトをいくつか並べて、使えそうなデザインは真似してみましょう。

もちろんそのまま使用したり、ほとんど同じように真似するのは良くありませんが、どんな一流のデザイナーも参考に色々見ているはずです。

最初はデザインスキルも低く、自分の中の引き出しが少ないので、まずはとにかくたくさんのサイトを見て、自分のデザインスキルをあげていくことが大事です。

ロゴのデザインをする

参考サイトを見てイメージできたら、大枠のデザインは頭に浮かんでいると思いますので、最も重要なロゴをデザインします。

ロゴはそのサイトや会社の顔になる部分なので、デザインに1番時間が掛かり大変です。

ロゴのデザインが決まれば、サイトのデザインもできたと言っても過言ではありません。
ロゴのテイストに合わせたデザインにすることで、サイト全体がしっくりきて、見やすくなります。

ロゴだけの参考サイトもたくさんありますので、参考にしてみましょう。

クライアントによっては、ロゴがすでにある場合もあります。
その場合は色味も決まっていることも多いので、比較的デザインしやすいかと思います。

レイアウトのデザインをする

ロゴのデザインが決まったら、次はレイアウトをデザインしていきます。

ヘッダー・コンテンツ・フッターなどのエリアを、中身はまだ空で良いので、ざっくりデザインしちゃいます。
色味も決まっていると思うので、背景色やキーカラーもここでデザインします。

こうすることで頭に浮かんでいるものが具現化され、さらにイメージが膨らんでいきます。

フォントを決める

ロゴと大枠のデザインができたら、見出し、ボタン、バナーなどの目立たせたい要素のフォントを決めていきます。

色々なフォントを使うと、サイトの統一感がなくなり、ごちゃついてしまうので、多くても3つほどにしましょう。

あと、なるべくWebフォントにできるところは、極力画像ではなくテキストにしましょう。
テキストにすることでSEOにも効果があり、コーディングのスキルもあがります。

細かい要素のデザインをする

ここまで出来たら、あとは細かい要素のデザインをしていきます。
見出しやボタンもある程度決まっているので、悩まずにデザインできるかと思います。

実際配置してみて、おかしいなーと思ったら、微調整していきます。
微調整は1箇所だけをみるのではなく、サイト全体をみて調整するようにしましょう。

最後に

以上、0からWebサイトをデザインをする際のポイントをお伝えしました。

最後に流れをまとめると、

• サイト設計書を熟読する
• 参考サイトをたくさん見る
• ロゴのデザインをする
• レイアウトのデザインをする
• フォントを決める
• 細かい要素のデザインをする

になります。

人それぞれやり方は違うと思いますが、一つ言えるのは参考サイトをたくさん見ることがとても重要です。
参考サイトを見ることは恥ずかしいことではなく、一流のデザイナーも参考に見ています。

日頃から参考サイトやキャンペーンサイトなどを見てると、自然と自分の中の引き出しが増え、ふと思い出して自分なりのデザインができるようになるので、サイトを見るクセをつけることをおすすめします。

少しでも参考なれば嬉しいです。