依頼内容
弊社が運営する駒沢公園前のカフェ「TONE（トーン）」で販売している焼き菓子やグラノーラ、コースターやキーホルダーといったオリジナルグッズを実店舗へのご来店が難しい方にもお届けしたいという思いから、今回オンライン販売を開始することにしました。
方針検討
運用のしやすさや今後の改修を考慮し、既に自社のアートギャラリー「e2 gallery」のオンラインストアで利用しているShopifyを使用して制作することにしました。食品をメインに取り扱うサイトである点を考慮し、テンプレートをベースに以下の方針でテーマを検討しました。
- 商品写真を大きく表示でき、ビジュアルを魅的に伝えられること
- シンプルかつ、TONE公式サイトのトンマナに合わせること
これらの方針を元にテンプレート候補を選びTOPページのサンプルを作成しながら検討を重ね、背景や文字色のバランスと商品写真が綺麗に表示されるかを見ながら、テンプレートとトンマナを決定しました。
デザイン作成
テンプレート決定後、既存ページをベースに独自で追加する店舗紹介ページを含めた全体構成のワイヤーフレームを作成しています。サイトを訪れたユーザーが安心して商品を注文できるようにユーザビリティを意識した導線や要素を細かく入れて使いやすいサイトを目指しました。
ご利用ガイド
読ませたい要素のご利用手順はテキストをそのまま見せる形、FAQはアコーディオンで回答をしまうことで知りたい項目だけを確認できる形にしています。
商品ページ
商品説明の他に原材料やアレルギー表記は表でまとめて一目で確認できるようにしたり、送料や発送に関する情報は表やアコーディオンを活用して見やすさを意識しました。
撮影
商品写真は全て弊社のカメラマンが撮影を行いました。サイト全体の統一感を出すため白を基調とした背景を採用し、明るく美味しそうに見えるよう工夫しています。
また、グッズに関しては通常の商品写真に加え、使用イメージが分かるカットも撮影し、購入時のイメージが湧きやすいようにしています。
実装
基本的にはShopify標準機能を活用しつつ、必要に応じてテンプレート編集や機能を追加しました。
TOPページでは商品写真をよりアピールできるようスライドを設置していますが、興味を持ったユーザーがそのまま商品ページへ移動できるようにリンクを設定しました。
また、標準機能では対応できない部分については以下のようなカスタマイズを実施しました。
- 地域や商品内容に応じた送料計算機能
- 問い合わせフォームにカテゴリを追加、デザイン調整
- 商品ごとの購入制限機能
- 商品の絞り込み検索機能を実装
運用
マニュアル作成
店舗スタッフがShopifyを操作できるよう、以下の内容を含むマニュアルを作成しました。
スタッフが現場で支障なく運用できるように過不足ない内容にまとめています。
- 商品在庫の調整
- 注文から発送までの一連の流れ
- 管理画面の操作方法
- 商品説明文の編集手順
発送サポート
注文後の発送作業をスムーズに行うため、配送に必要な注文データを簡単に出力できるようにしました。さらに配送業者のシステムに直接取り込める形へデータを変換する機能も追加しています。
COFFEE & BAKESのお店「TONE（トーン）」オンラインストア
