見出し画像

初心者WEBデザイナーがトレースでデザインを学ぶ【デザインのドリル#8】

こんにちは!ゆかっしゅ(@kaname_shimizu)です。


今回も引き続き、WEBデザインの技術を高めるために書籍「デザインのドリル」を使用してデザイントレースしました!

前回に引き続き「色」に関するレッスンになります。


自己紹介

氏名:ゆかっしゅ
年齢:27歳(2022年1月現在)
最終学歴:管理栄養士の専門学校卒(4年制)
職歴:新卒で医療業界の人事部配属(1年半)
   ITベンチャーに転職しバックオフィスを担当(3年)
   (WEBデザイナーのウの字もない。。。。)
   2022年1月からWEBデザイナーデビュー
趣味:MMORPG(FF14)累計プレイ時間数約2000時間
   新婚で10月に結婚式を控えており、それまでに-10kg目指してます!


使用書籍「デザインのドリル」

書籍TOPにも記載されている通りこの本は30個のお題が記載されており、それに沿ってトレースしていくという本です。
素材もダウンロードできる仕様になっているため、とても手軽にデザイントレースをすることができます!
また、「デザインのドリルをもとに作成した画像は、学習成果発信であれば作成した画像のSNS掲載OK」と記載されているのでアウトプットにもピッタリな書籍となっております。

この書籍に沿って私がトレースした作品と作成したオリジナル作品をNOTEで紹介していきます!!

※一部Adobe Illustratorの使用が必須になっているため、購入される場合はご注意ください。


#8 バレンタインのポスター

アートボード 8@2x

【今回のトレースで学んだこと】
・同系色デザインについて(後述詳細)
・全体を赤色で統一し、「情熱」「恋」などのイメージを持たせている
・同色系を使うとき適度にコントラストをつけることが大切。
・高級感のあるフォントを知ることができた。(Samantha Italic Bold)
・所要時間:45分


#8 バレンタインのポスター(Aパターン、Bパターン)

トレースA

アートボード 8@2x

【Aパターン、Bパターンデザインについて】
・Aパターンはトーンを同じにして異なる色味の系統を使用している
・Bパターンは全体を白黒にし、アクセントカラーとして赤色をポイント
 使いしている


同系色デザイン

配色を成功させるにはいくつかのセオリーがあるらしいのですが、「同系色デザイン」がそのセオリーの一つです。
同じ色相やトーンの色を使うことによって全体的に統一感が生まれます!
ちなみに、色には色相(色味)、明度(明るさ)、彩度(鮮やかさ)と呼ばれる3つの属性があります。このうち、明度と彩度が同じ色相グループを「トーン」と呼びます。

ただ、同色系デザインで気をつけたいことは色の「コントラスト比」です。
弊社のデザインチーム内でも「コントラスト比は気をつけよう!最低でも4.5以上!」とよく話題になります。
例えば背景が赤色のデザインに文字も赤色系で記載しても見えづらいと思います。なので同色系デザインを使用する際、読ませたい文字はアクセントカラーを使用するといいと思いました。

弊社CTOが教えてくれたコントラスト比がすぐわかるアプリを入れて私も日頃気をつけています。このアプリおすすめなのでMACの方は是非使ってみてください。


まとめ

本日は同色系デザインについて学びました。
色については日常生活でも役に立ちそうなので色彩検定に興味を持ち始めたゆかっしゅです。

引き続きデザイントレースしていきたいと思います!


この記事が参加している募集

わたしの本棚

この記事が気に入ったらサポートをしてみませんか?