マーケティング統合サイドバー — 仕上げ版
迷わないための5原則(このモック全体を貫くルール):
  1. 階層は3段まで — サイドバー → タブ → ピル。二次サイドバーと隠れたツリーは全廃
  2. 現在地は常に見える — パンくずは最深階層まで同期し、編集画面には所属フローの⛓チップを常設する
  3. 行き止まりを作らない — どの画面にも「戻る」があり、関連機能(LP⇄イベント⇄LINE)へは文脈リンクで双方向に直行できる
  4. 先に全体像を見せる — 未接続でも機能一覧をグレーで予告し、未設定のタブには⚠バッジを付け、クリック後に驚かせない
  5. どの入口からでも成立する — LINEだけ・LPだけの利用でも、他の機能を経由せず完結する
01 — 設計原則とIA

「集客」を「マーケティング」1グループに統合する

現状の実装(集客 › LP構築/マーケティングの2グループ、排他的アコーディオン)を、単一の開閉グループ+タブへフラット化する。

現状の実装 — 2グループ・排他的開閉
📁 集客
  • 📁 LP構築
    • テンプレート構築(Beta)
    • (旧) 構築
    • CTAボタン
    • イベント →8画面が二次サイドバーの奥
  • 📁 マーケティング
    • 公式LINE連携 →クリックで別ナビ、14機能+3が4クリック目で唐突に出現

❌ 親の v-list が open-strategy="single"(app/layouts/default.vue:28)のため、LP構築とマーケティングは排他的にしか開かない。ダッシュボード(ホーム)に相当するページも無い。

今回案 — マーケティング1グループ + タブ
📣 マーケティング 開閉可能な単一グループ
  • 📊 ダッシュボード 新規件数・次にやること・集客フロー俯瞰(LP→申込→サンクス→リマインドの束)を内包
  • 🖼️ LP構築 3タブLP一覧 / CTAボタン / 旧LP
  • 📅 イベント 編集は7タブ基本情報〜申込み一覧 + リマインド配信一覧
  • 💬 公式LINE連携 2段タブ工程4タブ × 機能ピル(計14+3機能)

→ サイドバーはこの1グループのみ。各項目をタップすると、コンテンツ側にタブが現れて下位の内容を切り替える。二次サイドバーには一切遷移しない。

グループを1つに

「集客」という部門ラベルをやめ、「マーケティング」という1つの開閉グループにする。グループが1つしかないので、「LP構築を開くとマーケティングが閉じる」という排他挙動の問題は構造上発生しなくなる。

4項目はフラットに並べる

ダッシュボード・LP構築・イベント・公式LINE連携は、互いに入れ子にせず同じ階層に並べる。LINEだけを使うユーザーも、LP構築・イベントを一切開かずに公式LINE連携へ直接入れる。

深い内容はタブで見せる

イベント編集の7画面や公式LINE連携の14機能は、コンテンツ上部の横並びタブに置く。タブは折り返さず横スクロールで、並び順と現在地が画面幅に関わらず崩れない。件数バッジで「その先に何がいくつあるか」も予告する。

LINEの14機能は2段タブで

まず集める / 育てる・対応する / 届ける / 見る・整えるの4工程タブを第1階層とし、その下に各工程の機能をピルで並べる。ピルの行頭には「機能:」ラベルを付け、1段目(工程)と2段目(機能)を視覚的に区別する。

集客フロー=施策の束

1つの集客施策 =「LP(任意)→ 申込ページ → サンクスページ → リマインド」の束としてカードで俯瞰する。専用メニューは増やさずダッシュボード内のセクションとして置く——「迷ったらダッシュボード」という帰り先とフローの俯瞰が同じ場所になる。未設定の箇所は「スロット」として見せ、後からいつでも埋められる。LP一覧・イベント一覧・LINEアカウントには所属フローの⛓チップを付け、編集画面からワンクリックで戻れる(参考モックの「所属フロー列」「現在地チップ」を採用)。

リマインド配信一覧=漏れ検出

