Webデザインの配色が苦手だけど、がんばる。

Q.どうして苦手なの？→A.昔から何か変なんだよ。こっちが知りたいよ！（泣）

昔は良き時代だったよね…HTMLしかないような感じで、ちゃんとした装飾とかできなかったからさ、

こういった感じで

とりあえず文字を大きくしたり、

こんな感じで

文字色を変えるくらいしかできなかったからね！

今は色々できるようになって良くなったけど、「デザインが苦手」がバレちゃう。
困ったことにさ、自分じゃどうにもできないんだよね！

Q.Webデザインの引き出しを増やせば？→A.「毎回同じ」で通用する正解を教えて。

「これがカッコいい」とか「これが可愛い」とか「これが決まっている！」とか、正解ないじゃん。
法則やルールがあるから、ある程度は何とかなるけどさ、最終的に人の感想になるじゃん。

答えって毎回同じじゃないじゃん。だから、「正しい状態」を知らないと、「あれ？ 何か違うよね…？」ってことになるわけで！（泣）

一通りボヤいたところでWebデザインの配色に向き合いまして。（本題です）

フリーランスになる前は、デザイナーにお任せできていたので問題なかったです。
副業でも、ぼくよりデザインできる人もいたし。

開業して暫くの間は、自分のサイトだから、最低限見れる状態だったら問題なかったし。

PV数が増えてくるなら、いつかは何とかしないとな…とは思っていました。

要は誰にも迷惑がかからない状態で見るのに支障がなければOKだったわけです。

でも、いつまでもこのままというわけにはいきません。
デザイナーと一緒に仕事をするようになるまでは一人で対応するのですが、WordPressのテーマで実装をしても、避けて通れない配色問題。

ホームページ（Webサイト）制作はデザインの問題があったので、「Webコンサルティング・SEO」でサービス提供していたのですが、本格的に作り直さないといけないホームページのリニューアルのお仕事もいただくようになりまして。

(注)わざわざ、このためにツイートした。

ということで、時間をかけてもいいから、配色を決める方法を見つけるか、プロとしてお金をいただいて提供できるくらいのレベルで身につける必要が出てきてしまいました。

クライアントのホームページで「アクセントカラーが欲しかった」のが最初のきっかけではあったのですが、自分の事業用サイトも、多数の色を使いすぎで、まとまりがなかったので……。

（1）Webサイトの配色の見直しで、最初にやったこと

まずは「アクセントカラーをどうやって決めるのか？」で考えました。
一番分かりやすいのは「補色」「反対色」です。

ただ、自分のサイトにしてもクライアントのホームページにしても、青系のカラーだったので、補色が黄系のカラーで、しかもキレイじゃない色でして。あと、背景色に設定したときに白文字だと変だし黒文字だと何か見づらい……。

（2）原点回帰。Google検索で「Webサイト配色ツール」で探す。

法則があるなら自動化ができるはずで、自動化ができるならツールがあるはず。だから、「Webサイト配色ツール」で検索して、見つかったものを実際に試してみて、使いやすいものを探します。

そこで数時間ほど色々悩んだ末に見つけたツールが「配色の見本帳（色検索）」です。
このツールのおかげで、Webサイトの配色方法が分かり、今後の対応として適用できそうです…！

ツールの制作者、本当にありがとうございます…っ！（感涙）

色を指定するときは、「色のコントラストチェッカー」で、背景色と文字のコントラスト比を調べようね！

syncer

色のコントラストチェッカー | 文字色と背景色の組み合わせを確認 最適な文字色と背景色の組み合わせを確認できるウェブサービスです。

最終的に事業用サイトの配色がどうなったのか？

SWELLの「エディター設定」で色々なスタイルの設定ができる都合とサービスカラーを決めているため、色数は比較的多いままですが、意味のあるもの以外は1色で統一するなどで調整したこともあり、大分落ち着いた配色になったのではないかと思います。

お問い合わせ誘導ボタンのようなアクセントカラーとリンクカラーは落ち着かせると「分からん！」となってしまったので、配色ツール内にあった「アクセントカラー」と「目立つ青系のカラー」で設定しました。リンクカラーはともかく、お問い合わせ誘導ボタンは、すっごい目立つね！

少なくとも、フォントサイズ以外で「どれが重要な情報なんだ？」というのは前よりも分かりやすくなったのではないかと。

カラフルで鮮やかなのは「クリエイトアコード」のロゴ（左側のCっぽいやつ）だけでいいのよ…！

修正したときにSWELLのエディタの設定が優先されてしまうし、個別で設定すると後々面倒なので、カスタマイズでCSS上書きで対応しています。

余談「米印、アスタリスクについて」

対応中、たまたま米印やアスタリスクは音声ブラウザが認識できないことがあると知りました。
意識していなかったので、調べてみたところ、他にも色々と認識されにくい情報もあるようです。

例えば、年月日の表記は「2022年12月2日」のようにしないと、スラッシュはスラッシュとして読み上げられてしまうなど。

Bigmac inc

webデザイナーが気をつけるべきアクセシビリティ | Bigmac inc アクセシビリティとは？ アクセシビリティとは、そのまま訳せば『どれだけアクセスしやすいか』という意味です。 webサイトに関するアクセシビリティとは、障害者や高齢者…

閲覧者への配慮から純粋に「戻る」だけのボタンやリンクは避けるようにしていましたが、正直意識できていなかったです……。

文字を一括置換してくれるプラグインで修正したものの、英単語やアルファベットの単位表記の他、見落としている部分はあるかもしれませんが、今後気をつけるように配慮するとして、今回の対応を終えたいと思います。

今後も定期的に見直して整えていきたいと思います！