【デザイン】ホームページの作り方:手順と必要な知識その２

はじめに

本記事は「ホームページの作り方:手順と必要な知識のご紹介その１」の続きとなります。

ホームページの「デザイン」の作り方に関して、楽しくお伝えしていきますが、「ホームページの企画と設計も学びたい！」という方はこちら（ホームページの作り方:手順と必要な知識のご紹介その１）の記事を先にご覧ください。

ホームページ作りの手順

まずは、ホームページを作るときのざっくりとした流れを復習します。

今回は３つ目のステップ、デザインをご紹介いたします。

デザイン

デザインのフェーズでは「デザインカンプ」というWebサイトを一枚の絵にしたものを作成していきます。
ホームページの設計が終わると、次はデザインを作成します。

デザインを作成するツールはSketch、Photoshopなどいくつかありますが、本記事ではこちらのツールの詳しい使い方などはご紹介しません。

デザインを作成する際に決めることをご紹介します。

デザインその１：配色

デザインに取り掛かる前に決めることの１つ目は配色です。
色の数などはデザイナーによって異なりますが、だいたいメイン１色、サブ１色、補色１で決めると良いです。

デザインその2：グリッド

色を決めたら、ワイヤーフレームをデザインに当て込み、グリッドを引きましょう。
使用するグリッドの好みは人それぞれですが、私はサイトの目安の横幅とそれに余白を入れたもの、ヘッダーの高さ（だいたい80pxほど）とファーストビュー（スクロールせずに見える範囲）が切れる目安の高さの計６本は最低でも引きます。
グリッドの位置、特にサイトの横幅の目安となるグリッドはクライアントによって940px~1100pxの間ほどで変わりますが、特に指定がなければだいたい1000pxで作ることが多いです。

デザインその3：参考サイト

これで実際にデザインのパーツを入れる準備ができましたが、初めてのデザインだと、どういうデザインがあるのか、その中でどのデザインを作れば良いのか決めるのになかなか時間がかかります。

そんな時に役に立つのが参考サイトです。
自分がお手本としたいサイトをいくつか選びましょう。
おすすめとしては、メインのレイアウトなどを参考にするサイトを１つ、パーツなどを参考にするサイトを２−３つ必要であれば色味などを参考にするサイトを１つ選ぶと進めやすいです。

デザインその4：サイトを綺麗に見せるコツ

あとはPhotoshopやSketchなどを使い、デザインをコツコツと作りましょう。
詳しい作り方はこの記事では触れませんが、サイトを綺麗に見せるために気をつけるべきポイントをいくつかピックアップしました。
– 文字、画像などは揃える

これは当たり前のことのように見えて、ありがちなミスです。
文字が揃っているカンプとそうでないカンプでは見え方が全然違ってきます。

• 色を使いすぎない
  色を使いすぎるとどうしてもまとまりのないサイトに見えてしまいます。
  最初のうちは色は１−２色に限定して作ると良いでしょう。
  
  

• 余白をたくさん取る
  空白を空きすぎるとついつい不安になってしまいますが、余白は必ずしっかりとあけた方が断然読みやすいです。
  ぜひ、最後にデザインに一目通していただいて、ちゃんと読みやすく、詰め詰めになっていないか気をつけて確認してください。

まとめ

本記事ではホームページを作る際、デザインをするときの大まかな流れと知っておくと良いコツなどをご紹介しました。
ぜひ、みなさんがホームページを作るときに役立てていただければと思います！