4. 配色のよくある質問

今回は、都度添削やワークショップでよくいただくご質問や、よくお伝えしている内容をまとめました^^ 今後の制作の際には、是非一度チェックしてみてくださいね! 【目次】 Q. 色が多くてまとまりません… Q. ロゴの色はどう用意すればいいですか? Q. 色が多くてまとまりません… 基本は3色構成が鉄則です。 ベースカラー(背景):70%メインカラー(テーマ色):25%アクセントカラー(強調):5%で構成するとまとまって見えますよ^^ 詳しくは、Canva基礎編>Lesson7-2 色のバランスを参考にしてみてください! Q. ロゴの色はどう用意すればいいですか? 以下の3パターンがあると便利です! 詳しくは以下の動画をご確認ください^^

3. 色のコントラスト

1. コントラストとは コントラストというのは広い意味で「差」「対比」を指します。デザインでは、色、形、大きさなどの視覚的な差異のことをまとめて「コントラスト」と呼びます。配色においては、文字と背景の“明るさの差”(=明度差)を指し、読みやすさ・伝わりやすさが決まる重要なポイントです。 比較例 下記の2つのバナーを見比べてみてください。AとBどちらのバナーが読みやすいでしょうか? A B Aの方が読みやすいと感じますよね。ではなぜAの方が読みやすいのか?答えは明度差にあります。 2. 明度差の確認方法 以下に明度差を確認する方法を二つご紹介します。 画像をモノクロにして確認する方法 ”良い”デザインに共通して言えること。それは白黒でも読みやすいということです。作成したデザインをモノクロにして確認してみましょう。一番強調したい文字が一番目立っているか確認できます。 Canvaで作成した画像をモノクロにしていきます。 ①まず作成した画像を一度ダウンロードします。共有→ダウンロード→ファイルの種類:JPGなど ②書き出した画像をCanvaにアップロードします。作成→アップロード→確認したい画像を選択してアートボードに配置します。 (ここではプレゼンテーションを選択しましたが制作したもののサイズでOKです。) ③編集→フィルター→Mono→ストレートを選択→モノクロを選択します。 作成した画像をモノクロで確認することができるようになりました。 モノクロにすると、色がないので明度差だけで「見やすい」「見づらい」の確認がしやすくなります!モノクロで見づらい文字があったら明度差が足りていないということ。背景を明るく(白く)文字を暗く(黒く)なるように調整して視認性を確保しましょう。 数値で確認する方法 Adobeのコントラストチェッカーを使用して明度差を確認することができます。コントラスト比とは明度差を数値で表したもので、大きいほど「明度差がある」ということになります。 例)下記のバナーのコントラスト比をチェックしていきます。 ①Adobe Colorのサイトを検索し表示させるhttps://color.adobe.com/ja/create/color-contrast-analyzer ②下記のような画面がでてきます。コントラストをチェックする際に必要なのが「テキストカラー

2. 色のバランス

今度は実際に色を組み合わせてみましょう!そこで大切になってくるのが使用する色の数と色の比率です。見やすく・伝わりやすく・統一感を出すために使用する色は3色までにとどめるように意識しましょう。下記のバナーを見比べてみてください。どちらのバナーがユーザーに正しく情報を伝えられているでしょうか? 使用する色の数は3色まで 3色までを意識すると、以下のようなメリットがあります。 視覚的にまとまりやすい 人の目は多くの色が入り乱れると「どこを見ればいいのか」わかりにくくなります。3色以内に絞ることでデザイン全体が統一され、見る人に「スッキリしていて整っている」という印象を与えられます。 情報が伝わりやすい デザインの目的は情報を届けること。色が多すぎると「色そのもの」に注意が分散してしまい、文字や写真など本来伝えたい要素が目立たなくなります。3色程度なら色が“引き立て役”になって、メッセージがスムーズに届きやすくなります。 色の役割分担がしやすい 基本的に色は次のように役割分担して使うのがわかりやすいです。 ベースカラー(全体の背景や大きな面積を占める色) コンテンツの邪魔にならない淡い色、薄い色、メインカラーを薄めた色などシンプルな色を選ぶと良いでしょう。→上のバナー例:ベースカラー:薄いピンク メインカラー(ブランドイメージや印象を決める中心の色) デザインの中で最も見て欲しい色です。そのデザインのテーマカラーとなる色で、全体の雰囲気を印象付ける大切な色です。→上のバナー例:メインカラー:濃いピンク アクセントカラー(強調や目を引かせたい部分に使う色) デザインを引き締め、メリハリとなるワンポイントとなる色です。特に目につく色でボタンなどの目立たせたいパーツに使用します。→上のバナー例:メインカラー:水色 初心者でも失敗しにくい プロはあえて多色をうまく使うこともありますが、色彩設計の知識や経験がないとごちゃついて見えたり安っぽくなったりします。3色に制限しておけば、大きな失敗を避けやすく、初心者でもきれいにまとめやすいです。厳密に「3色しか使ってはいけない」という意味ではありません! 配色の比率 使用する色、色の数と同じくらい大切なのが、「どんなバランス(比率)で色を組み合わせるか」という点です。そこでポイントになるのが「ベースカラー」「メインカラー」「アクセントカラ

