こんにちは。ゆめです。仕様・UI設計メインのエンジニア？です。
服装を変えただけで、彼氏ができたらしいと社内で噂になりました。
そんなTHE☆イモ女子の私が、今回は
「センスなしでもそれなりになる！配色ここだけはおさえておけ」
みたいなポイントを自分なりにまとめてみたいと思います。
★心構え★チャレンジ禁止
★その 1★困ったら白をベースに
★その 2★セオリーには従う
★その 3★同じくらいのテンションの色で揃える
★心構え★チャレンジ禁止
まず私に一番足りなかったものが、
「自分は配色センスのないド素人だ」と謙虚になることでした。
実は私、大学時代は芸術分野寄りの情報学を専攻してまして。
色やデザインの基礎とかの単位は持ってるんですよね。
「色相関！？補色！？知ってるよそんなこと～」
ってなってたので、自分のセンスに任せた迷走っぷりは半端なかった。
恥ずかしい。
この心構えをベースに、次のことを意識してます。
★その1★困ったら白をベースに
資料なんかで「色つきの背景にしないとダサく見える」とか
サイトなんかで「テーマカラーを全面に押し出したい」とか言って
果敢に背景色を変えていたときがありました。
今はほぼ白です。
ダサく見えるのは背景のせいじゃないし。
大事な部分がしっかり伝わる、コントラストの申し子白背景、最高。
上に重ねるコンテンツ部分になんの制約も与えない白背景、最高。
サイトやアプリの場合はデザイナーさんがデザイン作ってくれるので、
「私の仕事はユーザーに何を伝えたいかを製作関係者に伝えること」
と割りきりました。
★その2★セオリーには従う
「非デザイナーのデザイン」を語る際に必ず言われることですが、
ベースカラー・メインカラー・アクセントカラーの3色を決めて
とりあえず使い倒すのは初心者にはとても大事です。
参考：
http://www.invision-inc.jp/web/color-combinations/
これを意識することで私の作品はかなりまともになりました。
3色の決め方もどのサイトでも言われますが、私はざっくり以下のように認識してます。
- ベースカラー → 薄くて柔らかい色 (迷ったら白、次点でグレー・ベージュ・ブラウン)
- メインカラー → そのとき使いたい色 (別のブランドサイトを参考にしたり)
- アクセントカラー → メインカラーの補色 (コントラスト強めの鮮やかな色)
個人的には、メインカラーは原色すぎない方が使いやすいです。
EA4C89とか。
FF9800とか。
色が足りない場合は、メインカラーかアクセントカラーを
薄くしたりトーンを落とした色を使っています。
メインが009688なら、4DB6ACとか。
★その3★同じくらいのテンションの色で揃える
そうは言っても、「少し色のパターン増やしたいな」ってことはありますよね。
色を増やしてもごちゃつかないためには、「テンションを揃える」といいと思います。
(たぶん、明度や彩度を意識するってことなんだと思います。)
私のテンションの揃え方ですが、、、
カラーパレット上の位置を参考に調整してます。
たとえば、A4C639を使いたいとして
フォトショのカラーパレット上は、こんな位置です。
したら、追加の色は、398CC6とか。
赤系は受ける印象が揃うようにちょっと調節して、DB5D75とか。
ピックアップした色を並べるとこんな感じ。
A4C639 398CC6 DB5D75
かなり雑ですが、「ちょっと暗めのはっきりした色」みたいな全体の印象が揃っている感じしませんか。
なんとなく言いたいこと伝わるでしょうか？
こんなことを考えながら日々やっていると
一応すっきりと、かつ野暮ったくない程度のものは作れるようになりました。
※プロからすればつっこみどころしかないと思いますが、素人が受ける印象の話で。
1年前に自由に作ってみた資料。
今の資料。
ちなみに、冒頭の「服装変えた」話ですが。
うちの部署は私服勤務OKでして、入りたてのころは私の服装について毎日ダメだしが入るという可愛がりを頂戴しました。
※感謝してます。
※私限定でした。キャラ得です。
仕事がUI設計なので、センスも影響するから･･･と言われ、
まずは服装から取り組みました。割とまじで。
服装におけるポイントも同じで
「白ベース」
「ベース・メイン・アクセントを意識」
していればだいたい先輩からOK出ます。
私は、ベースやメインは淡い色か黒・紺でそろえて、
アクセントはアクセサリーか靴、羽織物でカバーします。
服装が全体的に暗いトーンのときは、
白シャツ中に着たりしてアクセントにしたり。
たぶん一番大事なのは、なんでもそうだと思うんですけど、
「考え、実践する」ことですよね。
機会を作るって大事だなぁと思ってます。
