WORKS：侘寂堂（Wabi Sabi Do）ECサイト制作
侘び寂びは、暮らしの中で完成する。
ミニマルに設計されたECサイト。
余白と静けさが購買体験をつくる。
1. プロジェクト概要
日本の美意識「侘び寂び」を軸に設計されたECサイト。
装飾を削ぎ落とし、余白・文字・動線のみでブランド体験を構築しています。
単なるデザインサイトではなく、実運用可能なEC基盤として設計。 商品管理・在庫管理・注文処理・決済までを一元管理できる構造です。
［課題］
-
和風ブランドの世界観をWeb上で再現しつつ、店舗系サイトとして必要な
「商品理解」「店舗情報」「行動導線」を一貫して設計するスキル強化を目的として制作しました。
WordPressによる更新性の高い構築を行い、ブランドの雰囲気を壊さずに 情報を整理する“和ブランド特化型UI/UX”の実践をテーマとしています。
-
ブランド名「WABISABIDO」が持つ“和・静・美”の印象を壊さないよう、
配色は深緑・生成り・墨色を基調に、余白を広く使った落ち着いたレイアウトを採用。
ファーストビューでは質感や湯気の写真を使い、視覚的に世界観へ没入できるよう設計しました。
商品紹介は写真を大きく使い、説明文は短く簡潔にまとめることで、 ユーザーが迷わず理解できる情報設計にしています。
-
和ブランド特有の“余白・静けさ・質感”をWebデザインへ落とし込む際の
配色・タイポグラフィ・写真選定の重要性を体系的に学ぶことができました。
また、WordPressでの更新性を確保しつつ、ブランドの世界観を崩さないUI/UX設計を 短期間で再現できたことが大きな成果です。
スマホ閲覧時の操作性や、商品理解から行動までの導線最適化を検証したことで、 店舗系サイトに求められる「装飾ではなく導線」という制作思想を確立できました。
今後の和ブランド・店舗系案件にも応用できる制作フローを習得できました。
［解決］
［成果］
［担当・技術］
- 担当範囲： UI設計 / WordPress構築 / Welcartカスタマイズ / EC導線設計
- EC機能： 商品登録 / 在庫管理 / 注文管理 / 顧客管理 / 決済処理（PayPalテスト環境）
- 使用技術： WordPress / PHP / JavaScript / HTML / CSS / Welcart
2. コンセプト
「所有すること」ではなく、「選ぶ体験そのもの」をデザインするECサイト。
情報量を意図的に制限し、ユーザーの判断軸を価格ではなく、 余白・質感・世界観へと移動させる設計思想を採用しています。
UIは説明を削ぎ落とし、商品と空気感だけが残る構造に最適化しています。
3. ECシステム設計
■ 管理機能（WordPress管理画面）
- 商品登録（画像・価格・バリエーション設定）
- 在庫管理（在庫数の自動減算対応）
- 注文ステータス管理（未処理 / 発送準備中 / 完了）
- 顧客情報管理・購入履歴の蓄積
■ 決済・注文フロー
- カート機能
- 購入フォーム最適化
- PayPalテスト環境による決済検証
- 注文確認メール・自動返信メール設定
■ 運用設計
- 管理画面から商品・在庫を更新可能なCMS運用設計
- 商品追加〜公開までCMS内で完結
- 継続運用しやすい更新導線を設計
4. 技術構成
- WordPress（CMS）
- Welcart e-Commerce
- PHP（テンプレート制御）
- JavaScript（UI制御）
- HTML / CSS（フロント実装）
- PayPal API（テスト環境）
5. デザイン思想
- 色数を極限まで削減したミニマル設計
- 余白を情報として扱うレイアウト設計
- 視線誘導を最小限に抑えたUI構成
- 商品よりも空気感を先に伝える導線設計
※本サイトはポートフォリオ掲載用のデモサイトです。
カート追加・購入フロー確認まで操作できます。
実際の注文・決済は行われません。
