プロフェッショナルなWebデザインに見せるための配色を選ぶフレームワーク
海外ブログの翻訳記事です。Webデザインの配色ってどうやって決めてますか？直観でどんどん配色を決めて、はい！できあがり！で納得のいくものができたことがない私です。配色を決めるためにフレームワークを使って考えるといろいろ悩むより効率的ですね。
Webサイトデザインをプロフェッショナルっぽく見せているのは何でしょうか？
その答えは「色」です。
プロによるWebデザインに見せるために全てのプロジェクトでコーポレートブランドブルーを使う必要はありません。
色を考えるという事は、どの色を使うか、どんな風に使うかというフレームワークを作ることです。
色は最も不安定なデザインの要素ですからフレームワークを使って選ぶのが効率的です。
「良い色」というのは、モニターのキャリブレーションやコントラストなどと同様に、個人的な好みや直感のようなとらえどころのないものと密接な関係があります。
しかし色はコンテンツに活力を与えます。
もしあなたがWebサイトについて充分な時間をかけ洗練することが大事だと考えているなら、おそらくこの記事を時間を充分かけて読むことはいとわないでしょう。
そうすればいい色を選択できるようになります。
この記事で私たちは、あなたのWebデザインのために美しいカラーパレットを達成するためにいくつかのテクニックを披露します。
一番簡単な色の選び方は無作為に色を選ぶ事です。
しかし当然Webサイトの見た目も「コーディネイトされていない」見た目になります。
ビジターが初めてサイトに訪れた時、Webサイトのホームページにざっと目を通しますが、色はコンテンツに対する彼らの受け取り方に影響を及ぼします。
このWebサイトはエキサイティング？安心？大胆？味気ない？政治的？型通り？
色は多くの人々が見るたくさんの文字の解釈にさえ影響を与えます。
正しい色を見つけるのは簡単ではありません。
しかし、その過程をシステマティックにすることは可能です。
いいデザイン戦略は必然的にカラースキーム（雰囲気やメッセージを伝えるために選ばれた色の一覧）と、そのアレンジを含みます。
カラースキームは、ウェブサイトの特定の性質に依存します。
例えば銀行と花屋の両方がプロっぽいWebサイトを持つ事ができます。
しかし人々はいかにも法人ぽい青とグレーでコーディネートされたWebサイト（堅苦しい銀行っぽい色）から花を買う傾向がないかもしれません。
そしてライラックと黄緑色（華やかな花屋っぽい色）のアメリカの銀行のWebサイトを想像してみてください。
プロフェッショナルなデザインというのは、内容がシリアスなものでも、気軽なものであっても、ビジターがそのサイトを見た時に違和感なくしっくりくるものです。
色と値が何であってもプロフェッショナルなWebデザインというのは、計算され、調整され、考え抜かれたものです。
グレースケールからはじめよう
Webサイトのデザインを始めるとき、最も良い方法は、色を何も使わない事です。
まずはデザインから色を排除し、基本的なな問題を明らかにする事に手を付けるのが一番いい方法です。
白黒の段階でデザインが正しくないと感じたらすぐに変更できます。
各ページの目的は明確ですか？
デザイン（色はまだありません）はコンテンツを上手く表現していますか？
コンテンツは有益で目が離せない内容ですか？
見出しは明確ですか？
リンクと他のテキストとコントラストされていますか（色なし）？
色はこれらの効果を最大限にします。
しかしレイアウトや構成の問題は色では解決できません。
ですからWebデザインをリデザインするために、まず色を吸い出してください。
上記のようなシンプルな作業を充分にした後にはWebサイトの位置づけ（目的、意義など）がはっきり見えてきます。
このように色を排するとこは基本的な問題の解決策につながります。
私は、ウェブデザイン会社で働いていましたが、そのとき会社のWebサイトをリデザインすることになりました。
オーナーは一人で、プロジェクトをすすめようとしていましたが、一人でそれをするのが難しいと感じ、チームでそれに挑戦することになりました。
就業時間後、へとへとになり、私たちチームの三人はいくつもコーヒーカップを空にし、9番目のスクリーンショットを見ていました。
不意に、私はPhotoshopの「彩度」をゼロにして褐色とネイビーブルーのデザインをグレースケールにしました。
みんなは驚きの声を上げました。基本的なデザインの問題点が分かり、何をすべきかが分かったからです。
週末には、グレーのデザインに「暖かみのある赤」でアクセントされたデザインが出来上がっていました。
以前からのクライアントからは新しいデザインを賞賛され、多数の見込み客からは仕事の依頼の電話がありました。
あなたのカラースキームをPhotoshopの「ぼかし」でテストしてください：
- あなたのWebサイトから少なくとも3つのスクリーンショットを撮ってください。そしてPhotoshopで開きます。
- それぞれの背景のレイヤーの複製を作ってください。
- 10pxのぼかし（ガウス）を新しいレイヤーに設定します。
フィルター→ぼかし（ガウス） - 次に色調補正→ポスタリゼーションで8~12を設定します。
またはフィルタ→ピクセレート→モザイクで15~30pxを設定します。
これは、どの色がWebサイトの中でに優位であるかを示しています。
優位であればある程、その色がビジターの心に強く印象つけられます。
あなたのイメージしているWebサイトの色が優位に立っていますか？
色のない状態のWebサイトのレイアウト、機能の構築が済んでいるなら、いよいよカラーパレットを選びます。
しかし何色を使いますか？何色使いますか？
色の三要素
色には、3つの特性があります: 色相、彩度、および明度です。
色相
色相は色がレインボーカラーのどの部分か、赤とか緑とかということです。
彩度
彩度は色がどれくらい豊かであるかということです: ネオンカラーは非常に飽和しています。パステルはそれほど彩度が高くありません。
ひとつの色合いはパステルからネオンまでの100の色合いを持っていてキレイに並んでいます。
明度
明度は、色がどれくらい明るいかを(すなわち、黒くするためにどれくらい白から近いか)指示します。
何も衝突色（似たような色相）を殺すことはできません。
衝突色を避ける1つの方法は、3番目の色でそれらを切り離すことです。
グレースケールが色の中立であるので、黒、グレーまたは白は最も安全です: あなたは黒、白、およびグレーで虹色のどんな部分とでも調整できます。
2番目の解決策は、異なった割合で色を使用することです。
カラースキームにたとえばバイオレットと茶色があるなら、デザインの中で茶色を多く配し、明るいすみれ色をハイライトとして使うことができるでしょう。
また別の方法は、明度を変えることです。
混じりけのない青と明るいシアン同じような色ですが、ネイビーブルーと軽いシアン(空色)はお互いを打ち消し合う程の対照をなします。
赤とすみれは同系色ですが衝突せず、違った色として見る事ができます。
薄赤色(ピンク)と暗紫色は別の色でしょう。
カラースキームを作る
どうしたらすばらしいカラースキームができるのでしょう?
何百もの色と何千もの組み合わせの中から、あなたはどのように決めればいいでしょう?
小さい静的なウェブサイトのデザイナーはコンテンツから色を得るべきです。
コンテンツ、通常それは写真を意味します。
私が最近造った8ページのWebサイトのデザインはトップに藍色の空を背景に金属製の足場が組まれた写真を置きました。
Photoshopのスポイトツールで空の部分の明るいところ、暗いところをサンプルし、サイドバーやリンク、見出し、フッターに使いました。
クライアントに「どうしてこんなに早く、よくできたWebサイトデザインができるのか？」と聞かれたとき、
「私たちがしたのは色を探しただけです。そして色は既にありました。（写真の中に）」と答えたのです。
迅速にWebサイトをデザインするためには、デザイナーは彼らの顧客、ビジターからインスピレーションを得て写真をストックするべきです。
彼らが魅力に感じている色を示すものはなんでしょう？それは彼らが毎日着ている服です。
ビジターが何を着るか調べてください。
そうすれば、あなたは、どんな色が彼らにとって快適かを知ることができるでしょう。
Webサイトが、リーグスポーツに関するものであれば、みんなが何を着るかではなくユニフォームの方がいいでしょう。
あなたがあなたのWebサイトのビジターの写真を手に入れるほど幸運であったなら、できるだけチームでそれらを見てください。
あなたに必要なのは客観的な視点です。
もし写真がないなら、買い物にでかけましょう。
服飾デザイナーはあらゆるムードとライフスタイルのための素晴らしい色感覚を持っています。
でかけるのは5番街のオートクチュールである必要はありません。
Googleで「キャンプ用品店」「ベビーウェア」「スキー用品店」「水着売り場」「カジュアルウェア」と検索すればとても素晴らしい色の配色を見つける事ができるでしょう。
彼ら（ビジター）は自分の趣味にあった服を着ます。
あなたが彼らが好きな色を使用すると、彼らはあなたのウェブサイトは快適であると感じるでしょう。
良いカラースキームをつくろう
良いカラースキームには、ある特性があります。
それはデザインの一貫性を保つためのフレームワーク、ガイドラインとなることです。
- Webサイトにうまく合うと思う2~5つの色を選んでください。
- ポイント：これらの色がデザインと関係あるか説明できますか？
- ポイント：それぞれの色をなぜ選んだのか考えてください。
- ポイント：白や黒と明確に違いますか？
例をあげると:
気持ちが落ち着くような暖かい色を選びました。
ここにロジックは必要ありません。「秋」を目標に直感で選びました。
Photoshopで、白、黒のレイヤーをつくり、ブレンドモード：「ソフトライト」に設定します。
（上部に白、下部に黒をブレンドしています。）
一番明るい色が暗くなりすぎたので、黒のレイヤーの不透明度を調整しました。
色に統一感を出すために「赤」で塗りつぶしたレイヤーを作成しました。
混合モードは「カラー」に設定し、不透明は約40%に切り換えました。
（レイヤーの重ね順は非常に重要です。色は、「カラー」層が白黒の層の下におかれているかどうかで変化します。）
これで15色できました。
ここからそれぞれの色からトーンの違う4色を選びます。
それぞれの色には明度の違う色があります。
0to255.comで明度の違う色を簡単に確認できるので便利です。
実験をして色々試してみてください。
赤以外を加えるとどう見えるでしょう？
わずかに明度を下げるとどうなるでしょう?
ガラッと変えてみました。
同じように「緑」で塗りつぶし、「カラー」モードでブレンドしたレイヤーを画質調整 → 色相・明度で調整。
今度は「秋」とは結びつかないイメージになりましたが、おそらく、復活祭のパレットに使用できそうです。
フレームワークを使って写真からカラーを抽出してみよう
最も簡単な解決策は、あなたのデザインに合う写真を見つけることです。
カラースキームを作るのをがんばってください。
主要な色を探すために写真をうまく使ってください。
多くのストック写真ウェブサイトは、色で写真を探す事ができます。
（赤、緑、青の写真など）
写真がカラースキームに合わないなら、色のレイヤーを重ねて下さい:
- フォトショップでイメージを開いてください。
- 新しい層を作成してください。 「カラー」に混合モードを設定してください。
- パレット、望ましくは最も密接にイメージに合っているものから色の1つでその層を満たしてください。
- カラーレイヤーの不透明を50%に設定してください。
- あなたのWebサイトのイメージに合うようにレイヤーを調整してください。（カラーレイヤーの不透明f度、カラーそのものなど）
- このテクニックは写真やイラスト、アイコンなど画像ベースのものに摘要できます。
微妙な変化を付けたい時にはテクスチャを使う
色合い、明度、色彩のわずかな変化でテクスチャを作ることができます。
モノクロのテクスチャ(すなわち、1つの色だけで作ったテクスチャ)とパターンは微妙な変化をほとんどのウェブサイトに提供します。
シンプルなテクスチャは簡単に作れます：
- 部屋の壁の写真や、表面がザラザラとした何かを取ってください。
- Photoshopで開きます。
- 背景をコピーしてください、そして、それを「テクスチャ1」と名前をつけます。
- カラースキームから選んだ色で背景を塗りつぶしてください。
- テクスチャ1を不透明度を30%、「ソフトライト」の混合モードにします。
- ウェブサイトでそれを十分に試してください。 しっくりこないならレイヤーを調整してください。
プロフェッショナルな見た目
でたらめに選ばれた色はまったく「プロフェッショナル」なデザインに見えません。
フレームワークを使ってカラースキームを作ってください。
そうすればどんな内容のWebサイトでも、ビジターが快適だと感じるデザインを作る事ができるでしょう。
Tips
-
あなたが良いカラー・スキームを作りたいとき、少なくとも1週間それを十分に試してください。
色を評価するのは時間がたつにつれて成熟する直観を必要とします。
計画の個性を完全に吸収する時間を自分に与えてください。 -
あなたが良いカラー・スキームを作りたいとき、それを聞き古したものを元にしないでください。
あなたの訪問者の趣味、あなたの趣味は、時間がたつにつれて、変化します。
メモを取って、4カ月後に色を見直してください。
次に、尋ねてください、そして、それらはまだ適切ですか?そうでなければ、何が変化しましたか?どんな要素があなたの調整に影響を及ぼすでしょうか? -
はでな色彩は控えめに使用してください。
何かはでに虹色に輝いているものは訪問者を引きつけるでしょうが、いたる所でそれを見ると、彼らは混乱します。 -
みなさんの中にはカラースキームは小幅でいいと考える人もいます。
何らかの余裕を加え、デザインに深さを与えてください。 -
赤、緑色、青、黄色などの純粋で単純な色相を避けてください。
色合いをそれらに与えてください: わずかにバイオレットの混じった赤、すこし緑がかった青、オレンジが混じった「暖かみを感じる」黄色など。 - あせた色がどう見えるか確認してください。 赤を選ぶなら、薄い赤（ピンク）は女性っぽい、暗い赤はさびか血液に似ていることを意識してください。黄色は太陽の色から濁った茶色に。濃紺が神秘的であり、明るい青は落ち着いた雰囲気があります。
- Macユーザはスクリーンを設定してください。「System Preferences」に行ってください、そして、「Universal Access」をクリックしてください。 あなたのディスプレイを「Use grayscale.」に設定します。この設定はあなたがフィルム・ノアールの気分の時にも役に立ちます。
- ウェブサイトがとてもアクティブなコンテンツであると感じてもあなたが、中立的な色のバックグラウンドを使用してください。黒、白、およびグレーはほとんどあらゆる色と共にうまくいきます。
- 広域の色付けされたフィールドに小さいテキスト(たとえば、14ポイント以下)をマッチさせたいなら、テキストは標準より暗い色合いにしてください。これは文字の浮き上がりを防止します。
- より少ない色相の、より多くの色合いを使用してください。
- 「よい見た目」は、直感的です。しかし、直観というのはプロジェクトに資金を供給するクライアントの権威とあなたのエゴ、そしてWebサイトのビジターに選ばれるかということの間の戦いです。
- コンテンツを際立たせるために、和らげた、際立たない背景を使用してください：
