Webデザイナー必見のブログ記事を紹介！色の印象がデザインに与える影響とは

Webデザイナーにとって「色」はとても重要なデザインのポイントでもあります。特に色の使い方やデザインの違いによって全く違った印象に仕上がることもあるでしょう。デザインの対象となるものが人なのか、Web上もしくは印刷物なのかによっても大きく異なってくるものです。
今回は、Webデザイン・制作に携わるなかで色について考察したブログ記事を集めてみました。Webデザイナーの仕事に役立つ情報が満載です。色・デザインの奥深さを改めて感じながら、新たなヒントをぜひ見つけてみてください。

※尚、こちらはPR記事ではございません。編集部が独自にテーマを選び、サイト担当者に許可を頂いて作成している記事です。また、記載中の内容は、執筆時の情報になります。

【事例で解説】色が与える影響とは

私たちが普段何気なく目にする、標識や看板などの「色」。一見関係なさそうに見えて、実はその特性を利用し、機能的に配色されています。
今回注目するのは、株式会社WWGの《【事例で解説】色が与える影響とは》というブログ記事です。こちらの記事を参考に、色が持つ特性について紐解いていきましょう。

記事を執筆したのは、同社でデザイナーとして活躍するコジコジさんです。
筆者は色の特性について「私たちの生活に当たり前に溶け込んでいるものの中にも、その特性を利用したものは多く存在する」と述べています。
たとえば、信号機には赤・黄色・緑の3色が使われていますが、「赤＝危険そう」「緑＝安全そう」など、色の特性に基づいて配色されているのだそうです。

記事には、色の特性と具体例について以下のように書かれています。
・膨張色と収縮色
白は膨張効果があり、黒が収縮効果があるとのこと。
「白と黒」といえば囲碁の碁石がありますが、実は黒の碁石の方が白の碁石より大きめに作られているそうです。同じ大きさだと白の方が若干大きく見えてしまため、黒の碁石を大きめにすることでバランスを取っていると考えられます。
・進出色と後退色
進出色は飛び出しているように見え、後退色は後ろに下がって見えるという効果があります。
道路標識は、その効果が分かる例の一つ。［止まれ］や［通行止め］など緊急性が高いものに赤色を、［一方通行］や［案内標識］などに青色を使うことで、優先度の高さや違いが一目で分かるようになっているそうです。
・興奮色と鎮静色
赤やオレンジ系の色には興奮をもたらす作用があり、栄養剤や肉系の食品パッケージ（焼肉のタレなど）といったエネルギッシュな製品に用いられています。
一方、鎮静効果のある青や緑などの色は、ミネラルウォーターやスポーツドリンクなど、清涼感を出したい製品に使われています。

記事本文には「ちょこっとコラム」として、筆者の思いや考えが垣間見えるコーナーが登場します。
思わず共感できたり、「なるほど！」と考えさせられたりする内容が書かれていますので、ぜひ記事本文を一読してみてくださいね。

■【事例で解説】色が与える影響とは　記事詳細
https://wwg.co.jp/blog/t44360
トップページ
https://wwg.co.jp/

オシャレな2色の配色パターン24選｜生成ツールも紹介

東京都に拠点を置き、「日本人の生き方・働き方をより幸せにし、日本をより良い国にする。」をモットーに活動している、株式会社日本デザイン。スクール事業やセミナー事業、クリエイティブ事業、マーケティング事業を通して、人々が働き生きて、誰かに認められ求められる、そんな当たり前の毎日を過ごせる社会の仕組みづくりに寄与している企業です。

同社の活動は、人材育成やキャリア支援だけではありません。運営するサイトにてハウツー記事を公開し、日常的な悩みや技術面でのコツなど、知りたい情報を発信しています。
たとえば、こちらの記事《オシャレな2色の配色パターン24選｜生成ツールも紹介》に綴られているのは、デザインをおしゃれに仕上げるための配色のコツについて。「配色でいつも悩んでしまう…」という方は必見です。

