マンガでわかるホームページ作成

ホームページデザイン作成のコツ

ホームページを作るにはhtmlやCSSだけでなく、そもそもどんなホームページにするのかデザインを決めないと始まりません。

ホームページデザインはホームページの顔であり、ホームページリニューアルの主な理由になる場合が多いです。それだけ重要な工程です。

でも、ホームページのデザインなんてやったことない人にはどうやってホームページのデザインをしていけばいいのかわからないですよね?

わたしは地方でWebデザイナーを9年ほどやっているものです。

これまでいくつものホームページデザインを作ってきました。
さすがに9年も作っているとコツがわかってきます。

というわけでホームページデザイン作成のコツを紹介します。

目的からデザインする

デザインは感覚や才能も多少はありますが、理論が多くを占めます。
なぜこのようなデザインになるのか説明できるものであり、逆に言うと説明できないといけません。

その理論の一つがデザインの「目的」です

何のためのサイトか

あなたの作るサイトは何のために誰のために作りますか?
目的をしっかり決めることでデザインに説得力が増します。

逆に目的がないとデザインに理由がなくなり、あなたやお客さんの好き嫌いでデザインが決まってしまいます。

個人向けor法人向け

個人向けだとインパクト重視になる場合が多いです。また、スマートフォンでの利用が大半と考えスマートフォン優先のデザインを考えた方が良いでしょう。

法人向けだと信頼性や堅実性のあるデザインが求められるでしょう。

新規向けorリピーター向け

新規向けだとわかりやすさやユーザーを引き込む情報を全面に出すことが重要になります。わかりにくい、つまらないと思われた瞬間にあなたのサイトを離脱し、ライバルサイトへ行ってしまいます。

リピーター向けの場合は新着情報がメイントピックになる場合が多いでしょう。また、画像や余白も小さめであまりスクロールのいらないデザインが好まれます。

メインユーザーはどんな人か

女性か男性か、子供か大人か高齢者か、色合いや文字の大きさなどデザインに関わってきます。

社長の思いをおさえておく

これもサイトの目的となります。

また、社長(意思決定者)の思いをおさえておくことでデザインのやり直しを防げる効果もあります。

最近のホームページデザインをインプット(調査)する

自分の中にデザインの引き出しがなければサイトを作るのはむずかしいでしょう。「サイトといえばこんな感じだよね」と感覚で作るとダサいサイトになってしまいがちです。

デザインは常に移り変わります。最近のホームページデザインをインプット(調査)し、まずは引き出しを増やしましょう。

既存サイトをマネする

まずは既存サイトをマネしてみましょう。デザインまとめサイトから同ジャンルかつ目的に合ったサイトをピックアップしましょう。

デザインまとめサイトでなくても、Googleでジャンル名で検索し、いくつものサイトを見て、その中からいいデザインのサイトを参考にしましょう。

ピックアップするときはサイトの目的を思い出しながらピックアップしましょう。軸はぶらさないように!

参考になるサイトをピックアップしたらイラストレーターなどを使って同じようにマネして作ってしてみます。

詳細まで同じでなくてもレイアウトだけマネしてもOKです。

これを複数回やることで自分自身の引き出しを増やすことができ、どんなデザインがいいのか、サイトの方向性が見えてきます。

イラストレーターでマネする時間がない場合は少なくとも数点参考にできるサイトをピックアップしましょう。

構成を分析する

マネしたら(ピックアップしたら)そのサイトがどういう構成になっているのか、他のサイトとの共通点や違う箇所、自分がいいと思ったのはどこなのか分析してみましょう。

共通点やいいと思ったところはどんどん取り入れていきましょう。

違うところはサイトの目的を思い出し、これから作るサイトには必要なのか考えてみましょう。

デザインの理由を説明する

上記の分析をするとどうしてこのようなデザインにしたのかわかってきます。これをさも自分でデザインしたかのように説明してみましょう。

デザインの理由が説明できると説得力が増し、お客さんの好き嫌いではなく、論理的なデザインにできます。お客さんも納得ができるのでデザインのやり直しを防ぐこともできます。

レイアウトを作る

デザインの方向性が決まったらいよいよ具体的な形にしていきます。

まずはレイアウトを作りましょう。

レイアウトはワレームワークだとか構成、枠組み・スケルトンなどさまざまな呼ばれ方があるようですが、要はホームページの設計図のようなものです。

必要な要素と順番(優先度)を決める

まずは必要な要素と順番(優先度)を決めましょう。

ここでいう要素とは以下のようなものです。

  • ヘッダー
  • メインメニュー(グローバルメニュー)
  • メインイメージ
  • メインコンテンツ
  • ニュース
  • サブメニュー
  • フッター

etc...

とくにコンテンツはサイトの目的によってまったく変わってくるのでしっかり練っていきましょう。

要素が決まったら大まかな配置を決めましょう。

白黒だけで配置する

レイアウトを配置するとき最初は白黒(無彩色)で作ることをオススメします。

最初から色を付けて作ると、違和感があったとき、それが色の問題なのか配置の問題なのかわかりにくくなるためです。

