【UIデザインの教科書】AIを使ったVibe Codingにも役立つ語彙力を高める

AIでUIを作れる時代になっても、良いUIかどうかを判断できなければ、最後は「なんか違う」で止まります。

特にスクールやコミュニティサイトは、動画、ウェビナーアーカイブ、チャット相談、教材一覧、進捗、告知、決済、マイページが混ざるため、見た目だけ整えても使いやすくなりません。

この記事では、UIデザインを「作る技術」ではなく「判断してAIに依頼するための語彙」として整理します。

読み終わると、Vibe Codingで作った画面をレビューし、AIへ具体的に改善依頼できるようになります。

見出し画像はAIで生成しました。
プロンプトは65000文字超えの記事に掲載中。

私の提案は、無料部分で「UIの基礎知識」を渡し、有料部分で「実務レビュー観点、改善プロンプト、上級チェックリスト」を渡す構成です。

この分け方が一番強いです。

理由はシンプルです。

無料部分で読者は、自分に必要な記事かを判断できます。

有料部分では、明日から自分のスクール、講座サイト、会員サイト、コミュニティサイトへそのまま使える判断テンプレートを受け取れます。

UIデザインの話は、抽象的に書くと退屈になります。

余白、配色、フォント、レイアウト、導線。

この言葉だけを並べても、読者は実務で使えません。

だからこの記事では、題材をスクール/コミュニティサイトに絞ります。

• 動画教材をどこに置くか

• ウェビナーアーカイブをどう探させるか

• チャット相談をどう迷わせないか

• 受講者が次に何をすればよいか

• 講師や運営者がどこを見れば改善できるか

• AIへどんな言葉で修正依頼すればよいか

ここまで具体化すると、UIデザインは急に分かりやすくなります。

UIはセンスの話ではありません。

ユーザーが目的へ進めるかどうかの設計です。

目次

• UIデザインで本当に必要なのは「作る技術」より「判断語彙」

• スクール/コミュニティサイトで見るべき7つの基礎

• AIにUIを頼む前に決めること

• 上級者はUIを「画面」ではなく「学習行動」で見る

• 動画/ウェビナーアーカイブUIは、探す画面ではなく戻る画面として設計する

• チャット相談/コミュニティUIは、発言量ではなく質問成功率で見る

• AIへ依頼する時は、改善対象を「部品」ではなく「摩擦」で渡す

• UIレビューは、主観を消す作業ではなく、主観を検証できる言葉へ変える作業

• まとめ。AI時代のUIデザイン学習は、作例暗記ではなく判断語彙の獲得です

UIデザインで本当に必要なのは「作る技術」より「判断語彙」

AI時代のUIデザインで最初に必要なのは、きれいな画面を作る技術ではありません。

出てきた画面のどこが良く、どこが弱く、何を直すべきかを言語化する力です。

Vibe Codingでは、AIに「スクールサイトを作って」「会員ページを作って」「動画一覧を作って」と頼めば、画面らしきものはすぐ出ます。

しかし、そこで止まる人が多いです。

見た目はできた。

でも、本当に使いやすいのか分からない。
どこを直せばいいか分からない。
AIに何と言えばいいか分からない。

ここで必要になるのが、UIデザインの語彙です。

「なんか見にくい」は感想です。
AIへの依頼としては弱いです。

ここまで言えると、AIはかなり動きやすくなります。

「古い感じがする」も感想です。
AIへの依頼としては弱いです。

ここまで言えると、AIは修正方向を理解できます。

つまり、AIにUIを作らせる時代ほど、デザイン用語は重要になります。

ただし、用語を暗記するだけでは足りません。
用語を「判断」と「依頼」に変換できる必要があります。

スクール/コミュニティサイトで考えると、分かりやすいです。

• この種のサイトには、単なるページ閲覧以上の目的があります。

• 受講者は、学び続ける必要があります。

• 迷った時に質問する必要があります。

• ウェビナーを見逃した時に戻る必要があります。

• 自分の進捗を確認する必要があります。

• 講師や運営者からの重要なお知らせを受け取る必要があります。

だから、スクールUIは「かっこいい画面」だけでは成立しません。
学習行動を止めない画面である必要があります。

ここで使うべき語彙は、次のようなものです。

• 情報設計

• 優先順位

• 視線誘導

• 認知負荷

• 行動導線

• 状態表示

• フィードバック

• 探索性

• 継続導線

• 信頼感

• 安心感

• 一貫性

• 空白

• 密度

• 階層

• 視認性

• 可読性

• 操作可能性

難しく見えても、使い方は単純です。
しかし、使い方はシンプルです。

見た目の感想を、ユーザー行動の問題に変換するだけです。

