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

簡単60秒!あなたにピッタリの案件が届く 無料会員登録

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

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

役割ごとに基本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デザイナーにとって配色はとても大切な学びの一つですよね。ユーザーに読みやすくて伝わりやすいデザインを考えるのと同じように、配色デザインに関する知識も非常に重要とされています。

1980年代に誕生した「ユニバーサルデザイン」は、障壁(バリア)となるものがなくすべての人を対象としたデザインのことです。逆に妨げとなるものを取り除いたのが「バリアフリーデザイン」で、障害者・高齢者に配慮したデザインのことを指します。
この2つのデザインについて注目したのが、今回ご紹介する《デザイナーなら知っておきたい。ユニバーサルデザイン・配色のバリアフリーのポイント》という記事。デザインのヒントとなる配色について紹介しているのは、『ちかみち』ブログの管理人チカさんです。

人によって「見えている世界も同じものを見ていても見え方は人それぞれ」ということを感じた筆者は、なぜデザインの配色にもバリアフリーが必要なのかについて考察。記事内では、一般色覚者とそれ以外の色覚を持っている人(色弱者)との見え方の違いを踏まえつつ、気をつけるべきポイントを分かりやすく説明しています。

配色のバリアフリーで筆者が挙げたポイントは以下の3つです。

・「暖色同士、寒色同士を組み合わせない」
・「色の種類を多くしすぎない」
・「コントラストを強くしすぎない」

Webデザイナーとして配色のバリアフリーに目を向けたチカさん。これら3つのことを心に留めてデザイン制作をしていきたいとお話されています。配色デザインの一つの要素として取り入れてみてはいかがでしょうか。

フリーランスのWebデザイナーとして活躍する筆者は、これまで思考錯誤してきたことや学んだこと、実践したことなどをブログに記録。フリーランスの道で悩む人にとって為になる雑記ブログであったらいいなとの思いから、日々書き綴られているそうです。

■デザイナーなら知っておきたい。ユニバーサルデザイン・配色のバリアフリーのポイント 記事詳細
https://www.chika3-design.com/blog/barrier_free_color/

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

記事スクショ

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

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

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

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

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

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

簡単60秒!あなたにピッタリの案件が届く 無料会員登録

あなたにピッタリ
フリーランス案件が見つかる

  • 110万件以上のフリーランス案件から一括検索

    10万件以上のフリーランス案件から一括検索

  • 2あなたの経験やスキルに適した案件をメールでお知らせ

    あなたのプロフィールからおすすめの案件・求人

今すぐ無料登録

あなたにピッタリ
フリーランス案件が見つかる

  • 110万件以上のフリーランス案件から一括検索

    244,429の案件を保有しており、エンジニアやクリエイター向けを中心にたくさんの案件を一括検索可能です。

    ※ 3月29日(Fri)更新

    10万件以上のフリーランス案件から一括検索

  • 2あなたの経験やスキルに適した案件をメールでお知らせ

    マイページに入力して頂いた経験や希望条件に合わせて、ご希望にマッチした案件をメールでお送りするので効率的な案件探しが可能です。

    あなたのプロフィールからおすすめの案件・求人

今すぐ無料登録

フリーランスの案件を検索する

都道府県を選択
  • 関東

  • 北海道・東北

  • 甲信越・北陸

  • 東海

  • 関西

  • 中国

  • 四国

  • 九州・沖縄

あわせて読みたい関連記事

Webデザイナーを目指せ!座学でもオンラインでも学べるWebデザインスクールまとめ

※新型コロナウイルスの影響で、施設の営業日や営業時間の変更、イベントの中止・延期になっている場合がございます。お出かけ前に最新の公式情報を、...

Webデザイナー学習

2 years ago

デザイン力を上げるコツとは?ぜひ取り入れたくなるスキルアップ法の記事まとめ

Webデザイナーとして「もっとデザイン力を上げたい!」という思いから、日々さまざまな努力を重ねている人も多いことでしょう。デザイナーによって...

Webデザイナーデザイナー

2 years ago

魅力的・効果的に作品を見せよう!ポートフォリオ作成に関する記事まとめ

これまでの実績や経験、そしてスキルを分かりやすく伝えることができるポートフォリオ。Webデザイナーやイラストレーターとしてポートフォリオを作...

フリーランスWebデザイナーイラストレーターポートフォリオ

2 years ago

心理学でワンランク上のデザインを!デザイン心理学に関する記事まとめ

Webデザインは、知らず知らずのうちに人の心理に深く関わっています。そのため、Webデザイナーは見た目の良さだけではなく、人の心理についても...

Webデザイナーデザイナー

a year ago

これで悩みとさようなら!デザインの悩みを解決できるブログ記事を紹介

デザイナーとして活躍していると、「なんかデザインがダサい気がする」「レイアウトが崩れてしまう」「苦手な部類のデザインがある」など、さまざまな...

Webデザイナー

5 months ago