イベント配下に横断のリマインド配信一覧タブを新設。⚠未設定の行が出ることで「設定漏れのイベント」に気づける。配信元アカウントは選ぶ場所(リマインド設定)と管理する場所(公式LINE連携)を分け、選択肢には連携済みアカウントだけを出す。

迷子の回収装置

それでも迷ったユーザーの受け皿として、ダッシュボードに「次にやること」(未完了タスクへの直行リンク)と「集客フロー」(LP→申込→サンクス→リマインドの束の俯瞰)を置く。どこにいても「ダッシュボードに戻れば正解が書いてある」状態にする。

02 — WALKTHROUGH

この構成で、実際に迷わず操作できるか

2つの代表シナリオを新しいサイドバー+タブ構成で辿る。各ステップは赤い「現行(Before)」で今のクリック経路と課題を先に示し、その下に本案(改善後)の画面を並べて対比する。集客フロー・リマインド配信一覧の動きは「03 動くモック」で実際にクリックして確認できる。

現行 Before
1「集客」を開く 2LP構築を開く 3マーケティングは閉じる
2グループが排他的にしか開かない(open-strategy="single")。全体を見渡すダッシュボード(ホーム)が無く、どこから始めればいいか分からない。
▼ 本案(改善後)
STARTサイドバーの「▾ マーケティング」を開く。中身はダッシュボード/LP構築/イベント/公式LINE連携の4項目がフラットに並ぶだけ——階層はここで終わり。初期状態のダッシュボードは「3つの始め方」を提示し、最初のクリック先を迷わせない。
/marketing
マーケティング › ダッシュボード
ダッシュボード
LP
0件
まだありません
イベント
0件
まだありません
公式LINE
未連携
-
🖼️ LPで申込みを集める

テンプレートからLPを作り、CTAボタンやイベント予約を設置する。

📅 イベントから始める

セミナー・個別相談の日程と申込みフォームを作る。LPが無くても単体で公開できる。

💬 公式LINEだけ使う

アカウントを接続して友だちを集め、配信する。LP・イベントは不要。

現行 Before
1集客 › LP構築 › テンプレート構築(Beta) 2LP作成 3公開後にCTA未作成に気づく
CTAボタンが別メニューに分かれ、LP作成中に「先に作るべき」という予告や警告が無い。作った後で気づいて戻ることになる。
▼ 本案(改善後)
DO「LP構築」をタップ。コンテンツ側に[LP一覧][CTAボタン][旧LP]のタブが現れる。CTA未作成なら黄色の依存バナーが先回りして教え、「CTAボタンタブへ」で1クリック直行——探させない。
/marketing/lp
マーケティング › LP構築 › LP一覧
LP構築
LP一覧CTAボタン旧LP
⚠ CTAボタンがまだありません。LPの申込ボタンに使うので先に1つ作成してくださいCTAボタンタブへ
現行 Before
1集客 › LP構築 › イベント(3階層目) 2イベント編集 3日程は二次サイドバーの別画面 4担当者はさらに別画面
イベントが「集客 › LP構築」の3階層目に埋もれ、設定項目が二次サイドバーの別ページに分散。今どの設定にいるか・他に何があるかが見えない。
▼ 本案(改善後)
DO「イベント」をタップし新規作成(個別相談)。編集画面は7タブで、未設定のタブには⚠バッジが付く(例: 担当者が未設定)。パンくずも「マーケティング › イベント › 体験カウンセリング › 基本情報」とタブ名まで同期する。
/marketing/events/1/basic
マーケティング › イベント › 体験カウンセリング › 基本情報
体験カウンセリング(個別相談)
基本情報日程担当者 申込みフォームサンクス・重複ページリマインダ・通知申込み一覧

※以前は「日程」「担当者設定」等が別ページの二次サイドバーに分かれていた。今はタブなので、他に何があるか・どこが未設定かが常に見えている。

