制作の目的・方針
弊社が提供するCOFFEE & BAKESのお店「TONE（トーン）」のWebサイトを制作しました。
Instagramを通じたプロモーションは一定の成果を上げており、一般顧客への認知拡大は順調に進んでいます。そのため、今回のWebサイトでは、店舗への一般顧客に加えて「卸業者」からの問い合わせや流入を強化することも目指しました。
また、ポップアップイベントや他ブランドとのコラボレーションなど、積極的なチャレンジやユニークな取り組みを数多く実施しているため、これらの活動内容もWebサイト上で効果的に発信し、関心を持つ新たな層へのアプローチを広げたいと考えています。
さらに、商品の手作り感や細部へのこだわりについては、Instagramでは十分に伝えきれていない部分があるため、Webサイトを通じてその魅力をより具体的に訴求していくことも重視しました。
構成の検討
Topページのメインビジュアルには、店内から眺める向かいの緑や温かく心地よい雰囲気を感じられる映像に加え、安心して美味しさを楽しめる手作りのシーンをふんだんに盛り込みました。実際の店舗の魅力が伝わる動画構成で、サイト訪問者の興味を引きつけます。
Aboutページでは販売している焼き菓子・飲み物・アイスクリームを紹介。商品画像だけでなく、調理工程の写真も多く取り入れ、一つひとつ丁寧に作り上げている様子を視覚的に訴求します。
Topicsページでは、メニューの更新情報や店舗の最新ニュースを発信。また、Contactページは個人と法人で内容を切り替えられる仕様とし、スムーズな問い合わせ対応を可能にしました。
さらに、今後オンラインストアを開設した際に備えて、オンラインストアへのリンクも設置し、スムーズな導線を確保した構成にしています。
デザイン
▼ラフ作成〜トンマナ設計
デザイン制作時には、TONEらしい店舗デザイン（壁や床、ロゴなど）の雰囲気をWebサイトにも反映させ、ブランドの世界観を一貫して表現することを目指しました。
ラフ提案ではまず以下の２つの方向性でデザインを制作しました。
どちらの案も店舗の魅力が伝わるように、「写真をメインで見せることで直接的に店舗の雰囲気を伝える」「あしらいによって店舗の雰囲気をWebサイトでも再現する」それぞれどちらの方向性でアピールするかによって、デザインのトーンに違いを出しました。
A案：
シンプル・オーソドックスなデザインに、写真をメインで大きく表示させることで商品や店舗の魅力を直接的に伝える案。
B案：
少しポップで遊び心のあるあしらいを取り入れ、店舗のモダンでありながら温かみのある世界観をWebサイトでも表現する案。
２回目の提案では、初稿でのフィードバックを受け、B案のレイアウトをベースにグリットなどの要素を取り入れる・使用する色味を減らすことで、より大人っぽい落ち着きのある雰囲気に調整しました。
A案：
ほぼ２色のみに使用色を絞り、落ち着いた配色に。グリッド風レイアウトにし洗練されたイメージを与える案。
B案：
白背景で、全体的にスッキリとしたイメージに。あしらいにピンクとグレーを使用し柔らかな印象を与える案。
最終の提案では、２稿目のA案をベースに、あしらいや角丸などの要素をさらに減らし、より洗練された雰囲気にデザインを調整しました。
▼デザイン制作
グリッドを用いたレイアウトが今回のデザインのポイントのため、PCとスマートフォン間で違和感が生じないよう、グリッドの組み方やレスポンシブでのリサイズの調整を細部まで検討しました。
また、色やフォントサイズのバリエーションを抑えたシンプルな構成ながらも、必要な情報やメッセージを的確に伝えるために、下線の追加や適切なマージンを使うことで、より見やすくなるように工夫を施しています。
さらに、サイト全体に線が描かれるようなアニメーションを取り入れ、シンプルなデザインでも視覚的な印象を強くすることにもこだわりました。
またサイトにアクセスした瞬間から、店舗が大切にしているテーマや、素材や新鮮さへのこだわり、店内の実際の雰囲気などが直感的に伝わるように、Topページのメインビジュアルには店舗で撮影した映像を使用しました。
▼マップ制作
マップは位置関係が把握しやすい情報に絞って制作しました。サイトやブランドのイメージに合わせたカラーやフォントを用い、統一感のあるデザインに仕上げています。
撮影
動画や商品写真は、店舗の温かみや手作りの魅力を伝えることを意識して撮影しました。
自然光を活かし、店内から見える緑と柔らかな色調で心地よい雰囲気を演出。また、調理過程や素材の質感をクローズアップすることで、商品の手作り感や安心感を強調しています。さらに、店舗のデザイン要素を取り入れることで、ブランドの世界観を統一し、お客様に実際の雰囲気を伝える構成としました。
実装
今回はWordPressを導入して実装をしています。これにより今後は店舗でTopicsページとRecruitページの更新が簡単に行えるようにしました。
本サイトやInstagramでは新商品や店舗の最新情報を更新しております。
お近くにお越しの際や気になる商品をみつけましたらぜひTONEへお立ち寄りください。
COFFEE & BAKESのお店「TONE（トーン）」オフィシャルサイト
