SHElikes WEBデザイン入門コース バナー制作#1

OVERVIEW

シーライクス WEBデザイン入門コースのデザインドリルで制作したバナー(イタリア旅行バナー)

YEAR 2023

初稿

制作データ

********************************************

制作箇所:全て (※写真、真ん中の切手画像は素材サイトからお借りしました)

使用ツール:Photoshop

制作時期:2023.1月

********************************************

要件定義・課題内容

********************************************

ターゲット:ヨーロッパ(またはイタリア)への旅行に興味のある人
イタリア旅行を検討していて行き先を悩んでいる人

ヴェネチアもしくはフィレンツェの魅力を知りたいと思っている人

制作目的:イタリアの二都市の魅力を伝える記事ページへの誘導バナー

方向性イメージ:バナーからイタリアの都市の魅力やイメージが湧く

それぞれの都市の特徴が端的に伝わり、もっと知りたいと興味が持てる

掲載場所:特に指定なし

サイズ:1200×628 px

指定条件:イタリアの都市や旅への興味が湧きそうな写真を必ず1枚以上使用すること

必要な要素

・あなたはどっちへ行く?

・TRAVEL TO ITALY

・水の都 ヴェネチア

・花の都 フィレンツェ

その他:遷移先はイタリアの都市(ヴェネチア・フィレンツェ)の魅力を伝える旅行記事

********************************************

制作時のポイント・こだわった点

********************************************

配色

・イタリア国旗の赤・緑・白

・写真の色味とマッチさせるため、緑は運河の色に近いエメラルドグリーン系の色、赤はフィレンツェの建物の屋根の色に近い茶色がかった赤を使用しました。

・写真選びの際も、「水の都」「花の都」で2都市のイメージが異なるため、対比するような写真を選びました。

フォント

都市名:FOT-キアロ Std

英数字:Haboro Contrast

あなたは~:VDL ペンレター

・ヴェネチア、フィレンツェの最も目立たせた都市名についてはレトロな雰囲気が感じられるものを使用しました。

・「あなたはどっちへ行く?」は、絵葉書の送り主が受取人に問いかけているようなイメージで、手書き風のフォントを使用しました。


個人制作テーマ:絵葉書

2都市の魅力はロマンチックでレトロな雰囲気だと写真を見て感じ、上記でも書いたように絵葉書やポストカードが似合いそうだなと思い、自分の中の制作テーマとして取り入れました。

海外の絵葉書やポストカードの画像を調べてみると、写真の周りに白い枠があるものがあったので同様に白い枠を採用しました。ただ、白背景のWebページに掲載された場合、縁が真っ白だとバナーとの境目がわかりにくくなるため、薄くブラウンのレイヤーを入れています。

「TRAVEL TO ITALY」の背景に切手のシルエットのイラストを使用しています。


フィードバック後

フィードバックの内容と修正した箇所

・水の都、花の都の文字が見づらい(自分でも気になっていたため、改善策について質問)

→文字色を変えてみる、文字を帯で囲ってみる、配置位置を変えてみる等のアドバイスをいただき、リボン風の背景と、フォントを都市名と同じものにし、色を変更しました。

・中央のフレームが背景と同化気味なので色を変えてみたらどうか
→濃い緑へ変更し、視認性を上げて文字も見やすくなりました。

・フレームの色を茶色やグレーなどに統一した方がまとまりやすいのでは
→下の「あなたは~」の部分と同じ色に変更し、まとまりが出ました。