現行 Before
1LP編集でイベントブロック挿入 2日程を直したい 3イベント一覧へ戻って探す 4該当イベントを開いて編集
ブロック設定パネルからは日程を直せず、LP⇄イベントの往復が発生。イベント側からはどのLPで使われているか見えない(片方向)。
▼ 本案(改善後)
DOLP編集画面でイベントブロックにこのイベントを埋め込む。埋め込み後は「このイベントを編集」リンクでイベント編集へ直行でき、イベント側にも「このイベントを使用中のLP」が表示される——双方向で行き来できる。
/marketing/lp/1
マーケティング › LP構築 › 春の入会LP
春の入会LP — 編集

イベント編集の基本情報タブにも「このイベントを使用中のLP: 春の入会LP」が出る。片方向のリンク切れを作らない。

現行 Before
1マーケティング › 公式LINE連携をクリック 2別ナビに丸ごと切替 314機能+3が唐突に出現
クリックすると別ナビに切り替わり、14機能+3が予告なく出現(4クリック目で初めて見える)。イベントのリマインダとの繋がりも不明
▼ 本案(改善後)
DO「公式LINE連携」でリマインドを設定。アカウントを選ぶと1段目タブ(工程・件数バッジ付き)+2段目ピル(機能)が現れる。イベント側の「リマインダ・通知」タブからもシナリオへ直行リンクがあるので、どちらから来ても着地は同じ。
/marketing/line/1/nurture/scenario
マーケティング › 公式LINE連携 › アカウントA › シナリオ
アカウントA
集める 1育てる・対応する 5届ける 5見る・整える 3
機能:友だちタグシナリオ自動応答チャット

イベント申込者への自動リマインドはシナリオで設定する。

現行 Before
1LPをLP一覧で確認 2イベントを別メニューで確認 3LINEをさらに別ナビで確認
全体を俯瞰する画面が存在せず、状況・連携・要対応を知るには各機能を個別に見に行くしかない。設定漏れにも気づけない。
▼ 本案(改善後)
RESULT「ダッシュボード」に戻ると、LP・イベント・公式LINEの状況、未完了タスクへの直行リンク、集客フロー(LP→申込→サンクス→リマインドの束)がまとめて見える。迷ったら常にここへ戻ればよい。
/marketing
マーケティング › ダッシュボード
ダッシュボード
LP
2件
公開中1・下書き1
イベント
2件
担当者設定済み1
公式LINE
友だち842人
シナリオ稼働中1
集客フローLP → 申込 → サンクス → リマインドの束
LP春の入会LPイベント体験カウンセリングLINEアカウントA⛓ フローで見る
1 / 6

シナリオ:LP・イベントは一切作らず、公式LINEだけで集める→育てる→届ける。サイドバーが1グループ+フラット4項目でも、LINE単体利用が迷わないか確認する。

現行 Before
1「集客」を開く 2マーケティングを開く(LP構築は閉じる)
LINE単独で使いたいのに、上位にLP構築が並んで見え、部門ラベル「集客」の下を掘らないと辿り着けない。始め方のガイドも無い
▼ 本案(改善後)
START「▾ マーケティング」を開く。ダッシュボードの「3つの始め方」から「公式LINEだけ使う」を選べば、LP構築・イベントを一度も開かずに進める
/marketing
マーケティング › ダッシュボード
ダッシュボード
LP
0件
使っていません
イベント
0件
使っていません
公式LINE
未連携
-
公式LINEアカウントをまだ接続していません接続する →
現行 Before
1公式LINE連携をクリック 2別ナビに切替・接続画面 3接続後に14機能が一気に出現
接続前は何ができるか分からず、接続した途端に大量の機能が予告なく現れる。全体像を掴めないまま操作を始めることになる。
▼ 本案(改善後)
DO「公式LINE連携」をタップ。未接続でも4工程×14機能の全体像がグレーで予告表示される——接続したら何ができるかが先に分かり、接続後に機能群が唐突に現れない。
/marketing/line
マーケティング › 公式LINE連携
公式LINEアカウント
まだ接続済みのアカウントがありませんLINEアカウントを接続
📥 集める
  • 流入経路(QRコード)
