ブログ・サイトの色使いは？カラーコード見本や各種ツールを紹介
こんにちは、えばです^^
なので、これまで自分なりに調べたり、考えたりしてきた
色
カラー
についての情報があります。
今回は、その色についての情報をご紹介しますね。
目次
カラーコードを調べる方法
ブログ（サイト）などのコンテンツを作る人にとっては、デザインを考えることも必要かなと思います。
でも最初のうちは質より量なので、デザインとかほとんど考えずに、沢山コンテンツを作っていきます。
自分にもスキルがつき、しっかり運営していきたい資産ブログを作るなら、もっと快適に見やすいブログにするために、デザインを考えますよね。
一番は、カラーコードですね。
こちらの専門サイトがあります。
このサイトを開くとこんなトップページですよ。
この各色にある『＃ーーーーー』という英数字がカラーコードになります。
使いたい色が見つかったら、そのカラーコードをコピーして、設定する箇所にペースト（貼り付け）すれば、この色になります。
カラーコードから色を調べたい場合
逆に、カラーコードの色を調べたいときもあります。
例えば・・・
CSSをいじってカスタマイズしたい時に、あのHTMLの何だかよくわからない画面がありますね^^;w
その中にまぎれて表示されているカラーコードの『＃ーーーーー』
「これってどんな色かな～？」
と思うことがあります。
そんな時は、先程の原色大辞典のサイトのこのページを開きます。
⇒色検索
このページにカラーコードを入れて検索すると
- 色のカラーコードがわかる
- その色が表示されるので見れる
これも結構使えますよ^^
カラーコード変換ツール
もうちょっと深掘りした情報をご紹介します！
という話です。
カラーコードを指定するとき、#FFFFFFという表記のほかに、
Ｒ:255 Ｇ:255 Ｂ:255という表記をすることがあります。
これは、16進数と10進数の表現の違いによるものです。
このツールは、16進10進変換のための補助ツールです。
例えば・・・
私の場合、バナー画像を作ろうと思って、バナークリエイターを使った時に、
＃ーーーーーではなく
Ｒ:255 Ｇ:255 Ｂ:255のような数字を入れる必要があったんです。
「なんだこれ？？」
って思ったんですが、この専門サイトで一発で変換して解決しました！
配色デザインの参考に『色相環』
そんな時に、
「虹みたいな色の流れはどの順番かな？」
と思ったので探していたら、『マンセルの色相環』という図を見つけました！
なので、画面を印刷して、壁に貼ってます^^
ときどき見ています。
色使い・色の組み合わせがわかるサイト
ブログ・サイトを作る時に、サイトカラーを設定しますね。
STORK（ストーク）の場合、
外観⇒カスタマイズ⇒「サイトカラー設定」の画面も用意されています。
色使いは管理人の好みや、作るジャンルなどにもよって、悩みどころでもあります。
こだわりすぎるとキリがないんですが^^;
色使いを考える時に、自分がいいな～♪と思える絶妙な色を使いたいですよね！
そんな時はこの専門サイトがおすすめですよ！
色の組み合わせがとても参考になります。
かわいい色も発見できます♪
ブログにオススメなカラーコードは？
私はスプレッドシートに、よく使う色・好きな色のカラーコードを記録してみました。
一度設定したら後はほとんど見ることはありませんが^^;
その一部がこちらです。
| 文字 | 採用理由 | カラーコード |
|---|---|---|
| ﾃｷｽﾄﾘﾝｸ | おすすめ | #0044CC |
| ﾃｷｽﾄﾘﾝｸ | Google使用 | #1a0dab |
| 赤文字 | 紅唐色 | #d23f40 |
| 赤文字 | 強調色 | #ff0000 |
| 文字色 | グレー | #383838 |
| 文字色 | 楽天・ｱﾏｿﾞﾝ・ﾔﾌｰ | #333333 |
| 文字色 | 一般的な黒 | #000000 |
成約させたいｸｯｼｮﾝﾍﾟｰｼﾞで使う色を研究した
以前Twitterでこんなツイートをしました。
【CVへの追求・客観視】
CV記事の赤字の赤色が#ff0000だとなんとなく違和感を感じたので、カラーコードを#EB2142とか#d23f40に変えてみました。
なんとなく優しい色になったかなと。好みもあるかな^^;#CVR #心理 pic.twitter.com/g0JhyRTbM7— えば (@eba0819) 2019年4月8日
何か物を買ってほしい記事（成約記事・クッションページ・LP）に色も大事かなと思った時に、赤色が派手だと強い訴求のイメージになるかなと思って。
実際こころの中は欲ばってますが笑^^;
過去記事の赤色を全部変えたい時は、プラグインの「Search Regex」でできますよ。
こちらの記事で紹介しています。
⇒wordpressの文字色変更と追加する方法はプラグインで簡単！
成約記事の色使いといえば・・・
ポチまであと一歩！！
という大事な販売LPへつながるリンクの色が大事ですよね。
- テキストリンクの色
- CTAボタンの色
＊CTA（ｺｰﾙﾄｩｱｸｼｮﾝ）：［ご購入はこちら］とかのボタンです。
CTAボタンの色については諸説ありますね・・・
緑、オレンジ、青、赤・・・？
あなたは何色がいいと思いますか？
私はまだ答えを見つけていません^^;
成約率（CVR）を高めるための検証方法で、ABテストをする場合、“色を変えてみる”というテスト方法もありますね。
色使いを日常でも学べる
色使いは“日常生活でも学べる”と思います。
そんな時に必要なのが抽象化思考です。
例えば、看板やポスターを見た時に、「なんだか色使いが派手だな～」とか「色使いが素敵でスッキリ見えるな～」と感じたら、
その理由を言葉にしてみます。
本格的に習っていなくても、世の中にある素敵な・綺麗な・上手いコンテンツから（抽象化思考で）教えてもらえるのです。
私が公園で“抽象化ゲーム”をしたときに、こんなことを思いました。
過去のこの記事に書いています。
⇒公園で抽象化ゲームやってみた！
YouTubeのサムネイル画像でも、色使いやデザインが学べたりすると思っています！
個人的にはメンタリストDaiGoさんの動画チャンネルのサムネイルはカッコいいですね^^
「なぜかな？」とじっと見て考えてみたりします笑
色やデザインを時間があればもっと専門的に学びたいな～と思っています。
なかなか時間がありませんがｗ
クリエイターとしてのスキルは増やしたいですね！
この本がWEBデザインの色を学ぶ本の中では
一番評価が高いです↓
よろしければ応援ポチをよろしくお願いします♡
↓↓↓
えばのつぶやき【6月16日】
今日は嬉しかったことが1つありました！
『パソコンの画面を撮影してYouTubeにアップする』
という私にとっては高等なスキルができるようになったかもです！
(゜▽゜*)
これまで、何度も挫折してきたので・・・
(´Д|||)
でも、外注さんに動画で説明するという必要がでてきて。
それで必死に調べてたらやっとわかりました！
YouTubeのクリエイターツールから、
- ライブストリーミング
- イベント
- 新しいライブイベント
- ライブ配信を開始
- OK
- 画面共有
- 配信を開始
- 変な画面をどかす
- 撮影
- 配信を停止
なんだか？なところもありますがｗ
ハングアウトでできました♪
(*‘∀‘)
でもカムタジアスタジオをいつか買いたいと思っていて
サクサク使いこなせる日がいつかくればいいですね～♪
(*´ｪ*)
最後までご覧いただきありがとうございます！
ぜひ受け取って、参考にしてみてください^^
あなたは、ブログなどに使う色で悩んだことありませんか？
私は時々悩みます。