ブログの色使いを極める!WEBデザインの配色を紹介!

ブログ・サイトの色使いは?カラーコード見本や各種ツールを紹介

こんにちは、えばです^^

 

えば

あなたは、ブログなどに使うで悩んだことありませんか?

私は時々悩みます。

 

なので、これまで自分なりに調べたり、考えたりしてきた

カラー
についての情報があります。

今回は、その色についての情報をご紹介しますね。

 


 

カラーコードを調べる方法

 

ブログ(サイト)などのコンテンツを作る人にとっては、デザインを考えることも必要かなと思います。

でも最初のうちは質より量なので、デザインとかほとんど考えずに、沢山コンテンツを作っていきます。

 

自分にもスキルがつき、しっかり運営していきたい資産ブログを作るなら、もっと快適に見やすいブログにするために、デザインを考えますよね。

 

えば
  私はデザインの勉強を習っていませんが、色についてはいろいろ(←ダジャレではないw)調べてきたな~とふと思ったので、今回全部紹介しますね!

 

一番は、カラーコードですね。

こちらの専門サイトがあります。

原色大辞典

このサイトを開くとこんなトップページですよ。

 

 

この各色にある『#ーーーーー』という英数字がカラーコードになります。

使いたい色が見つかったら、そのカラーコードをコピーして、設定する箇所にペースト(貼り付け)すれば、この色になります。

 

カラーコードから色を調べたい場合

 

逆に、カラーコードの色を調べたいときもあります。

例えば・・・

CSSをいじってカスタマイズしたい時に、あのHTMLの何だかよくわからない画面がありますね^^;w

その中にまぎれて表示されているカラーコードの『#ーーーーー』

「これってどんな色かな~?」
と思うことがあります。

そんな時は、先程の原色大辞典のサイトのこのページを開きます。

色検索

 

このページにカラーコードを入れて検索すると

  • 色のカラーコードがわかる
  • その色が表示されるので見れる

 

これも結構使えますよ^^

 

カラーコード変換ツール

 

もうちょっと深掘りした情報をご紹介します!

えば
  「カラーコードは、もう一種類あった!」
という話です。 

 

カラーコードを指定するとき、#FFFFFFという表記のほかに、

R:255 G:255 B:255という表記をすることがあります。

これは、16進数と10進数の表現の違いによるものです。

このツールは、16進10進変換のための補助ツールです。

 

例えば・・・
私の場合、バナー画像を作ろうと思って、バナークリエイターを使った時に、
#ーーーーーではなく
R:255 G:255 B:255のような数字を入れる必要があったんです。

「なんだこれ??」
って思ったんですが、この専門サイトで一発で変換して解決しました!

カラーコード変換ツール

 

 

配色デザインの参考に『色相環』

 

えば
  私がブログやパワーポイントのスライドを作っていた時に、ときどき色の組み合わせを悩むことがあります。 

 

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

 

なので、画面を印刷して、壁に貼ってます^^

 

 

えば
  でも専門家じゃないので、この図の意味はよくわかりません笑 

ときどき見ています。

 

色使い・色の組み合わせがわかるサイト

 

ブログ・サイトを作る時に、サイトカラーを設定しますね。

STORK(ストーク)の場合、
外観⇒カスタマイズ⇒「サイトカラー設定」の画面も用意されています。

 

 

色使いは管理人の好みや、作るジャンルなどにもよって、悩みどころでもあります。

えば
  私も何度も何度も変更してみたり・・・

こだわりすぎるとキリがないんですが^^; 

 

色使いを考える時に、自分がいいな~♪と思える絶妙な色を使いたいですよね!

 

そんな時はこの専門サイトがおすすめですよ!

Color Hunt

 

色の組み合わせがとても参考になります。

かわいい色も発見できます♪

 

ブログにオススメなカラーコードは?

 

えば
  よくよく調べると、GoogleやYahooやAmazonや楽天市場などで使われている文字色は微妙に違うらしいんです! 

 

私はスプレッドシートに、よく使う色・好きな色のカラーコードを記録してみました。

一度設定したら後はほとんど見ることはありませんが^^;

 

 

えば
  ストークなどテンプレートによっては、文字色を簡単に自分が好きな色に設定できるので、その時にこのカラーコードを参考にします。 

 

その一部がこちらです。

文字 採用理由 カラーコード
テキストリンク おすすめ #0044CC
テキストリンク Google使用 #1a0dab
赤文字 紅唐色 #d23f40
赤文字 強調色 #ff0000
文字色 グレー #383838
文字色 楽天・アマゾン・ヤフー #333333
文字色 一般的な黒 #000000

 