1. 配色の基礎知識

色は、私たちの生活の中にあふれています。洋服や食べ物、街の広告やお店の雰囲気など、毎日何気なく目にしている色が、気分や行動に大きな影響を与えているって知っていますか? デザインでよく使われるのが「色の印象」です。たとえば、同じデザインでも色を変えるだけで、見る人の感じ方は大きく変わります。 「この色が好きだから」「なんとなく目立ちそうだから」といった直感で色を選んでいませんか?色には心理的な効果やイメージがあり、それを理解して使えると、デザインに説得力が生まれます。クライアントに説明するときも、自信を持って提案できるようになりますよ。 1. 色の基本知識 色は色相・明度・彩度の3つの要素から成り立っています。 色相とは 赤・青・緑など、色そのものの種類を表します。 明度とは 明度とは明るい・暗いといった「明るさの度合い」を表します。明度が高いと白に近づき、明度が低いと黒に近づきます。 明度が低い 明度が高い 落ち着いたイメージ 爽やかなイメージ 彩度とは 鮮やかさやくすみ具合を示します。パキッとしたビビッドカラーか、大人っぽく渋い色かがここで決まります。 彩度が低い 彩度が高い 大人っぽいイメージ 華やかなイメージ 光の三原色(RGB) RGBとはそれぞれの色の頭文字です。赤(Red)・緑(Green)・青(Blue)パソコンやスマホ、テレビなどの画面は、この3色の光を組み合わせて色を表現しています。混ぜるほど明るくなります。 印刷はCMYK(シアン・マゼンタ・イエロー・ブラック)で、混ぜるほど暗くなります。ここでは、Canvaでウェブ画像を作るときはRGBの世界と思っておけばOKです。 2. 色の持つ効果と印象 色は、私たちに「暖かさ」「冷たさ」といった温度の印象を与えることがあります。色には、見るだけで「暖かそう」「冷たそう」といった温度のイメージを感じさせる力があります。たとえば、赤やオレンジ、黄色などの暖色は、太陽や火を思わせ、「暖かい」「元気」「情熱的」な印象を与えます。一方、青や緑、紫などの寒色は、水や空を連想させ、「涼しい」「落ち着く」「静か」といった印象を持たせます。 さらに、色は味やにおいのイメージにも影響します。赤やオレンジは、果物や肉などの「美味しそう」「食欲がわく」印象を与えるため、レストランや食品パッケージによく使われます。逆に青は自然界

5. デザインの引き出しの増やし方

デザインを作ろうと思ったときに、「どんな構成がいいのか」「どんな配色がいいのか」で悩んだことはありませんか?デザインはゼロから生み出すよりも、過去に見た形・色・構成のストックから組み合わせる方が効率的で、クオリティも安定します。 また、奇抜で独創的なデザインよりも、見慣れたレイアウトの方がユーザーが迷わず情報にたどり着けるため、結果的に目的(集客・販売など)も達成しやすくなります。これは、初めて行く場所でも「一般的な地図記号」や「見慣れた標識」があると迷わず目的地に着けるのと同じでデザインも、見慣れた配置や色使いがユーザーの安心感と行動のしやすさにつながります。 1.目的別!参考デザインを探す場所 下記の表を参考に、デザインの参考元を積極的に探してデザインの引き出しを増やしましょう。 作りたいデザインの目的  探すと参考になる場所 参考ポイント 集客イベントやキャンペーン告知 電車の中吊り広告/ チラシ配布物 ・キャッチコピーを目立たせるレイアウト・文字組み ブランドの世界観を伝えたい 雑誌のレイアウト / ブランドポスター ・写真と文字のレイアウト・余白の活かし方 大きなインパクトを出したい 屋外ポスター / イベント看板 ・遠くからでも読める文字サイズ・色のコントラスト 配色のヒントが欲しい 本の表紙 / 業界系パンフレット/業界雑誌 ・業界の配色参考 SNS用バナーや投稿画像 Pinterest / Instagram広告事例 ・情報を整理する構図・文字サイズ・文字組み 信頼感や安心感を出したい 行政パンフレット / 医療・教育関連のチラシ ・信頼感のある配色・整列感のあるレイアウト 高級感を演出したい 高級ブランドの広告 / 店舗カタログ ・黒・ゴールドなどの配色・余白の取り方 幅広いアイデアや構図をストックしたい Pinterest / 電車の中吊り広告 / 雑誌レイアウト / ポスター / 本の表紙 目的やジャンルを問わず、複数の媒体から事例を横断的に集めることで引き出しが一気に増える 移動時間、隙間時間、旅先でも参考デザインは探せます。パソコンに向かっていない隙間時間でもどんどん引き出しが増やせるので、意識して身近にあるデザインを見てみましょう! Pinterest(ピンタレスト) スマホ一つで隙間時間にデザイン検索。世界中のデザインやアイ

上部へスクロール