【#01 バナートレース】円グラフのグラデーションってどうやるの？
こんにちは、yu-kaです🍸🫧
現在デザイナーを目指し、デザイン知識や技術を学んでます。
今回は、第1回目のバナートレースです！
悪戦苦闘しながら取り組み、その中で学んだことを記載していきます。
今回課題となったのは、タイトルにもある通り、「円グラフのグラデーション」です。
斜めのグラデーションなど、直線系のグラデーションは「ちょちょいのちょい！」ですが、円型になると「円形に……グラデーション...…？」となり、頭がフリーズしました。
この表現方法やその他の表現技法、気づいたことや学んだことを記載していますので、良かったら参考にしてください！
1．トレースの成果
■ トレースで苦労したこと
トレースで特に苦労したことは、以下4つです。
円グラフのグラデーション
ペンツールを使用した｢NEW｣の変形
クリッピングマスクのレイヤー上下関係
トーンカーブを利用した写真加工
1．円グラフのグラデーション
言葉の通り、円形に沿ってグラデーションをかけることに苦戦しました。
Photoshopはグラデーションツールもあるため、「これを使うってこと？」などと、かなり迷走しました。
2．ペンツールを使用した｢NEW｣の変形
見本画像の中央上部にある、あの足の長い筆記体です。
フォント探しでかなりの時間が溶けました。
文字ってただ入力するだけじゃないんだ、文字もデザインの要素なんだと、学んだ瞬間です。
3．クリッピングマスクのレイヤー上下関係
｢PhotoshopとIllustratorって、何でクリッピングマスクの順番（レイヤーの上下関係）が逆なの！？｣と逆ギレしてました。
ちなみに、Photoshopは写し出したい画像が上です。切り抜きたい形や文字が下でした。
4．トーンカーブを利用した写真加工
「トーンカーブのあの直線って何？」「縦軸と横軸って何を表してるの？」「だれか基本から教えてください」と、トレースだけでなく、調査をはじめてしまった結果、いつの間にか時間が過ぎており、時計を見て1人絶望したのを覚えてます。
とりあえず、変更したい箇所を｢指マーク｣みたいなので選択して、グラフを適当に調整すると良い感じになるってこと、学びました。
■ 学びと気づき
今回のトレースで学んだことを「学んだ表現技法」と「表現が与える印象」の2つの視点で、簡単に記載します。
どれも実際にトレースすることで気づくことができ、トレースから得られるデザインに関する学びの多さを感じました。
▼学んだ表現技法
新たに学んだ表現技法は以下の通りです。
3分割構成
数字と単位でフォントを変更する
筆記体の加工など、文字にデザインを加える
文字で画像に動きを出したいときは、筆記体を変形してあしらいとする
画像に透明感を出すには光を強くし、色味が少し薄くなるように調整する
実際に手を動かしてみると、「ずっとこの辺をトレースしているな」と感じることがあり、そこからバナーの構成に気づくことができました。
その他にも、同一フォントで文字をトレースしたら文字の形状が合わなく、異なったフォントを使用していることに気づくことができました。
一緒の素材を使用しているように見えても、より美しさを引き出すために、細かな工夫がなされていることを学びました。
やはり作成者には、「どのような印象を与えたいか」という明確なコンセプトがあり、それを実現するために多くの工夫が凝らされていることを実感することができました。
▼表現が与える印象
今回トレースしたバナーデザインの雰囲気や特徴から、バナーに使用されている表現技法が、見ている人にどのような印象を与えるか、書き出してみました。
透明感のある表現は、基礎化粧品など美しさや女性向け商品に活きる
細い線や丸みのあるフォントを使用することで、女性向けや美しさといった印象を与える
文字を利用した｢動き｣を出す表現は、飲料水や制汗剤など爽やかさを表現するときに使用できる
商品の近くに目立つ要素を入れる（余白の一部分に異物を加えるなど）ことで、視線が商品へ誘導される
写真加工を通して、実際の画像よりも光量を多くして色を薄くさせることで、透明感を生み出していることに気づくことができました。
また、線の細いフォントを使用することで、洗練された美しさを感じることができ、大人向けの商品であるという印象になることを学びました。
このことから、基礎化粧品など大人向けかつ美しさを引き出す商品のバナーを作成する際は、透明感を出す工夫や線が細いフォントを使用すると良いのではないかと考えました。
「NEW」のデザインにおいても、筆記体の最後をペンツールで伸ばすことで、フォントはもちろん、画像にも動きを出していることに気づくことができました。
そして、動きがつくことで風が吹いているかのような、爽やかさや柔らかさの印象を与えていると感じました。
このように、筆記体の文字を一工夫するだけでも、爽やかな印象を与えつつ、動きのある目を惹くデザインをつくり出すことができるということを学ぶことができました。
2．トレース作品を選んだ理由
■ 作品を見たときに感じたこと
初めて今回のバナーを見たとき、情報がしっかりと組み込まれているのに、シンプルでさっぱりしているなと感じました。
全体的に余白の割合が多いと感じたので、「余白の使い方」がまとまったシンプル感を演出しているのかなと思い、トレースすることで余白の広さを感覚で覚えようと思いました。
■ 学びたかったこと
今回のバナートレースで学びたかったことは、以下2つです。
明るさ調整などの写真加工のやり方
円グラフのグラデーションの作り方
1．明るさ調整などの写真加工のやり方
切り抜きなどの写真加工は何度か実施したことがあったのですが、明るさやコントラストってどうやって編集するのだろうと、好奇心旺盛な内なる自分が｢やってみろ｣と言ってきたため、学ぼうと思いました。
2．円グラフのグラデーションの作り方
はい。タイトルの通り、やり方がさっぱり分かしませんでした。そのため、必然的に習得しなければという宿命に駆られ、トレースを実施しました。
3．トレース作品の分析
トレースする前に、この作品がどのような目的で作成され、その目的を達成するためにどのような工夫がされているのか、14項目で分析してみました。（字が小さすぎて読めないです、すみません🙇♀️）
（14項目）
上記の表の中でも、特に印象に残った｢表現の工夫｣を2つほど記載します。
■ オーガニック感が伝わる工夫
ナチュラルオイルの購入促進バナーのため、いかにナチュラル感を演出し、一目でオーガニック製品だと気づいてもらえるかが大切だと感じました。
｢オーガニック感を伝える｣ための、印象的に残ったデザイン工夫は以下の通りです。
緑をメインカラーとして使用することで、ナチュラル感やオーガニック感が演出されている
オーガニックのイメージを連想させるために、商品画像の一部に葉っぱやタオルが写り込んでいる
色が人に与える印象はとても大きいと感じました。
大抵の人は｢緑｣を見ると自然をイメージします。緑をメインカラーにすることでオーガニック感が伝わりやすくなっていると感じました。
他にも｢緑｣は目に優しいと聞きます。柔らかな印象やイメージ効果を上げているのかなとメタ読みしちゃいまいした。
また、画像についても面白く、葉っぱがあることはすぐに分かるのですが、よく見ると手前に白いタオルが少し写りこんでいます。
｢植物｣という文字とタオルの組み合わせ。
｢このタオル絶対オーガニック製品だろ！｣と思いました。
このように、オーガニックをイメージさせる要素を配置することで、ナチュラル感とオーガニック感をよりわかりやすく、演出しているのではないかと考えました。
■ 数字が目立つ工夫
実績という数字は人々を誘惑し惑わせます。そのため、アンケート結果の数字に、人々の視線を誘導させることが大切だと感じました。
｢アンケート結果の数字を目立たせる｣ための、印象的に残ったデザイン工夫は以下の通りです。
数字を大きく、単位を半分程度に小さくしている
上記のアンケート内容に目線が行くように、単位を上側に配置している
円グラフで割合を記載することで、視覚的にも数値や実績がわかりやすくなっている
｢数字とフォントのサイズを変える｣ことは、デザインの鉄板手法だと分かってはいましたが、よく見てみると、こんなにもサイズ差があるのかと驚きました。
また、数字と単位の表記方法を工夫するだけでなく、どういった数字なのか（今回だったらアンケート結果）を考えて、数字の意図が伝わるように、配置場所を工夫したり、図形を使用するなど、全体像を把握した表現の工夫が、より多くの人々の視線を集めるのだと感じました。
4．トレース後の学び
トレース後に、改めて気づいたことや学んだことを｢表1：作品分析項目｣に追記しました。さらに、新たな6項目を追加し、計20項目で学習成果をまとめました。（こちらも字が小さくて読めません、すみません🙇♀️）
（20項目）
上記の表の中でも、特に勉強になった｢表現の工夫｣を2つ記載します。
■ 円のグラデーションは「角度」
太い線で円を描くとなぜか大きく、圧を強く感じることはありませんか？
この現象を解決したのが、円型のグラデーションです。
グラデーションを適用することによって、圧を弱めるとともに、透明感までアップさせているのです。
では、この円形のグラデーション、どうやっているのでしょうか？
遂にきました、タイトル回収の時間です！！！
はい！とても簡単でした！
円型のグラデーションをかけるには、｢塗り｣の選択項目において｢線形｣ではなく｢角度｣を選択します。
上記のように対応することで、今回使用したバナーの円グラフのような、円に沿ったグラデーションをかけることができます。
新しい知識で良い学習になりました！
他にも様々な形状があるため、実際に試してみることで、使用イメージを膨らませたいと思います。
■ 筆記体の加工効果
トレース前の分析でも、筆記体の加工は画像に動きを出す大きな働きをしていることが分かりましたが、トレースをしてみることで、他にも効果があることに気づくことができました。
新たに勉強になった｢筆記体の加工が生み出す効果｣は以下の通りです。
余白箇所に少し異変を入れる（今回だと｢W｣のハネを飛び出させる）ことで、その箇所に視線が誘導される
｢NEW｣を利用したあしらいに視線が向くことで、商品が目立つ
ペンツールの加工と余白を組み合わせたコラボレーション技でした。
今回のバナーは、基本的な文字フォントがゴシック体であるため、ただでさえ筆記体は目立ちますが、筆記体の加工部分が余白の異物となることで、さらに｢NEW｣への注目度が上がっています。
また、このコンビネーション技を商品の画像付近に配置することで、商品とサブタイトルに自然と目線が行き、商品が目立つことに気づきました。
｢いかに商品を目立たせるか｣がとても伝わってくるデザインだと感服いたしました。
作品への応用はまだ難しいですが、商品や対象物を目立たせるための工夫を増やすことができました！
5．今後の目標
はじめてのバナートレースは苦戦ばかりでしたが、その分学びが大きく、Photoshopの機能やデザインの知識をたくさん吸収することができました。
引き続きトレースを継続することで、ツールの使い方や表現の幅を広げていきたいと思います。
今回の成果を踏まえ、今後の目標を以下のように設定しました。
トーンカーブの縦軸と横軸の単位や項目の理解を深める
グラデーションの形状をすべて試すことで、どのような表現になるか理解を深める
使用したフォントを印象ごとにまとめる
1週間に1つはトレースを行う
ツールの使用方法やデザインの表現方法を身につけ、2時間以内にトレースできるようにする
すぐにできる目標はすぐに取り組み、継続する目標は自分を裏切らないためにも、努力して継続していきたいと思います！
それでは、最後までご覧いただきありがとうございました！
また次回の投稿でお会いしましょう🍀🫧
yu-ka