【2章】UIUX基礎（前半）の振り返り

UIUXコースの学習を開始しました。

はじめにUXの基礎からと言うことで、UXデザインの本の学習からスタート。

自分のサービスに生かしたいと思った箇所をメモ。

利用ストーリーの図式化

競合リサーチのステップで、利用者がアプリ起動から目的達成し、さらにUGC生成までの流れを図式化すると言うもの。

自分のサービスでも、なんとなく考えて実装はしていたが、図式化してはいなく、抜け漏れはあったと思う。

こういうアプローチが体系化されていることが勉強になった。

vibely起動のきっかけ

• 能動的（自ら開く、SNS投稿経由で開く）

  • 移動中

  • 昼休み

  • 就寝前

• 受動的

  • Slack通知

  • メール通知

流入後の動線

AIで作ってみた。

Vibely ユーザー利用ストーリー & UGC拡散フロー
================================================

🚪 流入経路
├── 隙間時間にSNS閲覧（X / Instagram / YouTube）
│   ├── → 受講生のブログ記事を開く
│   └── → ポートフォリオ作品を見る
├── Slack通知（新着記事・コメント通知）
│   └── → 受講生のブログ記事を開く
├── Google検索（技術キーワードで流入）
│   └── → 受講生のブログ記事を開く
└── 知人・受講生からのシェアリンク(ダークソーシャル）
    ├── → 受講生のブログ記事を開く
    └── → ポートフォリオ作品を見る


👀 閲覧フェーズ
├── 記事を読む（学習ログ・制作記録）
│   ├── 関連記事へ回遊（同じ受講生 or 同テーマ）
│   │   └── さらに別の記事を読む（回遊ループ）
│   ├── コメント欄を読む（講師フィードバック含む）
│   │   └── 受講生プロフィールを見る
│   └── 記事内リンクからコース紹介ページへ
└── ポートフォリオ作品を見る
    └── 受講生プロフィールを見る


🔀 ユーザー分岐
├── 【既存受講生の場合】
│   │
│   ├── パターンA：リアクション起点
│   │   ├── いいね・リアクションする
│   │   ├── コメントを書く
│   │   └── 刺激を受けて自分も記事を書こうと思う ──→ [UGC生成へ]
│   │
│   ├── パターンB：学習再開起点
│   │   ├── 他の人の進捗を見てモチベが上がる
│   │   ├── コース教材に戻って学習再開
│   │   ├── クイズ・課題に取り組む
│   │   └── 課題の成果物をまとめて記事にする ──→ [UGC生成へ]
│   │
│   └── パターンC：交流起点
│       ├── コメントで質問・アドバイスをやりとり
│       ├── 相手の記事を引用して自分の記事を書く ──→ [UGC生成へ]
│       ├── オフ会参加のきっかけ
│       └── Slackでさらに議論が発展
│
└── 【新規訪問者の場合】
    │
    ├── パターンA：記事から興味喚起
    │   ├── 複数記事を読み込む（コミュニティの雰囲気把握）
    │   ├── 「この人たちと同じ環境で学びたい」と感じる
    │   ├── コース詳細ページへ遷移
    │   ├── 無料コンテンツを試す
    │   └── 申し込み
    │
    ├── パターンB：SNS経由で調査
    │   ├── 記事を読んでスクール名を認知
    │   ├── SNSでスクール名を検索（口コミ確認）
    │   ├── 公式アカウント・受講生の投稿を確認
    │   └── コース詳細ページへ遷移 → 申し込み
    │
    └── パターンC：離脱 → 再訪
        ├── 一度離脱するが記事がブックマーク済み
        ├── 後日Google検索で別の記事にも出会う
        ├── 複数回の接触で信頼が蓄積
        └── コース詳細ページへ遷移 → 申し込み


📝 UGC生成（受講生が生み出すコンテンツ）
├── 学習ログ記事
│   └── 「今日やったこと」「今週の学び」形式
├── 制作物のポートフォリオ公開
│   └── スクショ・デモリンク付きの作品紹介
├── つまずき → 解決の技術記事
│   └── 「○○でハマったけど△△で解決した」形式
├── コース修了レビュー
│   └── ビフォーアフター・受講の感想
└── 課題提出・成果物シェア
    └── 課題の過程と完成物の記録


🚀 UGC拡散経路
├── 受講生の自発的SNSシェア
│   ├── X で記事URLをポスト（学習報告として）
│   ├── Instagram ストーリーでスクショ共有
│   └── → 受講生のフォロワーに届く → 新規流入
│
├── Google検索にインデックス
│   ├── 技術的なつまずき記事 → ロングテールKWで上位表示
│   ├── 制作記録 → 「○○ 作ってみた」系で流入
│   └── → 検索経由で新規訪問者が増加
│
├── 講師・スクール公式によるリシェア
│   ├── 優秀な記事・作品を公式アカウントで紹介
│   ├── 受講生の成功事例としてピックアップ
│   └── → 公式の信頼性 × 受講生のリアルな声 = 高い説得力
│
├── Slack / メール通知で他の受講生に届く
│   ├── 新着記事の通知 → 既存受講生が閲覧
│   ├── コメント通知 → 書いた人が再訪問
│   └── → 受講生同士の相互閲覧ループが回る
│
└── 受講生同士の相互コメント・引用
    ├── 記事へのコメントがさらにコンテンツを増やす
    ├── 「○○さんの記事を参考に自分もやってみた」記事
    └── → UGC が UGC を生む連鎖


♻️ 成長ループ（全体の循環構造）
│
├── UGCが増える
│   ├── → SEO効果が強化（ドメインパワー向上）
│   ├── → Google検索からの新規流入が増加
│   └── → SNSシェアの総量も増加
│
├── 新規訪問者が増える
│   ├── → 記事の閲覧数・コメントが増える
│   ├── → 受講生のモチベーションUP（見てもらえてる実感）
│   └── → 一部が受講を申し込み、新たな受講生に
│
├── 新たな受講生がUGCを生成
│   ├── → さらにUGCが増える（ループの起点に戻る）
│   └── → コンテンツの多様性が増す（初心者〜上級者）
│
└── コース提供者（講師）にとっての価値
    ├── → 広告費ゼロで見込み客が集まる
    ├── → 受講生の成果物が最強の営業資料になる
    └── → 受講生が増える → UGCが増える → さらに集客（好循環）

変な部分もあるけど、
図にしてそれぞれを全て繋いでいけば、UXの体系化ができそうだなと感じた。

オブジェクト指向UIとタスク思考UI

オブジェクト指向UI：「対象物」を起点に構成し、まず操作対象を選んでから、それに対して何をするかを決める。
vibelyで、「記事」の対象物メニューを選択後、その後の画面で「一覧」「作成」「詳細を見る」「削除」など、対象オブジェクトに対するタスクを決める流れ

タスク指向UI：「やりたい操作」を起点に画面を構成する考え方で、「何をするか」を先に選ばせる。
ATMが代表的。「引き出す」「預ける」のタスクを決めた後に、何を、の対象物を決める。

自分は前職で「SaaSはオブジェクト思考UIですべて統一すべき」という教育を受け、自分がシステムを作る際にもそのようにしているが、「一概にオブジェクト指向UIが良いとも言えない」点が学びになった。

（これをきっかけに、vibelyのヘッダーにも「投稿」のタスク指向のボタンを設置。）

結局はユーザー視点を見失わないようにせねばなと感じた。

ヤコブの法則

「UIは、独自性よりも、ユーザーが既に知っている一般的な操作パターンに従うことが重要」
というもの。

記事ページのいいねボタンやシェアボタンの配置は
zennやqiitaに近づけた方が、慣れている人が触った時にストレスなく使えそう。

ペルソナから、その画面を使う人は普段どんなサービスに触れているか、調査するのも良さそう。

後半のUIの章も頑張る！！