プロダクトデザイン・UX/UI
キャンペーン編集体験の設計
Action Editor
KARTE（提供：株式会社プレイド）
思いつきを、
自分の手で試せるように。
コードの知識に依存せず、
ウェブサイトのキャンペーンを編集できる体験へ。
01 — 背景
コードの知識が、
試せる範囲を決めていた。
キャンペーン配信基盤の刷新に伴い、編集機能の改善と、継続して使う価値の両方を考えることになりました。
自分自身の配信経験に加え、顧客へのヒアリングやリクエストを整理。知識や経験の異なる顧客が、どこでつまずいているのかを確かめました。
試したいことに、知識が追いつかない。
HTML・CSS・JavaScriptによるカスタマイズが前提となり、やりたいことと、できることの間に隔たりがありました。
選択肢が増えるほど、探しにくくなる。
細かな要望に合わせて増えたテンプレートが、必要なものを見つけにくくしていました。
覚えたことを、外で活かしにくい。
独自のコードルールは学習を必要とし、外部の機能との連携や拡張も難しくしていました。
02 — 検証
操作して確かめ、
編集の仕組みを選ぶ。
チームで目指したのは、思いついたことをGUIで試せる編集体験。学習曲線を描き、最初のステージで必要な要素をMVPとして整理しました。
土台となるレイアウト編集は、FlexboxとGridの2案を実装。実際に操作してもらい、作業目標を達成できるかを検証しました。
01
Flexbox
今回のユーザーテストでは、参加者が作業目標を達成できませんでした。
02
Grid 採用
今回のユーザーテストでは、参加者全員が作業目標を達成。この結果を受け、Gridベースの編集方法を採用しました。
03 — 再構成
使われてきた形から、
次の構造をつくる。
新しい編集方法に移るためには、すでにあるテンプレートをどう扱うかも考える必要がありました。集め、分解し、利用状況を確かめながら、移行する順番を組み立てました。
01
まず、使われている形を集める。
基本的なものから、業態ごとの用途に合わせたものまで。既存のテンプレートを集め、新しい編集機能で扱う対象を確認しました。
02
要素に分けて、扱い方を考える。
テンプレートを要素分解し、単一の要素であるBlockと、複数の要素を組み合わせたComponentに整理。まずは単一の要素から実装し、複雑な機能は順次追加する方針にしました。
03
使われ方から、移行の順番を決める。
すべてを一度に置き換えることはできません。テンプレートの利用率を集計し、何から対応するかを判断する材料にしました。
04 — ふりかえり
形にする前の、
共通認識も設計する。
学習曲線をもとに最初のステージを置いたことは、優先順位だけでなく、チームでの検証や議論にも役立ちました。操作の一覧よりも、顧客がどんな状態になれるかを共有することで、目指すところを揃えやすくなったと感じています。
開発者とは命名規則も整理し、会話で使う言葉と実装の認識がずれないようにしました。
残った課題
一方で、デザインが実装に先行し、その時点では実現できないことを何度も調整しました。制作に入る前に、目指す状態と実装の条件をどう共有するか。次の取り組みに持ち越した課題です。