価格は「支払総額」を基準に表示
一覧では総額を大きく、本体価格を小さく表示し、詳細では総額を先頭にして2つの価格を並べました。「？」ボタンから、それぞれに含まれる費用・含まれない費用を3言語で確認できます。絞り込みの基準も総額・本体価格から選べます。
ねらい：お客様が実際に支払う金額で比較できるようにするため。
Case Study 01｜個人制作
TK168
TK168
中古車・高級車販売店のWebサイト
日本語・中国語・英語の3言語に対応した、全12ページのサイトです。要件整理からUI/UXデザイン、複数のAIエージェントと協働した開発、納品までを担当し、約3週間で仕上げました。
操作録画（約1分）：トップ → 検索 → 絞り込み → 車両詳細 → 価格の説明 → 言語切替。
このページでは「制作版」を掲載しています。制作版は、私が納品し、その後も管理・改善しているバージョンです（録画・画面は2026年10月時点で、07の改善を含みます）。クライアントの公開サイトは、クライアント側で一部デザインが変更されています。カーソルとクリックの表示は録画時に重ねたものです。車両・価格・仕様はすべて掲載イメージ（ダミーデータ）です。
01
背景と目標
中古車・高級車を扱う販売店のWebサイトです。日本語・中国語・英語を話すお客様が、来店前に「どんな車があるか」「支払うと総額でいくらになるか」を自分の言語で比べられ、そのまま来店予約や在庫確認に進めることを目標に設計しました。
- 3言語で同じ情報を、同じ品質で見せる
- 価格は「総額」で比較できるようにする
- 在庫を条件で絞り込み、気になる車を後から見返せるようにする
02
制約
| 期間 | 約3週間 |
|---|---|
| 体制 | 制作者は私1名。開発作業は複数のAIエージェントが分担 |
| 言語 | 日本語・中国語・英語（各156項目の文言を管理） |
| 公開 | 納品物はクライアントが自社システムに組み込んで公開 |
| データ | 車両・価格・仕様・お知らせはすべて掲載イメージ（ダミーデータ）で制作 |
| フォーム | 来店予約・在庫確認などのフォームは画面のみで、送信処理は未実装（制作版では送信されません） |
03
プロセス
- 要件整理ページ構成（12ページ）と、検索から来店予約までの導線を整理
- Figmaでデザイン主要セクションを設計し、20種類以上のUIコンポーネントを作成。100か所以上で再利用
- AIエージェントで開発計画担当のAIが作業をT-001〜T-044のタスクに分け、計画・開発・レビュー・セキュリティの4つの役割で進行（詳しくは06）
- レビューと受け入れレビュー担当の指摘をもとに開発担当に修正させ、各タスクを受け入れるかどうかは私が最終判断
- 公開と納品制作版をCloudflare Workersで公開し、ビルド不要の静的ファイルとして納品。トップのカルーセルは、クライアントのIT担当者向けに移植用パッケージと引き継ぎ資料を用意
04
設計のポイント
価格の見せ方など、ページの方針は私が決めました。URLの設計や静的な構成などの実装方式は、AIエージェントの提案を確認したうえで採用しています。
検索条件をURLに保持
ブランド・ボディタイプ・価格帯・年式・走行距離・キーワードをURLパラメータで持ち、許可された値だけを受け付けます。詳細ページへ移動しても条件を引き継ぎます。
効果：検索結果の共有・ブックマーク・ブラウザの「戻る」に対応できます。
フレームワークを使わない静的構成
HTML・CSS・JavaScriptだけで構築し、共通のヘッダー・フッターは1か所のテンプレートで全ページに差し込みました。
効果：ビルド工程がなく、ファイルをそのまま配置・移植できます。
お気に入りは会員登録なしで
ブラウザに保存し、リストはURLで共有・復元できます。ボタンの状態は読み上げソフトにも伝わるようにしました。
ねらい：登録の手間をなくし、候補のリストをURLで共有できるようにするため。
05
制作版の画面
いずれも2026年10月時点の制作版です（07の改善を含みます）。
06
AIエージェントとの分業
コードの記述は、役割を分けた複数のAIエージェントに任せました。私は、何をどの順番で作るかを決め、各タスクが完成しているかを最終判断しました。各エージェントは別々のチャットで動いており、互いに直接やり取りできません。そのため、リポジトリ内のタスクボードとログを共通の情報源にし、私が各エージェントに指示を出して作業をつなぎました。
計画
タスクを分割し、優先順位の案と受け入れ基準を作成します。サービス・レンタルページでは、仕様（MVP）とレビュー用チェックリストも事前に用意しました。タスクボードを更新できるのは計画担当だけです。
開発
担当タスクのHTML・CSS・JavaScriptだけを編集し、完了時にコミットハッシュをログで報告します。
レビュー
読み取り専用で回帰のリスクを確認し、重要度別に指摘します。合格か差し戻しかを判断します。
セキュリティ
入力値のエスケープや外部リンクなどを確認します。リスクの高い変更のときだけ参加します。
私の役割
- 事業目標、ページの意図、ビジュアルの方向性、優先順位の決定
- 画面を操作して確認し、修正点を具体的に指示（例：トップのキューブ演出とスマートフォンのレイアウトを、確認しながら繰り返し調整）
- レビューのタイミングや1日の作業の区切りなど、進め方の判断
- 各タスクを受け入れるかどうかの最終判断
進め方のルール
- 作業をT-001〜T-044のタスクIDで管理し、コミットにもIDを付けて経緯を追えるようにしました。
- 変更をリスクに応じて低・中・高の3段階に分け、中以上はレビュー、高はセキュリティ確認も通すルールで運用しました（レビューを終業前にまとめて行った日もあります）。
- 体制の変遷：4役割で並行作業 → 仕上げ段階は1つのエージェントで順番に作業 → 計画・開発の2役割に縮小（レビューとセキュリティは必要なときだけ）。
レビューで見つかった課題
| 分類 | 内容と対応 |
|---|---|
| セキュリティ | URLパラメータの検索キーワードがそのままHTMLに挿入される反射型XSSを検出。テキストとして表示する方式に修正し、再テスト後に公開の保留を解除 |
| ページ容量 | トップページの初回読み込みが約35MB（推計）と指摘され、動画・画像の遅延読み込みや画面外でのアニメーション停止を実施。対応後の再推計は約6.4MB |
| 品質 | 在庫確認ページの文字化けとタグの破損を検出（プロジェクトの自動構造チェックは通過していた不具合）。差し戻して修正し、再確認 |
| 公開手順 | キャッシュ用バージョン番号の更新漏れを検出し、当日中に修正 |
約35MB・約6.4MBは、レビュー担当のAIエージェントによる推計値で、実測ではありません（2回の推計は算出方法も異なります）。AIとの分業による時間短縮などの効果も計測していません。
07
納品後の改善
2026年10月、私の制作版に、Claudeと協働して次の改善を加えました（クライアントの公開サイトには反映されていません）。
| 項目 | 改善内容 |
|---|---|
| 文字コントラスト | 車両カードの仕様・価格欄を約3.8:1／3.1:1から約9.5:1／7.2:1に改善（WCAG AAの基準は4.5:1以上） |
| スマホの絞り込み | 画面幅1023px以下では、検索条件を画面下から開くシートに集約。フォーカス移動範囲の制御、Escキーで閉じる操作、背面スクロールの固定に対応 |
| ファーストビュー | 軽量なWebP静止画（PC約23KB・スマートフォン約8KB）を先に表示し、動画は後から読み込む方式に変更。モーション軽減設定またはデータセーバーが有効な場合は動画を再生しない |
| 日本語の改行 | 見出しが単語の途中で改行されないよう、Intl.Segmenterで文節を区切って改行位置を制御 |
| キーボード操作 | Escキーでメニューを閉じてフォーカスを元の位置に戻す処理、現在のページをaria-currentで示す処理などを追加 |
08
成果と振り返り
- 日本語・中国語・英語の3言語、12ページのサイトを約3週間で制作・納品し、クライアントが自社システムに組み込んで公開しました。
- 公開前のレビューで、反射型XSS、ページ容量、文字化け、キャッシュ更新漏れの4件を検出し、修正しました。
- クライアントの公開サイトでは、一部デザインが変更されています。このページでは、私が納品し、その後改善した制作版を掲載しています。
- 公開後のアクセス数や問い合わせ数などは計測していません。
次に取り組みたいこと：
- 表示速度の実測と、画像・動画のさらなる軽量化
- 各言語の表示に残っている他言語の文言・単位の解消
- 実データと連携する際の、仕様データの検証ルールづくり
- 問い合わせフォームの送信処理を、クライアントのシステムと連携させるための設計
掲載している車両・価格・仕様・お知らせはすべて掲載イメージ（ダミーデータ）です。実在する車種の仕様とは異なる項目も含まれます。ヒーロー映像・車両写真などの素材の権利は、各権利者に帰属します。
© 2026 Yixin ChenTokyo