ブログ・サイトの色使いは?カラーコード見本や各種ツールを紹介
こんにちは、えば(@eba0819)です^^
-e1548819835812.png)
なので、これまで自分なりに調べたり、考えたりしてきた
色
カラー
についての情報があります。
今回は、その色についての情報をご紹介しますね。
目次
カラーコードを調べる方法
ブログ(サイト)などのコンテンツを作る人にとっては、デザインを考えることも必要かなと思います。
でも最初のうちは質より量なので、デザインとかほとんど考えずに、沢山コンテンツを作っていきます。
自分にもスキルがつき、しっかり運営していきたい資産ブログを作るなら、もっと快適に見やすいブログにするために、デザインを考えますよね。

一番は、カラーコードですね。
こちらの専門サイトがあります。
このサイトを開くとこんなトップページですよ。

この各色にある『#ーーーーー』という英数字がカラーコードになります。
使いたい色が見つかったら、そのカラーコードをコピーして、設定する箇所にペースト(貼り付け)すれば、この色になります。
カラーコードから色を調べたい場合
逆に、カラーコードの色を調べたいときもあります。
例えば・・・
CSSをいじってカスタマイズしたい時に、あのHTMLの何だかよくわからない画面がありますね^^;w
その中にまぎれて表示されているカラーコードの『#ーーーーー』
「これってどんな色かな~?」
と思うことがあります。
そんな時は、先程の原色大辞典のサイトのこのページを開きます。
⇒色検索

このページにカラーコードを入れて検索すると
- 色のカラーコードがわかる
- その色が表示されるので見れる
これも結構使えますよ^^
カラーコード変換ツール
もうちょっと深掘りした情報をご紹介します!
-e1548819835812.png)
という話です。

カラーコードを指定するとき、#FFFFFFという表記のほかに、
R:255 G:255 B:255という表記をすることがあります。
これは、16進数と10進数の表現の違いによるものです。
このツールは、16進10進変換のための補助ツールです。
例えば・・・
私の場合、バナー画像を作ろうと思って、バナークリエイターを使った時に、
#ーーーーーではなく
R:255 G:255 B:255のような数字を入れる必要があったんです。
「なんだこれ??」
って思ったんですが、この専門サイトで一発で変換して解決しました!
配色デザインの参考に『色相環』

そんな時に、
「虹みたいな色の流れはどの順番かな?」
と思ったので探していたら、『マンセルの色相環』という図を見つけました!
なので、画面を印刷して、壁に貼ってます^^


ときどき見ています。
色使い・色の組み合わせがわかるサイト
ブログ・サイトを作る時に、サイトカラーを設定しますね。
STORK(ストーク)の場合、
外観⇒カスタマイズ⇒「サイトカラー設定」の画面も用意されています。

色使いは管理人の好みや、作るジャンルなどにもよって、悩みどころでもあります。
-e1548819835812.png)
こだわりすぎるとキリがないんですが^^;
色使いを考える時に、自分がいいな~♪と思える絶妙な色を使いたいですよね!
そんな時はこの専門サイトがおすすめですよ!

色の組み合わせがとても参考になります。
かわいい色も発見できます♪
ブログにオススメなカラーコードは?

私はスプレッドシートに、よく使う色・好きな色のカラーコードを記録してみました。
一度設定したら後はほとんど見ることはありませんが^^;

-e1548819835812.png)
その一部がこちらです。
文字 | 採用理由 | カラーコード |
---|---|---|
テキストリンク | おすすめ | #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(コールトゥアクション):[ご購入はこちら]とかのボタンです。
-e1548819835812.png)
CTAボタンの色については諸説ありますね・・・
緑、オレンジ、青、赤・・・?
あなたは何色がいいと思いますか?
私はまだ答えを見つけていません^^;
成約率(CVR)を高めるための検証方法で、ABテストをする場合、“色を変えてみる”というテスト方法もありますね。
色使いを日常でも学べる
色使いは“日常生活でも学べる”と思います。
そんな時に必要なのが抽象化思考です。
例えば、看板やポスターを見た時に、「なんだか色使いが派手だな~」とか「色使いが素敵でスッキリ見えるな~」と感じたら、
その理由を言葉にしてみます。
本格的に習っていなくても、世の中にある素敵な・綺麗な・上手いコンテンツから(抽象化思考で)教えてもらえるのです。

私が公園で“抽象化ゲーム”をしたときに、こんなことを思いました。
過去のこの記事に書いています。
⇒公園で抽象化ゲームやってみた!

YouTubeのサムネイル画像でも、色使いやデザインが学べたりすると思っています!
個人的にはメンタリストDaiGoさんの動画チャンネルのサムネイルはカッコいいですね^^
「なぜかな?」とじっと見て考えてみたりします笑


色やデザインを時間があればもっと専門的に学びたいな~と思っています。
なかなか時間がありませんがw
クリエイターとしてのスキルは増やしたいですね!
この本がWEBデザインの色を学ぶ本の中では
一番評価が高いです↓

えばのつぶやき【6月16日】
今日は嬉しかったことが1つありました!
『パソコンの画面を撮影してYouTubeにアップする』
という私にとっては高等なスキルができるようになったかもです!
(゜▽゜*)
これまで、何度も挫折してきたので・・・
(´Д|||)
でも、外注さんに動画で説明するという必要がでてきて。
それで必死に調べてたらやっとわかりました!
YouTubeのクリエイターツールから、
- ライブストリーミング
- イベント
- 新しいライブイベント
- ライブ配信を開始
- OK
- 画面共有
- 配信を開始
- 変な画面をどかす
- 撮影
- 配信を停止
なんだか?なところもありますがw
ハングアウトでできました♪
(*‘∀‘)
でもカムタジアスタジオをいつか買いたいと思っていて
サクサク使いこなせる日がいつかくればいいですね~♪
(*´ェ*)
あなたは、ブログなどに使う色で悩んだことありませんか?
私は時々悩みます。