ノートPCの販促バナー

今回のバナーの目的　ノートPCの販促バナー

配信場所　GDN・YDNなど

ターゲット　男性、20～40代

雰囲気　クール・ワイルド

サイズ　300px x 250px

画像　ノートPCの画像、荒野の画像

配色　暗めの青・焦げ茶・黒・白など

文言

（必須）

• 薄くて強いは正義
• ULTRA TOUGH BOOK
• メモリ8GB・SSD256GB・COREi5
• TOUGH BUSINESS（ブランド名）
• 詳細はこちら

（任意）なし

（フォント）明朝体

“改善のポイント”

①文字組（「薄くて強いは正義」）

・文字の頭を左で揃えて、レイアウトも左に配置すると認識がスムーズ

文字を大きくし、はみ出させることで雰囲気を出す。

レイヤースタイルのカラーオーバーレイで、グレーにすることで、一番見せたいPCの画像や、スペックへと視線を誘導できる。

②ノートPC画像の向き

・画像を左向きにして右端へ配置すると、文字組みとうまく収まる

まず、PC画面の中の、「ULTRA TOUGH BOOK」の文字が、私の作成したものは、左右に余白がなくパツパツだったので、修正してから、画面にはめ込んだ。

（私はIllustratorで、エンベロープ機能を使ってはめ込んだが、ヒカルさんからPhotoshopではめ込む方法を教わった。

実務では、提出後に直しが発生することがあるため、Illustratorで作るなら最後までIllustratorで作る、Photoshopで作るなら最後までPhotoshopで作るとよいとアドバイスを頂きました✨）

視線は、左から右へ流れるので、キャッチコピーを左に、ノートPCを右に配置すると自然に視線誘導できる。

商品画像は、トリミングしたり、隠したりせずきちんと見せてあげるとよい。

③リズム

・スペックの部分で、背景に帯を敷いてレイアウトを区切ると、きれいに収まる

バナーは余白がとれないため、要素を配置するとき、距離でどうにかしようとしても難しい。だから、帯を敷いてレイアウトを区切るとよい。

・スペックの英字と数字のフォント

私は、Adobe Garamond を使用したが、数字が少し読み辛い。

ヒカルさんは、Times New Roman を使用した。（上下がおさまっているため、数字が読みやすい！）

④最後に荒野の画像の位置を、文字組に合わせて移動した

印象的な道の部分をキャッチコピーの背景にくるように移動した。

（キャッチコピーは、私がイラストレーターで加工した文字だったので、フォトショップでカーニングできず、「正」と「義」の間に空間があいてしまっていたが、そこに道の中央線がうまく収まった）

　最終的に、画像の山の部分は見えなくなったが、最初にヒカルさんは荒野の写真の画像をCamera Rawフィルターを使って加工していた。

「画像を活かす」にはどうすべきか、常に考えることが大切なんだと学びました✨

具体的には、山の険しさを強調するため、Camera Rawフィルターで、露光を上げ、コントラストのつまみを右へ、明瞭度のつまみを右へ、かすみの除去のつまみを右へ動かした。

写真を補正したことで、山の陰影がはっきりしたので、上に配置する黒のレイヤーを不透明度を70％へあげた。

そのため、より背景と、前面に配置したものの間にコントラストが出たと感じました！