体験設計

• §02-01ウェルカムモーダル

  初回起動時に歓迎と導線を示すモーダル。

  初めて開いた利用者に目的と最初の一歩を伝え、空の画面で迷わせない。初回だけ出し、再訪時には邪魔にならないのが条件。

  オンボーディング
• §02-02プロダクトツアー

  画面の要素を順に照らしながら使い方を案内する。

  初回利用時に主要な機能の場所と役割を順番に案内する。説明を読まずに使い始める人にも、最初の操作を迷わせないために使う。

  オンボーディング
• §02-03チェックリスト / クエスト

  初期設定の残り項目を一覧にして進捗を示す。

  利用開始に必要な設定を順番に案内し、完了度を見せて次の行動を促す。登録直後の離脱を減らし、主要機能に早く到達させたいときに使う。

  オンボーディング
• §02-06空状態（イラスト付）

  一覧が 0 件のときに理由と次の操作を示す。

  データがまだ無い画面で、何も表示しない代わりに状況と最初の一歩を示す。初回利用の離脱を防ぎ、機能の使い方を自然に伝える。

  オンボーディング
• §02-05サンプルデータ / デモモード

  サンプルデータを入れて初期状態を触れるようにする。

  空の状態では価値が伝わらないツールで、実際の見え方を試せる。データ投入前に機能を評価したい利用者に効く。

  オンボーディング
• §02-04アカウント完成度ゲージ

  アカウント設定の完了率を円グラフで示す。

  登録直後の利用者に未設定の項目を示し、残りの作業を促す。プロフィールや初期設定を途中で止める人が多いときに効く。

  オンボーディング

参考: useronboard.com

• §15-01Skeleton loader

  読み込み中にコンテンツの形を灰色で示す。

  空白やスピナーより何がどこに現れるかが先に分かり、待ち時間が短く感じられる。一覧やカードなど形が決まった領域の読み込みに使う。

  パフォーマンス feedback
• §15-06Optimistic UI

  通信の完了を待たずに結果を先に表示する。

  操作の結果をすぐ画面に反映し、通信待ちを感じさせない。いいねや既読など、失敗が少なく取り消しも容易な操作で効果が大きい。

  パフォーマンス feedback
• §15-08Prefetch on hover

  リンクに触れた時点で次のページを先読みする。

  クリック後の表示を速く感じさせる。ページ間の移動が多い一覧や記事サイトで、読み込み待ちを縮めたいときに使う。

  パフォーマンス feedback
• §15-10Suspense fallback

  読み込み中の領域だけを代替表示に置き換える。

  ページ全体ではなく読み込み中の部分だけ代替表示にし、残りは先に使える。重い部品が一部だけあるページで、待ち時間の体感を短くする。

  パフォーマンス feedback
• §15-02Shimmer

  読み込み中の枠に光が横切るアニメーションを流す。

  読み込み中の枠に光を流し、止まっているのではなく処理中だと伝える。スケルトンと組み合わせ、待ち時間の体感を和らげる。

  パフォーマンス feedback
• §16-04FLIP animation

  要素の位置変化を滑らかな移動として見せる。

  並び替えや追加で要素が飛ぶ動きを追えるようにする。一覧やグリッドの変化で、どこへ移ったか分からなくなる問題に効く。

  モーション・体感

参考: web.dev/perf

• §16-01Scroll-driven animation

  スクロール量に連動してアニメーションを進める。

  読み進める速さに合わせて図や説明が変化し、手順や構造を段階的に伝えられる。製品紹介やストーリー形式の記事で使う。

  モーション・体感
• §16-03View Transitions API

  ページや状態の切り替えを滑らかなアニメで繋ぐ。

  一覧から詳細への移動で要素の連続性が伝わり、どこへ移ったかを追いやすい。カードや画像をクリックして開く流れに向く。

  モーション・体感
• §16-08Hover micro-interaction

  ボタンに触れたとき小さく弾む反応を返す。

  押せる要素だと伝え、操作に手応えを与える。ボタンとリンクの区別がつきにくいデザインで誤操作を減らす。

  モーション・体感
• §16-10Confetti

  完了時に紙吹雪を舞わせて祝う。

  登録完了や目標達成の瞬間に紙吹雪を散らし、達成感を演出する。利用者の節目を祝い、次の行動につなげたい場面で使う。

  モーション・体感
• §16-07Sticky header / shrink on scroll

  スクロールするとヘッダーが縮んで上部に留まる。

  ナビゲーションを常に手元に置きつつ、読み進めるときは本文の面積を確保できる。長い記事や商品ページで使う。

  モーション・体感

参考: awwwards.com

• §03-01AI サイドバー / コパイロット panel

  画面の脇に AI チャットを常駐させる。

  作業中の画面を離れずに AI へ質問や指示ができる。文書作成や調査のように、本文を見ながら補助を受けたい作業に向く。

  AI 統合
• §03-02インライン AI suggestion

  入力中の続きを薄い文字で提案し確定で挿入する。

  文章やコードの続きをその場で受け取り、入力の手間を減らせる。定型的な文面やよくある補完が多い入力欄で、流れを止めずに提案したいときに使う。

  AI 統合
• §03-03"Ask anything" 検索

  質問文をそのまま入力して答えを探せる。

  キーワードを組み立てなくても、知りたいことを文のまま聞ける。検索の語彙を知らない人や、答えを一つに絞りたい場面で効く。

  AI 統合
• §03-04要約ボタン

  長い文章を押すだけで短い要約に変える。

  長文を読む前に要点だけ掴みたい場面で使う。コメントが多いスレッドや長い記事で、読むかどうかの判断を助ける。

  AI 統合
• §03-16ストリーミング表示

  生成中の文章を届いた順に逐次表示する。

  AI の応答が完成するまで待たせず、途中から読み始められるようにする。応答に数秒以上かかる対話画面で待ちの不安を減らす。

  AI 統合
• §03-13Citation / 出典リンク

  回答の根拠となる出典へリンクする。

  生成された回答がどの情報に基づくかを確認でき、誤りを見分けやすくなる。正確性が問われる検索や要約の回答に添える。

  AI 統合