色でプロフェッショナルな外観を実現する方法

設計が調整され、計画され、プロフェッショナルに見えるのはなぜですか？ 答えは「 色 」です。



すべてのプロジェクトがプロフェッショナルに見えるためにソフトコーポレートブルーを使用する必要はありません。 カラープランニングとは、使用する色とその使用方法を説明する構造を作成することです。 色は最も挑戦的なデザイン要素です。 「良い」色は、個人の好みや直感などのとらえどころのないものと密接に関連していると同時に、モニターのキャリブレーションとコントラストを備えた技術的な立場からのものです。



ただし、コンテンツには色が必須です。 ウェブサイトの完成度を高めるために十分な時間を費やすと、読者はおそらくそれを見るのに十分な時間を費やすでしょう。 適切な色を選択すると、これが可能になります。



この記事では、オンラインプロジェクトの美しい色の組み合わせを実現するためのテクニックのいくつかを確認します。









Webサイトを計画外に見せるための最良の方法は、色をランダムに選択することです。

訪問者が初めてWebサイトのホームページを見るときでも、色はコンテンツに対する態度に影響します。 このウェブサイトはエキサイティングですか？ なだめる？ 勇敢？ 柔らかい？ 政治的？ 公式？



色は、人々が見るものや言葉の認識に影響を与えます。

適切な色を選択するのは簡単ではありませんが、このプロセスは体系化できます。

優れた設計戦略には、カラースキーム（つまり、ムードやメッセージを伝えるために選択されたカラースケール）とこのスキームの編成が含まれます。



プロのウェブサイトを設計するように頼まれたとしましょう。 （そして、それは簡単に酔ったゲームに変わります：クライアントが「プロフェッショナル」、「高品質」または「モダン」という言葉を使用するたびにグラス。「この（他の）Webサイトが好きです。同じことをします。」） 。



配色は、Webサイトの特定の方向によって異なります。 たとえば、銀行と花屋の両方がプロがデザインしたウェブサイトを持つことができます。

しかし、企業の青とオーシャングレーで装飾されたサイトで花を買う傾向はありません。 そして、バンク・オブ・アメリカのウェブサイトが薄紫色で黄緑色になっていると想像してください。



「プロフェッショナル」なデザインは、訪問者に、コンテンツが本当に軽薄であっても、コンテンツを真剣に扱っているサイトを見つけたことを伝えます。 色や価格に関係なく、「プロフェッショナル」とは、調整され、計画され、考え抜かれることを意味します。



グレースケールに目を向ける



色を扱う最良の方法は、ゼロから始めることです。

プロジェクトから色を削除すると、チャートリユースの色合いが最適に機能するかどうかを心配する前に対処する必要がある基本的な問題が明らかになります。 プロジェクトが白黒でよく感じられない場合は、変更を加える時間です。



各ページには明確な目標がありますか？ プロジェクトにはコンテンツの読者がいますか？ コンテンツは説得力があり、インスピレーションを与えますか、または有益ですか？ 見出しを理解していますか？ リンクは残りのテキストと対照的ですか？ 色はこれらの効果を改善しますが、レイアウト、フォント、および全体的な組織の問題は色だけでは解決できません。



再設計するには、まず色を削除します。 原色による過飽和の単純な除去は、サイトが何に基づいているかを実際に示します。 （実際、目標とコンテンツを再評価することで再設計を開始する必要がありますが、それは別の話です）。



色を削除する決定は、独自に決定することがあります。

私はかつてWebデザイン会社と協力して、自分のWebサイトを再設計しました。 所有者は個人的にこのプロジェクトに興味があり、それがうまくいくことを非常に心配していました。 設計を自分で設計するのが難しい作業だと突然思った場合は、チームで設計してみてください。 最後に、3人は数時間の仕事と飲み物の後、9番目のスケッチのスクリーンショットを見つめました。



そして、突然Photoshopレイヤーを整列させ、「彩度を下げる」をクリックして、明るい銅色と紺色のデザインをグレーの濃淡に変えました。 みんな驚いたことに、うまくいきました。

今週の終わりには、赤いアクセントの付いた「暖かい」灰色のプロジェクトがありました。 新しい視聴の際、以前の顧客から賛辞が寄せられ、潜在的な顧客からの電話が増え始めたとき、私たちは正しかったことに気付きました。



「斜視」Photoshopテストで配色を分析します。

1.サイトから少なくとも3ページのスクリーンショットを撮ります。 Photoshopでそれらを開きます。

2.各スクリーンショットの背景レイヤーをコピーします（レイヤー→レイヤーの複製、MacではCommand + J、WindowsではControl + J）。

3.約10ピクセルのガウスぼかしを新しいレイヤーに適用します。

4.画像→調整→ポスタライズを実行します。 レベル8から12またはフィルター→ピクセル化→モザイクのみを適用します。 15〜30ピクセルを適用します。







これは、どの色が本当に支配的かを示します。 支配的な色ほど、訪問者による知覚のスキームは難しくなります。



サイト構造が色なしのままになったらすぐに、パレットを選択します。 しかし、どれですか？ そして、使用する色の数は？



