株式会社ミショナ UI/UXデザイナー 職種別適性テスト

L Message「一斉配信」の改善と新機能の提案
送って終わりから、予約が増えたかが分かり、次の一手まで出る配信へ

対象:PCブラウザ(横1280px)使用ツール:Claude Code(デスクトップアプリ)/ Claude in Chrome選考課題用の非公式プロトタイプです

プロトタイプを開く

一斉配信の流れを 「送る前」「送った後」「その次」 の3段階で見直しました。

あわせて、一斉配信まわりの既存画面を3か所直しました(通数の表示・配信エラー・呼び方)。

目次
  1. テーマ選定:なぜ一斉配信か
  2. 課題分析:今の一斉配信のどこに課題があるか
  3. 提案内容:新機能A・B・Cと既存画面の改善
  4. AI活用プロセス:AIに何を指示し、どう判断・調整したか
  5. プロトタイプの見方と補足

1. テーマ選定:なぜ一斉配信か

選んだ機能は 一斉配信(今のメニュー名は「メッセージ配信」) です。理由は3つあります。

① お店の集客と費用に一番直結する

L Messageを使うお店(例:美容サロン)が、新メニューやキャンペーンを知らせて予約を増やすときの中心になる機能です。配信にはLINE公式アカウントの月の通数上限があり、送れば送るほど上限に近づきます。つまり一斉配信は「予約を増やしたい」と「通数(費用)を無駄にしたくない」が一番ぶつかる場所です。

② 実際に触って、課題が集まっていた

L Messageを実際に操作して見つけた課題のうち、通数の上限が2種類あること、作成画面で使う通数が分からないこと、送ったあとの成果が別の画面に分かれていることなど、10個のうち4個が一斉配信の前後に集まっていました。

③ L Messageだからこそ作れる新機能がある

L Messageには、配信だけでなく 予約管理・商品販売・URL分析・コンバージョン の機能がすでにあります。予約や売上のデータが同じサービスの中にあるので、「この配信で予約が何件入ったか」までつなげられます。配信だけのツールにはできない、L Messageの強みを伸ばす提案にできると考えました。

2. 課題分析:今の一斉配信のどこに課題があるか

想定したユーザー

小さなお店のオーナー(例:スタッフ数人の美容サロン)。施術の合間に、月に数回一斉配信を送る。マーケティングの専門家ではない。

本当に知りたいのは、「誰に送れば予約が入るか」「今月の通数で足りるか」「この前の配信は効いたのか」「次に何を送ればいいか」の4つ。

配信の流れで見た課題

段階今の画面で起きていることなぜ困るか対応
送る前ヘッダーの「配信数」に、L MessageとLINE公式アカウントの2つの上限が並ぶ。片方はリアルタイム、片方は1日1回の更新。どちらが先に上限になるのか、今あと何通送れるのかが一目で分からない。改善1
送る前作成画面の配信先に出るのは「◯人(予定)」の人数だけ。何通使うか、残りで足りるか、誰に送れば予約につながるかが分からない。全員に送るか絞るかを決める材料がない。新機能A
送った後配信の一覧(配信予約)の列は「配信予定日時・管理用タイトル・配信先絞込み・配信数・送信者名・アクション・クイックテスト・操作」。開封やクリックは「URL分析」、予約や反応は「コンバージョン」「クロス分析」と、別のメニューに分かれている。「この配信で予約が何件入り、いくらになったか」を知るには、いくつもの画面を回って自分で照らし合わせる必要がある。新機能B
その次配信の結果から、次の配信につながる導線がない。開いたけれど予約していない人へのリマインドなど、効果が出やすいフォローを毎回自分で考え、絞り込みの条件も作り直す必要がある。新機能C
届かなかったとき「送信エラー」はメニューの一番下(ログアウトの上)にあり、件数も出ない。表の列は「エラーコード」「詳細・削除」で、原因を言葉で示す列がない。届いていないことに気づきにくく、気づいても何をすればいいか分からない。改善2
全体メニューは「メッセージ配信」「送信エラー」、画面名は「配信エラー」、作成画面の見出しは「メッセージ登録」。同じものの名前が場所によって違い、迷う。改善3
今の一斉配信の作成画面
今の一斉配信の作成画面。上限が2つ並び、配信先には人数しか出ない(アカウント名などは黒く塗っています。実画面は友だち3人のテスト用アカウント)
今の配信エラーの画面
今の配信エラーの画面。メニューは一番下で、名前も「送信エラー」と画面名と違う