写真も単色グレーにしておきましょう。

ルールを統一する

「ボタンはこの形」「タイトルはこの形」とデザインのルールを統一しましょう。これにより、ユーザーにとってわかりやすいサイトになります。

色を決める

色の数と比率

メインで使う色を3つ決めます。
比率は下記を参考にしてください。

  • ベースカラー:70%
  • メインカラー:25%
  • アクセントカラー:5%

ベースカラー

ホームページの大部分を占める色です。背景色だと思ってかまいません。

白・グレーなどの無彩色かメインカラーのうす~い色にすることが多いです。

メインカラー

サイトを象徴する色です。多くの場合サイト(会社・商品)のロゴの色と合わせます。

そうでない場合はサイトの目的に合わせた色にします。

アクセントカラー

目立たせたいときに使う色であり、デザインを引き締める効果があります。

目立たせたいからこそ割合は少なめです。

メインカラーより濃い色(鮮やかな色)にしたり、色相環が反対の色(補色)にすると良いでしょう。

補色例

  • メインカラーが赤なら補色は緑
  • メインカラーが青なら補色はオレンジ
  • メインカラーが黄なら補色は紫

彩度の高い色は面積を狭くする

彩度の高い色は目立つとともにユーザーの目を疲れさせる場合があります。

よってサイト内のカラー割合が多いベースカラーにはしない方が無難です。逆に割合が少なく目立たせたいアクセントカラーにはばっちりふさわしい色です。

トーンを合わせる

トーンというのはほぼ同じ明度・彩度のカラーのことです。

明度というのは白いか黒いか、彩度というのは鮮やかか白黒に近いかという色の指標です。

先ほどメインで使う色は3つと説明しました。だからといってこれ以外の色を使うなという話ではありません。

その他の色を使う場合はメインカラーと同じトーン(明度・彩度)にすることで統一感が生まれます。

逆にアクセントカラーはこのトーンから外すことで目立たせることもできます。

また、可能であれば使用する写真もトーンを合わせて加工しましょう。

デザインをチェックする

レイアウトと色まで決まったらほぼ完成です。

が、ここでいったん客観的になってそのデザインがいいのかチェックしましょう。

遠くから引きで見る

引きで見るとバランスが取れているか、統一感があるか客観的に見直すことができます。

先述した色の比率(バランス)やトーンの統一感などチェックしてみましょう。

時間を置いてから見る

作りたてのときは非常に良いデザインができたように感じます。どうしても主観で見てしまいます。

時間を置くことで冷静になり客観的に見直すことができます。

参考にしたサイトと見比べる

自分がいいと思った部分がちゃんと反映されているか見直してみましょう。

ある程度はまんまマネしてもいいと思います。

自分よりデザインが得意な人に見てもらう

デザインが得意な人に評価してもらいましょう。

他のサイトを参考にしたとはいえ、自分好みのサイトになってしまっている場合があります。

文字通り客観的な意見をもらい素直に受け入れましょう。

納品(お客さんチェック)

いよいよお客さんにデザインをチェックしてもらいましょう。

可能であればこのようなデザインにした理由を説明するといいでしょう。

デザインの理由を説明しないと作り直しになったり、別パターンを作ってみてくれ(追加費用なしで)ということになりかねません。

デザインの理由を説明することでお客さんの目的をしっかり理解しているアピールにもなり、任せてくれる可能性が高くなります。

また、デザインをチェックしてもらうときは以下を伝えるとスムーズです。

  • テキストや写真は後からでも変更可能である(今は細かく修正する必要はない)
  • デザインの大まかな方向性を確認してほしい
  • ○日までに返答が欲しい(デザインの手直しにかかる時間も見越す)

ホームページデザインはサイトの顔であり、ホームページリニューアルの主な理由になる場合が多いです。それだけ重要な工程です。

この時点で社長(意思決定者)の了承が取れればホームページ作成は8割完成したようなものです。

開発(ホームページ作成)

デザインが決まってしまえばあとはそれに沿ってホームページを作っていくだけです。

まとめ

目的からデザインする

サイトの目的をしっかりおさえましょう。また、ホームページを作るどの段階でもこの目的を思い出しながら作っていきましょう。説得力のあるサイトになるはずです。

最近のホームページデザインをインプット(調査)する

オリジナルのデザインを作るのは結構ですが、流行っているデザイン・サイトにはそれ相応の理由があります。それを調査し、サイトデザインに盛り込んでいきましょう。

レイアウトを作る

要素を決めて白黒で配置しましょう。

色を決める

以下を参考に色を決めましょう。

ベースカラー:70%、メインカラー:25%、アクセントカラー:5%

デザインをチェックする

客観的に見直すことが重要です。

納品(お客さんチェック)

やり直しにならないようしっかり説明し、納得していただきましょう。

 

さて、ホームページデザイン作成のコツを説明してきました。

もちろんこれが正解とは言いません。ただ、デザイン作成の方法がまったくわからないという方はこの方法を参考に作ってみて、だんだん自分がいいと思ったやり方に変更していってもいいかともいます。

以上、ホームページデザイン作成のコツでした。

関連記事