色を選ぶ







色には、 色相 、 彩度、 レベル （明度とも呼ばれる）の3つの要素があります 。



彩度は、色の豊かさを示します。ネオン色は非常に彩度が高く、パステルは彩度が低くなります。



レベルは、色の明るさ（つまり、黒または白にどれだけ近いか）を示します。



色相は、赤や緑など、色が虹のどの部分に属しているかを示します。 これは、人々を混乱させる機能です。

競合する色合いのような配色を損なうものはありません。 デザインは、パステルからネオンまで、1つの色合いの100の色合いを持つことができ、それでも計画どおりに見えます。 しかし、シェードが正しく混合されていない場合、スキームはバラバラになります。



色の競合を回避する1つの方法は、3番目の色に分離することです。 黒、グレー、または白の近辺は、明るさが中立的であるため、最も安全です。虹の任意の部分をこれらの色で安全に調整できます。



2番目の解決策は、さまざまな比率のシェードを使用することです。 たとえば、カラーシステムに紫と茶色がある場合、デザインはいくつかの明るい紫のハイライトで茶色の多くの色合いを持つことができます。



レベルを変更する別の方法があります。 純粋な青と明るい青はまあまあの組み合わせを作成しますが、ネイビーとライトブルー（空色）は、互いに目立つように十分に対比されます。 赤と紫は、競合しないように十分に異なっていても、強烈に見えないように十分に近い場合があります。 淡い赤（ピンク）と濃い紫が目に見える違いを生みます。



残念ながら、悪い色の組み合わせを避けることは、良い色の組み合わせを選ぶほど良くありません。 配色は、満足している場合は成功しませんが、視聴者が快適に感じる場合のみです。



クールなスキームを発見する



これらのクールな配色はどこから来たのですか？ 数百の色と数千の組み合わせから選択する方法は？



小規模な静的Webサイトのデザイナーは、コンテンツから色を取得する方が簡単だと感じています 。 これは通常写真です。



私が最近取り組んだ8ページのサイトデザインは、藍色の空を背景にした複雑な金属構造に基づいていました。 Photoshop 5×5スポイトツールをインストールして、空の最も暗い部分と最も明るい部分をサンプリングし、ページの下部にあるサイドバー、リンク、ヘッダー、フッターにこれらのシェードを割り当てました。



クライアントがサイトのデザインをこれほど高速にする方法を尋ねると、「これが私たちの仕事です」と簡単に答えました。色はすでにそこにありましたが。 そして、私は彼を見つけることができました。



既製の写真は高速サイトで機能しますが、 より大きくダイナミックなサイトの設計者は視聴者からインスピレーションを得る必要があります 。



観客にとって魅力的な色の優れた指標は、日常着です。 あなたの訪問者が何を着ているかを調べ、どの色が彼らにとってより快適かを見つけてください。 たとえば、サイトがスポーツに関するものである場合は、カジュアルな服装ではなく、人々がゲームのために何を着ているかを調べてみてください。



見込み客の写真を入手できるほど幸運な場合は、それらをすべて一緒に表示します。 群衆の平均的な画像が必要です。 写真が利用できない場合は、買い物に行きます。



ビジネスにとどまることができるファッションデザイナーは、あらゆるムードとライフスタイルに対して優れた色彩感覚を持っています。 当然、これは5番街からのハイファッションではありません。 「キャンプ場の物語」、「子供服」、「スキーと水着」、「日常生活」をGoogleで検索すると、多くの美しい色の組み合わせが明らかになります。



人々は好みに応じて服を着ます。 彼らが愛する色を使用すると、あなたのサイトでより快適に感じるでしょう。



テクスチャを使用します





色相、彩度、またはレベルを少し変更すると、テクスチャが作成されます。



単色のテクスチャ（つまり、単一の色相のテクスチャ）とパターンは、競合することなくほとんどのサイトに微妙な次元を提供します。



特に、単純なテクスチャ背景は簡単に作成できます。



o内壁または他の何か、空で荒いものの写真を撮ります。

o Photoshopで写真を開きます。

o背景レイヤーをコピーして、「texture 1」という名前を付けます

o背景レイヤーをカラースキームの色で塗りつぶします。

o「テクスチャ1」レイヤーの「ソフトライト」ブレンドモードと不透明度を30％に設定します。

o私たちのサイトで試してみます。 見栄えがあまり良くない場合は、レイヤーの不透明度を調整します。



レイヤー名は意図的に選択されています。 写真は何枚でも好きなだけ再生できますが、「壁のテクスチャ」や「紙のテクスチャ」などのレイヤー名は避けてください。元の場所ではなく、サイトの効果に集中する必要があります。



良いスキームを作成する



適切な配色には特定の機能があります。 設計を論理的に保つための基本または一連の推奨事項と考えてください。 回路は：



o 2〜5色がうまく混ざり合っており、

oデザインがこれらの色合いからどれだけ逸脱できるかを説明し、

o各色の色合いがあり、

o黒と白が似合います。



例：







