バナートレース#02

見本↓

トレース↓

このバナーを選んだ理由

・文字の一部を切り離したり、文字にワンポイントを入れる練習をしたかった。
・写真と文字の間に透過シェイプを置くテクニックを真似してみたかった。

バナーの概要・目的

ANAの北海道胆振東部地震復興キャンペーンのバナー。
北海道の冬の夜景をアピール。北海道旅行に出かけてもらい、北海道の観光・経済振興につなげる。ANAの利用促進。

使用フォント

・かんじゅくゴシック
・Madre Script

なお、前者は『絶対フォント感を身につける。』という本に付属の『フォント見本帳』で、後者は『WhatTheFont』というアプリでフォントを特定した。

使用ソフト

・Illustrator
・Photoshop（背景写真加工のみ）

トレースしてみて気付いたこと

【全体のデザインについて】
・青みの強い夜景写真を使用することによって、ANAのコーポレートカラーである「青」を連想させるバナーに仕上がっている。なお、ANAの他のバナーも青を基調としたものが多いようである。

・言葉で直接的に訴えなくても、「冬」を連想させる雪の結晶のあしらいや、「夜景」の写真や月や星のあしらいを効果的に使うことによって、十分に北海道の「冬の夜景」の美しさをアピールできている。

・北海道の図形を白抜きにし、さらにフレームから飛び出させることにより、北海道だ！とぱっと目につく。図形左右の微妙な余白にイタリック体の文章を入れることで、物足りない印象も回避できている。

・ジャンプ率を高くすること、またメインコピーとサブコピーの間にラインを引くことで、情報の整理ができている。

・要素がバランスよく中央寄せされている。

【文字について】
・メインコピーの文字の一部分を分断している。具体的には、「北」の一画目、「海」の五画目、「道」の二画目。
分断方法は、文字のアウトラインを作成→複合パスに変換→分断したい部分に長方形パスをのせる→パスファインダーの「前面のオブジェクトで型抜き」。
★アドビのこちらの記事を参考にしました→目を引く文字デザインの作成方法：中級編

・メインコピーの「北」の四画目を、月のオブジェクトに置き換えている。前述の分断と合わせて、目を引く文字デザインに仕上がっている。
置き換え方法は、文字のアウトラインを作成→ダイレクト選択ツールで四画目のパスを削除→月のオブジェクトをのせる。

・「ANAでつなげる、支援の輪」の文字の周りには、暗めの色を使用して光彩（外側）を付けている。小さいテキストなので、視認性を上げるためか。

【あしらい等について】
・あしらい作成に使ったツール等は以下の通り。
月→正円を二つ重ねてパスファインダーで型抜き。
星→スターツール。
雪の結晶→直線ツール（線の先端は矢印にし、パスツールで変形した）と楕円形ツール。
英文横の手書き風の線→ブラシツール（木炭画 鉛筆）。
北海道の図形→ペンツール。

・雪の結晶、星、月は、よーく見ると和紙っぽい風合いの塗り。白黒の水彩テクスチャをオーバーレイ→クリッピングマスクで再現してみた。
★こちらの記事などを参考にしました→イラレ(Illustrator)で水彩風イラストを作る方法！　
他にも何か方法あるのかしら？ご存知でしたら教えてください！

・コピーを囲んでいるフレームの、長方形の四隅を面取りした箇所は、四隅に三角形を配置して長方形と合体し、不要な直角部分のパスを削除して作成（ウィンドウ→変形→面取りで簡単にできそう♪と試してみたものの、今回のような辺の長さが異なる面取りには対応していないようだった）。
一回り小さい内側の枠線は、オブジェクト→パス→パスのオフセットで作成。

・フレーム内に敷いたグレーっぽい半透明の塗りの色味は、少し黄味がかったグレー。背景の夜景の黄色い光に照らされ浮かび上がっているような印象にするためか。
ちなみに、試しに真っ黒の塗りの不透明度を下げて使用してみたところ、夜景の青と同化したような見え方になってしまった。
また、円形グラデーションをかけて中央部の塗りを若干濃くしている。文字が集中した中央部分の視認性を保ち、外側に向かうにつれて美しい夜景写真が透けて見えるような工夫か。
・・・と、がんばって見本に寄せるよう努力してみたものの、少し仕上がりが違って見える。背景写真が違うせいもあるかしら？どうだろう。

・背景はフリー素材の函館山の写真を使用。Photoshopで「色相・彩度」「明るさとコントラスト」「カラーバランス」を調整してかなり青く加工。
少し夜景のキラキラ感が弱いので、見本の写真のような夜景の光が強く出た写真を使えばなお良かったかもしれない。

さいごに

フォントにひと手間加えることによって、人目をひく文字デザインに仕上げることができると知った。
もちろんそのままのフォントでも美しいが、「もう少しデザインにインパクトが欲しい」というときに使えるテクニックだと思った。
他にもいろいろな文字加工を試してみたい。

写真上に敷いた透過シェイプについては、写真を綺麗に見せつつも文字の視認性を保てるような丁度いい不透明度と色味がつかめずに苦戦した。
しかし、汎用性の高いテクニックだと思うので、他の場面でも使いつつコツをつかみたい。