見出し画像

#017 よくみるキャンペーンバナーのチケット

おはようございます。こんです🦊
こちらのnoteで宣言した通り、昨日インプットしたことを記録します。今日で17日目。
デザインの分析をしっかりやらなきゃな、と思いつつツールの使い方に偏っていた気がするので今回はよくみるあしらいを練習しつつデザインの分析を行うことにします!

作業の時間短縮のためには、ツールの使い方を覚えておくこととあしらいとか素材の引き出しを持っておくことが大事かなと思うので、今回はキャンペーンバナーなどでよくみるチケットを題材にしました。

今回のインプットの目的


  • キャンペーンバナーでよくみるチケットの作り方をインプットしたい。


参考にしたデザイン


出典:https://www.pinterest.jp/pin/458522805826387562/

今回のインプットの成果


  • ペルソナは、10〜20代の女性で大人っぽい高級感というよりは、かわいらしいアイテムを好む人。

  • 濃いピンク、薄いピンク、白の3色のみ使われており伝えたい情報は、(1)1000円OFFのクーポン券であること
    (2)6日間限定
    (3)期間
    の順番で情報設計されており、文字の強調(サイズや効果、フォントの太さ)が上から順に強く設定されている。

  • 一番伝えたい情報は、真ん中に配置しその他の情報は一番下に配置している。

  • ペルソナに合わせて、フォントやシェイプが丸っぽくぷっくりしたもので統一されている。角丸の大きさも統一されていた。

  • 全体が横文字で真っ直ぐで読みやすいが、上部の円形文字だけ形状が違いあしらいのように見えて遊びがあり、一部の要素を変えるだけでかっちり感が少なくなる。


ツールに関するインプット


今回は、なんと過去にインプットした方法で全て行うことができました!
「わぁ、この作り方知ってる!」と思えて嬉しかったです。

  • 背景の斜め線はブラシの定義を追加。

  • チケットの丸く切り取られている部分はアンカーポイントを追加して変形。

  • チケットのもぎり線(?)はパスに沿ってブラシツールで作成。

参考1:背景の作り方
参考2:点線の作り方

※ただし、これらの作業Figmaの機能を使えばもっと簡単にできそうだな・・・とふと思いました。

おわりに

最後まで見てくださりありがとうございます。
これまでにやったことがある方法だけでトレースができたのですごく嬉しかったです。そして、トレースするための参考を調べているとよくみるレイアウトやあしらいがたくさんあってこれらの作り方やデザインの中での効果を知っておくと、構成やレイアウトを考える際の作業時間の短縮に繋がりそうだなと感じました。

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