記事によると、ポイントは2色の配色にすることなのだそう。たくさんの色を使う場合と異なり、2色だけにすることでシンプルに仕上がり、デザインを印象的に魅せることができるといいます。
しかし、気になるのがシンプルゆえの難しさです。たった2色をどう配色すると効果的なデザインにできるのか、迷子になってしまう方もいるかもしれません。

そこで、当該記事ではあらゆるデザインシーンで活用できる、2色の配色パターンを24個厳選。
「アウトドア」「美容」「高級ブランド」など、用途別にカテゴライズし、それぞれのイメージにぴったりの2色の配色パターンについて、特徴や使用例、カラーコードを添えて紹介されています。
「アウトドア」の場合の最適な配色パターンの1つは、フォレストグリーンとモスグリーンの2色とのこと。自然の美しさやエネルギッシュさが伝わるカラーコンビネーションを活用すると、クオリティを高められるようです。そのほかにも、用途別にイメージ画像を添付し解説されているので、ぜひ記事にてそれぞれを比べてみてください。

また、2色の配色を自動生成するツールを4つ挙げ、特徴や使い勝手について記載されています。配色で迷いがちな方は、自分に合ったツールを選択し、使ってみるのもいいかもしれません。そのほか、Canvaでのカラーコードの使い方や、2色の配色をするときの注意点にも言及。
これらの内容は、デザイナーとしてワンランク上を目指し、デザインのセンスを磨くのに大変役立つことでしょう。

■オシャレな2色の配色パターン24選｜生成ツールも紹介　記事詳細
https://japan-design.jp/design/0275/

役割ごとに基本9色を使い分ける、むやみに増やさないwebデザインの配色

デザインをしていて「色数が増えてしまった」「色が散らかってしまった」という経験をしたWebデザイナーは多くいるようです。今回取り上げるブログの筆者Tantanさんも「色が無秩序に散らかってしまう」ことがよくあったのだそう。
こちらの記事《役割ごとに基本9色を使い分ける、むやみに増やさないwebデザインの配色》には、色を増やさない、散らかさないために筆者自らが実践している方法について丁寧に解説されています。

Tantanさんは、広島で活躍するWebデザイナー。現在、ウェブ制作会社とフリーランスを掛け持ちしながら、企業サイトや印刷物、イラストといったさまざまなデザインを手掛けています。
こちらの記事では、筆者自身が行っているWebデザインの配色について、実際に色を用いてわかりやすく解説。Tantanさんは「あらかじめアセットカラーを用意し、用途に応じた名前をつけてデザインすることで秩序が保てる」ようになったのだそうです。

Tantanさんは、制作時によく使う色を役割ごとに設定するとのこと。それぞれの色の役割を意識することで色を散らかさないようにしているそうです。記事には、メインカラーやアクセントカラーなど、9つの役割について一つひとつ丁寧に解説されています。
また筆者は、色を必ずXDのアセットに登録。デザインを行いながら増やした色を随時アセットカラーに追加し、名前をつけて管理しているのだそう。さらに、既存のアセットカラーが合わなくても「できるだけ既存の色を微調整して兼任させられるように努力する」ことで、色の増殖を抑えられると解説しています。

色の数がどうしても増えてしまう、無秩序に色が散らかってしまうなどでお困りの方は、ぜひTantanさんの方法を参考に「色の役割を明確にして、秩序のあるデザインデータ」を目指してみてはいかがでしょうか？

■役割ごとに基本9色を使い分ける、むやみに増やさないwebデザインの配色　記事詳細
https://tantan.work/2020/12/08/web-design-colors/

【DTPデザインとWebデザインの違い】印刷会社からWeb制作会社に転職して感じた、5つのギャップ。