課題の根っこ

画面が「機能ごと」に作られていて、お店がやりたいこと(予約を増やすこと)の流れでつながっていないことだと考えました。配信・分析・予約の材料はそろっているのに、それぞれ別の画面に置かれているため、使う人が自分の頭の中でつなぎ合わせる必要があります。

3. 提案内容

コンセプトは 「送る前・送った後・その次」を1つの流れにする ことです。

送る前 新機能A誰に送れば、何通で、何件予約が入りそうかが分かる
送った後 新機能Bその配信で予約が何件、売上がいくらになったかが分かる
その次 新機能C結果から、次に送る相手と文面がすぐ用意される

新機能A送る相手のおすすめ(送る前)

修正後を開く修正前を開く

仕様の決めごと

根拠:通数には上限があるので、「全員に送る」が一番良いとは限りません。サンプルでは、全員(1,240通)だと予約の見込みは約9件。90日以内に反応した人(612通)でも約8件です。予約はほぼ同じまま、通数を半分にできます。こうした判断材料を、送る前に出すことを狙いました。

新機能B配信ごとの成果レポート(送った後)

修正後を開く修正前を開く

数え方の決めごと

根拠:予約・商品販売・URL分析のデータはL Messageの中にすでにあります。新しく集めるのではなく、配信を軸に並べ直すだけで、「効いた配信」が分かるようになります。数字をお金(売上)と予約件数で出すことで、専門家でなくても良し悪しを判断できるようにしました。

新機能C成果から次の一手(その次)

修正後を開く修正前を開く

根拠:一度開いた人は関心がある相手なので、2回目の案内が予約につながりやすいと考えました。ただ今は、その相手を絞り込み条件で作り直す手間があり、後回しになりがちです。レポートを見たその場で次の配信を作れれば、配信が「1回送って終わり」になりません。

一斉配信まわりの既存画面の改善

改善今修正後開く
改善1
通数の上限
L Message(4,236/10,000)とLINE公式アカウント(4,180/5,000)が並ぶ「今月あと送れる通数 764通」の1つにまとめる。少ない方の上限を使い、内訳は折りたたむ。LINE側は1日1回しか更新されないので、そのあとL Messageから送った分を足して今の残りを出す。修正後修正前
改善2
配信エラー
メニューの一番下。件数なし。エラーコードのみメニューの配信系のすぐ下に移し、件数バッジを付ける。表に「原因」と「直し方」を文章で出し、その場で再送の予約や確認済みにできる。修正後修正前
改善3
呼び方
メッセージ配信・送信エラー・メッセージ登録「一斉配信」「配信エラー」「一斉配信の作成」にそろえる。修正後修正前

課題の条件にある状態の網羅

状態プロトタイプのどこで見られるか
画面遷移成果レポートの「次にやること」→ 下書き入りの一斉配信の作成。ホームの「今日やること」→ 成果レポート。
モーダル一斉配信を予約・配信する前の最終確認。
空状態まだ配信していない/集計中の配信の成果レポート(自分で一斉配信を予約すると見られます)。
エラー状態新機能Aで「すべての友だち」を選ぶと、通数が足りないエラーが出て配信できなくなる。改善2の配信エラーの表。

今後確かめたいこと

4. AI活用プロセス

使ったツールは Claude Code(デスクトップアプリ) です。実画面の調査には、ログイン済みのChromeを読むだけの Claude in Chrome を使いました。

この章は、次の4つの順で書いています。

  1. 何を自分で考え、何をAIに任せたか
  2. 自分の意図を、AIにどう伝えたか
  3. AIの出力を、どう選び、どう直したか
  4. 対話を重ねて、段階的にどう良くなったか