🌱 育てる・対応する
  • 友だち
  • タグ
  • シナリオ
  • 自動応答
  • チャット
📤 届ける
  • 一斉送信
  • テンプレート
  • フレックスメッセージ
  • リッチメニュー
  • アンケート
📈 見る・整える
  • 分析
  • 送信エラー
  • 通知設定

接続すると上記の機能が使えるようになります

現行 Before
機能が工程で整理されておらずフラットに並ぶため、「集める→育てる→届ける」というやる順番が読み取れない。どこから手をつけるか自分で組み立てる必要がある。
▼ 本案(改善後)
DO1段目タブ「集める」で流入経路(QRコード)を作成する。
/marketing/line/1/gather/route
マーケティング › 公式LINE連携 › アカウントA › 流入経路
アカウントA
集める 1育てる・対応する 5届ける 5見る・整える 3
流入経路(QRコード作成)
現行 Before
友だち・タグ・シナリオ・自動応答・チャットが並列に散らばり、どれが「育てる/対応する」ための機能かグルーピングされていない。関連機能を探し回ることになる。
▼ 本案(改善後)
DO1段目タブ「育てる・対応する」→2段目ピルでタグ・シナリオを設定する。件数バッジのおかげで、開く前から「5機能ある」と分かっている。
/marketing/line/1/nurture/scenario
マーケティング › 公式LINE連携 › アカウントA › シナリオ
アカウントA
集める 1育てる・対応する 5届ける 5見る・整える 3
機能:友だちタグシナリオ自動応答チャット
現行 Before
一斉送信・テンプレート・フレックス・リッチメニュー・アンケートが「届ける」という工程で束ねられておらず、配信のためにどの機能を使うのか一目で分からない。
▼ 本案(改善後)
DO1段目タブ「届ける」→2段目ピルでテンプレート・フレックスメッセージを作り一斉送信する。
/marketing/line/1/deliver/broadcast
マーケティング › 公式LINE連携 › アカウントA › 一斉送信
アカウントA
集める 1育てる・対応する 5届ける 5見る・整える 3
機能:一斉送信テンプレートフレックスメッセージリッチメニューアンケート
現行 Before
LINE単独利用でも状況をまとめて見る場所が無く、送信エラーなどの要対応は各機能を開かないと気づけない。LINEしか使っていなくても他機能のメニューが常に居座る。
▼ 本案(改善後)
RESULT「ダッシュボード」に戻ると、LP・イベントは0件のままでも公式LINEカードだけで意味を持つ。連携マップは表示されず、送信エラーなど今対応すべきことだけが出る。
/marketing
マーケティング › ダッシュボード
ダッシュボード
LP
0件
使っていません
イベント
0件
使っていません
公式LINE
友だち318人
稼働シナリオ2・送信エラー1

※ LP・イベントを使っていないため集客フローは表示されません

送信エラーが1件あります確認する →
1 / 6
モックの状態切替:
/marketing
LINE公式配信数1,240 / 5,000📖 ご利用マニュアル💬 お問い合わせ
📍マーケティング › ダッシュボード
ダッシュボード
LP
2件
公開中1・下書き1
イベント
2件
担当者設定済み1
公式LINE
友だち842人
シナリオ稼働中1
次にやることクリックすると該当画面を開きます
「入会説明会LP」が下書きのままです
「体験カウンセリング」の担当者設定が未完了です
公式LINEの送信エラーが1件あります
「入会説明会」のリマインド配信が未設定です
集客フロー1施策 = LP(任意)→ 申込 → サンクス → リマインドの束。スロットから直接編集へ
集客フローを新規作成 — どこから作り始めますか?
📅 イベントから作る おすすめ・最短

とにかく早く募集を始めたい場合。申込ページURLが即発行され、サンクスページも自動生成されます。申込者はシンプルな申込ページを見ます。

📄 LPから作る

