第22章　ブラウザの幅を変えると、画面の続きが見える

Web サイトのデザインは、完成した一枚の画像ではありません。同じページでも、ブラウザの幅、文字の大きさ、文章の長さ、読み込みの状態が変わると、要素の並び方や必要な広さも変わります。

PC 表示とモバイル表示の二枚だけを作っても、その間にある幅で文字がぶつかることがあります。短い商品名では整っていても、本番の長い名前を入れるとカードが伸びます。通信中には、完成後にはない案内も必要です。

ブラウザの幅をゆっくり変えると、静止画の外側にある変化が見えてきます。この章では、変化が起きる五つの場面を一つずつ見ます。

22.1 「PC 幅」と「モバイル幅」の間でも、画面は変化する

横幅に余裕があるとき、見出しとボタンを横に並べられます。

図 22-3A では、左の見出しと右の予約ボタンの間に余裕があります。この一枚だけなら、横並びで問題ないように見えます。

ブラウザを少し狭くすると、見出しが折り返します。しかし、ボタンは同じ場所に残るため、二つが重なりました。

図 22-3B の 642px は、どのサイトでも使える特別な数字ではありません。この見出し、この文字の大きさ、このボタンを組み合わせたとき、重なりが現れた幅です。文章や書体が変われば、重なり始める幅も変わります。

さらに狭い画面では、見出しとボタンを縦に並べます。

大切なのは、最初に「何 px で切り替える」と決めることではありません。ブラウザを狭め、見出しとボタンの関係が苦しくなる場所を見つけ、その少し手前で並び方を変えることです。

画面の高さも変わります。小さなノート PC では、横幅が十分でも下のボタンが見えないことがあります。スマートフォンでは、文字入力中だけキーボードが画面の一部を覆います。横幅だけでなく、縦に何が見えているかも考えます。

Web ページを拡大して読む人もいます。まず、通常の大きさでは、住所と確定ボタンが一つの枠に収まっています。

ブラウザでページ全体を 200%に拡大すると、一度に見える横幅が狭くなります。文字も入力欄も大きくなり、ブラウザは内容を縦へ組み直します。

文字だけを大きくする設定もあります。図 22-4C では、ボタンの高さを固定したまま文字だけが大きくなり、文言が枠からはみ出しました。

この問題は、ボタンを少しだけ高くして終わりではありません。別の言葉なら二行になるかもしれないからです。上下の余白で高さが決まるようにし、文字が増えたときはボタンも一緒に伸びる設計にします。

短い商品名は、ほとんどのカードにきれいに収まります。

ところが、実際の商品名には、素材、用途、個数などが含まれます。

図 22-5B では、カードの高さを文字に合わせて伸ばし、商品名を最後まで表示しています。最初から二行や三行になる場合を考えていれば、長い名前を無理に小さくしたり、途中で隠したりせずに済みます。

URL や長い英数字は、日本語と同じ場所では折り返せません。

長い URL が枠を押し広げないよう、途中で折り返せる指定が必要です。人名、金額、大きな数字、翻訳された文章も、見本より長くなることがあります。意味のない仮の文章だけでなく、そのサイトに本当に入りそうな長い内容を使って画面を見ます。

商品一覧は、いつも完成したカードが並んでいるとは限りません。まだ商品が一件もないときは、空白だけを見せず、次にできることを伝えます。

通信中には、商品がないと決めつけず、読み込みが続いていることを伝えます。

一部だけ届いた場合は、届いた商品を隠す必要はありません。表示できた二件を見せながら、残り一件だけをもう一度読み込めるようにします。

権限がない場合は、待っていても商品は現れません。必要な権限と、誰へ連絡すればよいかを伝えます。

0 件、読込中、部分的な失敗、権限不足は、すべて見た目が空きやすい状態です。しかし、起きていることも次の行動も違います。完成した状態だけでなく、その前後にある時間までデザインします。

一つの商品カードを、サイトのいろいろな場所で再利用することがあります。広いメイン部分なら、画像と説明を横に並べられます。

同じカードを細いサイドバーへ置くと、横並びでは窮屈になります。

この変化を、画面全体の幅だけで決めると困ることがあります。同じ大きな PC 画面の中でも、メイン部分は広く、サイドバーは細いからです。

部品が置かれた場所の幅を見て並び方を変える CSS の仕組みを、コンテナクエリと呼びます。難しそうな名前ですが、考え方は単純です。「画面が PC かスマートフォンか」ではなく、「このカードが今使える幅はどれくらいか」を見る方法です。

コンテナクエリだけが正解ではありません。Flexbox で自然に折り返す方法や、画面全体の幅を見るメディアクエリもあります。守りたいのは技法ではなく、文字と画像が無理なく読める関係です。

レスポンシブデザインは、PC 版とモバイル版の二枚を作ることではありません。その間の幅、短い高さ、拡大された文字、長い内容、通信中などにも、同じページが続いています。

最初に端末名や決まりきった数字を選ぶのではなく、ブラウザを少しずつ動かします。文字がぶつかる。ボタンが押し出される。カードの内容が窮屈になる。そうした変化が現れる場所に、並び方を変える理由があります。

数字は、その理由を CSS へ伝えるために使います。数字そのものを覚えるのではなく、どの関係を守るための数字なのかを考えることが、Web らしい画面設計につながります。