スマホ対応（レスポンシブ）はなぜ必要なのか

先に結論を書くと、スマホ対応が必要なのは見る人の画面の幅がバラバラだからです。作った人はパソコンの大きな画面で確認しますが、読む人は手のひらサイズの縦長の画面で開くかもしれません。同じHTMLを、どちらの幅でも読める形で出す。これがレスポンシブ対応と呼ばれているものです。

よくある誤解は「スマホ用にもう1枚ページを作ること」だと思ってしまうことです。実際はページを増やすのではなく、1枚のページが幅に合わせて形を変えるようにします。管理するものが2倍にならない、というのがこのやりかたの利点でもあります。

パソコンで見ているのは作った人だけ

自分で作ったページは、たいてい作業に使ったパソコンで確認します。ここが落とし穴で、その画面はサイトを見る人の環境の中では、むしろ特殊な部類に入ります。

スマートフォンで開くと、パソコン向けに組んだページはこうなりがちです。

• 横に3つ並べたはずのブロックが、画面からはみ出す
• 文字が小さすぎて、拡大しないと読めない
• ボタンが近すぎて、隣を押してしまう
• 横スクロールが発生して、読むたびに左右に動かす必要が出る

どれも「壊れている」わけではありません。パソコンの幅を前提に作ったものが、その幅ではない場所で表示されているだけです。

閲覧環境の内訳はサイトの種類によって大きく変わるので、ここで具体的な割合は書きません。ただ、自分のサイトについては後から実際の数字を見ることができます。まずは「自分の見えかたと、読む人の見えかたは違う」という前提に立つところからで十分です。

幅が変わると何が変わるのか

考えかたはシンプルで、狭くなったら縦に積む、これがほとんどです。

パソコンの画面は横に広いので、要素を横に並べられます。スマホは縦に長いので、同じものを横に並べると1つあたりが極端に細くなります。そこで、横並びをやめて上から順に積む。文字は少し大きく、行の幅は詰まりすぎないようにする。押す場所は指の大きさに合わせて広めに取る。

これらをHTMLとCSSでどう書くかは別の話ですが、CSSには「画面の幅がこれ以下のときだけ、この見た目にする」という指定のしかたがあります。ページを分けずに形だけ変えられるのは、この仕組みがあるからです。HTMLとCSSがそれぞれ何を担当しているのかは、HTMLとCSSで何ができるのか、最初の全体像のほうで整理しています。

ノーコードのツールやテンプレートを使う場合は、この切り替えがあらかじめ組み込まれていることが多く、幅ごとの表示を画面上で確認しながら調整できるようになっています。自分で書くかツールに任せるかの判断軸はノーコードとコーディング、どちらを選ぶかの判断軸にまとめました。

「狭いほうから考える」と楽になる

順番の話をひとつ。パソコン向けに作り込んでから狭い画面に押し込めようとすると、削る作業になります。逆に狭い画面から先に決めると、載せるものを選ぶ作業になります。

狭い画面には情報がそれほど入りません。そこで先に「これだけは伝える」を決めると、自然と優先順位がつきます。広い画面はその後で、余白を使って並べ直せばいい。この順で考えると、どちらの幅でも軸のぶれないページになりやすくなります。

余白や文字の大きさをどう扱うかは、幅にかかわらず共通する部分です。見やすいデザインの基本。4つの原則から始めるで触れた考えかたは、そのままスマホの画面でも使えます。

確認は実機でする

ブラウザの幅を手で狭めるだけでも、崩れの多くは見つかります。ただ、それだけでは分からないこともあります。

• 指で押したときの押しやすさ
• 実際の画面での文字の読みやすさ
• 通信環境による画像の表示の遅さ

自分のスマートフォンで開いてみると、これらは数十秒で確認できます。公開までの流れは自分のサイトを公開するまでの流れを一通りにありますが、最後の「別の端末で見る」がここに効いてきます。

まとめ

• スマホ対応は、ページを増やすのではなく1枚のページの形を変えること
• 狭くなったら横並びをやめて縦に積む、が基本
• 狭い画面から先に考えると、載せるものの優先順位が決まる
• 最後は実機で開いて確認する

一度この感覚が身につくと、新しく作るときも自然と両方の幅を思い浮かべながら組めるようになります。とはいえ最初は、どこから直せばいいのか分からなくなることも多いところです。デジタルラボ金沢では初心者からOKのワークショップや勉強会を定期的に開いているので、手を動かしながら聞いてみたいときはお問い合わせからどうぞ。