LIN CHIACHENG

04友人のブランド DEMO

WAKOU SELECT

友人のブランド紹介と商品展示をまとめた公開 Demo。設計から実装まで担当した。正式運用はまだで、実際の取引は外部サービスを使っている。

Role
Web / selection experience · 友人のブランド Demo · 設計・実装

2025 - 2026

01

友人のセレクトブランドのために、Web サイトをつくる。

友人のブランドを紹介し、主なサービスを試せる Demo をつくった。

友人はラグジュアリーとセカンドハンドの商品を扱っている。ブランド紹介、商品展示、購入・ケア・真贋鑑定・リセールのサービスを Web サイトにまとめた。友人のためのブランド Demo で、顧客から受注した案件ではない。

選び方を、ひとつの流れに

選び方の流れ

PURCHASE / CARE / AUTHENTICATION / RESALE
  1. 01PURCHASE

    購入

    選び方の入口。

  2. 02CARE

    ケア

    選んだものを保つ。

  3. 03AUTHENTICATION

    真贋

    本物かどうかを確かめる。

  4. 04RESALE

    リセール

    次に手渡す。

何を、どう選び、どう確かめ、どう次へ渡すか。

02

まず、ブランドの考えと必要なことを聞く。

画面を考える前に、何を伝えたいかを確かめる。

どんな商品を選び、どんな雰囲気を伝えたいかを友人に聞いた。先に内容を整理してから、写真の見せ方、説明の順番、画面の余白を考えた。

LISTENING

伝えたいこと / 情報設計

  1. 01

    商品の価値が伝わること

    商品写真、情報の階層、ブランドの余白を整える。

  2. 02

    初めてでも安心して相談できること

    商品の状態や細部の情報、公式サイトとしての見え方を整える。

  3. 03

    購入ボタンだけで終わらないこと

    問い合わせから一対一の相談、詳細確認、最終見積りへつなぐ。

03

選び方の体験を、先に設計する。

カテゴリと商品をつなぎ、選ぶ流れを分かりやすくする。

まずは商品とサービスを分かりやすく紹介する。SEO とメタデータも整理し、検索結果で内容が伝わるようにした。注文・出荷・配送追跡は今後の設計項目で、Demo に一通り実装したという意味ではない。

FIG-W1

  1. 01SELECT

    選ぶ

  2. 02AUTHENTICATE

    整えて確かめる

  3. 03CONSULT

    相談する

  4. 04DELIVER

    届ける

DIRECTION

SELECTION / TRACKING / DISCOVERY

  1. 01SELECTION

    選び方

    購入・ケア・真贋・リセールを、選び方の流れとして示す。

  2. 02TRACKING

    今後の注文・配送

    注文、出荷、配送追跡は、実際の運用に合わせて今後検討する。

  3. 03DISCOVERY

    SEO・メタデータ

    見つけてもらうための言葉と構造を整える。

04

分けて作り、一つずつ確認する。

選定体験の骨格だけを先に整える。

まず商品分類と画面構成を整理し、商品やサービスの紹介文を書いてから、操作を確認した。決済や物流を一度に作り込まず、Demo として必要な部分から進めた。

ITERATION

IA / PROSE / FLOW
  1. 01

    情報設計

    商品をどの分類に置き、どの順で見せるかを整理する。

  2. 02

    商品とサービスの紹介

    商品やサービスの内容を、短く分かりやすく説明する。

  3. 03

    Demo の操作確認

    商品を見るところから問い合わせまで、画面の操作を確認する。

商品分類、紹介文、Demo の操作を順に確認した。

05

商品とサービスを、Web サイトとして動かす。

Vue 3、Vite、Pinia、Router、i18n と FastAPI、MySQL 8 を Docker Compose と Nginx で。

画面は Vue 3 と Vite で作り、Pinia で状態、Router で画面遷移、i18n で言語を管理した。バックエンドは FastAPI、データ保存は MySQL 8。Docker Compose と Nginx で実行環境をまとめた。

相談から取引へ

FIG-W3

  1. 01

    商品

  2. 02

    問い合わせ

  3. 03

    一対一の相談

  4. 04

    詳細確認・価格相談

  5. 05

    最終見積り

  6. 06

    その後の取引

目指すサービスの流れ。自社での決済・出荷までの全体は未完成で、実際の取引は既存の外部プラットフォームで行っている。

BUILD

Vue 3 / FastAPI / MySQL 8 / Docker

  1. 01Vue 3

    選び方の画面

    Vite、Pinia、Router、i18n で選び方の体験を形にする。

  2. 02FastAPI

    バックエンド API

    Demo のバックエンドを担当する。決済や完全な物流システムは未実装。

  3. 03MySQL 8

    データ保存

    Demo の商品や操作に必要なデータを保存する。

  4. 04Docker

    Compose と Nginx

    Docker Compose と Nginx でサービスをまとめ、起動と配置をしやすくする。

BUILD

WAKOU / 05

Vue の画面と確かめられる基盤の要点。

06

Demo をつくり、次は事業の必要に合わせて。

ブランド紹介、商品展示、主なサービスを公開 Demo にまとめた。実際の取引は Shopee、Mercari、Yahoo! などの外部サービスで行っている。

今は事業の規模が小さく、このサイトはまだ正式な運用を始めていない。まず見せて操作できる Demo まで作った。自社での取引、正式な決済、物流全体は未実装で、今後必要になったら友人たちの実際の仕事に合わせて広げたい。

この制作で、ブランドの印象を整えることと、実際の運用を設計することは別の仕事だと分かった。まずは見せるための入口を完成させ、取引や物流は必要になった時点で改めて考える。

PRODUCT INDEX商品一覧 — 分類、商品情報とブランドの雰囲気を一つの画面にまとめた。
WAKOU SELECT の商品一覧画面

これから

  1. 01

    できたこと

    公開 Demo：ブランド紹介、商品展示、主要なサービス体験。

  2. 02

    現在の取引

    現在の取引は、Shopee、Mercari、Yahoo! などの外部サービスで行っている。

  3. 03

    次に進めること

    自社の取引、決済、物流は、事業上必要になった段階で検討する。

この制作で考えたこと

WAKOU / 06

事業の成長に合わせて、必要な機能を加える。

WAKOU SELECT — LIN CHIACHENG