2023
WAZAO-IPPON
まとめ
- 正方形タイルの無限スクロールで、ブランドの濃い記事アーカイブをフィードとして見せるトップページを設計。
- 記事内の商品リンクとドロワーカートにより、読む体験から購入までを自然につなぐ導線を実装。
- Shopify Hydrogen / Oxygen と microCMS を統合し、商品と記事を同じ体験の中で扱うヘッドレスECを構築。
01
BRAND
日本固有の竹釣り竿「和竿」を軸に、失われつつある日本文化を釣りを切り口に紡ぐブランド「WAZAO-IPPON」のECサイトです。テクニカルディレクション・バックエンド・デザインを担当しました。
02
FEED
トップページは、正方形の画像タイルを無限スクロールで読み込む構成にしています。SNSのフィードを流し見るような感覚でブランドのコンテンツに触れてもらう体験を意図しました。WAZAO-IPPONは記事の密度が高く、書き手の視点や現場の記録が積み重なっています。そのアーカイブを、一覧や目次ではなく流れとして見せることで、ブランドの厚みを自然に伝えられるようにしました。
03
COMMERCE
クライアントの記事は、釣り場の記録・道具への考察・文化的背景など、読み応えのある内容が多いです。記事本文の中に商品リンクを自然に配置できる設計にしており、読む体験と買う体験がシームレスにつながっています。
商品ページからカートへの導線も、別ページへ遷移させずドロワー形式で開く設計にしました。読んでいる流れを途切れさせないまま、追加・確認・購入へと進めます。
04
HEADLESS EC
Shopify Hydrogen / Oxygenを採用し、HeadlessなEC構成で構築しています。商品管理はShopifyで、記事・コンテンツ管理はmicroCMSで行い、フロントエンドは両者のAPIを統合して構成しました。当時のShopify Hydrogenはまだ新しい技術であり、日本国内での採用事例も少ない中での実装でした。
Credits
- Technical Director / Backend / Design — Taisei Dofuku
- Frontend Developer — Taisei Yasui