サイトを作っていると、
色って、どうやって決めればいいの？
となります。
最初の私は、
「パステル調が好きだから、パステルにしたい」
くらいの感覚でした。
実際にパステル調で整えてみたこともあります。
でも、完成した画面を見たら、
……なんだか幼稚園みたい。
好きな色と、
サイト全体に使ってしっくりくる色は、
同じではないらしい。
そこでanalog03では、
白＋空色＋濃紺
を基本にすることにしました。
でも今度は、
青が難しい。
今回は、
色コードなんて全然分からない私が、AI03に「この青は違う」「もっと白っぽく」と言いながら、サイトの色を調整している話
です。
私は色コードを作れません
サイトの色を変えるとき、
あの色が虹のように出てくる画面で選択しても、
うまく思った色を出すことができません。
まして、色の選択画面でよく見る
#○○○○○○
みたいな文字列は皆目見当もつきません。
いわゆる、
色コード
です。
私はこれを見ても、
何色なのかサッパリ分かりません。
「この色コードを少し明るくして」
なんてことも言えません。
でも、
完成した画面を見て、好きか嫌いかは分かる。
「もっと爽やかにしたい」
「ちょっと青すぎる」
「もう少し白っぽく」
「この青は違う」
そういうことなら言えます。
なので私は、
色コードそのものを考えるのではなく、
完成形のイメージをAI03に伝える
という方法で調整しています。
「パステルが好き」だけでは決まらなかった
私はもともと、
淡い色が好きです。
だから最初は、
パステル調にすれば、きっと好みになる。
と思っていました。
でも実際に画面全体をパステルにしてみると、
思っていたよりも、
かわいすぎる。
幼く見える。
という印象になりました。
色そのものは好きなのに、
サイト全体になると、
「これじゃない」
となる。
ここで初めて、
好きな色と、サイトに合う色は別なんだ
と分かりました。
analog03では、白＋空色＋濃紺にしてみた
そこでanalog03では、
白を多めにして、
空色＋濃紺
を使うことにしました。
白が多いと、
全体が軽く見える。
空色を入れると、
少し爽やかになる。
濃紺を入れると、
文字や見出しが締まる。
最初は、
これでいけそう。
と思いました。
でも、
ここでも終わりませんでした。
青は、思っていたより難しい
青って、
少し変わるだけで印象がかなり違います。
濃すぎると、
堅い。
企業サイトっぽい。
少し冷たい。
逆に明るすぎると、
今度は、
軽すぎる。
子どもっぽい。
ぼやける。
となることがあります。
私はAI03に、
「もっと白っぽく」
「この青は少し強い」
「もう少し爽やかに」
「濃紺は残したい」
と伝えて、
そのたびに色を調整してもらっています。
私は色コードを触っているというより、
見た印象を伝えているだけ。
AI03がそれを、
実際の色に変えてくれます。
記事がない時の配色は、あまり当てにならなかった
これも、実際に作っていて分かったことです。
サイトを作り始めたばかりの頃は、
記事がほとんどありません。
その状態で、
ヘッダー。
見出し。
ボタン。
背景。
などの色を見て、
「いい感じ」
と思っていました。
でも、
記事が増えて、
アイキャッチ画像が並んで、
カテゴリ名や見出しが増えてくると、
同じ色なのに、印象が変わる。
ということがありました。
単体で見るとちょうどいい青でも、
画面の中に何か所も入ると、
思っていたより違和感がある。
逆に、
白を増やしすぎると、
少しぼんやりする。
記事が入っていない状態で見た配色と、
実際にサイトとして使い始めた時の見え方は、
かなり違いました。
アイキャッチが並ぶと、また印象が変わる
analog03では、
記事ごとにアイキャッチ画像も作っています。
そこにも、
白。
空色。
濃紺。
を使っています。
すると、
サイト本体だけ見ていた時には気にならなかった青が、
記事一覧では、
急に多く見える。
ということもありました。
見出しの青。
カテゴリの青。
リンクの青。
アイキャッチの青。
それぞれ単体では悪くなくても、
全部並ぶと、
思ったのと違う……
となる。
なので、
サイトの色は、
ひとつずつ決めるだけでは足りない
のだと思いました。
画面全体で見ないと、
分からない。
AI03に「この色が正解」を聞いているわけではない
私は、
「一番いい青を教えて」
とAI03に決めてもらっているわけではありません。
AI03が出した色を見て、
私が、
「違う」
と言うこともあります。
むしろ、
かなりあります。
でも私は、
「じゃあ、どの色コードにすればいいの？」までは分かりません。
なので、
「違う」は私。
「じゃあこうする？」はAI03。
という感じです。
サイト作りでも、
私が細かい技術を理解しているわけではありません。
でも、
「こうしたい」
「これは違う」
は言える。
そこからAI03に、
実現する方法を出してもらっています。
サイトの色は、最初に決めて終わりではなかった
私は最初、
サイトの色というのは、
最初にテーマカラーを決めたら、
あとはそのまま使うものだと思っていました。
でも実際には、
記事が増える。
アイキャッチが増える。
文字量が増える。
サイト全体の形が見えてくる。
そのたびに、
「あれ、この色ちょっと違うかも」
となります。
なので今は、
配色は、サイトが育つのを見ながら合わせていくもの
くらいに考えています。
まとめ
私は今でも、
色コードを見ても、
どんな色なのかほとんど分かりません。
でも、
この色は好き。
これは違う。
もう少し白っぽくしたい。
ということは分かります。
だから、
その感覚をAI03に伝えて、
実際の色にしてもらう。
そしてサイトに入れて、
記事を並べて、
また全体を見る。
今のanalog03も、
これだ！と納得はしていません。
サイトの色は、まだまだ試行錯誤中です。
たぶんこれからも、
「この青、違うな。」
と言いながら、
少しずつ調整していくと思います。
サイトの色は、
最初に一度決めて終わりではありませんでした。
記事が増えて、
サイトが育つたびに、
また見え方も変わる。
今のところ、
それが私の一番大きな発見です。
