このブログの色と雰囲気を決めるまで
「うぇぶ、ひゃっくり」を作るとき、自分好みの淡い色で、息抜きに落ち着いて見られる雰囲気にしたいと思っていました。この記事では、色と雰囲気をどう決めたのかを記録しておきます。
この記事でわかること
- ブログ名とキャラクターの由来
- 使いたい画像から色を決める方法
- 配色で気をつけたいこと（文字の読みやすさ）
- 運用してみて気づいたこと
結論
このブログの色は、先に使いたい画像を選び、それに合う淡い色を探して決めました。好きな色で作ると続けやすく、そのうえで文字の読みやすさだけは好みより優先して確かめています。
Photo by Lucas George Wendt on Unsplash
名前とモチーフの由来
学校の課題で「Webデザイン100選」のブログを作ることになり、検索で上位に出やすいユニークな名前にするといい、と教わりました。そこで「百（ひゃく）」に「ひゃっくり（しゃっくり）」をかけて命名しました。さらに、秋生まれで栗が好きだったので、栗をデザインの題材（モチーフ）にしています（笑）。
名前を決めるだけでも何日も悩みましたが、一度「これだ」と思えると、その後の世界観づくりが一気に楽になった記憶があります。
色は「画像素材」から決めた
先に色の番号（カラーコード）を決めるのではなく、使いたい画像素材から作り始め、それに合う淡い色合いを探して全体を整えました。カチッと決めずに、素材に合わせて寄せていく作り方です。
最初に使う色の組み合わせを決めてしまうと、後から「この素材だと浮いてしまう」ということが起きやすくなります。自分にとっては、素材から決める進め方が合っていました。
このブログはタイトルから世界観を決めていたので、栗のモチーフから色のイメージがしやすかったです。そこからPinterest（画像を集めて見られるサービス）などで参考画像をたくさん見て、合いそうな色合いを探していきました。
色選びで参考にしたもの
具体的な色を探すときは、配色サイトやPinterestで「淡色系」「くすんだ色」といったキーワードで検索し、気になる組み合わせを集めていました。
一つに絞らず、いくつかのパターンを並べて比較することで、自分が本当に好きな色合いがどれなのか、少しずつ輪郭が見えてきた感覚があります。
色を決めるときは、候補を何枚もスマホの待ち受けにして、数日ながめて疲れない色を選びました。
ブログは一つに絞った
じつは別のブログも作ったのですが、複数を管理するのは難しく、一つに集中することにしました。テーマごとにブログを分けた方が整理しやすいと思っていたのですが、実際にやってみると更新が分散して、どちらも中途半端になってしまう感覚がありました。
デザインは「好きなもの」で続けやすく
記事ごとに参考にするサイトはありますが、ブログ自体のデザインは自分の好きなものにしています。勉強も兼ねているので、気軽に発信を続けられる場所にすることを優先しました。
自分らしさを大事にする考え方は、卒業制作でも同じでした。くわしくは「卒業制作のポートフォリオで意識したこと｜Webデザインの専門校での学びの記録」に書いています。
流行に合わせて作り込みすぎると、更新するたびに気疲れしてしまいそうでした。まずは「自分が見ていて落ち着く」ことを優先した結果が、今の形です。
公開してからも、このブログの色や雰囲気について、人に意見を求めることはしていません。ここは自分が好きなように試せる「実験場」のような場所だと考えているからです。人が求めているものと、自分が好きで作るものは違うので、この二つは分けて考えるようにしています。
自分のための場所と、誰かに届けるための制作物を分けておくと、ブログでは思い切った配色を試し、仕事では見る人に合わせた配色を考える、という使い分けもしやすくなるのかもしれません。
配色を決める際に気をつけたいこと
Photo by Maureen Sgro on Unsplash
淡い色合いは優しい印象を作れる一方で、コントラスト（文字と背景の明るさの差）が弱くなりすぎると文字が読みにくくなります。このブログでも、運用を始めてから本文の文字色だけ少し濃いめに調整しました。
ブログとは別のサイトを作ったときには、好きなパステル系の色合いを使いたいと思っていました。ところが、アクセシビリティチェック（文字と背景の色の差が十分かを確かめる確認）で、なかなか基準をクリアできませんでした。いろいろな人に見てもらうことを考えると、好きな色をそのまま使うのは意外と難しいのだと感じた経験です。
Webアクセシビリティの国際的な決まり（WCAG）では、文字と背景のコントラスト比の目安が示されています。淡い色を使いたいときは、背景や装飾には淡い色、文字には濃い色というように使う場所を分けると、好きな色合いを残しやすいと思います。
コントラストは、オンラインのチェックツールでも確認できます。配色を決めた段階で一度確かめておくと、あとから大きく直す手間を減らせるかもしれません。見た目の好みだけでなく、実際の読みやすさを確かめながら微調整していくことが大切だと実感しました。
運用していて気づいたこと
サイトを作った当初に決めた考え方は、今でもほとんどぶれていません。色や雰囲気を最初に言葉にしておいたことで、記事を追加するたびに「この雰囲気に合っているか」を判断する軸ができたのだと思います。
新しい要素を追加するときも、この軸があるので迷いが減り、デザインの一貫性を保ちやすくなっています。色を最初にしっかり決めておくことの効果を、運用してから実感しました。
サイトの色は「続けやすさ」を決める
実は一度だけ、「もっと流行に合わせて変えようか」と思ったことがあります。でも、変更するとなると記事のアイキャッチ画像や挿入画像の雰囲気まで変えないといけないと気づき、やめました。
最初の色選びが、後の運用の手間を左右する。気分で変えられないからこそ、最初の決断をしっかり考えておくことが大切だと、身をもって学んだ出来事でした。
ブログデザインを通して学んだこと
このブログのデザインを自分で決めた経験は、お客様の仕事にも活きています。「なぜこの色を選んだのか」「どんな雰囲気を伝えたかったのか」を、自分の言葉で説明できるようになったからです。
デザインの決断には一つひとつ理由がある、ということを自分の制作物を通して実感できたのは大きな学びでした。これからサイトを作る人にも、まず自分のために一つ作ってみることをおすすめしたいです。
この記事のまとめ
色は「伝えたい雰囲気」と「続けやすさ」から決めると、自分の場合はしっくりきました。デザインの定石よりも、自分が無理なく続けられるかどうかを優先したことが、結果的に良かったと思います。
そのうえで、読みやすさだけは自分の好みより優先して確認する。好きな色を楽しむ場所と、人に届けるための配色を分けて考えることも、運用しながら身についた考え方です。
私のプロフィールは「はじめまして」、これまでに作ったWebサイトやデザインは「ポートフォリオ」にまとめています。制作のご相談は「お問い合わせ」からどうぞ。
よくある質問
Q. ブログのテーマカラーを決めるとき、何から始めればいいですか？
A. 私は画像素材から決めましたが、人によっては自分の好きな色から決める方が合っているかもしれません。続けやすさを優先するのが一番大事だと思います。
Q. 配色を決めるとき、何色くらいに絞ればいいですか？
A. 私の場合は、土台の色・主役の色・目立たせる色の3色くらいに絞りました。色数を増やしすぎると、まとまりがなくなりやすいと感じています。
Q. 途中で配色を変えたくなったらどうしますか？
A. 私も一度悩みましたが、変えると過去の画像やアイキャッチまで直す手間が出るので、最初にしっかり決めておくのが結局は近道だと思います。
Q. パステルカラーは読みにくくなりませんか？
A. 文字にまで淡い色を使うと読みにくくなりやすいです。背景や装飾は淡い色、文字は濃い色と使い分け、コントラスト（文字と背景の色の差）をチェックツールで確かめると安心です。
