配色やデザインが全然分からない
どもども。色彩感覚ゼロ。りくま（@Rikuma_）です。
これまで幾つかサイトやブログを開設してきたのだけど、作成時に毎回ブチ当たる壁が「配色」や「デザイン」など、見た目の問題。
センスないのもあるし、昔から絵が絶望的に下手なのもあってか、どんな色彩にすればいいのか、どんなパーツ構成にすればいいのか、全く分からない。
なのでいつも混乱するんですよ。先月のカスタマイズ大作戦でワイヤーフレームという手法を初めて導入したのも、結局のところ「どんなデザインにすればいいのか分からず大混乱したから」。
配色の本も何冊か買ったし、初心者向けに解説されてるサイトやブログの記事も読んだけど、キッチリ理解できてるとは言い難い。で、いっつもテキトーなデザインにしてしまう。
素人なりに考えた当ブログの基本的な色調
デザイナーさんなど、デザインの玄人から見れば現在も「なってねえな～」となるのかもしれないのだけど、昨年末に当ブログの作成を始めた時に考えたデザインのコンセプトは以下の通りだった。
2. まぶしくならないような配色を。
3. 難しいことは分からんのでシンプルに。
1番の「緑に」ってのはテキトーです。今まで青とか黒とかをベースカラーにしたブログ作ってたので、次は緑かなっていう。「緑がイチバン好きよ！」ではない。
3番の「シンプルに」ってのは、言い換えれば「地味」というか、「派手に／カラフルに／クールにする技術やアイデアがない」というだけ。
2番の「まぶしくならない」ってのは、私自身あんまり目が良くなくて、これまでも自分のブログを見て「まぶしいなぁ」と思うことがしばしばあったので、今回なんとかそこを改善できないだろうかと。
ブログ開設前の時点でいろいろ参考になる書籍やブログ記事を基に計画した「なるべくまぶしくならない色調」として、
◆記事部分などの背景・白は、「真っ白（#FFFFFF）」ではなく、「ほんの少しだけ暗い白（#FAFAFA）」に。
◆文字色は「真っ黒（#000000）」ではなく、「少しグレーに近めの黒（#333333）」に → 白と黒の差を少しでも少なくするように。
みたいな事を自分なりに考え作った。正解なのかどうかは今も分からないんだけど。
で、問題がベースカラーを基本とした緑の使い方。
色彩パレットなどのツールを見て「お、この緑はカッコいいな」などと思った緑系統の色を片っ端からメモって、いろんなパーツで異なる緑を使ってた。おそらく7～8種類くらいの緑を使ってたはず。
他にもタグの背景色に黄色を使ったり、文字強調で真っ赤を使ったり、色のバランスとか全然考えてなかった。（考えたとして上手くできたかどうかって問題は置いといて）
先月のカスタマイズ大作戦で、まずベースカラーを中心としたブログ全体の配色をもう一度見直してみよう、ってのも大テーマの一つでした。
この記事とツールのおかげでベースカラー改造に着手
ベースカラーどうしよっかなー、と考えてた時に「はてブ・ホットエントリー」に入ってた以下の記事。
その中でも「スゲー！」と感動したのが、以下のスライド。
「なぜ色選びに失敗してしまうのか」
「調和のとれた色」
「顕色系」
「人間の知覚に近い配色」
「彩度が程よく抑えられる（＝つまりまぶしくならない）」
すっごく勉強になりました。私と同じように「色をどう使えばいいか分からんのよねぇ」とお嘆きの方々、上のスライドを読まれることをオススメします。
で、これらの配色理論を簡単に実現できて色を選べるWebサービスが、今回紹介する「調和配色アプリ HUE / 360」。
[ HUE / 360 ] The Color Scheme Application
使い方はとても簡単です
↑「HUE / 360」の初期表示。
↑画面の中央少し左に「Brightness」という箇所があります。これは明るさを選択するところ。最初は一番左になっていて、これが一番明るい色調整。右に行けば行くほど選択できる色のパターンが暗く（＝黒に近く）なっていきます。
↑「Brightness」の左から5番目の四角をクリックすると、選べる色のパターンが全体的に暗くなってるのが分かりますでしょうか。一番右をクリックすると全体がほぼ黒になります。
↑今回のカスタマイズは「まぶしさを抑えたい＝彩度を落とそう」という主旨もあったので、「Brightness」を左から2番目で設定してみました。初期表示よりも若干暗め。
↑ベースカラーは緑なので、「これがいいかな」と緑のマスをポチッとクリックすると、色彩バランスを考慮して一部の色のみが選択可能になります。
私は何も悩まなくていい。自動でチョイスしてくれるんですよ。こんなにありがたいことはないｗ
↑画面左下には、いまポチッとクリックで選択した色が表示されてます。
あとは「これがいいかな」と試行錯誤しながら、ブログで使いたい色をポチポチしていくだけ。最初の選択で色相バランスが自動的に考慮されてますので、それだけでも「素人がテキトーに色を選ぶ」状態よりは向上してるはず。
↑5色ほど選んでみました。今回のエントリーのためテスト的に選択したもので、実際にブログで使用してる色とは異なります。
色のマスをポチリした順番で画面左下に色がどんどん追加されていきます。色の右側にある×印をクリックすると選択がキャンセルされ、最初に選択した左端のベースカラーの×印をクリックすると全ての色が一括クリアされます。
ベースカラーの反対側（対角線）にある赤を強調文字として使おう、という意図で1つだけセレクトしてます。この赤も彩度が抑えられた赤（というか紫に近い色）なので、まぶしくならないはず。
↑ベースカラーの「Print User Color」という部分をクリックすると、選択した全ての色のコードが一覧で表示されます。「#37A372」などの文字はコピー＆ペーストできるので、CSSファイル作成作業がラクチン。一覧の右上にある×印をクリックで表示が消えます。
こんな感じで、どの色を選べばいいかいつも悩んでしまうノンデザイナーな私でも、このツールのおかげでベースカラーを始めブログ全体の色相をスムーズに見直すことが出来ました。
以前よりは統一された色バランスにしたつもりなんですけど、どうでしょねー。