堂福大成

Taisei Dofuku

1997年生まれ、東京。クリエイティブエージェンシー・monopoを経て、現在フリーランスとして活動。ECサイトの構築から業務システムの設計、インフラ構成まで、Web制作の全工程を担う。

t.dofuku@monesynth.io

Tokyo, Kichijoji

2023

WAZAO-IPPON

Client
スタジオサイタマ合同会社
Category
Online Store
Role
テクニカルディレクション・バックエンド開発・デザイン

まとめ

  • 正方形タイルの無限スクロールで、ブランドの濃い記事アーカイブをフィードとして見せるトップページを設計。
  • 記事内の商品リンクとドロワーカートにより、読む体験から購入までを自然につなぐ導線を実装。
  • Shopify Hydrogen / Oxygen と microCMS を統合し、商品と記事を同じ体験の中で扱うヘッドレスECを構築。
01

BRAND

日本固有の竹釣り竿「和竿」を軸に、失われつつある日本文化を釣りを切り口に紡ぐブランド「WAZAO-IPPON」のECサイトです。テクニカルディレクション・バックエンド・デザインを担当しました。

02

FEED

トップページは、正方形の画像タイルを無限スクロールで読み込む構成にしています。SNSのフィードを流し見るような感覚でブランドのコンテンツに触れてもらう体験を意図しました。WAZAO-IPPONは記事の密度が高く、書き手の視点や現場の記録が積み重なっています。そのアーカイブを、一覧や目次ではなく流れとして見せることで、ブランドの厚みを自然に伝えられるようにしました。

03

COMMERCE

クライアントの記事は、釣り場の記録・道具への考察・文化的背景など、読み応えのある内容が多いです。記事本文の中に商品リンクを自然に配置できる設計にしており、読む体験と買う体験がシームレスにつながっています。

商品ページからカートへの導線も、別ページへ遷移させずドロワー形式で開く設計にしました。読んでいる流れを途切れさせないまま、追加・確認・購入へと進めます。

WAZAO-IPPON のドロワー形式のカート画面
ページ遷移を挟まず開くドロワー形式のカート。読む体験から購入までを途切れさせない
04

HEADLESS EC

Shopify Hydrogen / Oxygenを採用し、HeadlessなEC構成で構築しています。商品管理はShopifyで、記事・コンテンツ管理はmicroCMSで行い、フロントエンドは両者のAPIを統合して構成しました。当時のShopify Hydrogenはまだ新しい技術であり、日本国内での採用事例も少ない中での実装でした。

WAZAO-IPPON のヘッドレスEC構成図(Shopify Hydrogen / Oxygen と microCMS)
WAZAO-IPPON のヘッドレスEC構成図(Shopify Hydrogen / Oxygen と microCMS)
Shopify(商品)と microCMS(記事)を統合したヘッドレスEC構成

Credits

  • Technical Director / Backend / Design Taisei Dofuku
  • Frontend Developer Taisei Yasui