デザイナーはまず、気持ちの良い温かみのある色合いを選ぶことから始めました。 論理はなく、「秋」のあいまいな目的とその直感だけです。







Photoshopでは、2つのレイヤーが白黒の陰影を提供しました。 各レイヤーのブレンドモードは「ソフトライト」に設定されました。純粋な黒は右端の色に対して暗すぎたため、黒レベルの不透明度が修正されました。







色を結合するために、純粋な赤の塗りつぶしを持つ新しいレイヤーが作成されました。 そのブレンドモードは「カラー」に設定され、不透明度は約40％に低下します。 （注：レイヤーの順序は非常に重要です。「カラー」レイヤーを白黒の下に設定すると、色が変わります）。









これにより、デザイナーは15色を選択できました。 彼女は4つのトーンとシェードを選択しました。 ここでは、白い背景に対して色が選択されています。







変更は非常に重要です-設計者が実験しました。 黒い背景に対して色はどのように見えますか？ 少し陰影を付けるとどうなりますか？







それらをすべて変更した場合はどうなりますか？ [画像]-> [調整]-> [色]レイヤーの色相/彩度を使用しても、秋の感覚はまったく得られませんが、色は調整されます。



おそらく、このパレットはイースターに使用できます。

一番下の行は配色です：異なる（ただし多すぎない）色と完全に混ざる色合いの範囲を与える推奨事項。



基本を使用します



明日のグラフィックス、写真、アイコンは今日の配色で機能しますか？ 6日後、6週間後、または6か月後、サイトにはどのイメージが必要ですか？ 言うのは難しいですが、 コンテンツは配色の一部です。



画像を強制的にカラースキームに従うようにするか、カラースキームを画像に従うようにすることで、この問題を解決することができます。



写真を使用して配色を実現することは、すべてのページで統一された外観を実現するための優れた方法です。



最も簡単な解決策は、デザインに合った画像を見つけることです。 カラースキームでは変更が可能であることを忘れないでください。画像のメインシェードが一致している限り、画像は配置されています。 写真付きの既製のサイトの多くでは、色で検索できます（色は通常、赤、緑、青です）。



画像が配色と一致しない場合は、色相を指定します。



1. Photoshopで画像を開きます。



2.新しいレイヤーを作成します。 ブレンドモードは「カラー」です。



3.このレイヤーをパレットの色の1つ、できれば画像に最も近い色で塗りつぶします。



4.カラーレイヤーの不透明度を50％に設定します。



5.画像の元の色とサイトのカラーパレットのバランスがとれるまで、不透明度を調整します。



6.この手法は、写真、イラスト、アイコンで機能します。すべてがピクセルに基づいています。 （画像を所有していない場合は、変更する前に必ず許可を得てください。サイトに比べて外観を改善できますが、他の人のアートを自由に使用できます）。



プロフェッショナルに見える



「プロフェッショナル」に見える色のセットはありません。 調整された計画された感覚を達成するためには、プロセスに従う必要があります。

サイトの内容に関係なく、視聴者はそれを真剣に受け止めます。



ヒント



o適切な配色があると思われる場合は、少なくとも1週間試してください。 色の評価には直観が必要であり、これは時間の経過とともに開発されます。 サーキットの個性を十分に理解する時間を与えてください。



oあなたが良い配色を持っていると思うなら、それを外に出さないでください。 訪問者の好みは、あなたのように、時間とともに変化します。 4か月後に色を確認するリマインダーを作成します。 それから、彼らはまだ関連性がありますか？ そうでなければ、何が変わったのでしょうか？ 校正にはどのような要因が影響しますか？



o控えめに鮮やかな色を使用します。 あふれる何かのスプラッシュは訪問者を魅了しますが、どこでもそれを見ると、彼らはあてもなくさまようでしょう。



o配色のスペクトルが小さいことに気付く人もいます。 少しドリフトして、設計の深さを追加します。



o赤、緑、青、黄色など、純粋に基本的な選択を避けます。 それらに実際のシンボルの色合いを与えます。赤ですが、少し紫、薄緑の青、オレンジの色合いの暖かい黄色。



o徐々に変更するときは、色の互換性を確保してください。 赤を選択する場合は、明るい赤は女性的であり、暗い赤は錆や血のように見えることに注意してください。 黄色は、日光の段階的な変化から暗褐色へと変化します。 ダークブルーは神秘的であり、ライトブルーは穏やかで、過飽和状態の場合は電気的です。



o Macユーザーは、画面をカスタマイズします。 「システム環境設定」を開き、「ユニバーサルアクセス」をクリックします。ディスプレイを「グレースケールを使用する」に設定します。これは、映画を楽しみたいときにも役立ちます。



oサイトでどのような活動を伝えたいとしても、中立的な背景を使用します。 黒、白、グレーはほぼすべての色合いに合います。



o大きなカラーフィールドに一致する小さなテキスト（たとえば、14フォント以下）が必要な場合は、テキストを通常よりも数色濃くします。 これにより、露出メーターが文字単位でシフトします。



oより少ない色でより多くの色合いを使用します。