This page is available in Japanese only.
大阪・心斎橋本店、なんばロースタリー、淡路島の 3 店舗を展開するスペシャルティコーヒー専門店、Le Premier Cafe（ル プルミエ カフェ）様のコーポレートサイトとオンラインショップを制作させていただきました。
1997 年の創業以来「人生になくてはならない一杯を届けたい」という想いで続けてこられたお店です。店舗に来てくださるお客様、珈琲豆を通販で買ってくださるお客様、卸や OEM を検討される法人のお客様、そして働きたい方。訪れる人の目的が幅広いため、会社の紹介とオンラインショップを別々のサイトにせず、1 つのサイトの中で自然に行き来できる構成にしました。
デザインの考え方
- 店の空気をそのまま … メインビジュアルは心斎橋本店の店内写真に「Cheers Your Life／あなたを応援する一杯を」というメッセージを重ね、焙煎やドリップの写真を各所に使って、コーヒーの香りが伝わるような構成にしています
- 濃紺と珈琲色 … 文字やボタンは落ち着いた濃紺、オンラインショップへの誘導や会員登録の帯はキャラメル色と、役割で色を分けました。白地を広く取り、商品写真と店内写真が映えるようにしています
- 2 つの入口を常に … ヘッダー右上に「お問い合わせ」と「オンラインショップ」を並べ、スマートフォンでは画面下に会員登録への帯を固定。どのページからでも買い物と相談に進めます
ページ構成
ページ | 内容 |
|---|---|
ABOUT | ストーリー・会社概要・代表挨拶・スタッフ紹介 |
STORE | 心斎橋本店・なんばロースタリー・淡路島の営業時間・アクセス・店内の様子 |
ONLINE SHOP | 珈琲豆・リキッドコーヒー・コーヒーバッグ・ドリップバッグ・アパレル・ギフト |
NEWS / MEDIA | お知らせとメディア掲載 |
WHOLESALE | 法人向けの卸売と OEM（オリジナルのドリップバッグ）の案内と専用フォーム |
RECRUIT | 店舗ごとの採用情報 |
FAQ / ご利用ガイド | よくある質問、初めての方へ、大口注文、ギフトサービス |
オンラインショップ
オンラインショップは WordPress に WooCommerce を組み合わせて構築し、会社の紹介ページと同じデザインの中で買い物ができます。
- 珈琲豆・コーヒーバッグなどの商品カテゴリーと、焙煎度（深煎り・中深煎り など）や風味の説明つきの商品ページ
- 会員登録・マイページ・お気に入りリスト。送料無料の条件は画面上部の帯で常に案内
- ギフトサービス（手提げ袋・のし・包装）と大口注文の案内。結婚式の引き出物などの相談につなげます
- 最近見た商品の表示など、再訪したお客様が商品を探しやすい工夫
運用面の工夫
- お知らせ・メディア掲載・採用情報はすべて WordPress の投稿として作り、スタッフがご自身で更新できます
- 法人のお客様向けには、卸売・出店依頼・店舗開発・取材など問い合わせの種類を選べる専用フォームを用意し、一般のお問い合わせと分けました
- 社長ブログやお客様インタビューなど、読み物への入口をトップに置いて、SNS からの流入を受け止められるようにしています
制作内容
- サイト構成の設計と原稿整理
- デザイン（PC・スマートフォン）
- WordPress + WooCommerce でのサイト構築（オンラインショップ、会員機能、店舗・会社紹介、お知らせ・採用の投稿機能、一般・法人のお問い合わせフォーム）
- 公開作業と更新方法のレクチャー