2018.08.26いい感じのサイトにしたいけど、なんか色がごちゃごちゃしてて見にくいなあ......。素人でも見やすくてプロみたいな色の組み合わせが選べないかな。参考になるか分かりませんが、最初に当ブログの色設計について触れておきます。考えて選んでますよ、というアピールですかね。笑ブログはじめて数日の記事なので、今後変わってたらすみません^^;基本的には以下の5色を中心に使っています。メインが青色、アクセントが黄色です。#f2f7ff:背景カラーのほとんど白に近い水色(背景)#10316b:かなり濃いめの紺色(メニューバー、フッター、ボタン系、囲いなど)#0b409c:上よりやや明るく爽やかな色合いの青(文字色、強調用など)#fdbe34:メインの少し深みのある黄色(Hタグ、強調など)#fef8ea:メインの黄色から明度を上げて彩度を落とした色(Hタグ背景、目次背景など)また文字色などで以下の3色をポイントで使っています。#434343:濃い灰色(文字色など)#ededed:灰色(表や一部の強調しない横線など)#fff:白(紺色利用時の文字など)この他、ワンポイントで使う注意とかリンクボタンみたいな部分はそのまま使っています。色選びの大原則を理解する軽い基礎知識これだけ覚えておきましょう。それぞれ色がもっているイメージ赤なら情熱、青ならクール、緑は優しい。皆さんでも色に対してのイメージがあると思います。いうイメージはだいたい合っていて、ブログの印象を決める効果があります。ひとつずつ書くのも大変なので、詳しくは以下のサイト様で。色の組み合わせについての話になります。同系色:上の図で隣り合った色。この組み合わせで揃えるとブログに統一感が生まれます。反対色、補色:上の図で正反対の色とその周辺。この組み合わせはお互いを目立たせやすくします。基本的には同系色でまとめて、強調したい部分にアクセントとして反対色を入れると良いですね。明度が同じグループのことをトーンと言います。彩度:鮮やかなほど彩度が高く、淡いほど彩度が低くなります。明度:黒っぽいほど明度が低く、白っぽいほど明度が高くなります。トーンが同じか近いグループを選ぶと統一感が出来て良い感じになります。同じ色でも彩度や明度を少し落とすと微妙な色合いを表現出来るようになります。先程から出ている色の円は、色ごとに配置が決まっています。これを踏まえてブログをきれいに彩っていきましょう。手順ってほどじゃないかもしれないが......。Huntで探す70:25:5の法則に乗せる(4色で足りない場合は)メインカラーのトーンを変えて色を増やすプラスアルファテーマカラーを決める何はともあれテーマカラーの1色を決めたいところ。当ブログみたいな青系は誰のどんなブログでも外れにくいと思いますが、インパクトはやや弱めかもしれません。このブログの場合は今後イラストを多様することも考え、あまり自己主張の強くない色を中心にしています。Huntを眺めて決めても良いと思います。Huntって有名なサイトがありまして、いい感じの4色組み合わせがたくさん投稿されています。ユーザー評価も載っているので、評価が高くて自分でもいいなと思った組み合わせを選ぶだけでプロの配色が手に入ります。Huntで探す当ブログも大変お世話になりました。そこまでメジャーではない組み合わせかもです。artists.colorhunt.coやっぱ全部自分で考えるとごちゃごちゃになりますので、大いに参考にしたいですね。70:25:5の法則に乗せる70:25:5は配色バランスの黄金比と言われています。ベースカラー70%:背景や余白の色メインカラー25%:イメージカラーサブカラー5%:メインカラーを引き立たせる補佐的な色ブログ全体を見て、メイン3色がこの比率になっていると整った印象を与えられるみたいですね。ブログ上で色をつける部分はいくつかあると思いますが、Hタグリスト(箇条書き)強調文字アイコンその他写真などこのあたりで色の割当てが偏りすぎないようにすれば完璧です。Huntの4色を中心にしつつ、ちょっと色が足りないなと思ったときは彩度や明度を少しだけ変えて使いましょう。同系統の色合いなので浮いて見えにくいです。プラスアルファあとは......このあたりも注意しとくといいかも。あれもこれも目立たせすぎない:強調色は1つの記事に2~3か所くらいがちょうどいいです。原色は避けたい:はっきりしすぎている原色は目に優しくないので避けたほうが無難。白黒も結構強い色味がありますので、文字色は濃い灰色や茶色がおすすめ。画像や引用が適度に色づけしてくれる:文字ばっかりのサイトでも、ブログカードとかTwitter引用とかで思ったよりカラフルになります。あってもきりがないのでこのくらいで。リフォームで部屋の壁紙を変えるだけでまったく違う部屋みたいに感じますよね。同じように、色を変えるのは最も手軽なブログのイメージチェンジ手段になります。うまく使っていきましょう。LINEフォローするこのブログは和波の運営する創作活動ブログです。記事の質問やお仕事の相談など、お問い合わせフォームにてお気軽にご連絡ください。wanami和波の創作活動ブログ_xxfiction他にはこんな記事も読まれています。(7)スポンサーリンク。