• 見にくい → 情報の優先順位が分からない

• 使いにくい → 次の行動導線が見えない

• ごちゃつく → 情報密度が高く、余白の役割が弱い

• 安っぽい → 文字階層、余白、色、影の一貫性がない

• 迷う → 現在地、完了状態、次の行動が表示されていない

• 冷たい → サポート導線、運営者の存在、安心材料が見えない

• 続かなそう → 進捗、達成感、再開導線が弱い

この変換ができると、AIへの依頼が変わります。

悪い依頼はこうです。

もっと見やすくして。
今っぽくして。
使いやすくして。
おしゃれにして。
プロっぽくして。

良い依頼はこうです。

この画面は、動画教材、ウェビナーアーカイブ、チャット相談が同じ視覚強度で並んでいます。
初回受講者が次に何をすればよいか迷うため、最優先行動を「次の動画を見る」に設定してください。
ウェビナーアーカイブとチャット相談は補助導線へ下げ、カードサイズ、見出し、ボタンの強弱で階層を作ってください。

同じ「見やすくして」でも、ここまで言い換えると出力が変わります。

AIは、抽象的な感想よりも、目的、対象、摩擦、改善方向を渡された時に強くなります。

スクール/コミュニティサイトで見るべき7つの基礎

スクール/コミュニティサイトのUIは、7つの基礎でかなり判断できます。
この7つを見れば、非デザイナーでも「どこが弱いか」を言葉にできます。

1つ目は、入口です。

ユーザーがログインした直後、何を見ればよいかが分かるか。
これが弱いと、どれだけ教材が充実していても使われません。

スクールサイトのトップ画面でよくある失敗は、全部を見せようとすることです。

全部を並べると、情報は増えます。

しかし、行動は減ります。

入口で最初に見せるべきものは、原則1つです。

• 初回ユーザーなら、最初に見るべき講座

• 継続ユーザーなら、前回の続き

• 迷っているユーザーなら、質問導線

• イベント前のユーザーなら、次回ウェビナー

• 離脱しそうなユーザーなら、短く達成できる教材

UIレビューでは、こう言えます。

ログイン直後の画面で、最初に取るべき行動が複数あります。
受講者の状態に応じて、主行動を1つに絞ってください。
初回ユーザーには「最初の講座を始める」、継続ユーザーには「前回の続きから再開する」を最上位に置いてください。

2つ目は、階層です。

重要なものが重要に見えるか。
補助情報が補助に見えるか。

デザインに慣れていない人は、すべてのカードを同じサイズ、同じ色、同じボタンで並べがちです。

一見そろっていてきれいに見えます。

しかし、ユーザーから見ると、どれが重要か分かりません。

スクールUIでは、階層が命です。

なぜなら、受講者には常に「次に何をすればいいか」という問いがあるからです。

階層を作る方法は複雑ではありません。

• 一番重要なカードだけ大きくする

• 主ボタンは1画面に1つだけ強くする

• 補助リンクは文字リンクへ下げる

• 未完了タスクを上へ置く

• 完了済み教材は視覚的に弱める

• お知らせは緊急度で分ける

AIにはこう頼めます。

このダッシュボードは、全カードの視覚強度が同じで、優先順位が伝わりません。
「前回の続きから再開する」を主行動として最も強く見せ、ウェビナーアーカイブ、質問、資料ダウンロードは二次導線として整理してください。
カードサイズ、見出しサイズ、ボタン色、余白で階層を作ってください。

3つ目は、余白です。

余白は、何も置かない空間ではありません。
情報のまとまりを伝えるための設計要素です。

スクールサイトでは、教材カード、カテゴリ、講師コメント、進捗表示、チャット導線が並びます。

ここで余白が弱いと、全部が同じかたまりに見えます。
余白が強すぎると、一覧性が落ちます。

見るべきは、余白の量ではなく、余白の役割です。

• 同じグループ内の余白は狭いか

• 別グループ間の余白は広いか

• 画面端の余白が詰まりすぎていないか

• ボタンの上下余白が押しやすさを支えているか

• スマホ表示で余白が過剰になっていないか

AIにはこう頼めます。

教材一覧とウェビナー一覧の境界が弱く、同じ情報群に見えます。
同じカテゴリ内のカード間余白は少し詰め、カテゴリ間の余白を広げてください。
見出し、説明文、カード群の関係が分かるように、余白でグルーピングを明確にしてください。

4つ目は、導線です。

導線とは、ユーザーが次に進む道です。
ボタンを置くことではありません。

スクール/コミュニティサイトで必要な導線は、主に5つです。

• 学習開始導線

• 学習再開導線

• 復習導線

• 質問導線

• 継続導線

