レスポンシブデザイン

解説

レスポンシブデザインは、パソコン、タブレット、スマートフォンのどれに対しても同じURLで同じHTMLを配信し、画面の大きさに合わせて表示だけを切り替える手法です。Googleは、実装と保守が最も容易な構成として、レスポンシブウェブデザインを推奨しています。

サポートサイトは、外出先や操作に困った場面で、スマートフォンから開かれることもあります。さらに、URLが1つで済むため、記事を案内するときに端末ごとにリンクを出し分ける手間もかかりません。

実務での使われ方

スマートフォンでの表示は、実機で確認します。PCのブラウザの幅を縮めるだけの確認では、実機での文字の大きさやタップのしやすさまでは分かりません。主要な記事は、実際の端末で一度開いて、次の点を確認します。

• 手順のスクリーンショットが縮小されて読めなくなっていないか
• 横長の表が画面からはみ出していないか
• 問い合わせボタンが押しやすい大きさか

また、NN/gは、社内の高速な回線だけで試さず、電波の弱い場所など実際の利用環境でも表示を確かめるよう勧めています。

注意点

レスポンシブデザインは、モバイル専用サイトを別のURLで作る方式とは異なります。「モバイル対応」は、スマートフォンで使える状態にすること全般を指す言い方であり、別URLの専用サイトやアプリの提供も含みます。一方で、レスポンシブデザインは、同じURLと同じHTMLのまま表示だけを切り替える点が特徴です。

専用サイトを分ける方式は、端末ごとに作り込める反面、記事の更新を二重に行う必要があります。FAQのように本数が増え続けるコンテンツでは、二重管理が更新漏れの原因になりやすくなります。