Kapti社内プロジェクト Eコマース
EAAに準拠した購入導線と、「グレーのソファに合う青いクッション」を理解する検索
大手百貨店からアクセシビリティ宣言を求められ、検索は2語を超えると何も見つからない。8週間で、法令対応とセマンティック検索を実現します。
- 業種
- Eコマース
- 想定ミッション
- 8週間
- 予算の目安
- 24,500ユーロ〜（税抜）
- 提案チーム
- コレクティブのリード3名
- サービス
- アクセシビリティ適合対応 · AIプロダクト・スプリント
EC業界を探求するため、コレクティブのメンバー間で進めた社内プロジェクトです。クライアント案件ではありません。「Maison Rivage」はデモ用のブランドです。
背景
業界で耳にする声をもとに想定したニーズ：
ある大手百貨店が当社の商品を取り扱いたいと言っていますが、アクセシビリティ宣言の提出が条件です。さらに、検索エンジンはキーワードが2語を超えると何も見つけられず、検索の18%が結果ゼロで終わっています。
想定クライアント： 欧州の大手インテリアECサイト。2025年6月から欧州アクセシビリティ法（EAA）の直接の対象となっています。
課題
- 1
欧州アクセシビリティ法（EAA）
絞り込み、商品ページ、カート、決済は、キーボード、スクリーンリーダー、ズームで利用できなければなりません。
- 2
意図を理解する検索
色、素材、部屋、用途。セマンティック検索が文章を、目に見えて編集もできる絞り込み条件に変換します。
- 3
コンバージョンを損なわない
修正は小さなステップに分けてリリースし、効果を測定します。
私たちが行うミッション
8週間の想定ミッション
実際のクライアントであれば、このようにミッションを進めます。以下の画面とデモは、社内プロジェクトの中で制作したものです。
- 1
監査 · 第1〜2週
代表的な15ページのRGAA監査。スクリーンリーダー、点字ディスプレイ、高倍率ズームを使う4名とテスト。不適合はすべて「致命的」「支障あり」「軽微」に分類します。
- 2
修正 · 第3〜6週
絞り込み、商品ギャラリー、サイズ・色の選択、カート、決済のエラーメッセージ。デザインとコードの両面から対応します。
- 3
セマンティック検索 · 第4〜5週
カタログ全体を意味で検索。実際の検索語200件でテストしました。検索語は、ユーザーが外せる絞り込み条件に変換されます。
- 4
フォローアップ · 第7〜8週
アクセシビリティ宣言、デザインシステムへのルール組み込み、プロダクトチームとコンテンツチームへのトレーニング。
参加するチーム
リード3名、それぞれに役割
João Da Silva Marly
ミッションリード、フロントエンド、アクセシビリティ
Romain Peltier
リサーチ、プロダクトデザイン
Meril Banzouzi
バックエンド開発、AI
画面
商品一覧と、意図を理解する検索。 入力した文章が、目に見える絞り込み条件になります。各条件はキーボードで外すことができ、結果件数が読み上げられます。
アクセシブルな商品ページ。 キーボードで操作できるギャラリー、色名付きのカラー選択、読みやすい配送情報。
決済とエラー。 エラーは入力欄の横とフォーム上部に平易な言葉で説明し、色だけに頼りません。
インタラクティブデモ
自分の言葉で商品を探す
検索がリクエストを理解し、目に見える絞り込み条件に変換します。条件は外すこともできます。
試してみましょう
- 1検索語を入力するか、例のまま試す
- 2検索が理解した絞り込み条件を確認する
- 3条件を外すと、結果が更新される
絞り込み条件に変換される検索
デモ用のカタログです。アクセシブルなコンポーネント：各条件はキーボードで外すことができ、結果件数が読み上げられます。
検索内容の解釈：
目標
- RGAA適合率 · 目標：85%超
- 結果ゼロの検索 · 目標：18%から6%未満へ
- 購入ファネルのコンバージョン · リリースごとに追跡
クライアントへの納品物
- 優先度付きのRGAA監査レポート
- デザインとコードで納品された修正
- 本番環境で稼働するセマンティック検索
- アクセシビリティ宣言
- デザインシステムのアクセシビリティ・ルール