広告を回すなど、訴求コンテンツを作り込みたい場合。あとからイベントの申込フォームをそのまま組み込めます。

どちらから始めても完成形は同じ。残りのステップは「未設定スロット」としてフローに現れ、後からいつでも埋められます。迷ったら「イベントから」でOK。

春の入会キャンペーン 申込42件・公開中
LP春の入会LP公開中
申込ページ(イベント)体験カウンセリング受付中
サンクスページ自動生成⚠ 初期テンプレのまま
リマインドLINE・開催3日前ほか2件 設定済み
入会説明会(申込ページのみ)申込8件
LP未接続任意
申込ページ(イベント)入会説明会受付中
サンクスページ自動生成編集済み
リマインド未設定⚠ 設定漏れ

⚠=要対応(サンクスが初期テンプレのまま/リマインド未設定)。各スロットのボタンで該当の編集画面へ直行し、編集画面の「⛓ フロー名」チップでこのダッシュボードへ戻れます。

LP
0件
まだありません
イベント
0件
まだありません
公式LINE
未連携
-
3つの始め方どれか1つから始められます。あとから組み合わせ可能
🖼️ LPで申込みを集める

テンプレートからLPを作り、CTAボタンやイベント予約を設置する。

📅 イベントから始める

セミナー・個別相談の日程と申込みフォームを作る。LPが無くても単体で公開できる。

💬 公式LINEだけ使う

アカウントを接続して友だちを集め、配信する。LP・イベントは不要。

LP構築
LP一覧 3 CTAボタン 2 旧LP
春の入会LP 集客LP ●公開中
体験カウンセリング サンクスページ サンクスページ ⚠初期テンプレ
イベント作成時に自動生成された1つのLP
入会説明会LP 集客LP ○下書き フロー未接続

種別バッジと⛓所属フローが見えるので、自動生成されたサンクスページも「勝手に増えたページ」ではなく「フローの一部」として理解できる。サンクスページの「編集」は、イベント編集の「サンクス・重複ページ」タブと同一画面に着地します(編集画面は各要素につき1つ)。※モックの都合上、集客LPの「編集」はどちらも同じエディタを開きます

春の入会LP — 編集
PC / SP 切替・元に戻す等は省略
🗓 イベント予約ブロック
春の入会説明、まずは体験から
オンクラス 入会キャンペーン実施中
イベント未設定

実際の公開ページのイメージ(簡略表示)。編集タブでイベントを選ぶとここに反映されます。

/checkout?plan=basic
ボタン文言
背景色
角丸

値を変えると上のボタンにリアルタイムで反映されます。

/events/2

同様に文言・配色・角丸を編集できます(1つ目のボタンで挙動を確認済みのため省略)。

旧ブロック型LP・決済連携・特定商取引法表記などはここに折りたたまれています。

イベント
イベント一覧 2 リマインド配信 3
体験カウンセリング 個別相談 ⚠担当者未設定
入会説明会 セミナー

※モックの都合上、どちらの「編集」も同じ編集画面を開きます

体験カウンセリング — 編集
基本情報 日程 担当者 申込みフォーム サンクス・重複ページ リマインダ・通知 申込み一覧 2
イベント名
管理用名称
イベント種別
申込締切
所要時間
前後確保時間
定員
担当者アサイン
⚠ 担当者が未確定です。追加すると申込枠が公開されます(追加すると、タブの⚠バッジと、ダッシュボードの「次にやること」からこの項目が消えます)
担当者申込通知キャンセル通知
佐藤 花子
山田 太郎
電話番号(テキスト・必須)
ご質問(テキストエリア・任意)
⚠ 初期テンプレの文面のまま公開されています。このイベント用に編集してください。このサンクスページはイベント作成時に自動生成された1つのLPで、LP一覧にも「サンクスページ」種別で表示されます
ページ: サンクスページ 重複申込ページ
リダイレクトURL
追加コンテンツ
表示内容
配信元アカウント
LINE
メール

選択肢には公式LINE連携に登録済みのアカウントだけが表示されます。アカウントの追加・認証は (選ぶ場所と管理する場所を分ける)