4-1. 何を自分で考え、何をAIに任せたか

手を動かす量が多く、正しいかどうかを機械的に確かめられる部分はAIに任せました。「何が課題か」「何が良いか」を決める部分は自分で持ちました。

場面自分で考えたことAIに任せたこと
課題を見つける実際に操作して感じた違和感を言葉にする。AIの挙げた課題のうち、どれを本当の課題とみなすかを決める。実画面を見て回り、課題の候補を広く集める。公式FAQや口コミで裏づけを探す。
方向を決める課題文を読み直し、改善の数より新機能の質に軸足を移すと決める。AIの提案を採るか見送るかを決める。新機能の候補を複数出す。提出の条件と今の成果物のずれを洗い出す。
形にする「見た目は本物と同じ」「作成は本当に動かす、送信は表示だけ」という作り込みの線を引く。プロトタイプの実装。実画面の寸法・色の読み取り。
確かめる出来上がりを自分で開いて触り、初めて見る人に伝わるかを判定する。全画面を自動で開いてエラーがないか確認する。操作の流れを自動で試し、不具合を直す。

4-2. 自分の意図を、AIにどう伝えたか

「いい感じに直して」とは頼まず、次の5つの渡し方をしました。引用は実際の指示です。

渡し方実際の指示ねらい
画面の画像を添えて
場所を示す
(並べ替えのウィンドウ、読みにくい表、説明のバー、折り返した表の画像を添えて)「この表が分かりにくい」「折り返している所がある」言葉だけだと、どの画面のどこの話かがずれる。問題の場所をAIと同じ絵で見る。
判断の根拠になる
原文を渡す
(課題文の該当部分を貼り付けて)「LINEで集客するときに欲しい機能や、本来あるべき機能を提案して」自分の感想ではなく、課題文という共通の物差しでAIに考えさせる。
問題と一緒に
あるべき姿を言う
「この並べ替えの方法は不自然。左のフォルダを直接ドラッグして動かせる方が直感的では?」不満だけ伝えると、直す方向をAIが推測することになる。目指す操作を先に示す。
作り込みの
線引きを言う
「送信は画面上の表示だけでいいが、新規作成は本当にできるようにしたい」「UIの見た目は、色も配置も既存と全く同じにして」どこまで本物らしく作るかを決めておき、AIが作りすぎたり手を抜いたりするのを防ぐ。
避けたい結果を
言う
「切り替えのボタンも分かりにくく、押してもらえない可能性がある」見た目の好みではなく、見る人の行動で良し悪しを伝える。

4-3. AIの出力を、どう選び、どう直したか

採ったもの・見送ったもの

出てきた案判断理由
AIの提案:機能領域を
「一斉配信」1つに絞る
採用見つけた課題のうち4つが一斉配信の前後に集まっていた。課題も、機能領域を1つ選んで深く設計する形になっている。
AIの提案:新機能の方向
「配信の成果が見える」
採用予約・商品販売・URL分析のデータがL Messageの中にあり、配信とつなげる提案にできる。
AIの提案:予約まわりの新機能
(空き枠の穴埋めなど)
見送り一斉配信の「送る前・送った後・その次」の1つの流れに入らない。
AIの提案:配信のABテスト、
AIによる文面の下書き
見送り3つの新機能に集中して、流れとして見せることを優先した。
自分の案:本物のソース
コードを写して再現する
取りやめAIから「公開URLに他社のコードをそのまま載せるのは避けた方がいい」と意見があった。寸法と色を読み取って書き直す方法にした。
自分の指摘:フォルダのドラッグ
並べ替え、タップ数の表
今回は作らないテーマを一斉配信に絞ったため。課題としては記録している。

AIの出力を直させた場面

