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

こんにちは！ゆかっしゅ（@kaname_shimizu）です。

みなさん気がつきました…？
なんと！！サムネとこの記事のタイトル名が「未経験WEBデザイナー」から「初心者WEBデザイナー」に変更しました！！
よくよく考えてみるとWEBデザイナーにジョブチェンジしてもうすぐ2ヶ月が経ちますので、「さすがに未経験でなくないか…」と思い初心者WEBデザイナーに昇格しました（笑）

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

自己紹介

氏名：ゆかっしゅ
年齢：27歳（2022年1月現在）
最終学歴：管理栄養士の専門学校卒（4年制）
職歴：新卒で医療業界の人事部配属（1年半）
　　　ITベンチャーに転職しバックオフィスを担当（3年）
　　　（WEBデザイナーのウの字もない。。。。）
　　　2022年1月からWEBデザイナーデビュー
趣味：MMORPG（FF14）累計プレイ時間数約2000時間
　　　2022年の目標「お弁当づくり」に挑戦中（今まで何回も挫折）

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

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

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

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

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

#4 結婚式の招待状

【今回のトレースで学んだこと】
・余白の使い方について（詳細後述）
・文字色を金色にすることで高級感が出ている
・右上部に写真を置いて、左下部に文字を置いてバランスを取っている
・目立たせたい要素には余白を入れると目立つ
・所要時間：15分

#4結婚式の招待状（Aパターン、Bパターン）

【Aパターン、Bパターンデザインについて】
・Aパターンは一見余白がないように見えるが、
　写真の中の空を余白としてインパクトを得ている。
・Bパターンは全体を3等分に分割して1/3を余白としている。
・所用時間：15分

余白を意図的に使いこなすデザイン

私の前までの認識は「色々コンテンツを書いて余った白い部分が余白！」
という認識でしたが、デザインをする時は余白も含めてデザインすることが大切だと学びました！

【余白の大きさによって与える印象】
余白が少ないデザイン＝「賑やか」「楽しそう」
余白が多めのデザイン＝「高級感」「落ち着きのある」

余白を意味のあるデザインにする場合は「右揃え」「左揃え」「上揃え」「下揃え」を基本的に適用します。「中央揃え」は左右や上下の余白が均等になるため、意味のある余白を作りにくいです。
余白を含めてデザインをする時の注意点としては、不均等な余白でも要素を揃えて配置するという点です。

まとめ

今回はデザインする上での「余白」について学びました！
「余白」だけの本なども売っているので、デザインをする上で余白はとても重要な要素なんですね。今度書籍を購入してもっとじっくり余白のことについて学んでいきたいと思いました！