(架空案件) WEB制作 ハンバーガーショップHP デザインカンプ

製作時間：40時間

製作期間：1か月

製作範囲：情報設計・ワイヤーフレーム・デザインカンプ

使用ツール：Adobe XD / Photoshop

目次

①前提情報

・クライアントからの要望書

・ペルソナ設定

②製作したHP

③工夫したところ

・伝えたいことをユーザーに届けるための分析と要素

・ペルソナのゴールを実現させる要素

・各項目ごとの工夫

・配色、あしらい

④感想

①前提情報

■クライアントからの要望書

国産野菜、国産牛肉100%の安心で新鮮なハンバーガーショップ「Burgermania」のウェブサイトの製作依頼。

〈クライアント〉

BURGER MANIA Inc.

〈依頼詳細〉

ファーストフードチェーンの食の安全性が叫ばれている中、当ブランドはとことん安全性と鮮度にこだわっているので、それを訴求し、ハンバーガーの魅力を伝えたい。競合他社はフレッシュネスバーガーとモスバーガー

ターゲット：やや高所得で健康志向なハイエンド好きの20代後半男女

目的：ハンバーガーのウリを伝え、集客アップを図ること

〈提供素材〉

特になし

■ペルソナ設定

〈ペルソナ〉

野村佳菜子 (26歳・OL)

• 都心のオフィスに勤務している
• ジムに通ったり毎日スムージーを飲んだりするなど健康に気を遣った生活をしている
• 食品や雑貨は金額よりも産地やデザインなど自身のこだわりを重視する

〈ペルソナのゴール〉

仕事が忙しく自炊することができない時に会社の近くで手軽に・健康的な食品を摂ることができる

②製作したHP

③工夫したところ

■伝えたいことをユーザーに届けるための分析と要素

• 安全性・新鮮さを大きくアピールする

→そのために商品自体の写真よりも素材の写真を大きくする

→写真の彩度は高く、背景や他要素の彩度を低くすることで、コントラストを生み出し新鮮さを強調する効果を出す

• 国産へのこだわりをアピールする

→そのために国産素材でまとめたセクションを作る

■ペルソナのゴールを実現させる分析と要素

• 健康で安全な食品を扱っていることを第一にアピール
• ファストフード店を参考＜オーガニックフード店を参考
• 金額はあまりアピールの要素に含めない

■各要素ごとの工夫

1. ファーストビュー

• Photoshopで写真を編集し、背景を暗く&ぼかしをかけた

→商品のバーガーを前面にアピールし迫力を出す効果

• 「いいもの おいしく こだわる」のキャッチコピーでは、「国産素材をふんだんに使用したこだわりの商品」をウリにしているクライアントの強みを簡潔に表現した

2. NEWS

• ターゲットがハイエンド好きであるため、更新頻度が高いことがアピールできるようファーストビューのすぐしたにニュース欄を配置

3. 「いいものってなんだろう？」

• 素材へのこだわりを大きくアピールするため、それぞれ調理前の食材の写真を使用

4. ELABORATE (3つのこだわり)

• 人が印象に残りやすい数字と言われている「マジックナンバー」の3を使用
• テキスト部分は無彩色にし、できるだけシンプルにすることでコントラストが生まれ、写真が引き立つようにした

5. MENU

• 各メニューを見えないボックスで囲うように配置することで規則的な余白が生まれ、シンプルかつ高級感を演出した
• タイトル、本文、値段のジャンプ率を低く設定し、落ち着いた雰囲気に
• 「やや高所得」のターゲット層を考慮し、値段はあまりアピールしない設計にした

■配色・あしらい

○メインカラー...#B1BB65

• 健康・ナチュラルを連想させるナチュラルグリーンを採用
• 競合他社であるモスバーガーのメインカラー(#029521)を避ける

○背景色...#F6F6F6

• 高級感を出すため、#FFFFFFではなく薄いグレーカラーを採用

○アクセントカラー(ボタンなどに使用)

• 押下できることが一眼でわかるよう、メインカラーから差別化したブラウン
• ナチュラルなアースカラーでメインカラーのトーンと合わせる

○あしらい

• 余白...「やや高所得」のターゲットに向けシンプルかつ余白を大きく取ることで高級感を出す
• フォント...「契約農家から直接仕入れをしている」生産者と距離が近いという特徴から、農場を連想させるようなほのぼのとしたフォントとして、「秀英丸ゴシック」を使用

④感想

この作品が本腰を入れてデザインについて勉強し始めてから初めての制作であった。何度もトライアンドエラーを繰り返しこの形になったが、余白の取り方やジャンプ率など一つひとつを覚えながら即アウトプットしたため、時間はかかったものの、基礎を身につけることができたと感じる。