コーヒーに関わる時間ごと、 デザインする
日常のひとときを少し特別な時間に変える「パス」をコンセプトに、スペシャルティコーヒーのD2Cオンラインストアを運営。商品企画からデザイン制作、パッケージのシルクスクリーン印刷まで手がけています。Shopifyで構築し、ECやブランドづくりの実験の場として位置づけています。
Visit Website → Tech Stack
Background
PASS COFFEEは「日常の中にあるひとときを少し特別な時間に変えるパス」がコンセプト。Chill・Relax・Focusという3つのモードで、コーヒーを通じた日常の切り替えを提案しています。
焙煎からパッケージまで一貫して手がけるD2Cブランドとして、EC構築・ブランディング・コンテンツ制作を実験的に運営。クライアントワークに活きる知見を蓄積する場でもあります。
Solution 01
Solution 02
Shopify標準のコレクションフィルター（?filter.v.option.color=red 形式）はクエリ文字列に依存しており、Googleにインデックスされにくい。絞り込んだページが検索に乗りにくい課題があります。
PASS COFFEEではカスタムのコレクションナビゲーションを構築し、フィルター条件ごとにクロール可能なURLパスを持たせつつ、UIとしてはページの読み込み/遷移が発生しないフィルター体験を維持。SEO流入とユーザビリティを両立させました。詳しい設計意図はブログ「Shopifyコレクションフィルター/ナビゲーションでSEOとUIを両立する」で解説しています。
Solution 03
テイスティングチャートは酸味・甘み・香りの3種類に絞り、ライト層でも直感的に「自分に合うコーヒー」を選べるUIを設計。あえて種類を増やさず、分かりやすさを優先しました。
同じ産地でも精製方法・焙煎度で商品パターンが複数あるため、豆の特徴はメタオブジェクトで構造化管理。商品メタフィールドから参照することで、同じ豆情報を複数商品で再利用しています。
メタフィールドを使った「豆が選べる飲み比べセット」では、候補リストからお客さんが好きな組み合わせを選んで1商品として購入できる仕組みを実装。バリアント単位のGoogle Merchant Centerメタフィールドで検索流入も強化しています。
Solution 04
Impact
PASS COFFEEはBowortieにとって、Shopifyの構築・運用・マーケティングを実践で学ぶ場でもあります。制作だけでは見えない商品企画から撮影、コンテンツ制作、広告運用まで回すことで「つくったあとの話」ができる。この経験が、クライアントのEC支援にそのまま活きています。
Related Articles
Shopifyのテーマを改善したいと思っていても、どこから手を付けるべきか分からず止まってしまうことがあります。 そんなときは、SEOの入口をコレクションに寄せて、一覧の回遊体験はフィルタに寄せる形で役割を分けると整理が進みます。この記事ではPASS COFFEEの設計例を使って、その考え方をメモとしてまとめます。
Read →Shopifyのテーマを触りながら、Tailwindでレイアウトやタイポをきれいに整えたい。そう思ってTailwindを入れると、だいたい最初の壁になるのがレイアウト崩れだと思う。
Read →W e b や デ ジ タ ル ま わ り の 課 題 整 理 か ら 制 作 ・ 運 用 ま で 対 応 し て い ま す 。 お 見 積 も り も お 気 軽 に ご 相 談 く だ さ い