デザイナーの仕事にはさまざまなジャンルがありますが、今回は印刷業界からWeb業界へ転職することで「あるデザインの違い」に気づいたという実例をご紹介します。
注目したのは、『nozakichi.com』というブログに書かれている《【DTPデザインとWebデザインの違い】印刷会社からWeb制作会社に転職して感じた、5つのギャップ。》という記事。発信しているのは、Webデザイナー・コーダーとして活躍する当ブログの管理人のざきちさんです。

記事内では、印刷会社で主に携わっていたDTPデザインと、Web制作会社で行うWebデザインとの違いで実際に筆者が感じたことが綴られています。共通しているのは、どちらもクライアントが提案するコンセプトに基づいてデザインすること。ですが、両方の仕事に関わることでさまざまな発見があったそうです。
筆者は記事のなかで、以下の5つのギャップについて触れています。

・「色の表現方法の違い」
・「解像度の違い」
・「単位の違い」
・「可変か不変かの違い」
・「動的か静的かの違い」

これらの違いを意識しながら最終的に実感したのは、印刷物というDTPデザインでは「紙には紙でしかこだわれない部分がたくさんある」こと。そして、Webデザインには「紙にはない面白さがある」こと。比較することでさまざまな違いを発見でき、さらに注意点やデザインに対する考え方などにも着目できたそうです。

のざきちさんが本気でWebデザイナーの勉強をはじめたのは2019年。未経験の状態から今日までにチャレンジしてきた勉強法やおすすめのツール・サービス・書籍などもブログ内で紹介されています。また、デザインのヒントになるさまざまな情報も発信。デザインの備忘録として日々綴られているとのことなので、一緒に復習しながら学べるスタイルが魅力です。

■【DTPデザインとWebデザインの違い】印刷会社からWeb制作会社に転職して感じた、5つのギャップ。　記事詳細
https://nozakichi.com/dtp-web/

診察券作成のヒント｜色だけで変わる診察券の印象

色がデザインに与える影響は大きく、同じデザインでも色が違うだけで印象がガラッと変わります。Webデザインはもちろん、街の看板や診察券なども、色でデザインの印象が決まる場面は多いはずです。

今回は、デザイナーズ診察券の運営・制作を手掛ける有限会社デザインウルフのブログより、デザイナーで運営責任者のながしま明さんが執筆した記事《診察券作成のヒント｜色だけで変わる診察券の印象》を紹介します。

診察券はクリニックの印象やイメージをつくる一部になると考えるながしまさん。「診察券をつくる場合、［クリニックの色］で配色することが基本である」と話しています。
予約や通院の度に何度も目にするアイテムである診察券。診察券への印象がそのまま「クリニックの印象」につながることもあるそうです。そのため、診察券にはクリニックのテーマカラーを配色することを勧めています。

色の印象や傾向を知ることも、診察券づくりに大切な要素の一つなのだそうです。
色にはそれぞれ印象の傾向があり、赤やオレンジなどの暖色は元気・活発な印象、青や水色などの寒色は冷静・静かな印象を与えます。さらに、色の濃淡や組み合わせでも印象が変わるとのこと。クリニックは医療を提供する場であるため、配色にも水色や黄緑などの淡く清潔感のある色がよく使われるとのことです。
しかし、すでにクリニックのテーマカラーが決まっていて、しかもそのテーマカラーが濃い色の場合はどうすればいいのでしょうか。
そういった場合、白と配色することで清潔感が出てくるのだそうです。

ながしまさんは記事の最後に、「診察券を配色するうえで大切なこと」を綴っています。診察券に限らず、デザイン全般で知っておきたい内容であるため、詳しくは記事の中でご確認くださいね。
またブログでは、カラーリングやロゴデザインなどデザインに関する記事を読むことができます。興味がある方は、こちらも合わせて読んでみてはいかがでしょうか。

■診察券作成のヒント｜色だけで変わる診察券の印象　記事詳細
https://designers-shinsatsuken.com/design/color-imege