レスポンシブ

レスポンシブは、どうやって画面サイズに合わせて変わるの？

レスポンシブのホームページは、「画面の幅がこれより狭ければこう配置する」というルールをあらかじめ決めておき、お客様の画面幅に合うルールを選んで表示します。このルールが切り替わる幅を「ブレークポイント」と呼びます。

たとえばパソコンでは写真3枚が横1列に並び、スマホでは1枚ずつ縦に積み重なります。写真や文章のボックスは固定サイズではなく、画面の比率に合わせて伸び縮みするように作ります。

ホームページのコードのいちばん上には、「この画面を端末の幅に合わせて表示して」という1行（ビューポートの設定）が入っています。この1行が抜けていると、スマホでパソコンの画面が小さく縮んだまま表示されます。

ブレークポイントは、特定の機種名ではなく画面の幅を基準に決めます。そのため、新しいスマホが出るたびに個別に合わせる必要はなく、初めて見るサイズの画面でも、いちばん近いルールに従って自然に配置されます。

レスポンシブ、アダプティブ、スマホ専用サイトの違いは？

レスポンシブは1つのホームページがすべての画面に合わせて変わる方式で、アダプティブとスマホ専用サイトは画面ごとに別々に作ったバージョンを表示する方式です。Googleは、作りやすく管理しやすいという理由でレスポンシブを推奨しています。

Googleは、スマホ向けの内容を基準にサイトを読み取り、順位を付けます。別に作ったスマホサイトの内容が少ないと、パソコンの画面にしかない内容は検索で不利になることがあります。

すでにm.〇〇.krのようなスマホ専用サイトを使っているなら、作り直すときにレスポンシブに統合し、以前のm.のアドレスは新しいアドレスへ自動転送しておいてください。そうすれば、以前広まったリンクから来たお客様も迷いません。

スマホの画面では何を変えるべき？

スマホでは画面を縮めるのではなく、親指1本で使いやすいように配置し直す必要があります。お客様は立ったまま片手で、短い時間で電話番号・場所・価格を探すと考えて設計します。

たとえば美容室の料金表は、パソコンでは横長の表で見せても、スマホでは施術ごとのカードに分けないと、横にスクロールせずに見られません。工房のクラス日程も、スマホではカレンダーより日付のリストのほうが見やすくなります。

スマホの画面では、表示する順番も決め直す必要があります。パソコンでは横に並んでいた「お店の紹介」と「予約ボタン」がスマホでは縦に積み重なるので、お客様が最初に探す情報が上に来るように順番を組みます。

カフェや飲食店なら、営業時間、今日が定休日かどうか、道案内のボタンがスマホの最初の画面の近くにあるべきです。お店の近くでスマホを取り出したお客様は、この3つを真っ先に探すからです。

• 本文の文字は、拡大しなくても読める大きさに
• ボタンやリンクは指で押すのに十分な大きさと間隔で（ふつう縦横48ピクセル前後が推奨されます）
• 電話番号はタップですぐ発信、住所はタップで地図アプリが開くように
• 最初の画面を大きなポップアップでふさがない
• 写真の中に文字を入れず、文字は文字で（スマホでは小さくなって読めません）
• 写真はスマホ画面に合うサイズに縮小して、速く表示されるように

今のホームページをレスポンシブに変えられる？

変えることはできますが、古いホームページは直すより作り直したほうがよいケースが多いです。パソコンの画面幅に合わせて枠のサイズを固定して作ったホームページは、配置の骨組みから組み直す必要があり、手直しの範囲がほぼ作り直しと同じになるからです。

まずは自分のホームページがどんな状態か確認してみてください。スマホで開いたときに文字がとても小さく縮んでいて、指で拡大しないと見えないなら、レスポンシブではない可能性が高いです。一部の画面だけ横にはみ出すなら、その部分だけ直せば済むこともあります。

作り直すなら、この機会にスマホ画面を基準に内容を整理し直すのがおすすめです。たとえば古い飲食店のホームページのメニュー表画像を文字のメニューに変えれば、スマホで読みやすくなり、検索にもメニュー名が拾われます。

レスポンシブのホームページはどうやって確認する？

いちばん確実なのは、実際のスマホ数台で開いてみて、お客様の行動をそのままなぞってみることです。画面がきれいかどうかより、電話・予約・道案内がスムーズにできるかを先に見ます。

おかしな部分を見つけたら、画面をスクリーンショットし、どの端末のどのブラウザで見たかもあわせて書いて制作会社に送ってください。同じ問題でも端末によって見え方が違うことがあるので、この情報があれば修正の時間が大きく短縮されます。

1. 01オーナー様のスマホで最初の画面から最後までスクロールし、横にはみ出す部分がないか見ます。
2. 02スマホを横向きにしても一度見てみます。
3. 03別の種類のスマホ（iPhone・Galaxy）やタブレットでも開いてみます。
4. 04パソコンではブラウザのウィンドウ幅をゆっくり狭めながら、配置が自然に変わるか見ます。
5. 05電話をかける・地図を開く・予約のボタンを実際に押してみます。
6. 06Wi-Fiを切ってモバイルデータ通信で開き、写真の表示が遅すぎないか見ます。

レスポンシブ制作を依頼するとき、見落としがちなことは？

いちばんよくある失敗は、パソコン画面のデザイン案だけを見て確定してしまうことです。お客様のほとんどがスマホで見るなら、スマホ画面のデザイン案を先に見せてもらって意見を伝えるほうが、実際の仕上がりに近くなります。

また、メニュー表やイベントの案内を大きな画像1枚で載せるケースもよくあります。スマホでは文字が小さくなって読みにくく、検索エンジンも画像の中の文字はうまく読み取れません。

文字の大きさやボタンの位置のように、スマホでしか見えない問題は、公開後にお客様が先に気づくことが多いです。公開前の確認段階で、オーナー様やスタッフのスマホ数台で実際に予約まで試す時間を入れてもらうよう依頼してください。

• スマホ画面のデザイン案も別に見せてもらえますか？
• 料金表・表・日程は、スマホではどう変わりますか？
• 写真は画面サイズに合わせて縮小してアップされますか？
• 公開前に、どんな端末で確認しますか？