ITワクワク塾
UIパターン
読み込み、結果の通知、補助画面、入力候補、指での操作。アプリでよく使うUIパターンを、1つずつ図と公式の実例で紹介します。最初の6記事では、表示する条件と操作後の変化が分かる構成です。
ほか7件の記事読む順
読み込みと更新
データを待つ間の表示と、利用者が最新の内容を取り直す操作です。
UIパターン
Pull to Refreshとは？一覧を引いて更新するUIパターン
Pull to Refreshは一覧の先頭を下へ引いて最新のデータを取得する操作です。更新中と失敗時の表示、画面上の更新手段まで説明します。
UIパターン
Skeleton Screenとは？読み込み中に画面の形を見せる方法
Skeleton Screenは内容を待つ間に見出しやカードの配置を示す表示です。実際の内容への切り替えと失敗時の扱いを、画面例で説明します。
結果を伝える
操作が終わったことを短く知らせる表示です。
UIパターン
Toastとは？操作の結果を短く知らせるUIパターン
Toastは保存などの結果を短時間知らせる表示です。消える条件、取り消し操作、読み上げと画面内の状態を整理します。
補助画面と入力
主画面の上に開く領域と、入力中に示す候補です。
UIパターン
Bottom Sheetとは？画面の下から補助操作を開く方法
Bottom Sheetは元の画面と関係する情報や操作を下端から開く領域です。開閉、内容の長さ、閉じた後の状態を画面例で考えます。
UIパターン
Autocompleteとは？入力中に候補を示すUIパターン
Autocompleteは入力した文字に合わせて候補を示す仕組みです。候補からの選択と自由入力、キーボード操作を画面例で説明します。
項目を操作する
一覧の一件を指で動かして使う操作です。
UIパターン
Swipe Actionとは？一覧の一件を横へ動かして操作する方法
Swipe Actionは一覧の一件を横へ動かして、その項目への操作を見せる形です。方向、削除の確認、代替操作を説明します。
サイトを見分ける
タブなどに表示する小さなアイコンで、サイトを見分けるための工夫です。
UIパターン
Favicon（ファビコン）とは？サイトを見分ける小さなアイコン
ファビコンは、ブラウザーのタブなどでサイトを見分ける小さなアイコンです。画面例と公式の実例から、小さな表示での役割やロゴとの関係を解説します。