こんにちは。仙台市でフードプランナー、料理家として活動しております、sato ai です。
ホームページの制作についてのコラムシリーズ。前回の教室集客や認知度アップにオススメの記事に続きまして、今回はカラーバランスについて書かせていただきます。
まだ読まれていない方は、下記リンクをぜひご覧ください！
-
-
ホームページ制作のポイント｜教室集客や認知度アップにオススメ
こんにちは。仙台市でフードプランナー、料理家として活動しております、sato ai です＾＾ 夏を仙台で過ごすのは久しぶりです。 仙台の夏ってこんなに暑くなるんでしたっけ？？ とはいえ、朝晩は涼しい風 ...
続きを見る
ホームページを作ってはみたけれど、なんだかプロの方が作ったのとは違う。と、お悩み中の方の参考に少しでもなれば嬉しいです。
実はとても大事な、ホームページ全体のカラーバランス
WordPressでのホームページ制作の際に、実はとても大事なのが全体のカラーバランスです。
義務教育の学校では、様々な数式や歴史の勉強はしても、ファッションやメイクの勉強は教えてくれませんでしたよね。カラーの分野は、ファッションやメイクなどの専門分野と同じく、専門的な勉強をしなくては得られない知識なのです。
なんとなく好きな色を並べてみる。
もともとセンスのある方なら、そういったことも可能かもしれません。私も、料理を作る際やテーブルコーディネートなどのカラーバランスの知識はありましたが、ホームページのカラーバランスの世界は別物でした。
デザインの世界に正解はないと言われていますが、このカラーバランスの世界はとっても奥が深かったです。
では、どのようにサイトのカラーを決めていけば良いのか、私が実際に実践した方法をご紹介します。
1.メインカラーを決める
メインカラーは、サイトを作る目安として全体の25%を占める色になります。
色は、比較的濃い目の色が良いと思います。白抜きで文字を入れることを考慮して決めてみましょう。
サイトの目立つ部分を占め、印象に残るカラーになるので、イメージカラーとして考え決めると良いです。
当教室では、メインカラーになる色は、ロゴの色と同じものにしてみました。
教室やご自身のイメージなどから、コーポレートカラーが決まっている方はそちらで設定すると良いでしょう。
このメインカラーは、唯一自分の好みの色を設定できたところと言えます。
一度、好みの色だけを詰め込んでHPを作ってみましたが、賑やかになりすぎてしまって、文章も見にくくなってしまい、統一感がありませんでした。
カラーを決める際には、こういった色見本のサイトを参考にすると良いです。
2.ベースカラーを決める
まずは、サイトのメインになるカラーを決めましょう。
メインカラーは、サイトを作る目安として、全体の70%ほどを占める色になります。
余白や、背景などに用いるカラーで、半数以上のサイトが白を選択しています。
他にもベージュや、くすみ系のカラーを使用しているサイトや、ブラックでメリハリのあるサイトに仕上げている場合もあります。
3.アクセントカラーを決める
メインカラーまでは割と簡単に決められますが、ここからが問題です。
アクセントカラーは、メインカラー、ベースカラーにメリハリをつけたい時などに使用するカラーです。
お問い合わせフォームなどのボタンの色に使うのも良いと思います。
4.サブカラーを決める
ここまでの３色のカラーを使い分けて作るのが、サイト作りの基本ですが、どうしてもこの３色だけではサイトの構成が難しい場合があります。
サブカラーは、タブや、リンクボタン、文字色などの追加時に使用するのがオススメです。
そのためのカラーを2〜3色ほど決めておくと、使いたい時に迷うことがなかったので、とても便利でした。
しかし、あまりサイトの中に色が多く入りすぎてしまうと、賑やかなイメージになってしまうので色をプラスする際には気をつけてください。
配色を決める際には、配色のデザインをサイトや、本で調べると、かなり参考になります。
実際に参考にした、配色デザインの本をご紹介するので、ぜひ参考になさってください。
↓基本的な配色の考え方がよくわかりました
 |
配色デザイン良質見本帳 イメージで探せて、すぐに使えるアイデア集 [ たじま ちはる ] 価格:2,530円 |
↓webサイトに起こすと、どういう風に見えるかがよくわかった本です
 |
Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集 [ 久保田 涼子 ] 価格:2,530円 |
↓色のイメージを考えることができるようになった本です
 |
イメージを色で表現できる 配色デザイン事典 [ mashroom design ] 価格:1,980円 |
ホームページの配色デザインを変えてみよう
自分でホームページの土台を作った方は、今回ご紹介した配色デザインを参考に、さらに見やすい、お客様へ訴求しやすいサイトに変化させていってください。
自作のホームページの良いところは、自分でどんどん変化させていけるところです。
文字の間違いや、デザインの変更などを常に自分で更新できるので、より良いホームページに仕上げてくことができます。
ぜひ挑戦して、満足のいくサイトを作ってみてください。
現在、料理教室の開催準備中です！！
オンライン受講なども検討しておりますので、ぜひ楽しみにお待ちください。