この5つが混ざると、画面は一気に分かりにくくなります。

特に、動画一覧とウェビナーアーカイブとチャット相談を同じグリッドに置くと危険です。

ユーザーは「学ぶ」「戻る」「聞く」のどれをすればよいか分からなくなります。

良いUIは、導線の役割が分かれています。

• 学ぶ: 次の動画、カリキュラム、課題

• 戻る: 視聴履歴、保存済み、アーカイブ検索

• 聞く: チャット相談、質問テンプレ、回答済み検索

• 続ける: 進捗、達成率、次回ウェビナー、リマインド

AIにはこう頼めます。

この画面では、学習開始、復習、質問の導線が混在しています。
ユーザー行動を「学ぶ」「戻る」「聞く」に分け、主導線を学習再開に設定してください。
チャット相談は右側の補助パネル、ウェビナーアーカイブは下部の復習エリアとして再配置してください。

5つ目は、状態です。

状態とは、ユーザーやコンテンツが今どうなっているかの表示です。

必要な状態表示は、たとえば次のようなものです。

• 未視聴

• 視聴中

• 完了

• あと何分

• 課題提出済み

• 添削待ち

• 回答済み

• 未回答

• アーカイブ公開中

• まもなく終了

• 次回開催

AIにはこう頼めます。

教材カードに視聴状態がなく、受講者が前回の続きへ戻れません。
各カードに「未視聴」「視聴中」「完了」の状態を追加し、視聴中カードには再開ボタンと残り時間を表示してください。
状態ごとの色は強くしすぎず、テキスト、アイコン、進捗バーを組み合わせて分かるようにしてください。

6つ目は、信頼です。

信頼は、派手なデザインでは作れません。
一貫性、説明、運営者の存在、更新感、サポート導線で作ります。

スクール/コミュニティサイトでは、ユーザーは常に少し不安です。

この不安に答えるUIが必要です。

• 最終更新日

• 講師コメント

• よくある質問

• 質問前テンプレート

• 回答目安

• 初心者向けラベル

• 推奨学習順

• 運営からのお知らせ

• 困った時の導線

AIにはこう頼めます。

この画面は教材量は多いですが、運営者の存在やサポート導線が見えず、初回ユーザーが不安になりやすいです。
「迷ったらここから」「質問してよい内容」「回答目安」を表示し、学習継続への安心感を補強してください。

7つ目は、継続です。

スクールUIの最終目的は、1回見てもらうことではありません。
学び続けてもらうことです。

継続を支えるUIには、次の要素があります。

• 前回の続きへ戻れる

• 短く達成できる教材がある

• 次の予定が分かる

• 質問が返ってくる感覚がある

• 自分の進捗が見える

• 成長が見える

• 復習しやすい

• 迷った時に戻る場所がある

「継続」は精神論ではありません。
UIで支えられます。

AIにはこう頼めます。

このコミュニティサイトは、初回ログイン後の継続導線が弱いです。
前回の続き、今週やること、次回ウェビナー、未回答の質問、達成済みタスクを1画面で確認できる構成にしてください。
受講者が「次に何をすればいいか」を3秒で判断できるダッシュボードへ改善してください。

この7つを見れば、UIレビューの入口は作れます。

入口、階層、余白、導線、状態、信頼、継続。

スクール/コミュニティサイトでは、この7語だけでもかなり戦えます。

AIにUIを頼む前に決めること

AIにUIを頼む前に決めるべきことは、画面の見た目ではありません。
ユーザー、目的、摩擦です。

多くの人は、最初にこう頼みます。

オンラインスクールの会員サイトを作って。
動画一覧、チャット、ウェビナーアーカイブを入れて。
おしゃれで見やすくして。

これでもAIは何かを作ります。

しかし、良いUIにはなりにくいです。

なぜなら、誰が、何のために、どこで迷っているかが入っていないからです。

スクール/コミュニティサイトを作るなら、最低限決めるべきことは5つです。

1つ目は、主ユーザーです。

初心者なのか、経験者なのか。毎日ログインする人なのか、週1回だけ見る人なのか。講師に質問したい人なのか、動画だけ見たい人なのか。

同じスクールでも、主ユーザーが変わればUIは変わります。

初心者向けなら、選択肢を減らす必要があります。経験者向けなら、検索性と一覧性が重要になります。忙しい社会人向けなら、前回の続きと短時間教材が必要になります。

講師との距離を重視するなら、チャット相談や回答状態を目立たせる必要があります。

2つ目は、主行動です。

その画面で一番してほしい行動は何か。

• 次の動画を見る

• ウェビナーを予約する

• アーカイブを探す

• 質問する

• 課題を提出する

• 添削結果を見る

• コミュニティ投稿を見る

