サイトやバナーの配色で困ったら、ここで見本を作っちゃおう

 

この記事を書いている人 - WRITER -

『webとITをもっと身近に。』
大分県日田市で『webとIT』の専門家として活動中!
ミラサポや保証協会に登録し、webコンサルタントとして企業の相談などを行っております(全国どこでも出張可能です!まずはお気軽にお問合せ下さい)
制作では、販売促進に効果的なランディングページの制作も行っております!

宮野大樹

この記事を書いている人 - WRITER -
「webとITをもっと身近に。」 大分県日田市で『ITとweb』の専門家として活動中! ミラサポや保証協会に登録し、webコンサルタントとして企業の相談などを行っております(全国どこでも出張可能です!まずはお気軽にお問合せ下さい) 制作では、販売促進に効果的なランディングページの制作も行っております!
詳しいプロフィールはこちら

こんにちは!サイト管理人の@0zero1ichiです

サイトや、バナーを作るときに、配色って結構重要ですよね?

頭の中でイメージできれば良いのですが。なかなかそうはいきません。

私なんかは特にそうですw

配色選びに困った時に見ているサイト『colorhunt.co』

配色選びに困った時に、良く使っているサイトはこちら!

http://colorhunt.co/

colorhunt.co

colorhunt.coのホーム画面です

カラーハント?かな。正式名がわかる方がいましたら、連絡してください。。

良く使っているのサイトなのに、名前がわからないなんて失礼ですからね。

このサイトは、4種類の色をイメージしやすいように並べられます。

まずは、自分で配色してみよう!

左上のメニュー横にある『Create(作る)』ボタンをクリックします。

Createボタン

Createボタン

そしたら、4色のパレットが出てきます。

配色パレット

配色パレット

配色したいパレットをクリックすると、色が選択できます。

色は、

  • 右にある上下の『スライドバー(灰色のバー)』で大まかな色を決めます。
  • 左の枠内にある『ポイント(黒い点)』を移動させて色を選択できます。
カラー選択画面

パレットを選択すると、右にカラー選択画面が表示されます。

実際にやってみましょう

まずは1段目

1段目の配色

1段目の配色

次に2段目

2段目の配色

2段目の配色

3段目

3段目の配色

3段目の配色

4段目

4段目の配色

4段目の配色

決まったら、中央下にある『Done』をクリックします。

Doneボタン

Doneボタン

うーん。。センスないですね。。

まぁ、わかってましたけどw

なので、私と同じような方は、センスの良い配色をお手本にしちゃいましょう!

センスの良い配色をお手本にする

中央のベロを出しているロゴをクリックします。

colorhuntロゴ

colorhuntロゴ

すると、毎日のように皆さんが作成した配色が表示されています。

配色の見本

配色の見本

配色の中にある『♥ハートマーク』はクリックすると、横の数字に反映されます。

この数字は、皆さんが『♥(いいね!)』をクリックした回数なので、

どんな配色が人気なのか調べてみるのも良いでしょう!

次に、右にある日付は、『Done(アップロード)』された日を表しています。

あなたの求めている配色は見つかりましたでしょうか?

気に入った配色を調べたい場合

配色のパレットをクリックします。

色の上にマウスを持っていくと、16進数の数値(#で始まる6つの英数字)が表示されます。

colorhunt配色16進数

colorhunt配色16進数

この数値を参考にしましょう!

この数値を、クリックするとコピーできるように選択されます。

16進数をRGBで表示したい場合

また、ご使用のツールが、RGB(0~255の3つの数値)しか入力できない場合はこちらで変換してみてください。

色の16進数表示をRGB表示に変換してくれるサイト

PEKO STEP

PEKO STEP

PEKO STEPの画面です。

このサイトを利用して、先ほどの16進数の数値をコピーして、中央上部の『カラーコード』に貼り付けます。

PEKO STEP16進数をRGBに変換

カラーコードに16進数の数値を入力します。

すると、自動的にRGBへと変換してくれます。

先ほどの#A20A0A(16進数)はRGBでは

  • R:162
  • G:10
  • B:10

となります。

あとは、RGBの数値を使用しているツールにコピーして貼り付けるだけです。

簡単でしょ?

サイトやバナー作成、配色に困ったときに使えるサイト

http://colorhunt.co/

16進数のカラー表示をRGB数値に変換するサイト

PEKO STEP

を紹介しました!

当サイト『ゼロイチ.com』では、過去にも配色に関する記事を掲載しております。

このサイトの配色何だろう?画面の配色がわかるツール【ColorPicker】

お時間がありましたら、ぜひご覧ください。

最後まで、読んでいただきありがとうございます。

この情報があなたのお役に立てたら幸いです。

 

 
この記事を書いている人 - WRITER -
「webとITをもっと身近に。」 大分県日田市で『ITとweb』の専門家として活動中! ミラサポや保証協会に登録し、webコンサルタントとして企業の相談などを行っております(全国どこでも出張可能です!まずはお気軽にお問合せ下さい) 制作では、販売促進に効果的なランディングページの制作も行っております!
詳しいプロフィールはこちら

Daiju.techで使ってる
ワードプレステーマはこれだ!

Daiju.techでは、エレファント購入者様限定で、無料にて設定作業を行っております。

Zoomと呼ばれるオンラインビデオチャットを使いますので、全国どこでも対応できます!

まずは、お気軽にお問合せ下さい。

Copyright© Daiju.tech , 2016 All Rights Reserved.