『優しさの隠し味 (Web)』

このWebサイトは架空のものになります。
優しさの隠し味という代官山にあるオーガニックカフェから、Webの制作を依頼されたという設定で作りました。
制作するにあたり、実際にフィールドワークを行い、代官山に何度か通いました。
そしてこのエリアに多い年齢層はどこか、競合となる店舗の営業時間はどれくらいかなどを把握した上でWebサイトの制作をしました。

優しさの隠し味のWebサイトはこちら

競合分析のPDFファイルはこちら

(1)コンセプト

"オーガニックらしいあたたかい雰囲気でおもてなし"

(2)クライアント情報

業種:　飲食業（オーガニックカフェ）

ターゲット:　健康や食に気を遣い、少しでも体に良いものにお金を投資できる30〜40代の購買者。(代官山に30~40代の方が多い)

使用対象: WEBサイト

使用目的: ブランドの認知、商品の認知

開始予定: 2020年 1月

(3)要望

商品の見せ方: インスタグラムのように一度で多くの商品が見えるようにして欲しい。また値段とタイトルが同時に理解できるようにして欲しい。

色: 基本の背景色はベージュ色、ブラウン色などが良い。タイトルとなるテキストは黄色を使用して欲しい。本文のテキストとなる箇所は黒色が見やすいと考えている。アクセントカラーとして緑色を使って欲しい。

こだわり: 店主の人柄が見えやすいNEWSのカテゴリを優先的に見てもらいたい。

その他: 地図とSNSの情報もコンタクトページでまとめて見せたい。なので、その辺りの情報の整理もお願いしたい。

(4)最終成果物

コンセプトであるオーガニックらしいあたたかい雰囲気を、暖色系で演出しました。
背景色となるベージュ色、フッターのブラウン色も明度を高めにし、全体的にあたたかさを出しました。
タイトルとなるNEWSやMENU等のテキストは黄色を使用し、本文のテキストは黒色を使用する事で差別化をし、アクセントカラーに緑色を使用しました。
クライアントの要望通りにインスタグラムのような見せ方で、値段とタイトルも同時に理解できるデザインにまとめました。
また店主の人柄が見えやすいNEWSのカテゴリをナビゲーションの最初に持ってくる事で、アクセスされやすい設計をしました。
そしてNEWSのページのアーカイブの位置を高くしたことで、他の記事も読みやすい導線を作りました。
地図とSNSの情報も整理し、コンタクトページにまとめ、クライアントの要望を満たしました。
以上により、Webサイトのコンセプトである"オーガニックらしいあたたかい雰囲気でおもてなし"をデザインする事が出来ました。

(5)開発ツール

• HTML
• CSS
• Illustrator
• Photoshop
• Dreamweaver
• Numbers
• Adobe Color