えば
  以外に、GoogleやYahooなどでは文字色って真っ黒(#000000)ではなく、グレーっぽい色が使われているんだなと発見しました! 

 

成約させたいクッションページで使う色を研究した

 

以前Twitterでこんなツイートをしました。

 

 

何か物を買ってほしい記事(成約記事・クッションページ・LP)に色も大事かなと思った時に、赤色が派手だと強い訴求のイメージになるかなと思って。

実際こころの中は欲ばってますが笑^^;

 

過去記事の赤色を全部変えたい時は、プラグインの「Search Regex」でできますよ。

こちらの記事で紹介しています。
wordpressの文字色変更と追加する方法はプラグインで簡単!

 

成約記事の色使いといえば・・・

ポチまであと一歩!!
という大事な販売LPへつながるリンクの色が大事ですよね。

  • テキストリンクの色
  • CTAボタンの色

 

*CTA(コールトゥアクション):[ご購入はこちら]とかのボタンです。

 

 

えば

CTAボタンの色については諸説ありますね・・・

緑、オレンジ、青、赤・・・?

あなたは何色がいいと思いますか?

私はまだ答えを見つけていません^^;

 

成約率(CVR)を高めるための検証方法で、ABテストをする場合、“色を変えてみる”というテスト方法もありますね。

 

色使いを日常でも学べる

 

色使いは“日常生活でも学べる”と思います。

そんな時に必要なのが抽象化思考です。

 

例えば、看板やポスターを見た時に、「なんだか色使いが派手だな~」とか「色使いが素敵でスッキリ見えるな~」と感じたら、

その理由を言葉にしてみます。

本格的に習っていなくても、世の中にある素敵な・綺麗な・上手いコンテンツから(抽象化思考で)教えてもらえるのです。

 

私が公園で“抽象化ゲーム”をしたときに、こんなことを思いました。

 

過去のこの記事に書いています。
公園で抽象化ゲームやってみた!

 

YouTubeのサムネイル画像でも、色使いやデザインが学べたりすると思っています!

個人的にはメンタリストDaiGoさんの動画チャンネルのサムネイルはカッコいいですね^^

「なぜかな?」とじっと見て考えてみたりします笑

 

 

えば

色やデザインを時間があればもっと専門的に学びたいな~と思っています。

なかなか時間がありませんがw

クリエイターとしてのスキルは増やしたいですね!


この本がWEBデザインの色を学ぶ本の中では
一番評価が高いです↓

 

よろしければ応援ポチをよろしくお願いします♡
↓↓↓

人気ブログランキング

 

えばのつぶやき【6月16日】

 

今日は嬉しかったことが1つありました!

『パソコンの画面を撮影してYouTubeにアップする』
という私にとっては高等なスキルができるようになったかもです!
(゜▽゜*)

これまで、何度も挫折してきたので・・・
(´Д|||)
でも、外注さんに動画で説明するという必要がでてきて。

それで必死に調べてたらやっとわかりました!

 

YouTubeのクリエイターツールから、

  1. ライブストリーミング
  2. イベント
  3. 新しいライブイベント
  4. ライブ配信を開始
  5. OK
  6. 画面共有
  7. 配信を開始
  8. 変な画面をどかす
  9. 撮影
  10. 配信を停止

 

なんだか?なところもありますがw

ハングアウトでできました♪
(*‘∀‘)
でもカムタジアスタジオをいつか買いたいと思っていて

サクサク使いこなせる日がいつかくればいいですね~♪
(*´ェ
*)

最後までご覧いただきありがとうございます!

えば
 
LINE@にて最新の情報発信と、個別のご質問を受け付けております!

お友達登録特典
私が使っている『作業日報』を無料プレゼント中です!
”時間を制するものが人生を制す”
ぜひ受け取って、参考にしてみてください^^
⇩⇩⇩
友だち追加 


挑戦したい人のためのアフィリエイト構築術
あなたはこんな希望が
ありませんか?

■副業でお金を稼ぎたい!
■家計の収入を増やしたい!
■依存しない"自由な人生”を手に入れたい!
■情熱を燃やせることを始めたい!
■ネットで稼ぐスキルを身につけたい!
■ずっとあきらめていた人生を変えたい!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

自分で稼ぐスキルを身につければ"自由でワクワクする人生”が待っています。そのために今新しい挑戦を始めましょう。 そんな人を全力で応援したい! 挑戦したい人のためのアフィリエイト構築術をまとめています^^/