企業サイトを制作する際、レスポンシブページで最も問題が起きやすいのは、技術的に実現できるかどうかではなく、コンテンツの配置がしっかり考えられているかどうかです。多くのページはデスクトップでは完全に見えても、スマートフォンでは長いモジュールの積み重ねになり、訪問者は連絡先を見つけるまでに長くスクロールしなければなりません。これを避けるには、ページを設計する際にまずブレークポイントを決め、次にモジュールの順序を並べ、最後に実際のデバイスで画面ごとに確認するべきです。
まずブレークポイントを決め、スマートフォン版を先に描かない
ブレークポイントとは、ページレイアウトが変化する画面幅のことです。企業サイトでは一般的に、スマートフォン、タブレット、デスクトップの3種類のデバイスを基準にいくつかの主要なブレークポイントを設定し、実際のコンテンツに応じて中間に1～2の移行点を追加します。ブレークポイントの数は多ければ良いというものではなく、1つ増えるごとにその後のメンテナンスと確認のコストが増加します。
ブレークポイントを決める際は、まずアクセスデータを確認することをお勧めします。管理画面で訪問者のデバイス分布が確認できる場合は、最も割合の高いデバイスの閲覧体験を優先的に確保します。データがまだない場合は、スマートフォン優先、デスクトップ次点の順で進めると良いでしょう。ブレークポイントが決まったら、設計仕様書や開発ドキュメントに記載し、ページごとに異なる基準が使われないようにします。
デスクトップ版の視覚的な順序ではなく、コンテンツの優先度でモジュールを並べる
デスクトップ版のページは通常、左右のカラムや複数列の並びですが、スマートフォンでは縦並びにしかなりません。このとき本当に決めるべきは、どのコンテンツを先に表示するかです。実用的な判断方法は、ページ上のモジュールをリストアップし、訪問者がこのページを開いて最初に見たいものは何かを自問することです。
企業サイトでよくあるページタイプを例にすると、次のように配置できます。
- トップページ：ブランドや事業の一文説明、主要な製品・サービスへの入口、連絡先や問い合わせ入口を前方に配置。企業紹介やニュースなどは後方に回してよい。
- 製品・サービスページ：製品名と重要情報、適用シーンや仕様説明、問い合わせ入口。詳細なパラメータ表は後方に置き、必要に応じて展開可能な形式にする。
- 事例ページ：事例の業界やタイプ、顧客が抱えていた課題、解決策の要点を先に、画像や詳細は後に。
- 会社概要ページ：企業の位置づけ、主な事業、チームや資格情報、連絡先は見つけやすい位置に。
これらの順序は固定テンプレートではありませんが、判断基準は一貫しています。スマートフォンの最初の画面で、訪問者がこのページの目的と次にできることを理解できるようにするべきです。
画像、表、長文など問題が起きやすいコンテンツの扱い
レスポンシブページの問題は、しばしば3種類のコンテンツに集中します。
画像について、同じ画像でもスマートフォンとデスクトップでは表示サイズが大きく異なります。設計時には、狭い画面で画像の重要な部分が切れないか、特に文字入りのバナー画像に注意します。画像自体に重要な文字が含まれている場合は、文字を画像に埋め込むのではなく、ページ上の実際のテキストにすることをお勧めします。
表について、幅の広い表はスマートフォンでは完全に表示するのが難しいです。事前に、表を横スクロールさせるか、列を上下に並ぶ項目に分割するかを決めます。列数が多い場合は、項目に分割する方が読みやすくなることが多いです。この決定はページ実装前に開発と確認し、公開後に変更しないようにします。
長文について、デスクトップでは1行に多くの文字が入りますが、スマートフォンでは1行の文字数が少なく、段落が長くなります。設計時には1段落の長さを抑え、大きな説明をいくつかの小さな段落に分割し、必要に応じて小見出しで区切ることで、スマートフォンでの読書負担を軽減できます。
ナビゲーションと操作入口の狭い画面での配置
デスクトップの横型ナビゲーションは、スマートフォンでは通常メニューボタンに収まります。ここで確認すべきは、メニューを展開したときにカテゴリの階層が明確で、訪問者が上位に戻らずに目的のページを見つけられるかどうかです。階層が深い場合は、スマートフォンメニューで階層を減らし、よく使う入口を前に出すことを検討します。
操作入口には、問い合わせボタン、電話、フォーム送信などが含まれます。これらの入口はスマートフォンでクリック可能な状態を保ち、他の要素に隠れないようにします。ボタンのクリック領域は十分なスペースを確保し、隣接するボタンが近すぎて誤タップを招かないようにします。
公開前に実機で画面ごとに確認する
ページが完成したら、次の順序で確認することをお勧めします。
- スマートフォン、タブレット、デスクトップでそれぞれページを開き、最初から最後までスクロールし、各画面に表示される内容を記録します。
- 最初の画面でページのテーマが説明されているか、操作可能な入口があるかを確認します。
- 画像の重要な情報が切れていないか、表が正常に閲覧できるかを確認します。
- ナビゲーションメニューを展開したときに完全か、カテゴリ名がページ内容と一致しているかを確認します。
- 問い合わせ、電話、フォームなどの入口が狭い画面で利用可能かを確認します。
- 見つけた問題をページごとに記録し、修正後に同じデバイスで再度確認します。
サイトに複数のページテンプレートがある場合、例えばトップページ、カテゴリページ、詳細ページなど、各テンプレートにつき少なくとも1つの代表ページを確認することをお勧めします。トップページだけを確認するのでは不十分です。
レスポンシブ設計を日常のメンテナンス習慣に組み込む
レスポンシブページは公開時に固定されるものではありません。その後コンテンツを更新する際、新しく追加する画像、表、テキストも上記の基準で確認する必要があります。手間を省く方法として、コンテンツ公開フローに1ステップ追加します。新しいモジュールはまずスマートフォン幅で確認し、はみ出し、隠れ、順序の乱れがないことを確認してから正式に公開します。これにより、ほとんどの問題を公開前に防ぎ、後からの手戻りを減らせます。
