コンテンツにスキップ
Webアプリの画面の分け方と遷移の設計ガイド
検索
Ctrl
K
キャンセル
テーマの選択
ダーク
ライト
自動
第1部:このガイドについて
はじめに
画面が増える背景
第2部:設計の考え方
画面とは何か
画面名は「何を見ているか」で名付ける
見たいものを先に見せる
登録はその場で行う
編集はその場で行う
確認画面は最低限にする
モードレスを優先する
状態と操作を分離する
ステップではなく不足条件で示す
原則の運用
第3部:よくある問題
編集に確認画面を挟む
登録と申請が一体になっている
同じ操作に入口が複数ある
入力順序をStepで固定する
中身より先に手段を選ばせる
複製後に登録フローを経由する
保存ボタンが複数ある
検索条件と結果を別画面にする
独立した状態を1軸に統合する
申込とアカウント作成を同時に行う
第4部:改善の進め方
ありがちな状態
どこから始めるか
適用レベルガイド
改善パターン
提案の仕方
付録
早見表
コラム: ルート設計の見直し
コラム: 実装パターン集
コラム: テストの観点
コラム: シンプルにできない領域
コラム: 説得テンプレート
関連するガイド・文献
用語集
テーマの選択
ダーク
ライト
自動
Webアプリの画面の分け方と遷移の設計ガイド
はじめに
へ移動します。