デザイン解剖#63 (22/03/06追記)
いやぁ〜お久しぶりのnoteです…！
なんと8ヶ月くらい間が空いてしまいました。
またイチからコツコツやっていきますのでどうぞよろしくお願いします。
今回はナゴレコさんのバナーを解剖&トレースさせていただきます。
使用フォント
おばんざい 特集：丸明オールド
懐かしくて、モダンな仮名です。筆文字のような形が特長です。漢字と比べて仮名は小ぶりですが、縦に組んでも、横に組んでも不思議ときれいで読みやすいです。 丸明の漢字は共通です。エレメントに丸を使っているのが特長の日本の明朝体です。縦線、横線、点、トメ、ハネ、ハライなどどれも先端が丸くなっています。丸明朝体というカテゴリーを作ったフォントです。仮名は全部で7種類あります。
親しい人としっぽり楽しみたい、/ずらりと並ぶ料理に〜：KOくれたけ銘石B
中国南京市郊外で出土した晋代の墓誌銘『王興之墓誌』より復刻した漢字書体「銘石」と、森川龍文堂の活字見本帖『活版総覧』から復刻した和字（かな）書体「くれたけ」を組み合わせたオールドスタイルのゴシック体です。隷書体をベースに彫刻の味わいが加わった書風が、ノスタルジックでありながらも素朴な魅力を演出します。
Nagoya Obanzai：わからず…(分かる方いればコメントで教えてください！)
使用色
黄色(#E8CD7B)：背景
茶色(#5C1F0A)：背景/文字
白：座布団、背景あしらい
特徴
メイン色は2色でシンプルにまとめている一方で、周囲に彩度の高い料理写真を配置することで楽しげな印象に。
背景にテーマと合致する図形(イラスト)を大きく配置することで目線を中央に集めている。
背景の茶色も僅かに中央に向かって明るくなるグラデーションがかけられており、スポットライトのようなイメージ
料理写真もあくまでお椀に沿うように、左右対象で並べられているので雑多な印象にならずに済んでいる。また、写真と文字の間に余白があることで「おばんざい」が瞬時に目に飛び込んでくる。
背景に和紙のテクスチャをさりげなく使用することで柔らかい和風の雰囲気に。お椀方図形のフチも波うたせることで、和紙を手でちぎった時のような印象
その一方で、フォントには毛筆などを使わず、英語筆記体のあしらいも使用することで和モダンな印象に
文字サイズにメリハリをつけることで、どこを読んで欲しいのかが一眼でわかる。「おばんざい」→「特集」→「親しい人としっぽり楽しみたい、」→「ずらりと並ぶ料理に気分わくわく！」の順に目線誘導ができている。
「親しい人としっぽり楽しみたい、」に白ベタの座布団を敷くことでグループ感を強めている。また、ただの長方形や角丸ではなく円が重なったような図形にすることで柔らかい印象になっている。
「ずらりと並ぶ料理に気分わくわく！」は右下に配置し、右に10度ほど傾けることで、キャッチコピーであることが感覚的に伝わる。(「満員御礼！」のようなイメージ)
タイトル背景の英文「Nagoya Obanzai」を1pxほどの枠のみ、白縁にすることで画面を賑やかしつつも主要部分の視認性は落とさない仕掛けになっている。またわずかに右肩上がりにすることでスタイリッシュな印象に一役かっている。
まとめ
やりすぎかも？というくらい文字サイズの強弱をつけてジャンプ率を高めることで、結果的にあしらいを最小限におさえながら伝えたい内容をはっきり示すことができる好循環につながっている良い例だなと思いました。
また3種類の特徴的なフォントを使いながらも、それぞれの役割がはっきりしているので混み合った印象になっていない点も学びでした。
次回以降は、参考バナーやサイトを元に実際にトレース/オリジナル版を作っていければと思います！時間はつくるもの…！(自戒)
22.03.06追記
できる限り、トレースさせていただきました！
分析しているだけでは気づかなかった、手を動かしてみて初めて気づくこともいくつかありました！
器のちぎり絵風表現は、aiの場合 効果＞パスの変形＞ラフより作成することができました。
周囲に配置されている写真素材の撮影角度がほぼ同じになるようにすることで、色味など内容がバラバラでも統一感が生まれる。
右下のコピーは、右斜めに3度ほどの傾き。文字を傾ける時は、僅かでも受け手に与える印象は大きい。
背景の筆記体は、オリジナルのよう。#ffffffだと強く目を引きすぎてしまうため、トレース版ではわずかに黄みがかった色を使用しました。
トレース、かなりカロリー使いますが必ず力になる、、！続けます！
励みになりますのでよろしくどうぞ！