Mister Burger
架空のハンバーガー屋のWebサイト
SUMMARY
- 目的
- お客様にお店や、商品のこだわりについて知ってもらい、来店してもらうために作成
- ターゲット
- 美味しいお店を巡るのが趣味な20〜30代の男性
- 制作範囲
- 企画 / デザイン / コーディング
- 制作期間
- １ヶ月
- 使用ツール
- Photoshop / Illustrator / XD / Dreamweaver
- 使用言語
- HTML / CSS / Javascript
- URL
- https://taigaweb.github.io/misterburger/index.html
COMMENT
黒と白で男性的で都会的な印象
ターゲット層とお店のある代官山のイメージに合うよう、男性的で都会的な印象を与える黒をベースカラーに使用しました。メインカラーには明度差の大きい白を使用することで、テキストを際立たせ、メリハリがつくようにしています。アクセントカラーには食欲を促進させる効果があるオレンジを指定、ボタンや見出しに使用することで、ユーザーの誘目性を高めるようにしました。
コンセプトページ
お店の魅力を伝えるページでは、写真がページの背景と合うように、写真の周りにシャドウをかけ、背景色の黒と馴染むように工夫しています。また日本語の文章の下に、グレーの英訳した文章を入れることで、飾りとしての役割と、外国人向けの説明もかねています。
店名をモチーフにしたロゴ
ハンバーガーと、口髭のイラストを用いて、店名の”Mister Burger”をモチーフとしたロゴを作成しました。お店の雰囲気に合うよう、図形をメインに使ったシンプルなデザインにしています。ハンバーガーを口にした時に、痛い印象を与えないよう、角がある部分は丸くしました。タイトルロゴも角丸で仕上げています。