AIでデザイン業務を効率化して_CVRも改善した話.pdf

Transcript

1. AI × DESIGN AIでデザイン業務を効率化して、 CVRも改善した話 にこスマ／KANEAKI NAGAO
2. ABOUT 自己紹介 永尾謙明 KANEAKI NAGAO にこスマ PdM兼デザイナー CAREER Web制作会社 メガベンチャー スタートアップ Belong 社会インフラDX・金融・不動産・HR領域等のプロダクトのUI/UXやコーポレートブランディング などをデザインしてきました デザイナー歴20年 ／ 趣味は釣り Belong Radio 02
3. SERVICE にこスマとは 中古スマートフォン専門のECサイト 伊藤忠グループ Belong が運営 シンプルなグレード表記 実物の写真を掲載 バッテリー80%以上（iPhone） 25以上の検査項目 SIMフリー・SIMロック解除済み 保証充実 Belong Radio 03
4. PROBLEM 課題：写真はある。でも傷が見づらい 中古スマホは、傷の状態が購買判断に直結する でも、ものによっては傷が見づらい。写真はあるのに、 あるのかないのか分からない。探すの面倒。 理想は「ここに傷があります」のアノテーション／傷マップ × Ops の撮影・検品フローを変えないと実現できない 元画像は 540 × 650px - 解像度上げたいが、すぐには無理... ※ にこスマでは、この写真の個体がそのまま届きます Belong Radio 04
5. IDEA CSSのfilterを思い出した filter: invert(1) 画像の色味を変えたり、コントラストを上げたり、反転させたり。あれを流用すれば傷がもっと見えるんじゃないか。 ── ここまでは、思いついただけ Belong Radio 05
6. CHALLENGE どう検証するか 検証はPhotoshopでもできます。反転させたり、色調を補正したり。できるんです。 ただ判断したいのは「どの補正が一番傷が見えるか」。 1枚作るのは簡単でも、比べるには数十枚必要で、パラメータを変えるたびに全部やり直して、Figmaに並べ直して…… 必要となる検証パターン 補正パターン × グレード（A/B/C） × 撮影角度 Belong Radio 06
7. PROTOTYPE Claude CodeでPoCを作った CSSのfilter 3通り（コントラスト強調・モノクロ解析・色調反転） ＋素の画像の切替 一旦グレード説明の画像を使用 実際の商品詳細で動く Belong Radio 07
8. VALIDATION 同じ写真に3通りかけて、素の画像と比べた 色調反転が一番見やすくなった。 思いつきの段階では「たぶん見えるようになるはず」でしかなかった。作って比べて、はじめて事実になった。 Belong Radio 08
9. COMPARISON 通常表示と色調反転の比較 Belong Radio 09
10. DECISION 傷が見えるかどうかで2つが落ちた ✕ モノクロ解析 端末のカラーと傷の色（銀色など）が同化してしまい、かえって視認性が下がる ✕ コントラスト強調 元画像の明るさによって白飛び・黒つぶれが発生し、微細な傷のピクセル情報が失われる ◦ 色調反転 情報を失わずに、見えにくかった傷が浮かび上がる どちらも、実際にかけてみるまで分からなかったこと Belong Radio 09
11. DELIVERY 効く方法が1つに決まったので、選ばせるのをやめた 切替ボタン 4つ → トグル 1つ 名前も「ダメージ診断モード」から「傷チェック」へ このUI調整もClaude Code。Figmaには一度も戻っていません。 Engに渡したのは仕様書ではなく、効くと確かめ終わったもの。 → Belong Radio 10
12. TIME SPENT PoCと検証後の調整まで 3 Belong Radio 何にどれくらいかかったか PoC作成 フィルタ3通り＋ズーム実装（PC） 検証 素の画像と3通りを比べる UI調整 トグル1つ&スタイル調整（Figma不使用） 時間程度 ※ Engの実装工数は別。ここは自分が作った時間だけ 2時間 ─（瞬時に比較） 1時間
13. RESULTS ABテストの結果、モバイルは勝った。PCは負けた MOBILE DESKTOP CVRが大幅改善 → 100%配信 逆に下がった → 配信停止 いま、モバイルでは全ユーザーに出ています。 デスクトップにはこの機能を出していません。 ✕ フィルタの見え方はPCでも変わりません。それでも、結果は分かれました。 Belong Radio 12
14. USER FEEDBACK 使われている、そして喜ばれている ヒートマップで見ると、この商品詳細ページで最もクリックされた要素が「傷チェック」でした。 “ “ 液晶のすり傷も「傷チェック」モードの画像で確認できたので、納得して購入できました。 ─ 購入者アンケートのフィードバックより 「あの傷があるかないか見れるやつがとても助かった」 “ 「価格とキズチェックが細かく設定されておりました」 最初に立てた「写真はあるのに傷が見づらい」という原初的な課題に、そのまま直接答えが返ってきた形です。 Belong Radio 13
15. PROCESS 今回、私はどこまで一人でやったか → 2 PoC作成 1 課題整理 傷が見えない／Opsは変えられない 5 Engへ引き渡し 仕様書ではなく、確かめ終わったもの Claude Code。本番と同じCSSで、 実際の商品画像に対して動く → 3 検証 filter 3通りを比較 → 反転に決定 → 6 ABテスト・効果検証 → 7 意思決定 GA・BigQuery、解析もAI 結果を踏まえてどうするか → 4 PRD作成・承認 「効きます」を持って承認へ → 8 結果レポート作成 もちろんAI 1人でやれるタスクが増えたので、ほとんどの工程を1人で完結 ただ私は半分PdM的なこともやっているので、もともと上流をやりやすい立場で経験もあった。 Belong Radio 14
16. TAKEAWAY AIで、デザイナーの仕事はPdMの領域にしみ出しやすくなった 01 デザイナーならではのアイデアをもって本番に近い環境で、動くものを素早く作れる Figmaのプロトタイプは「動いて見える」もの。こちらは本番と同じ環境なためリアル。 だから「良さそう」ではなく「効く／効かない」が判断できて、そのままEngに渡せて、ABテストにもかけられる 02 データ取得・解析 ─ 自律的な効果検証の実現 BigQueryとGAを直接つないで自分で数字を取りにいけます。複雑なデータ解析やSQL文構築もAIの支援で乗り越えられます。 デザイン × アイデア × AI（開発 × 分析）。 これが揃うと、デザインの力でビジネスの上流を動かせるようになる。 Belong Radio 15
17. AIで効率化しても、価値が届かなければ意味がない。 届いてはじめて、生産性が上がったと言える。
18. ご清聴ありがとうございました Belong Radio