タイミングチャネル件名有効
開催3日前 10:00LINEまもなく体験カウンセリングです
開催前日 18:00メール明日のご予約について
氏名メール日程ステータス
鈴木 一郎ichiro@example.com7/12 14:00確定
田中 次郎jiro@example.com7/13 10:00確定
対象イベント / フローチャネル・配信元タイミング状態
体験カウンセリング
LINE アカウントA開催3日前 10:00稼働中
体験カウンセリング
メール seminar@onclass.jp開催前日 18:00停止中
入会説明会
⚠ リマインドが未設定です — 申込者に開催前の案内が届きません

イベント横断でリマインドの設定状況を一覧し、⚠未設定(設定漏れ)に気づくための画面。「編集」「+設定する」はどこから開いても各イベントの「リマインダ・通知」タブ(同一画面)に着地します。

公式LINE連携
アカウントA ●接続中
リマインド配信 2件で使用中
個別相談用LINE ●接続中
未使用
まだ接続済みのアカウントがありませんLINEアカウントを接続
📥 集める 1
  • 流入経路(QRコード)
🌱 育てる・対応する 5
  • 友だち
  • タグ
  • シナリオ
  • 自動応答
  • チャット
📤 届ける 5
  • 一斉送信
  • テンプレート
  • フレックスメッセージ
  • リッチメニュー
  • アンケート
📈 見る・整える 3
  • 分析
  • 送信エラー
  • 通知設定

接続すると上記の機能が使えるようになります(予告型プレビュー — 接続後に14機能が唐突に現れない)

集める 1 育てる・対応する 5 届ける 5 見る・整える 3
機能:流入経路

友だち追加用のQRコード・リンクを作成します。

機能: 友だち タグ シナリオ 自動応答 チャット

友だち一覧・検索・タグ確認。

友だちを分類するタグを作成・編集します。

イベント申込者への自動リマインドなど、ステップ配信を組みます。

受信メッセージへの自動返信ルールを設定します。

個別友だちとの1:1チャット。

機能: 一斉送信 テンプレート フレックスメッセージ リッチメニュー アンケート

全友だちへ一斉配信します。

配信用メッセージテンプレートを作成します(一斉送信・シナリオから呼び出されます)。

リッチなフレックスメッセージを作成します。

チャット下部のリッチメニューを設定します。

シナリオ内で送るアンケートを作成します。

機能: 分析 送信エラー 通知設定

Coming Soon — 実装中の機能です。

配信エラーの一覧・再送。テスト送信の失敗はここには出しません。

受信通知・上限アラートを設定します。

このモックで確認してほしいこと
  • パンくず・URLの同期 — タブやピルをどれだけ深く辿っても、右上のパンくずとURLが必ず現在地を指す。
  • 行き止まりゼロ — LP編集の「このイベントを編集」→イベント基本情報の「LPを開く」→リマインダの「シナリオを開く」→シナリオの「イベント側の設定を開く」と、一周回って戻ってこられる。
  • ⚠バッジの生存期間 — イベント編集の「担当者」タブの⚠は、担当者を追加すると消える。ダッシュボードの「次にやること」も同じ状態を映す想定。
  • 状態切替 — 上のトグルで「初期状態」「LINE未接続」に切り替えると、空状態のガイド(3つの始め方・予告型プレビュー)を確認できる。
  • 集客フロー(ダッシュボード内) — フローカードの各スロット(LP/申込/サンクス/リマインド)から該当編集画面へ直行でき、⚠スロット(サンクス初期テンプレ・リマインド未設定)がそのままToDoになる。フィルタ(LPあり/なし/⚠要対応)と新規作成の2分岐ダイアログも動く。
  • リマインド配信一覧 — イベント › リマインド配信タブで、⚠未設定行(入会説明会)が浮き上がる。「編集」「+設定する」はどちらも同じイベント編集画面に着地する。各所の⛓チップでダッシュボードの集客フローに戻れる。