#353
UI設計パターン
#353スマホでのI型パターン
スマホでのI型パターン
別名・表記:Smartphone I Pattern
UIXHERO Definition
スマートフォンなどの縦長画面において、ユーザーの視線が上から下へと垂直（Iの字）に移動するパターンのこと。
概要
F型やZ型はデスクトップ（横長画面）での視線移動だが、モバイルでは横幅が狭いため、視線は左右に振れず、ひたすら下へスクロールする。
UXでの活用
- シングルカラム: 情報を横に並べるのではなく、縦一列に配置する。
- 重要な要素: 画面の中央（指が届きやすく、視線も集中する）に配置する。
- ヘッダー/フッター: 視線の始点（上）と終点（下）にナビゲーションを置く。
💡 使いどころ
モバイル向けのフィードUIや記事ページを設計する際。ユーザーは上から下へ素早くスクロールするため、視線の動きに合わせた配置が必要。
⚠️ 注意点・誤用
重要な要素を画面の端（視線が届きにくいエリア）に置かないこと。また、スクロールの勢いを止めないよう、コンテンツの途切れ目に注意する。
具体例
- InstagramやTikTokのフィード（縦スクロールのみに特化）
- モバイル版Amazonの商品一覧（1カラム表示）
出典・参考文献:
- Nielsen Norman Group: Mobile Content Strategy / Scrolling and Attention
- Luke Wroblewski: Mobile First
- Google Material Design: Layout / Responsive design
- Apple Human Interface Guidelines: iOS Layout & Scrolling