BLOGデザイン配色デザインの基本ルール配色デザインの基本ルール2022年02月07日(月)デザイン#Webデザイン#カラー#配色#デザイン色は印象を与える色には「表現感情」と呼ばれるものがあり、人にはおのおのの、好みの色が違います。青は寒い印象を与え、オレンジは、暖かい印象というように誰がみても同じように感じることを「固有感情」と言います。この二つの色がもつ印象効果のことを合わせて「色彩感情」と言います。配色を考え時には、人の感情に影響を与える色をどのように配置するかを検討しwebサイトのデザインを決めていくことでブランドのイメージや、ユーザーに与えたい印象を表現していきます。オイシックスの安心安全でおいしい野菜やフルーツ、レシピをご紹介!厳選された「一流の生産者」が作った美味しい野菜やフルーツを、お届けに合わせて収穫するため鮮度は抜群!...色には、食欲など人の欲求を増進させたり減退させたりといった効果も色にはあり、webサイトが通販や飲食など人の欲求を掻き立てるような効果が発揮できるよう配色に拘らないといけません。一般的に「ベースカラー」「メインカラー」「アクセントカラー」の3つに分かれて構成されています。それぞれの比率はベースカラー(70%)メインカラー(25%)アクセントカラー(5%)が最適とされています。それぞれの役割ベースカラーの役割ベースカラーはサイト内で最も大きな範囲を占める色で「背景」や「余白」に用いることが多く、メインカラーやアクセントカラーを際立たせる役割があります。メインカラーを引き立たせるにはどの色が一番いいのかを考えながらベースカラーは決めていきます。白・黒・グレーなどの無彩色はメインカラーやアクセントカラーを邪魔しないので、無彩色を採用しているサイトも多いと思います。ベースカラーは背景色やコンテンツ間の余白などに使用されることも多いので、文字の読みやすさや画像の見やすさなどコンテンツの視認性を考慮して、淡い色を使用するとバランスがとりやすいです。メインカラーはの役割メインカラーはサイトの印象を決定づける色です。ブランドや商品の世界観を強く印象付けるために、サイトに使用するロゴの色に合わせる場合が多く、通常もっとも重要視される色といえます。ロゴのカラーを使用しているサイトも多く見かけますが、メインカラーとして使用する色は、サイトのターゲットやユーザーがどんな印象を持ってほしいかによって決めます。どんな色がどんな印象を与えるのか、を考えながら決めます。アクセントカラーの役割アクセントカラーは、ワンポイントで使用する色のことを言います。強調したいコンテンツを特に際立たせてユーザーの目を引いたりするために使用されます。メインカラーを補う色として使用されますが、必ずしも派手な色を使用しなければいけないというわけではありません。メインカラーとベースカラーだけではどうしても単調になります。全体にメリハリをつけることを意識します。アクセントカラーは、ボタンの色に使用することも多い色ですので、ユーザーの目を引くようにメインカラーと比べて目立つ色にします。アクセントカラーを決めるときもメインカラーと同じようにユーザーにどういう印象を与えたいか考えながら検討する必要があります。アクセントカラーは必ずしも1色である必要はないのですが、色が増えれば増えるほど他の色とのバランス調整など扱いが難しくなる傾向があるので注意が必要です。マーケの強化書マーケの強化書Webサイトのカラーデザインについて、デザイナーに上手くイメージを伝えられない。何かが足りないけど説明できない...。3色以上使用したいときに気をつけること3色でまとめることが基本ですが、4色以上になる場合もありえます。統一感を出すには、2色以上は同系色や類似色でまとめ、メインカラーの類似比率を分割することを注意してサイト制作します。ベースカラーを分割してしまうとバランスが取りにくくなってしまう可能性があります。分割色は「同じトーンを使用する」または「同じ色相でトーンを変える」どちらかにするとバランスの良い配色になります。色が増やすほどまとまりがなくなり見づらくなります。基本は3〜4色を目安にしましょう。光の三原色である赤緑青だけでなく、彩度と明度が100%になる純色の使用を控えるだけで印象が大きく変わります。純色を避ける理由は文字が見にくくなってしまうからです。目がチカチカしてしまったり、自然の色でないため、違和感が強くなってしまうからです。純色を使用するデザインではほんの少し彩度と明度を落とすことが必要になります。彩度と明度を10%ずつ落としていますが「明度だけ落とす」とか「彩度だけ落とす」のも有効です。純黒や純白も避ける白と黒も純色を避けたほうが見やすくなります。実際に多くのWebデザイン配色で真っ黒(#000)はあまり使われておらず、少し白の混じった黒に近いグレーが使用されています。黒と白の純色も目に負担がかかるため、少しグレーを混ぜることにより、長文でも疲れにくくなります。色にはどの人も共通して抱くイメージがあります。そのイメージの共通感覚を心理学的研究の蓄積で明らかにしたものが、イメージスケールです。みやすい色の傾向を知っておくことでクライアントに説明する際の説得力がUPするので意識し、決定することが大切です。321web321web配色むずかしい...っていう人向けに「配色がうまくなるコツ」を解説します。おしゃれな配色やバランスの良い配色をイメージ通りに作る方法がわかります。「色の決め方」配色のルール色相環の互いに隣り合う色は類似色といいます。これらは、デザインの中で、調和や連続性の意味を出す時に使うことができます。この配色は比較的使いやすいのですが、使いようによっては大げさになってしまうため、どの色の鮮やかさを使うかがポイントです。類似色を使った配色は、色相環の同じエリアにある色を選びます。「共通性」「まとまり感」「統一感」を出したいときは、色相が近い色を選ぶことで表現することができます。メインカラーが「青」であれば、下記の図の矢印の範囲の色を選ぶと統一感が出ます。中途半端な、曖昧な印象を受ける配色になりますが、新規性を表現する際に向いている配色と言えます。一般的に調和がとりにくいとされる配色です。トーンに差をつけることで調和をとる配色なので、少し上級者向けの配色になります。メリハリやコントラストを強調したい場合は、色相環で垂直に近い斜めで繋いだ配色は、色相差ではなく明度差もつくので、よりメリハリやコントラストが協調されます。マーケの強化書マーケの強化書Webサイトのカラーデザインについて、デザイナーに上手くイメージを伝えられない。何かが足りないけど説明できない...。グレースケールでデザインしてみるWebサイトを作成するにあたって良いデザインを作りだすためには、色の効果は絶大ですが色がなくても伝わるデザインにすることも重要です。色を使わず一度グレースケールにしてみると増えすぎた色数を減らしやすくなります。グレースケールに変換して確認し、必要な箇所に絞って色を追加する方法です。作ってる最中は気づきにくくても一度フラットな状態に戻してあげることで自分が色を使いすぎていたことに気づきます。することで、デザイン制作を手掛ける時間を節約できるでしょう。このような制約をもってデザインを進めることで、より生産的に制作を進めることができます。別のトーンを利用することで、見た目が退屈になってしまうのを防いでくれるでしょう。基本の操作方法を覚えよう!一覧へ関連記事この記事のハッシュタグ#Webデザイン#カラー#配色#デザインから関連する記事を表示しています。Transit》『見やすく・読みやすく・わかりやすいデザインのためのユニバーサルデザインの基礎』を視聴しました。Vol.03にLT枠で登壇しました。https://araishinnosuke.com/。