ネットショップ（Shopify・日本茶）
OTEMAE｜日本茶の海外向けネットショップ
海外のお客様に日本茶を売る、英語と日本語を切り替えられる Shopify のネットショップです。毎月届く定期便も付けました。
サイトのパスワードotemae2026
概要
- サイト
- https://otemae-tea.myshopify.com/ パスワード otemae2026
- 業種
- 日本茶（海外向けのネットショップ）
- 対象
- 抹茶や日本茶を毎日楽しみたい、海外のお客様
- 種類
- Shopify のネットショップ（トップ・商品ページ・定期便・英語と日本語）
- 仕組み
- Shopify（標準のテーマ Horizon を土台に、セクションをテーマのコードで追加。定期便は Shopify Subscriptions、訳は Translate & Adapt）
- 担当範囲
- 企画・参考調査・構成・原稿（英語・日本語）・写真の指示・ロゴ・デザイン・テーマのコーディング・商品の登録・Figmaデータ
- 制作日数
- 1日
- 対応
- PC・スマートフォン
- Figmaデータ
- あり（トップページ・PC・スマートフォン）
意識したこと
01英語と日本語
海外のお客様には英語で、
切り替え1つで日本語にも
海外に日本茶を売るお店なので、英語を主にしました。右上の切り替えで、見出し・商品の名前と説明・メニューまで日本語に入れ替わります。
訳は Shopify の言語の設定と公式の翻訳アプリで入れたので、お店の方が管理画面から直せます。
02定期便
毎月届く定期便を、
Shopify の公式アプリで
薄茶の抹茶が毎月10％オフで届く定期便「Mou Ippuku（もう一服）」を作りました。商品ページで1回だけ買うか、定期便にするかを選べます。
Shopify の公式の無料アプリ（Shopify Subscriptions）で作ったので、値引きや届く間隔は管理画面から変えられます。
03見た目
大きな余白と細い明朝で、
上質な日本茶の店らしく
生成りの地に大きな余白、細い明朝の英字の見出しに小さな日本語を添える形で、すべてのセクションをそろえました。
缶と袋の写真には同じロゴを入れ、どの写真も同じお店の品に見えるようにしています。
スマートフォンで見たところ
Figmaデータ
コーダーの方がそのまま組めるよう、納品時と同じ形に整えています。
- PC（幅1440）とスマートフォン（幅375）のトップページのデザイン
- 色の変数・文字スタイル（サイトのCSSと同じ値）
- ヘッダー・ボタン・セクションの見出し・お茶のカード・種類の札の部品と、Shopify のセクションとテーマのファイルの対応表
- コーダー向けの説明のページ（見方・動き・書き出し）
