見出し画像

【WEBデザイン/勉強】「デザインのドリル」演習03をやってみた

® ♀

こんにちは！®です！

前回の投稿から少し間が空いてしまいましたが、今回は「デザインのドリル」演習03のデザイントレースと別案の実践にチャレンジしてみました。

今回は余談なしで早速本題に入ります。

演習03「キャンペーンのDM」のデザイナートレース

演習03では、キャンペーンのDMのデザイントレースをやってみました。文字要素とイラストのバランス感をどうキープするかなど、俯瞰してみたときのデザイン全体のバランスについて主に学びました。見本とトレースしたものは以下です。

演習03比較画像

実践内容
目標時間：45分
実際かかった時間：1時間30分
トレース内容：キャンペーンのDM
目標
・全体的に見て文字要素とイラストのバランス感の安定性を意識する
・目標時間をなるべく目指す
・優先順位を考えながら何をこのキャンペーンでは伝えたいのかを考えながらトレースをしてみる
感想
・英字タイトルが少し斜体になっていて傾き加減を調整するのが少し難しかった
・デザイン全体でちゃんと文字やイラストの比重バランスが考えられてそれぞれ配置されていることに気付いた
・右上にある丸飾りが下のツリーやプレゼントなどのイラストの横幅内に合わせて配置されている
・余白部分をうまく生かして雪の結晶など冬っぽさを演出するイラストが配置されている気がする(個数など）
・リボンのイラスト内にある日本語タイトルの丸みを作るのに結構時間がかかってしまった
トンマナ
文字色：＃f7eee4(クリーム)、＃221815(黒)、＃688555(緑)、＃dcc55d(黄色)
フォントサイズ：103px、45px、36px、18px、16px、14px

「葉を見て、木を見て、森を見て」を意識して考える

ここで、目標で書いた「優先順位を考えながら何をこのキャンペーンでは伝えたいのかを考えながらトレースをしてみる」を実践してみるために、久しぶりに「葉をみて、木を見て、森を見て」の考え方でこのキャンペーンのDMのデザインが何を誰に伝えたいものなのかを具体的に掘り下げていこうと思います。

このトレースを実践する前にこばやすさんのこのツイートを見て、デザイントレースをするときにただトレースをして構造とかを理解するだけではなく、このデザインが何を誰に伝えたいかも考えながらやることが大事だということに気付きました。

デザイン広告は、これを見たユーザーへ届けるものであり、デザインをつくるときは何よりもユーザーの視点を持って考えることが大切なんだと改めて感じました。じゃなければ、デザインをつくったとしても内容を考えた方、届けたい方両者の想いを汲み取ることができないし、もちろん伝わらないデザインになってしまうなと気付かされました。

「葉をみて、木を見て、森を見て」の詳細は、こちらのnoteに書きました。良かったら見てみてください。プロの方と違って上手くまだまとめられてないですが良かったらどうぞ。

🍃葉を見る
・クリスマス限定イベントについてのお知らせキャンペーン
・ベースカラーはクリーム色、メインカラーは黒色、アクセントカラーは緑色
・左上にキャンペーン内容が記載
・左下に詳細内容が記載
・右部分にイラスト
・大きい要素が左上と右下に、小さい要素は左下と右上に配置
・全体の文字の優先順位は、「Happy Christmas～」英字タイトル＞「期間」＞「ハッピークリスマス～」日本語タイトル」＞「ファミリーモール名」＞「キャンペーン詳細内容」
🌲木を見る
・クリスマス＝1年の中で特別なイベントなので、クリスマスキャンペーンと名づけることで特別感を出している？
→普通のセールとは違うプレミア感を演出している
・文字の中で黒色をメインにしているのは黒を使っているのは最優先順位の英字タイトルとキャンペーン詳細で、「ファミリーモール」と「日付」は緑色を使用して、日本語タイトルは赤いリボンのイラストの中にベースカラーのクリーム色を使用
→・黒＝メインカラーなのでキャンペーンの内容・詳細はDMのメイン内容なので黒色を使用した？
　・ちょうど実施期間がクリスマスシーズンなのでクリスマス＝ツリーの色＝緑なので緑色を使用した？また、「いつ」と「どこで」をセットとして考えているため、「ファミリーモール」も緑色を使って強調した？
・大きい要素と小さい要素がそれぞれ対角線上に配置されている
→全体のバランスが良く見える
🌳森を見る
・全体的にかわいらしい、ポップさ、色合いからやさしさを感じる
→ターゲットは子供もしくは子供がいるファミリー層？
・クリスマスの特別感を出すために、先順位が最も高い英字タイトルは筆記体フォントを使用した？
・プレゼントのイラストを使うことで、クリスマス＝サンタさん＝プレゼントをもらうに繋がる
→キャンペーン内容も「先着1000名様に素敵な商品をプレゼント」なので、プレゼントのイラストもそのフレーズにもかけてる？そもそもクリスマスのキャンペーンなので、イラストもクリスマスに関連したものを使用している
・「この期間で商品を買うとプレゼントがもらえる」ということから、デザインを通じて通常よりも消費者の購買意欲を高めようとしている？

このデザインが伝えたいこと

上記で深堀をした結果、このデザインは以下のことを伝えるべくしてつくられたのではないかなと考えました。

・このキャンペーンは、クリスマス期間限定で素敵な商品をプレゼントでもらえる、子供や子供がいるファミリー層をメインターゲット向けのイベント
・クリスマス＝プレゼントを買う方が増える時期なので、その時期に合わせて通常以上に消費者の購買意欲を高めようと考えている
・消費者がこのモールで商品を買いたいという気持ちを高めることを目標にデザインが作られている

こうやってデザインから伝えたいことをユーザー視点を持って考えながらトレースをすると、対象ユーザーの行動意欲を高めるためにデザインをつくるときはこういうデザインをすると伝わりやすくなるのか、と引き出しの1つとして得ることができるなとわかりました。

実践編

次に、レイアウトを変更した2つのバージョンに挑戦してみました。

1つ目は、基準を中央揃えにした左右対称バージョンです。

演習03比較画像　パターン1

左右対称にシンメトリーで配置すると、すごく全体のバランスが良く伝えたい要素もわかりやすくて見やすいなと最初に見て感じました。ここでもイラストは左右の比重バランスをしっかりと考えて配置していることが大事だとわかります。

実践してみて意外と大変だったのは、リボンの丸みに合わせて文字に丸みをつけることと左右のイラストの傾き加減を等しくすることでした。

2つ目は、3つの要素に分けて全体を三角形に見立てて配置させたバージョンです。

演習03比較画像　パターン2

それぞれの要素を3つに区分して逆三角形の形になるように配置すると、確かにそれぞれの要素がより鮮明になってわかりやすいと感じました。また、大きい要素から小さい要素へと左上→右上→左下へと導線になって配置されているのもすごく伝わりやすくなるポイントなんだなと感じました。

ここでは、ペンツールでなるべくガタガタせずに楕円を作成するのがすごく難しかったです。１つ１つ丁寧にやらないとトレースの図のように見本と違って若干のガタガタが気になってきれいに見えないです。このトレースを通じて私はペンツールが苦手なんだと改めて今後の課題点として認識することができたので、ここを改善していくことを目標にしたいと思います。

終わりに

ここで学んだことは、以下です。簡単にまとめてみました。

・文字やイラストにも要素ごとに重さがある
・全体のバランス感を考えてデザインをする
・構図の理解に加えて、「誰に何をどう伝えたいか」を考えながらトレースをすることが大事である
・自分はペンツールが苦手であること
・色合いも時期やユーザー層と類似するものを使うことでよりイメージしたターゲット層伝わりやすくなる

noteでやったことをまとめるのは正直大変でちょっとめんどくさいとも思っています。でもこの大変でめんどくさいアウトプットが今後の自分のデザインの成長に繋がる大事なことだと思うので、ちゃんと継続して案件が取れるようになることを目標にやっていきます。

それでは。


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