本文へスキップ

実用サンプル: アプリ画面

ダッシュボード・受信箱・カンバン・チェックアウト。画面まるごとの見本。

画面まるごとの見本を集めたアプリ画面のカテゴリ。ダッシュボード、設定、受信箱の2ペイン、カンバン、週カレンダー、チャットのワークスペース、音楽プレイヤー、ファイルブラウザ、チェックアウト、検索結果、プロフィール、モバイルアプリのシェル、タスク管理、ノートエディタの14画面がある。原則はヤコブの法則。受信箱は左に一覧・右に本文、設定は左ナビ、カンバンは列、という構成は利用者が他のアプリで既に学んでいるので、そこから外れるほど学習コストがそのまま離脱になる。新しい業務画面を設計するとき、部品を並べる前に「見慣れた画面の骨格」を確かめるために引く。

関わる原則: ヤコブの法則14件

使い分け数字を見せる画面は analytics-dashboard-screen、項目を処理する画面は inbox-two-pane / task-manager-screen、状態を動かす画面は kanban-board-screen、入力を集める画面は settings-screen / checkout-screen。モバイルは mobile-app-frame を器にして中身を差し替える。

まず見る3件

  • クリック

    ダッシュボード画面実例あり

    Analytics Dashboard

    KPI 4枚＋折れ線グラフ＋上位テーブルの定番構成。右上の期間セグメント（7日/30日/90日）を切り替えると数字・グラフ・表が同時に更新される。

    • 主役は KPI の数字。ラベルは小さく灰色に、増減は色だけで示して数字の視線を奪わない
    • 期間の切替は画面の右上に 1 つだけ。グラフごとに期間を持たせると比較できなくなる
    • 折れ線は塗りを薄く敷いて面で読ませ、グリッド線は 3 本に留める。装飾より読みやすさ
    • JS
    コードを見る →
  • クリック

    受信箱の2ペイン実例あり

    Split-Pane Inbox

    左に一覧（未読は太字・スター付き）、右に選択中のプレビュー。行を選ぶと既読になり、アーカイブすると行が消えて次のメールへ進む。狭い画面では一覧→詳細へスライドする。

    • 未読は太さで、重要はスターで、選択中は背景で示す。3 つの状態に 3 つの別の手段を当てる
    • アーカイブ後は自動で次の 1 通を開く。受信箱の目的は「読み終えて空にする」ことだから
    • 行の高さは 3 行（差出人・件名・抜粋）で固定し、抜粋は 1 行で省略する。一覧の走査速度が命
    • JS
    コードを見る →
  • 入力

    設定画面

    Settings Page

    左ナビ（プロフィール/通知/課金/セキュリティ）で各セクションへ移動する設定画面。どこかを変更した瞬間に下から保存バーが現れ、保存か破棄を選ぶまで消えない。

    • 保存ボタンは常設せず、変更が生じたときだけ下から現れる。「未保存」を見落とさせない
    • 各項目の脇に「何が起きるか」の一行を添える（例: 請求先の変更は次回請求から反映）
    • 危険な操作（退会）は末尾に離して置き、色も赤の文字リンクに格下げして誤操作を防ぐ
    • JS
    コードを見る →

使い分け表

パーツ操作技術向く場面状態
ダッシュボード画面
Analytics Dashboard
クリックJS売上・注文などの KPI を要約する管理画面・期間を切り替えて比較させたい集計default / hover / focus / active
設定画面
Settings Page
入力JSプロフィール・通知・課金を 1 画面に集める設定・変更を保存／破棄で確定させたいフォームdefault / hover / focus / active / success
受信箱の2ペイン
Split-Pane Inbox
クリックJSメール・通知など読んで処理する受信箱・一覧と本文を同時に見せたい PC 幅default / hover / focus / active / disabled / empty
カンバンの画面まるごと
Kanban Board (Full Screen)
ドラッグJSステータス列で流れを見るプロジェクト管理・WIP 上限で着手数を抑えたいチームdefault / focus / active
週カレンダー
Week Calendar
クリックJS8〜20 時の予定を週で俯瞰する業務カレンダー・空き枠から仮予定を置かせる予約・調整default / hover / focus
チャットのワークスペース
Chat Workspace
入力JSチャンネル型のチームチャット・未読を数と太字で追わせたい会話一覧default / hover / focus / active
音楽プレイヤー
Music Player
ドラッグJS再生位置と次に流れる曲を同時に見せるプレイヤー・ジャケットの色で曲ごとに雰囲気を変えたい画面default / hover / focus / active
ファイルブラウザ
File Browser
クリックJSフォルダ階層を辿るストレージ・資料庫・複数選択して一括操作させたい一覧default / hover / focus / active
チェックアウト画面
Checkout Flow
クリックJSEC の配送→支払い→確認の 3 段購入手続き・入力中も合計を見せたいチェックアウトdefault / hover / focus / active / disabled / error / success
検索結果ページ
Search Results Page
クリックJSEC・カタログの検索結果と絞り込み・ファセットの件数を先に見せて空振りを防ぐ画面default / hover / focus / empty
プロフィール画面
Profile Page
クリックJSSNS・コミュニティのユーザーページ・投稿／いいね／概要をタブで切り替える画面default / hover / focus / active
モバイルアプリのシェル
Mobile App Shell
スクロールJSスマホアプリの画面設計を PC で実寸確認する見本・大見出し→小見出しへ縮むヘッダーを持つ一覧default / focus / active
タスク管理画面
Task Manager (Today / Upcoming / Someday)
クリックJS今日／予定／いつかで分ける個人のタスク管理・完了に猶予と達成感を持たせたいチェックdefault / hover / focus / active / empty
ノートエディタ
Block Editor
入力JSブロック単位で書くノート・ドキュメント・「/」でブロック種別を呼ぶ編集体験default / hover / focus / active

