未経験WEBデザイナーがトレースでデザインを学ぶ【デザインのドリル#3】

こんにちは！ゆかっしゅ（@kaname_shimizu）です。
今回も引き続き、WEBデザインの技術を高めるために書籍「デザインのドリル」を使用してデザイントレースしました！

自己紹介

氏名：ゆかっしゅ
年齢：27歳（2022年1月現在）
最終学歴：管理栄養士の専門学校卒（4年制）
職歴：新卒で医療業界の人事部配属（1年半）
　　　ITベンチャーに転職しバックオフィスを担当（3年）
　　　（WEBデザイナーのウの字もない。。。。）
　　　2022年1月からWEBデザイナーデビュー
趣味：MMORPG（FF14）累計プレイ時間数約2000時間
　　　最近ポケモンの最新作（アルセウス）買いました。

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

トレース＆模写で学ぶ　デザインのドリル

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

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

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

#3 キャンペーンのDM

【今回のトレースで学んだこと】
・視覚的な重さ、重心、バランスについて（後程詳細記載）
・今回は大きなコンテンツを対角に置くことでバランスを取っている
・赤い帯にそって文字を入れるやり方にすごく苦戦した。
　正解かわからないが、今回はオブジェクト→エンべロープで作成
・所要時間：1時間

#3 キャンペーンのDM　（パターンA、Bトレース）

【Aパターン、Bパターンデザインについて】
・Aパターンは左右対称（シンメトリー）にコンテンツを置くことで
　バランスを取っている
・Bパターンは三角形を作るように配置してバランスを取っている。
　この時逆三角形に配置すると良い。
・所用時間：45分

デザインにおける重心とバランス

最初参考書でこの項目を見た時、私の素直な感想。。

「いや、デザインの重さってなんや！！！」

ということでサラッと読み流していたのですが、今回のトレースでなんとなく理解ができたと思いますのでここにまとめます！

●デザインの「重さ」とは
要素の大きさだけではなく、文字の密度や太さ、写真と背景のコントラスト比、色の濃度などが関係しています。
・重い＝文字の密度が高い、文字が太い、
　　　　写真と背景のコントラストが大きい、色が濃い等
・軽い＝文字の密度が低い、文字が細い、
　　　　写真と背景のコントラストが小さい、色が薄い等

例えば上図の左のように「色が濃い大きい丸」と「色が薄い小さい丸」乗せてもバランスは取れません。
ですが「色が薄い大きい丸」と「色が濃い小さい丸」バランスが取れる、ということになります。
他にもどうやってバランスを取っていくかを下記にまとめます！

こちらは同じ重さの要素を対角に置くことによってバランスを取っています。

こちらは左右対称に同じ重さのコンテンツを置くことでバランスを取っています。

こちらは逆三角形に同じ重さのコンテンツを配置するとこでバランスを取っています。

基本的に重心は中央にした方がバランスが安定しやすいそうです。（もちろんわざと重心を中央からずらしたデザインもあり）

まとめ

今回のトレースではデザインの重さやバランスについて学びました！
今回学んだことに関しては紙面上のデザインに有効だそうです。
引き続きデザイントレース頑張りたいと思います！