01 / 課題と目標
出発点は、白黒のタイポグラフィと商品イラストを中心にしたコンセプトサイト。検索やバッグは動く一方で、服の質感やサイズ選びの判断材料、購入完了までの流れが不足していました。
目標は、ブランドの個性を保ちながら、初めて訪れる人が商品を理解し、迷わず購入手続きを試せる体験にすること。
SELECTED WORK / 2026
aseed.
ブランドの空気を、
買い物の体験へ。
ストアを体験する ↗
02 / デザインの判断
服が伝わる、最初の画面
着用写真を大きく使い、ロゴと余白を残す。何を扱うブランドかが、最初の数秒で伝わる構成へ。
質感を揃える
光・背景・距離感を揃えたAI生成画像。ロゴTを含む25点のコレクションと、主力商品の複数カット。
情報は、読みやすく
商品写真を隠す回転演出をやめ、価格と購入操作を安定した位置に。商品別の素材・寸法・在庫を追加。
スマートフォンから考える
指で選べるカラー・サイズ、画面下の購入ボタン、読みやすい入力フォーム。動きを減らす端末設定にも対応。
03 / 買い物の流れ
- 商品を探す
- 色・サイズを選ぶ
- バッグ
- 配送情報
- 支払い方法
- 最終確認
- 完了
送料の自動計算、在庫上限、入力エラー、内容の修正まで含むデモです。実在の個人情報を使わずに、用意された入力例で注文完了まで体験できます。
04 / 実装したこと
- 検索・カテゴリー・並び替え・お気に入り。URLに検索条件を反映。
- 端末内のバッグ保存、色・サイズ別のサンプル在庫、送料計算。
- 商品画像ギャラリー、拡大表示、商品別サイズ表。
- 配送→支払い→確認→完了のデモと、注文控えのダウンロード。
- 送信先を偽装しない問い合わせデモ、プライバシー・各種ポリシー。
- 日本語・英語切替、静的HTML出力、外部フォントや解析への依存なし。
05 / 担当範囲と制作プロセス
制作者：Atsushi Odajima。ブランドの構想、方向性の選択、要件の決定と採用判断を行う自主制作プロジェクトです。
初期実装にClaude Codeを使用し、今回の改善にはCodexと画像生成AIを活用しました。掲載コード・コピー・画像はAI支援を含みます。AIの活用範囲を開示し、完成した成果物と設計意図を提示しています。
06 / デモの範囲
実決済・実注文・在庫管理サーバー・メール送信は接続していません。商品はAI生成のコンセプトで、在庫や寸法もサンプルです。実販売に移行する際には、販売者情報、決済、サーバー側の注文・在庫管理、メール配信、実商品写真が必要です。
売上改善率や実顧客の評価など、計測していない実績は掲載していません。