どうも～！りとやん(@ritoyan_oneplus)です│´ω`)ﾉ
今回は、ブログのカラー設定についてお話しします。
ノーセンスの私ですので、自己満100％となっております(笑)
もくじ
私のブログイメージは、『マカロン』！
カタチから入った私。
WordPressを運営する上で、見た目よりも中身の方が大事なのはもちろんですが、
自分のモチベーションアップの為に私は見た目から入りました。
今となってはココから入って良かったなーと思ってます。
パソコンを開いて自分の選んだイメージのブログを見ると
もっと更新頑張ろうという活力になってます。
そして私のブログイメージですが、
アメブロとは違うイメージ・自分にはないイメージにしたかったので
あえて『マカロン』を連想するようなカラーにしました。
好きなカラーのブラウン、ブルーグリーン、パープルを使いたいと思ってました。
テーマカラーを決める
ペールトーンで柔らかい雰囲気に
イメージは、『マカロン』にしたのですが、今度はブログの軸となるテーマカラー！
ペールトーン同士の色を組み合わせると、スウィートな印象を与えることができるとのことでペールトーンを使ってみることにしました。
でもペールトーンは、淡い色でハッキリしないのでボヤっとしそうだなーと
迷いましたが自分が好きなカラーなのであえて選んでみることに。
ペールトーンとは？
薄い調子の色のこと。淡くて、はっきりしない色のことです。
私のカラー設定は☟
カラーコードは伏せますが・・・
テーマカラーは、淡いブラウン
ヘッダー・フッターは、淡いグリーン
アクセントカラーは、淡いピンクにしました。
ヘッダー・フッターとアクセントカラーは目立つように
補色に近い色にしました。
補色とは・・・
色相環で正反対に位置する関係の色の組み合わせになります。
色を引き立たせたい時には、補色(反対色)を使うのがおススメです！
例えば、サラダの場合、レタスやキュウリなどの緑にトマトの赤があるとおいしそうに見えますよね？
こういうのが補色です。
参考資料は☟
イメージごとにカラーコードも載ってるので
参考にされてみてもいいかもです。
私はこちらの本の『スウィート』を参考にさせていただきました。
あとは、ネットで自分のイメージがあるなら
『○○ 配色』と検索するとカラーコードが出てきますよ。
○○はイメージ(例えば、元気とか・・・)
ちなみに私は、アメブロはじめこちらのブログもカラーは
[jin-button-float visual=”float” hover=”” radius=”50px” color1=”#54dcef” color2=”#0794E8″ url=”https://www.colordic.org/” target=”_self”]原色大辞典[/jin-button-float]
こちらを参考にしています。
[chat face=”りとやん喜.jpeg” name=”りとやん” align=”left” border=”gray” bg=”none” style=”maru”]
これでも一応色彩能力検定3級持ってるので
色を見るのは好きです
2級はあと数点で落ちました(笑)[/chat]
ブログの大事な色変えてますか？
ユーザーファーストで色を変更
私の中でブログの中で大事な色と言えば
- リンクカラー
- 文字の色
リンクカラーは、リンクを貼ってるところにマウスを移動させると
こういうリンクを貼ってますよというのが分かる色です。
例えば☞わんぷらすろぐ
私の場合は、色は青にしてます。
青色は、クリックされやすいカラーです。
青色は統計でもユーザーが感心する色なんだそうです。
デフォルトで青色になってるかと思うのですが、
私は青は青でもこの色☞『#0044cc』にしています。
ちなみに私のデフォルメの色は『#008db7』この色でした。
どちらの色がリンクカラーだと分かりやすいですか？
私は、上の色かな？と思います。
もしかして、文字の色『黒』じゃないですか？
大手サイトの色を取り入れる
さて続いては、文字の色。
私は、背景の色は『#ffffff』の白にしています。
背景色が白の方が見やすいのでリンクカラーや大事な文章を強調したい時に
背景が白だと目立ちやすいからです。
そして、背景が白だと文字の色は『#000000』の黒にしようと思いますよね？
でもその場合、白と黒のコントラストが強くて目が疲れませんか？
鉛筆の色を思い出してください。
鉛筆の色って黒ではなくてグレーに近いですよね。
だからノートにびっしり文字が書いてあっても目が疲れないんだと思います。
その事からも分かるように、グレーに近い黒にするのがおススメとのことで私も文字の色をグレー寄りの黒に変更しました。
Amazonや楽天市場、ヤフーニュースなどの大手サイトも背景色『#ffffff』の白に
こちらのグレーに近い黒『#333333』を使っています。
デフォルメの黒だと『#000000』この色になります。
大手サイトは長時間見ても目が疲れないので私もそれは真似させてもらいました。
ブログ開設して、記事を書かず色を決めるのに1日ほどかかりました(笑)
でもイメージ戦略(なんの？(笑))って大事だと思うので費やして良かったと思ってます。
まとめ
[box01 title=”私のブログカラー”]
- 自分のこうしたいイメージを考えた
- それによってカラーを考えた
- 引き立たせたいところには、補色を使う
- ブログリンクの色を『#0044cc』に変えた
- 文字の色を『#333333』に変えた[/box01]
[jin-iconbox05]
ブログ開設におすすめな記事は☟
WordPress(ワードプレス)初心者のブログ開設費用まとめ
【ブロガーにおすすめ！】無料で簡単にヘッダーやアイキャッチが作れるアプリ
【オリジナルアイコン】500円から作れるココナラがおすすめ！
[/jin-iconbox05]