0%

Designデザインワークショップ

Posted:2020.01.19

トーンと色味をコントロールして配色を考えてみる#3(シェードとティント)

前回、前々回と色味とトーンを調整した配色選定方法についてまとめてきましたが、第3回目となる今回は、オリジナルの配色を作成するときに役立つ具体的なテクニックについて紹介していきたいと思います。配色において色の決め方は様々な方法があるかと思いますが、より早くロジカルに作成するためには参考になるかと思いますので、ぜひ試してみてください。

(参考記事)
「トーンと色味をコントロールして配色を考えてみる(トーンと配色知識)」
「トーンと色味をコントロールして配色を考えてみる(色味の選定)」

 

トーンにおける高明度と低明度グループの「シェード」と「ティント」

トーンについては過去記事「トーンと色味をコントロールして配色を考えてみる(トーンと配色知識)」で詳しく紹介しましたが、1つの色味でも明度と彩度の違いでいろんな色が存在します。その中でも、配色を決める上で注目したいトーンがあります。それは「シェード」と「ティント」と呼ばれる、高明度帯と低明度帯のトーンです。

 

具体的なトーン名でいうと次のように、「ペールトーン」「ライトトーン」「ブライトトーン」「ダークグレイッシュトーン」「ダークトーン」「ディープトーン」の6つのトーンが該当します。

 

その中でも明るい部類に入るトーンを「ティント」と呼び、逆に暗い部類に入るトーンを「シェード」と呼びます。自分で配色を決める際にはこれらのトーンをそれぞれ用意することでバランスの良い使いやすい配色を作成することができます。

 

シェードとティントを使って配色パレットを作成する

では具体的にシェードとティントを使った配色の決め方についてまとめていきます。まずは過去記事「トーンと色味をコントロールして配色を考えてみる(色味の選定)」にて紹介している、基本配色とグレースケールの色味を用意し、グレースケールに合わせて下記のイメージのように基本配色を並べます。この時に重要なのが、色味によって明度が異なるという点に注目することです。色味が持つ明度をグレースケールの明度に合わせて配置し、明度による色味ごとの位置関係を定義しておきます。

 

次に、配置した基本配色を中心に、それぞれグレースケールの明度に合うよう、ティントのトーンとシェードのトーンを用意していきます。こうすることで、基本配色の全ての色味がグレースケールに合わせた明度ごとのトーンで埋まるようになります。これで、基本配色からトーンコントロールすることにより生まれた色で、バランスよく配色パレットを作ることができました。

 

トーンコントロールにより配色が増えることで得られるメリット

適当や感覚的に選んだ色とは異なり、基本配色からトーンコントロールで色を増やすことにより、必然的に調和のとれた配色となります。統一感を保ちながら、色数を増やすことができるので、まず失敗しない配色になっているのではないでしょうか。

 

また、ウェブデザインにおいては、情報の性質やUIパーツの特性や状態を表すために、様々な色の使い分けが必要になるケースもあります。そんな場合に、この方法で作成した配色はとても使いやすく、法則性に合わせた迷いのない色の決め方をすることができます。

 

デザイン制作のスピードアップにつながるだけでなく、ロジックの伴った根拠ができるので、クライアントさんに提案するときなどにも役に立ちますね。もちろんデザインの品質としても担保されるようになります。

 


 

今回はトーンと色味をコントロールした配色選定について、全3回に渡る記事でまとめてきました。配色はデザインする上でとても重要な要素ですが、感覚的になりやすいという傾向も感じられます。そんな時にこのようなルールや指針があれば、作業の効率化だけでなく、クオリティアップも期待できるので、是非参考にしていただければと思います。

(参考記事)
「トーンと色味をコントロールして配色を考えてみる(トーンと配色知識)」
「トーンと色味をコントロールして配色を考えてみる(色味の選定)」

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】