色について | ひかえめなサイトのために

サイトの色について

いくつもブログやサイトやこまごましたものを持っていて、たとえばそれらをaboutmeでまとめているとすると、、

飛ぶ先ごとにデザインも色もバラバラだと、同じ人のものなのかな？みたいな気持ちになるかも。すくなくとも私の持ち物はバラバラしていて落ち着かない。

aboutmeは色をカスタマイズできる（一番左の刷毛のついたアイコンで）ので、まずはここで配色を試して、自分のテーマカラーを決めるといいかも。他のブログやサイトもテーマカラーで揃えてみると、自分の居場所感が少し増えるかなと思います。

テーマカラー、どの色にする？

好きな色で3色の配色をつくる（これが難しい！！）

たとえば、NIPPON COLORS - 日本の伝統色で探してみると……、私の好きな色はこのあたり。

■千草　#3A8FB7
■露草　#2EA9DF
■花浅葱　#1E88A8
■縹　#006284
■群青　#51A8DD
■空　#58B2DC
■新橋　#0089A7
■浅葱　#33A6B8
■白群　#78C2C4
■水　#81C7D4
■瓶覗　#A5DEE4
■錆浅葱　#6699A1
■藍　#0D5661

で、色々試してみた結果、メインカラーを■千草　#3A8FB7、リンクの土台を■縹　#006284に。
アクセントカラーがこの中の色ではいい感じにならなかったので、さっきのサイトで千草や縹をベースにしていい感じのを探した。

■勿忘草　#7DB9DE

これにした。

配色したら、少なくとも自分の持っているデバイス全部で確認してみる。私はWindowsPCとAndroidスマホとiPadで見てみたのだけど、発色が全部見事に違う。
でもチェックすべきは発色ではなく、文字が読みやすいかとかコントラストは大丈夫かとかそういうところ。暗めに出るデバイスだと文字が読みにくいなとか、そういうことがあれば色を調整する。

小さいリンクの説明文がちょっと読みにくいかな、、、
color-sample.com で#7DB9DEを入力、「輝度別配色候補」から薄めの色を選んで再度、試してみる。

■勿忘草　#CEE4F2

ここまでにしてもスマホだとやはり読みにくいかも。オシャレ仕様なのかな？
まあ、仕方がないのでこれで良しとしよう。

ここであと3色、さっきののもっと薄めを用意しとく。背景などの用途のために。
■勿忘草　#CEE4F2
■勿忘草　#E2EFF7
■勿忘草　#F6FAFC

サイトで使うリンクカラー

リンクはリンクだとわかりやすいように、青にしておきたいというのが私の考え。
でもどんな青にする？？

ここで私が参考にしたのはこの記事。

リンクは何色がおすすめ？デフォルトの青色#0000EEは全く使われていない！

どの青にするにしても、私はアンダーラインを追加してひとめでリンクだとわかるようにしました。

そして結局、使う色は■紺青　#113285にした。さきほど決めたテーマカラー、千草や勿忘草の中で見やすくてきれいな色。