2017/04/10 22:19
サイトデザインにおいて、配色はお客様に影響を与える非常に大きな要素ですが、配色が苦手な方は多いのではないでしょうか。配色はとても繊細で奥が深いので、プロでもとても難しいです。
この記事が少しでも参考にしてくださったら幸いです。
メインカラーの決め方
shootのテーマは、メインカラーに設定した色が、見出し、フッター、問い合わせボタンなど色々なところに反映されます。まずはメインカラーを決めましょう。
メインカラーの決め方は、お店に合った色＞個人的に好きな色＞直感の順番で決めるといいと思います。
それでも分からなかったりハマらない場合は、トップ写真から色を抜き出しましょう。
トップに貼る写真は、イコールお店のメインビジュアルです。その写真の色を使えば全体を見てもしっくりくるはずです。
トップ写真が無い、クオリティの高い写真が撮れない方は、無料で高品質の写真素材を使用できるサービスを利用するとよいでしょう。例えばこんな写真を使用する事ができます
ぱくたそ｜高品質・高解像度の写真素材を無料（フリー）で配布しているストックフォトサービス
ぱくたそ｜高品質・高解像度の写真素材を無料（フリー）で配布しているストックフォトサービス
画像から色を抽出する方法はフォトショップなどありますが、ウェブサービスでも探したらありました。
写真から色を抜き取る時に素敵なサービス
上記サイトを開き、画像をドロップしてください。ドロップした画像が表示されたら、使いたいところをクリックすると、色を取得できます。このカラーコードをコピーします。
コピーしたら、デザイン編集に行きペーストすればOKです。
このデモサイトもこの方法でメインカラーを決めました。
配色の決め方
メインカラーが決まったら、いよいよ配色です。
モニター画面に出せる色は1677万色らしいですが、その中から組み合わせを直感で探すなんて本当に難しいです。
配色には心理効果やロジックがあるのですが、理解するまでに時間がかかってしょんないので素敵なサイトをご紹介します。
palettable
palettableは直感的な操作で配色を自動で選んでくれるサイトです。使い方を説明していきます。
サイトを開いたら、#から続くメインカラーのコードをペーストしてください。
ペーストしたら「Like」ボタンを押せば、おすすめの色が現れます。
「Dislike」を押せば違う色に変えてくれます。ビビビっとくるまでDislikeボタンを押してみましょう。
「Like」ボタンを押せば、さらに配色してくれます。
このサイトを使って配色を完了させれば作業の時間効率が上がるだけでなくクオリティも上がると思います。
ただし、模様に関しては、いくら配色がよくても文字が見えづらかったらよろしくないです。
模様箇所の優先すべきところは、配色よりも文字の読みやすさなので、メインカラーに似た明るさか、似た色などを使用しましょう。
いかがでしたか？お役に立てたら幸いです。
素敵なお店をつくりましょう＾＾