1
課題の洗い出しに、触ったときの違和感を足した
AIの出力
実画面・公式FAQ・口コミから集めた10個の改善点。
気づいたこと
自分で操作すると、タグのフォルダの並べ替えが、別のウィンドウで順番を選ぶ方式になっていた。AIの一覧には入っていなかった。
返した指示
この並べ替えの方法は不自然。左のフォルダを直接ドラッグして動かせる方が直感的では?
リッチメニューのタップ数の表が分かりにくい。
結果
画面を見て分かる課題に加えて、操作して分かる課題も課題リストに入った。
2
「改善した所だけ動く」を「本物のように触れる」にした
AIの出力
改善した画面だけが動くプロトタイプ。
気づいたこと
自分で触ると、左のメニューを押しても何も起きなかった。
返した指示
メニューのボタンを押しても何も起きない。ここも忠実に再現したい。送信は画面上の表示だけでいいが、新規作成は本当にできるようにしたい。
結果
約40画面に移動でき、リッチメニューなどを実際に作れる状態になった。
3
課題文を読み直して、改善の数から新機能の質へ方向を変えた
AIの出力
改善点10個を並べたプロトタイプ。完成度は上がっていた。
気づいたこと
課題文が求めているのは、既存機能の整理にとどまらない「本来あるべき機能」「あったらユーザーの成果が上がる機能」の提案だった。改善を並べただけでは、課題に答えきれていない。
返した指示
(課題文を貼り付けて)LINEで集客するときに欲しい機能や、本来あるべき機能を提案して。
指示で渡したこと
根拠課題文の原文(本来あるべき機能・成果が上がる機能の提案)方針既存の改善から、新機能の提案へ切り替える観点お店がLINEで集客するときの成果と、本来あるべき機能
結果
「集客の成果」の観点で新機能の案が出た。その中から3つを採り、一斉配信に絞って全体を組み直した。
4
最初に目に入る場所を、押してもらえる形に直した
AIの出力
画面上部に「修正前/修正後」の小さなタブと、3列の説明文。
気づいたこと
何を伝えたいのかが分からない。切り替えのボタンも目立たず、修正後を見てもらえない恐れがある。
返した指示
修正前後のヘッダーが見づらく、何を伝えたいのか分からない。切り替えのボタンも分かりにくく、押してもらえない可能性がある。
結果
切り替えを説明のすぐ横に大きく置き、いまどちらを見ているかを常に出すようにした。課題と提案はカードにして、見ている方を濃く出した。
5
AIが書いた資料も、読む人の目で直した
AIの出力
この提案ドキュメントの初稿。
気づいたこと
表の中でラベルが1文字ずつ折り返していた。この章も「AIが何をしたか」の説明に寄っていて、AI任せに見えた。
返した指示
提案ドキュメントのUIを直して(折り返している所がある)。
この章は、AI任せになってしまっている。
結果
表の折り返しを直した。この章は、自分がどこで判断したかが分かる構成に組み直した。

4-4. 対話を重ねて、段階的にどう良くなったか

一度の指示で作り切らず、AIが作る → 自分で触る → 問題を返す、を版ごとに繰り返しました。

版AIが作ったもの自分が触って見つけた問題次の版で変えたこと
第1版改善10個を、修正前・修正後で切り替えられるプロトタイプ左のメニューを押しても何も起きない全メニューを開けるようにし、新規作成を本当に動かす
第2版約40画面に移動でき、リッチメニューなどを作れるプロトタイプ課題文が求めているのは新しい機能の提案。改善を並べただけでは答えきれていない一斉配信に絞り、新機能A〜Cを加える
第3版新機能A〜Cを加えたプロトタイプと、提案ドキュメントの初稿説明のバーが伝わらない。切り替えが押されない。資料の表が折り返す説明のバーを作り直し、資料の表を直す
第4版切り替えを大きくしたプロトタイプと、直した資料AI活用の章がAI任せに見える自分の判断が分かる構成に、章を組み直す
第5版いまの提出物

気をつけたこと

指示の引用は、要点を抜き出し、話し言葉を読みやすく整えています(内容は変えていません)。

5. プロトタイプの見方と補足

ほかに気づいた点(4〜9)

一斉配信とは別の画面ですが、調査の中で見つけて形にしたものです。

プロトタイプを開く