株式会社スラッシュ

CASE 21 — AI診断の画面設計（アプリと店頭）

色見本の比較、2つの鏡型の画面の比較、顔のぼかしの操作の3段の図

21 — UI / UX DIRECTION / 化粧品 / 2020–2021

AI診断の画面設計（アプリと店頭）

店頭の鏡型の診断機と、アプリの2つの診断の画面を、使う場面と相手に合わせて設計する

01 — 鏡に映る人の上でも読める画面：店頭の鏡型の画面で、色の濃さが落ちることと映り込みを前提に、色を絞り細い線で画面を成り立たせ、顔の表示をぼかす設計（模式図）

タグUI・UXデザインAI活用Web・アプリCX・体験設計ビジュアル化粧品

化粧品の会社のAIを使った診断について、店頭に置く鏡型の診断機の画面と、アプリのメイクの診断・肌の診断の画面の企画とデザインのディレクションを行った。鏡に映る人の上でも読めること、店頭で顔が大写しのまま残らないこと、男性にも開いたトーンにすることなど、使われる場面と相手からデザインの条件を決め、協力会社のデザイナーと画面を作り、HTMLのひな形にして開発会社へ渡した。

業種
化粧品
時期
2020–2021
業務領域
AI活用・UI・UXデザイン・Web

WHAT WE DOこの領域でできること

  1. 01使う場面と相手から、デザインの条件を決める
  2. 02トーンの方向の比較と選定
  3. 03診断の流れ（問診・撮影・分析・結果・提案）の設計
  4. 04結果の画面のひな形化と量産
  5. 05デザイナー・開発会社との制作の進行

RESULTS結果

  • 想定を超える診断数を記録し、SNSでも話題に

PROCESS担当したこと

  1. 01

    使われる場面と相手から、鏡型の画面とアプリのデザインの条件を整理

  2. 02

    トーンの方向を4つ並べて選び、画面の流れと優先度を決めて制作

  3. 03

    結果の画面をひな形にして量産し、HTMLのひな形にして開発会社へ引き渡し

MATERIALS実物の画面と資料

2軸のマップに4つの方向のカードが並び、右にイラストの3つの方向
02 — 4つのトーンの方向男女どちらにも開くために、未来感と今のトーンとの連続性で4つの方向を並べて選んだ図と、結果の画面のイラストの方向（模式図）
2段に並ぶスマートフォンの画面の模式と矢印、10枚のカードの格子
03 — 2つの診断の画面の流れメイクの診断と肌の診断の画面の流れと優先度、結果の詳細を1枚のひな形から派生させる作り方（模式図）
3つのグループの工程を色分けしたガントチャート
04 — 約10週の進め方トーンの策定、画面の設計、優先度ごとの画面、HTMLのひな形の順に進めた工程表（模式図）

TEAMこの案件の体制

  • LEAD統括・戦略
  • PLANNER企画・プランナー
  • DIRECTOR制作ディレクター
  • DESIGNデザイナー（Web・UI）

約20名の専門家の中から、この案件では4つの役割で組みました。体制について

協力会社のデザイナーと制作し、実装は開発会社が担当しました。社名・ブランド名は伏せています。画面の図は構成を示す模式図で、実際のデザインではありません。

画像はイメージです。実際のお客様の名前やデータなどは、すべて削除・加工を施しています。

この領域について相談する ↗実績の一覧へ
次の事例 22NEW BANK BRAND銀行の新ブランドの立ち上げ

MORE関係する事例