レスポンシブデザインは、狭い画面へページを縮小するだけの対応ではありません。情報の優先順を保ち、画面幅や入力方法が変わっても、読む・選ぶ・入力する操作を完了できるようにします。特定の端末名ごとに固定レイアウトを作る前に、実際の内容が崩れる場所を確認してください。
本文と操作から切り替え点を決める
商品名、見出し、価格、画像、ナビゲーションを実データで並べ、横幅を連続的に変えます。二列では文章が読みにくくなるところで一列へ変えるなど、内容を根拠に切り替えます。タブレット・PCの代表幅だけで終えず、その間の幅も確認します。
- 主要情報と行動を、画面が狭くても残す。
- 読ませる順序と、キーボードが移動する順序を確認する。
- 長い文字、URL、翻訳等で要素が押し広げられないか試す。
- 機能を隠す場合は、代わりの操作方法を用意する。
レイアウト・画像・表を実装する
メディアクエリの公式教材を参考に、必要な条件でスタイルを切り替えます。CSS GridやFlexboxなどを使い、固定幅だけに依存しない構成を検討します。フレームワークを導入すれば全問題が解決するわけではなく、既存環境と保守性で選びます。
| 部品 | 実装の点検 |
|---|---|
| 画像 | 領域に合うサイズ・比率、表示前の領域確保 |
| ナビゲーション | 開閉、現在位置、フォーカス、閉じた後の移動 |
| 表 | 比較する意味を保ち、必要なら表の領域内でスクロール |
| フォーム | ラベル、入力支援、エラー、ソフトウェアキーボード |
| 固定ボタン | 本文や入力欄、別の操作を覆わない |
横にはみ出す要素を見つけたら、ページ全体の横スクロールを隠すだけで済ませないようにします。内容やボタンが画面外へ消えていないかを調べ、部品の幅や折り返しを修正してください。
画面・拡大・入力方法の試験表
| 条件 | 確認する用事 |
|---|---|
| 狭い縦画面 | 本文を読み、メニューから目的ページへ移動 |
| 横画面・中間幅 | 見出しとボタンが欠けずに表示される |
| 文字拡大 | 内容と機能を失わず読み進める |
| キーボード | 移動順とフォーカスが分かり操作できる |
| タッチ | 隣の操作を誤って押さず選べる |
| 実際の端末 | フォーム、画像選択、決済等を一連で試す |
W3Cのリフロー解説では、拡大した際にも情報や機能を失わず利用できることが説明されています。二次元の配置が必要な表や図には例外もあるため、単に全部を一列にすればよいと考えず、意味と操作を確認します。
公開後の原稿更新も試す
新しい画像、長い見出し、記事や商品の追加を想定した更新で確認します。表示の試験結果は、ページURL、端末・ブラウザ、画面幅、操作、問題箇所で記録すると再現しやすくなります。レスポンシブ化した事実だけで検索順位や売上の向上を保証しないでください。
表現の選択はWebデザインの判断基準、性能は表示・操作の速度改善をご覧ください。表示の点検はお問い合わせからご相談いただけます。
コメント