すべての見本（14件）

  • クリック

    ダッシュボード画面実例あり

    Analytics Dashboard

    KPI 4枚＋折れ線グラフ＋上位テーブルの定番構成。右上の期間セグメント（7日/30日/90日）を切り替えると数字・グラフ・表が同時に更新される。

    • JS
    コードを見る →
  • 入力

    設定画面

    Settings Page

    左ナビ（プロフィール/通知/課金/セキュリティ）で各セクションへ移動する設定画面。どこかを変更した瞬間に下から保存バーが現れ、保存か破棄を選ぶまで消えない。

    • JS
    コードを見る →
  • クリック

    受信箱の2ペイン実例あり

    Split-Pane Inbox

    左に一覧（未読は太字・スター付き）、右に選択中のプレビュー。行を選ぶと既読になり、アーカイブすると行が消えて次のメールへ進む。狭い画面では一覧→詳細へスライドする。

    • JS
    コードを見る →
  • ドラッグ

    カンバンの画面まるごと実例あり

    Kanban Board (Full Screen)

    ボード名・フィルタ・メンバーのヘッダーと、WIP 上限付きの4列（バックログ/着手中/レビュー/完了）。カードはドラッグで列間を移動でき、上限を超えた列は赤く警告する。

    • JS
    コードを見る →
  • クリック

    週カレンダー

    Week Calendar

    8〜19 時の時間帯グリッドに色分けした予定ブロックを置く週表示。現在時刻の赤線が引かれ、空いている枠をクリックすると 1 時間の仮予定が置かれる（もう一度クリックで取り消し）。

    • JS
    コードを見る →
  • 入力

    チャットのワークスペース実例あり

    Chat Workspace

    左にチャンネル一覧（未読バッジ）、中央にスレッド、下に入力欄の3段構成。送信すると吹き出しが追加され、少し遅れて相手からの返事が届く。チャンネルを切り替えると未読が消える。

    • JS
    コードを見る →
  • ドラッグ

    音楽プレイヤー実例あり

    Music Player

    ジャケット（グラデーション）・曲名・シークバー・再生／停止・キュー一覧のプレイヤー画面。シークバーはドラッグで移動でき、再生中は波形バーが揺れて曲が進む。

    • JS
    コードを見る →
  • クリック

    ファイルブラウザ実例あり

    File Browser

    パンくず・グリッド／リスト切替・クリックだけの複数選択を備えたファイル画面。フォルダを開くと階層が進み、選ぶと下部に「N 件を選択」の操作バーが現れる。

    • JS
    コードを見る →
  • クリック

    チェックアウト画面実例あり

    Checkout Flow

    配送→支払い→確認の3ステップ。左に住所フォーム／支払い方法の選択カード、右に固定の注文サマリ。狭い画面ではサマリが上部の折りたたみになる。CTA の脇に安心の一言。

    • JS
    コードを見る →
  • クリック

    検索結果ページ

    Search Results Page

    上に検索語と件数、左にファセット（カテゴリ／価格帯／在庫）、右に結果カードと並び替え。チェックを入れるたびに件数と一覧が更新され、0件なら条件を外す提案を出す。

    • JS
    コードを見る →
  • クリック

    プロフィール画面実例あり

    Profile Page

    カバー（グラデーション）に重なるイニシャルのアバター、名前と肩書き、統計3つ、フォローボタン。タブ（投稿／いいね／概要）でその下の内容が切り替わる。

    • JS
    コードを見る →
  • スクロール

    モバイルアプリのシェル実例あり

    Mobile App Shell

    ステータスバー・大見出しヘッダー・スクロール領域・タブバーのアプリ骨格。上へスクロールすると大見出しが縮んで中央の小さなタイトルになり、PC では中央に端末枠で表示される。

    • JS
    コードを見る →
  • クリック

    タスク管理画面実例あり

    Task Manager (Today / Upcoming / Someday)

    「今日／予定／いつか」の3リストを持つタスク画面。丸をチェックすると取り消し線が引かれ、少し置いてから完了へ移る。下の入力欄で今日のタスクを追加できる（Things 型）。

    • JS
    コードを見る →
  • 入力

    ノートエディタ実例あり

    Block Editor

    左にノート一覧、右に contenteditable のブロック本文。空のブロックで「/」を打つとブロックメニュー（見出し／箇条書き／区切り／本文）が出て、Enter で次のブロックへ進む。

    • JS
    コードを見る →