ホームページ作成

ホームページ制作のポイント|カラーバランスについて

カラーパレット

こんにちは。仙台市でフードプランナー、料理家として活動しております、sato ai です。

ホームページの制作についてのコラムシリーズ。前回の教室集客や認知度アップにオススメの記事に続きまして、今回はカラーバランスについて書かせていただきます。

まだ読まれていない方は、下記リンクをぜひご覧ください!

教室の様子
ホームページ制作のポイント|教室集客や認知度アップにオススメ

こんにちは。仙台市でフードプランナー、料理家として活動しております、sato ai です^^ 夏を仙台で過ごすのは久しぶりです。 仙台の夏ってこんなに暑くなるんでしたっけ?? とはいえ、朝晩は涼しい風 ...

続きを見る

ホームページを作ってはみたけれど、なんだかプロの方が作ったのとは違う。と、お悩み中の方の参考に少しでもなれば嬉しいです。

実はとても大事な、ホームページ全体のカラーバランス

WordPressでのホームページ制作の際に、実はとても大事なのが全体のカラーバランスです。

義務教育の学校では、様々な数式や歴史の勉強はしても、ファッションやメイクの勉強は教えてくれませんでしたよね。カラーの分野は、ファッションやメイクなどの専門分野と同じく、専門的な勉強をしなくては得られない知識なのです。

なんとなく好きな色を並べてみる。
もともとセンスのある方なら、そういったことも可能かもしれません。私も、料理を作る際やテーブルコーディネートなどのカラーバランスの知識はありましたが、ホームページのカラーバランスの世界は別物でした。

デザインの世界に正解はないと言われていますが、このカラーバランスの世界はとっても奥が深かったです。

では、どのようにサイトのカラーを決めていけば良いのか、私が実際に実践した方法をご紹介します。

1.メインカラーを決める

メインカラーは、サイトを作る目安として全体の25%を占める色になります。

色は、比較的濃い目の色が良いと思います。白抜きで文字を入れることを考慮して決めてみましょう。

サイトの目立つ部分を占め、印象に残るカラーになるので、イメージカラーとして考え決めると良いです。

当教室では、メインカラーになる色は、ロゴの色と同じものにしてみました。

教室やご自身のイメージなどから、コーポレートカラーが決まっている方はそちらで設定すると良いでしょう。

このメインカラーは、唯一自分の好みの色を設定できたところと言えます。
一度、好みの色だけを詰め込んでHPを作ってみましたが、賑やかになりすぎてしまって、文章も見にくくなってしまい、統一感がありませんでした。

カラーを決める際には、こういった色見本のサイトを参考にすると良いです。

 

2.ベースカラーを決める

まずは、サイトのメインになるカラーを決めましょう。

メインカラーは、サイトを作る目安として、全体の70%ほどを占める色になります。

余白や、背景などに用いるカラーで、半数以上のサイトが白を選択しています。

他にもベージュや、くすみ系のカラーを使用しているサイトや、ブラックでメリハリのあるサイトに仕上げている場合もあります。

 

3.アクセントカラーを決める

メインカラーまでは割と簡単に決められますが、ここからが問題です。

アクセントカラーは、メインカラー、ベースカラーにメリハリをつけたい時などに使用するカラーです。

お問い合わせフォームなどのボタンの色に使うのも良いと思います。

 

4.サブカラーを決める

ここまでの3色のカラーを使い分けて作るのが、サイト作りの基本ですが、どうしてもこの3色だけではサイトの構成が難しい場合があります。

サブカラーは、タブや、リンクボタン、文字色などの追加時に使用するのがオススメです。

そのためのカラーを2〜3色ほど決めておくと、使いたい時に迷うことがなかったので、とても便利でした。

しかし、あまりサイトの中に色が多く入りすぎてしまうと、賑やかなイメージになってしまうので色をプラスする際には気をつけてください。

配色を決める際には、配色のデザインをサイトや、本で調べると、かなり参考になります。

実際に参考にした、配色デザインの本をご紹介するので、ぜひ参考になさってください。

 

↓基本的な配色の考え方がよくわかりました

配色デザイン良質見本帳 イメージで探せて、すぐに使えるアイデア集 [ たじま ちはる ]

価格:2,530円
(2021/6/18 14:13時点)
感想(2件)

↓webサイトに起こすと、どういう風に見えるかがよくわかった本です

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集 [ 久保田 涼子 ]

価格:2,530円
(2021/6/18 14:16時点)
感想(2件)

↓色のイメージを考えることができるようになった本です

イメージを色で表現できる 配色デザイン事典 [ mashroom design ]

価格:1,980円
(2021/6/18 14:17時点)
感想(0件)

ホームページの配色デザインを変えてみよう

自分でホームページの土台を作った方は、今回ご紹介した配色デザインを参考に、さらに見やすい、お客様へ訴求しやすいサイトに変化させていってください。

自作のホームページの良いところは、自分でどんどん変化させていけるところです。

文字の間違いや、デザインの変更などを常に自分で更新できるので、より良いホームページに仕上げてくことができます。

ぜひ挑戦して、満足のいくサイトを作ってみてください。

 


現在、料理教室の開催準備中です!!
オンライン受講なども検討しておりますので、ぜひ楽しみにお待ちください。

 

-ホームページ作成
-

Copyright© , 2021 All Rights Reserved.