全部を主行動にしてはいけません。

主行動は1つです。

主行動が複数ある場合は、ユーザー状態ごとに出し分ける必要があります。

3つ目は、失敗行動です。

ユーザーにしてほしくない行動は何か。

• どこから始めるか分からず離脱する

• 古い動画から見てしまう

• 回答済みの質問を何度も投稿する

• ウェビナーを見逃して復習できない

• チャットで質問してよいか分からない

• 上級者向け教材から始めて挫折する

• 進捗が分からず放置する

UIは、成功行動だけでなく失敗行動から逆算したほうが強くなります。

4つ目は、情報の優先順位です。

最初に見せるもの、次に見せるもの、必要な時だけ見せるものを分けます。

たとえば、ログイン直後の画面なら、優先順位はこうなります。

• 最優先: 前回の続き、今週やること

• 次点: 次回ウェビナー、未回答の質問

• 補助: アーカイブ検索、資料、過去のお知らせ

• 必要時: 設定、支払い、プロフィール

この順番を決めずに画面を作ると、全部が並びます。
全部が並ぶと、ユーザーは迷います。

5つ目は、成功状態です。

その画面が良くなった時、ユーザーはどうなっているか。

• 迷わず次の動画へ進める

• 見逃したウェビナーへ戻れる

• 質問する心理的ハードルが下がる

• 自分の進捗が分かる

• 次回ログインする理由が分かる

• 必要な教材を検索できる

• 未完了タスクを把握できる

ここまで決まると、AIへの依頼文は強くなります。

オンラインスクールの会員ダッシュボードを設計してください。
主ユーザーは、AI活用を学ぶ初心者の社会人です。
ログイン頻度は週1〜2回で、前回どこまで見たか忘れやすい前提です。

この画面の主行動は「前回の続きから学習を再開する」です。
失敗行動は、動画一覧、ウェビナーアーカイブ、チャット相談が同じ強さで並び、次に何をすればよいか分からず離脱することです。

最優先情報は、前回の続き、今週やること、未完了タスクです。
次点で、次回ウェビナー、未回答の質問、アーカイブ検索を配置してください。
成功状態は、ユーザーが3秒以内に次の行動を判断できることです。

見た目は、派手さよりも学習継続を支える落ち着いたUIにしてください。
余白、文字階層、状態表示、主ボタンの強弱で整理してください。

このプロンプトには、見た目の細かい指定は多くありません。

しかし、AIはかなり作りやすくなります。
なぜなら、UIの目的が入っているからです。

AIに渡すべきなのは、色や角丸だけではありません。
ユーザーの状況、目的、迷い、成功状態です。

上級者はUIを「画面」ではなく「学習行動」で見る

ここからは、より具体的に踏み込みます。

無料部分では、UIを見るための基礎語彙を整理しました。

有料部分では、スクール/コミュニティサイトを題材に、上級者がどこを見ているか、AIへどう依頼するかまで書きます。

結論から言うと、上級者はUIを「画面」として見ていません。
学習行動として見ています。

画面がきれいかどうか。
カードが整っているか。
フォントが今っぽいか。

もちろん、それも見ます。
しかし、それだけでは浅いです。

スクールUIで本当に見るべきなのは、次の問いです。

• 初回ユーザーは、最初の一歩を踏み出せるか

• 継続ユーザーは、前回の続きへ戻れるか

• 迷ったユーザーは、質問できるか

• 見逃したユーザーは、アーカイブへ戻れるか

• 忙しいユーザーは、短時間で達成感を得られるか

• 上級者は、必要な教材へすばやく到達できるか

• 運営者は、重要な行動を促せるか

• 講師は、質問の質を上げられるか

つまり、スクールUIは「学習行動の設計」です。

ここを外すと、画面はきれいでも成果が出ません。

動画がたくさんある。
アーカイブがたくさんある。
チャットがある。
資料もある。

でも、受講者が続かない。

この原因は、教材の質だけではありません。
UIが学習行動を支えていない可能性があります。

上級者は、UIを見る時に「どの行動が止まっているか」を探します。

たとえば、動画一覧画面を見ます。

初心者向け、実践編、応用編、補講、ウェビナー録画、講師対談、特典動画が横並びになっている。

カードはきれいです。

サムネイルも整っています。

でも、受講者は迷います。

ここで上級者は「動画カードのデザインが悪い」とは言いません。

こう見ます。

• 学習順が見えない

• 難易度が見えない

• 所要時間が見えない

• 完了状態が見えない

• 今見るべき理由が見えない

• 復習用と初回学習用が混ざっている

• 受講者の現在地に対する推薦がない

これが判断語彙です。

AIへの依頼はこうなります。