レスポンシブの考え方｜画面幅で変わる見せ方
横並びの料金表をスマートフォンで開くと、文字が小さくなり条件の差が分からないことがある。レスポンシブは単なる縮小ではなく…
text: HYPE編集部
Webデザイナーの記事一覧へ横並びの料金表をスマートフォンで開くと、文字が小さくなり条件の差が分からないことがある。レスポンシブは単なる縮小ではなく、読む順番と操作方法の再設計だ。画面が狭くなったときに何を優先するかから、実装と検収までを考える。
端末ではなく情報の優先順位
横幅が減ったときに何を先に読むべきかを設計する。単純に左右のカラムを縦に並べるだけでは申込ボタンが遠くなることがある。
スマートフォンではすべてを小さくするのではなく、最初に見せる情報を選び直す。法人向けのサービスページなら、価値提案と問い合わせへの動線を先に見せ、補足説明を後へ回す。一方で料金条件や重要な注意事項を折りたたみの奥に隠すのは避ける。要素を消す前に、訪問者がその画面で決めたいことを整理する。
固定幅の破綻を見つける
長い社名、価格表、画像に文字を埋め込んだバナーは狭い画面で崩れやすい。表示幅だけでなく文字の拡大時も試す。
PCで横に並んだ商品比較が、狭い画面では読めない表になる。項目名が欠けていないか、横スクロールの存在に気付けるか、長い英単語やURLが枠からはみ出さないかを確認する。表示幅だけでなく文字拡大時もチェックしたい。画面の端で固定ボタンが説明文を覆う不具合は、レイアウト図だけでは見逃しやすい。
体系立てて学びたい場合は、Webスキルを学ぶオンラインスクール デイトラのようなオンラインスクールも選択肢になります。
ブレークポイントの決め方
特定の機種名を基準にするより、コンテンツが読みにくくなる幅で切り替える。見出しやカードの折り返しを観察して判断する。
ブレークポイントを機種の名称だけで決めず、コンテンツが崩れ始める幅を観察する。カードが読めなくなる地点、ナビゲーションが重なる地点、表が判読しにくくなる地点は一致しないこともある。デザインカンプの幅の中間で確認し、急な余白の変化を抑える。実装者には変化する要素と維持したい優先順位を伝える。
ブレークポイントは機種名から機械的に決めるのではなく、レイアウトが崩れる幅を観察して置くのが基本です。MDN「Responsive web design」ではメディアクエリーやブレークポイントが解説されているため、その考え方を設計メモにも残します。
操作のしやすさを確かめる
ホバーしなければ説明が見えない設計はタッチ環境で問題を生みやすい。ボタン、フォーム、ナビゲーションを実機操作する。
指で押すボタンは、マウスで操作しやすい大きさと同じではない。リンク同士が近すぎないか、フォームの入力中にキーボードが主要ボタンを隠さないかを実機で見る。hover時だけ現れる説明はタッチ操作では届かない場合がある。エラー文を入力欄の近くに置き、離脱する前に修正方法を理解できるようにする。
作画の道具としては、イラスト・マンガ制作ソフト CLIP STUDIO PAINTも定番です。
幅を変えて崩れがないかを見るだけでは、実際の操作性までは分かりません。W3C「WCAG 2.2 Quick Reference」を手がかりに、タップやキーボード操作を含む利用場面で、目的の情報へ無理なく進めるかを確認します。
画像のトリミングと順番
PCで映える横長写真がスマホで被写体を失わないかを見る。装飾画像より実績・料金・問い合わせを優先する場面もある。
横長の写真をスマホへ単純に切り抜くと、人物の顔や商品の特徴が画面外へ出てしまう。重要な被写体の位置を踏まえてトリミング箇所を指定し、文字入り画像は縮小表示で読めるか確かめる。PCでは説明と写真の並びが自然でも、縦積みでは写真が説明より先に来る方が理解しやすいこともある。表示順も設計対象だ。
検収基準を具体化する
納品時は幅の異なる表示例と、フォーム送信・メニュー開閉などの動作を提示する。修正範囲を決めておくことが追加工数の予防になる。
検収時に「スマホ対応済み」だけでは確認範囲が曖昧になる。主要なページ、フォーム、メニュー、画像、表、文字拡大時の挙動を列挙し、どの幅で試験したか記録する。ブラウザ固有の差は再現手順を添えて共有したい。修正が必要な点と将来の改善提案を混ぜず、契約した実装範囲を明確にして引き渡す。
学んだことを仕事につなげる入口として、スキルマーケット ココナラで小さな案件から始める方法もあります。
検収では「スマホでも見られる」という曖昧な表現を避け、確認する画面幅、操作、表示条件を先に決めます。デジタル庁「ウェブアクセシビリティ導入ガイドブック」も参考に、誰がどの状態を確認したのかを記録へ残します。
表示確認に使うテストケース
申込ページでは、メニューを開く、プランを読む、注意事項を確認する、入力欄へ進む、送信前に戻るという一連の操作を試す。幅だけを変えて眺めるテストでは、キーボードが出たときの表示崩れを見逃す。画像が遅く読み込まれた場合にボタンが動くこともあるため、実際の通信環境に近い条件で操作したい。横向き表示や文字拡大も対象にする。
画面設計を発注者に見せる際は、PCとスマートフォンのデザインを単独で承認するだけでなく、その間の画面幅で何が変わるか説明する。実装確認の結果には端末、ブラウザ、再現手順、対象URLを書き、好みの修正と操作不能の不具合を区別して共有する。
優先順位が崩れる画面を探す
長い商品名が並ぶ比較カードは、画面幅が狭いとボタンの位置がずれる。項目を無理に省く前に、一枚のカードの中で製品名、条件、行動をどう読むかを決める。カードの長さが異なっても主要な行動が探しやすい配置にしたい。
お問い合わせフォームでは、入力欄のラベルをプレースホルダーだけに頼らない。入力後に項目名が消えると、見直しの際に何の欄だったか分からなくなる。エラーの表示位置も画面幅によって離れないよう検証する。
見出しの途中で不自然に折り返されると意味が読み取りにくい。文字を画像化して対処する前に、文章量や文字幅、改行の指定を見直す。サイト運用で見出しが差し替わる場合にも対応できることが望ましい。
検収画面はきれいなデモデータだけで確認しない。住所が長い場合、電話番号が未入力の場合、商品画像がない場合なども試す。欠けた情報があるときの表示まで合意すると、運用開始後の混乱を減らしやすい。
制作契約には、見た目の調整が含まれる画面と、機能確認が必要な画面を分けて記載したい。たとえばトップページの配置だけでなく、問い合わせ完了までの操作も対応対象なのか明確にする。デザインデータの承認と本番環境での動作確認を同じ工程にしないことで、実装後に判明した問題の扱いを整理しやすくなる。
仕事と売上につなげるための判断
レスポンシブ対応を営業資料へ書くなら、何種類の端末に対応するかだけでなく、主要導線やフォームをどう検証するか示す。発注者は実装の専門用語より、スマートフォンから問い合わせを完了できるかに関心がある。改修の効果を主張するときは実測との区別を付けたい。
出典
CTA
仕事の取り方や単価の決め方で迷ったら、HYPEへご相談ください。→ お問い合わせはこちら
※本記事にはプロモーションを含みます。
合わせて読みたい
つくる人の仕事のヒントを、週1で
新しい記事と、学び・案件のヒントをメールでお届けします。
RECOMMEND
注目のコンテンツ
