配色

HPを彩る!プロの仕事をトレースして配色を学ぼう!

投稿日: カテゴリー: デザイン

自分らしいHPにする!と鼻息荒く初めたは良いけど、何故か上手くいかない…綺麗な画像を使って、好きな色で飾り、有料のテンプレートも使っている…なのになぜか上手に行かない…。私の経験では、HPをチープで安っぽくしてしまっている原因は、色彩にあります。

お客様の中には『このHPは緑色がメインカラーなので、この色にしてください』の様な指定をされる方がいらっしゃいます。

無論できるだけその意見に沿ってHPを作るのですが『単色』希望の方がいらっしゃいまして、正直それじゃ誰がやっても安っぽくなりますよ…と言いたくなる事もあったり

 

 

配色の基本を学ぶよりも、プロの仕事から真似しよう!

YTやまやのメインカラーは緑です。

何故緑にしたのかは忘れちゃいましたけども、だからと言って緑一色には致しません。それは安っぽくなってしまうのですよ。

赤も使えば、緑も使い、青も使い、総合的に緑が主役になればそれで良い程度。あくまでも緑は主役、それ以外の色はサブキャラクターで、主人公を生かすように配置していきます。

 

これが殆ど緑一色でしたら如何でしょうか?

とてもダサくなってしまい、緑自体が強すぎて途端に安っぽいHPになってしまいます、配色が出来ない方は単色にする傾向が強く『何故か上手くHPが作れない方』は、まずこの配色を見直すことをオススメいたします。

 

 

 

HPのBODYに色を入れるのは、上級者から!初心者は手を出さない!

単色でダサいHPの中には、BODY全体にカラー設定をしていたり、画像を配置してしまったりと、上級者がやるテクニックをそのままやってしまう方がいますが、素人は絶対にやらない方が良いです。HPの基本は『白色』がメインで、そして文字色は黒色が基本です。

この基本から、構築していきます。

 

 

 

HPの配色に使いやすい色、使いにくい色

 

配色テスト

HPには使いやすい色と使いにくい色があります。

簡単に使いにくい色を覚えてください。

それは蛍光色の3番です!正直私は使った事自体ありません…逆に使いやすい緑色は5番や6番等の色は使い勝手も良く、雰囲気も出しやすい色です。

で、この黄緑色は何故かHP作成をしていると私のHPのメインカラーは黄緑色なので、この色を~っと言われやすい色だったりします

 

配色に関してはかなりセンスが物を言いますので、プロにお任せして『メインカラーは緑』と言われるだけの方が癖が無く、センスの良い色に仕立ててくれるに違いありません。

 

 

色で迷ったら何を見ればいい?答えは雑誌!

雑誌

この手のブログには配色に関して色の持つイメージだとか、購買色がどーのとか書かれていますが、チンプンカンプンになるのでここはプロの仕事の真似から入りましょう♪その方がはるかに上達しますし、センスが良くなります。

 

買わなくてもOKです、ネットで検索すれば雑誌の表紙はいっぱい出てきます。

それだけでもかなり参考になったりしますよ!

例でやってみましょう!バイラ(BAILA)

適当広告 
所要時間1分程度です(笑)

これは画像ですが、HP作成の配色の参考にもなります(適当過ぎとか文句を言わないでくださいね…)HPを見て参考にするよりも、雑誌などの配色パターン等は、やはりプロの仕事だけあってかなり参考に出来ちゃったりします。

 

例えば見出し等の配色パターンにも使えますし、小難しく考えると分からなくなるので、全体イメージもしやすくなり『見てみないと分からない』って方にも絶対にお薦めです。

 

 

HP配色の基本を抑えて、自分らしいHPに近づける!

ワードプレスにはデフォルトで文字の色を変える機能が付いています。その機能を使えばカラーコードも調べる事は出来ますので、わざわざ他のサイトに行って調べる必要もありません。もう少し便利なツールとしては、ウェブ配色ツール等もありますので、参考程度に使ってください。

 

今HPを作成している方、これからHPを作成しようと考えている方も、配色には十分気を付けてくださいませ。