前回、スマホの表示を直しました。今度はiPadです。
パソコンではきれいに見える。スマホも直した。ではその中間は。開いてみると、壊れてはいないけれど、どこを見ればいいのか分からない画面でした。
「段差」で切り替えていた
まず、何が起きているかを数字にしました。7つの幅で、見出し・本文・余白・アイコンの大きさを1つずつ測ります。
出てきたのは、こういう表でした。
iPhone iPad縦 iPad横 PC
本文 13px 13px 16px 16px
セクション見出し 22px 26px 34px 34px
セクションの余白 52px 60px 88px 88px大きさが「段」で変わっています。iPhoneとiPad縦は同じ、iPad横とPCは同じ。そのあいだにある画面幅は、どちらかに寄せられます。
しかも、切り替わる幅が 9種類 ありました。560、600、700、768、860、900、1024、1200……。文字はここで切り替わるのに、余白はあそこで切り替わる。iPadのような中間サイズでは、文字だけ大きくて余白は狭い、という組み合わせが起きていました。
見た目の「なんとなく変」の正体は、これでした。
なめらかに変える
直し方は、段差をやめて画面幅に比例して変わる1本の式にすることです。CSSの clamp() という書き方で、「最小値・画面幅に応じた値・最大値」を1行で書けます。
--fs-h2: clamp(24px, 1rem + 1.7vw, 38px);これで、375pxのiPhone SEから1600pxのデスクトップまで、隣のサイズと数pxしか違わない状態になります。
iPhone iPad縦 iPad横 PC
セクション見出し 22px 28px 31px 38px
セクションの余白 60px 73px 81px 96px同じ表を測り直すと、こうなりました。もう段がありません。
iPadは「2列」の画面
数字を揃えただけでは足りませんでした。768〜1100pxの帯は、組み方そのものが合っていなかったからです。
スマホの1列で組むと、iPadでは縦に長すぎます。ヒーローのイラストが画面の下へ流れて、最初の1画面に見出ししか入りません。かといってパソコンの3列・4列で組むと、1枚1枚が細すぎて文字が窮屈です。
この帯だけ、2列を基本にしました。
- ヒーロー：見出しとイラストを横に並べる
- 困りごとの4枚：4列 → 2×2
- 「私たちのやり方」：見出しを上に、項目を2列に
- フッター：4列 → 2列
困りごとの2×2は、結局パソコンでも同じにしました。4列だと1枚が257pxしかなく、「現場がどうなっているか、報告が来ない」という短い一文が3〜4行に割れていたからです。2列にしたら1行で収まりました。横に4つ並ぶことより、1行で読めることのほうが大事です。
メリハリがなかった
もうひとつ、数字を並べて気づいたことがあります。見出しと本文の差が小さい。
トップの大見出しが56px、リード文が18.5px、英字の小さな見出し（PROBLEMS など）が14.5px。全部が「中くらい」で、主役がいない状態でした。
思い切って差をつけました。
| 前 | 後 | |
|---|---|---|
| トップの大見出し | 56px | 68px |
| リード文 | 18.5px | 16px |
| PROBLEMS などの英字 | 14.5px | 12px |
| タグ・注記 | 14.5px | 12px |
主役は大きく。脇役は、思い切って小さく。小さくても困らないものは小さくていい。逆に言うと、いままで全部を「困らない大きさ」にしようとして、全部が同じ大きさになっていたわけです。
日本語は、単語の途中で折れる
最後がこれです。今回いちばん手間がかかりました。
見出しは、折り返す場所を決めて書いてあります。「退去した部屋を、／次に貸せる状態まで」。ところがブラウザは、その途中でも勝手に折ります。iPad横で見ると「次に貸せる／状態まで」。パソコンでは「私たちの／やり方」と割れていました。7文字の見出しが2行になるのは、さすがに違和感があります。
原因は前回と同じで、日本語を文節で折る word-break: auto-phrase に Safariが対応していないことです。iPhoneもiPadもSafariなので、Appleの端末では働きません。
英語なら単語のあいだに空白があるので、ブラウザはそこで折ればいい。日本語には空白がありません。ブラウザから見ると、どこで折ってもいい文字列です。
文節を「かたまり」にする
CSSだけでは防げないので、書き方を変えました。
見出しの各文節を、「この中では絶対に折らない」印で包みます。「退去した部屋を、」でひとかたまり、「次に貸せる状態まで」でひとかたまり。折れるのは、かたまりとかたまりのあいだだけです。
幅に余裕があれば、作った人が決めた場所で折れる。かたまり1つすら入らない狭い画面では印を解いて、普通に折り返す。はみ出しは作らない。
短い一文（困りごとの4枚、「私たちのやり方」の項目）には、別の指定を使いました。word-break: keep-all ── 句読点のところでだけ折る、という指定です。「報告が／来ない」「連絡が来／ない」がなくなり、「現場がどうなっているか、／報告が来ない」になります。
直せなかったもの
記事カードのタイトルは、そのままにしました。「小さい会社がSupabaseを選んだ理由 良かったところと、気をつけていること」のような長い自由文は、どの幅でも完璧に折る方法がありません。
keep-all を当てると、1語が長すぎて入りきらず、今度は「理／由」のように強制的に切れます。かえって悪くなる。長い自由文には、普通の折り返しが正解でした。行頭に「、」が来ないようにする禁則だけ指定して、あとはブラウザに任せています。
全部を制御しようとしないこと。これも今回の学びの1つです。
確認したこと
前回、「幅を変えて全部見る」を公開前の手順に入れると書きました。今回はそれに、折り返しの確認を足しました。
見出しやカードの文字を、実際にどこで折れているか1行ずつ取り出して、5つの幅で並べます。
困りごと（iPhone）
現場がどうなっているか、／報告が来ない
工事が始まってから、／追加費用の話が出てくる
予定が押しているのに、連絡が来ない
入居者が外国籍で、／説明がうまく伝わらないこうやって並べると、「来／ない」のような切れ方は一目で分かります。目で見て気づくより、ずっと確実です。
学んだこと
前回は「作った人間は、自分のパソコンでしか見ない」でした。今回はその続きです。
スマホを直したら、次はその中間を見ること。両端が正しくても、あいだが正しいとは限りません。9か所の段差は、スマホとパソコンをそれぞれ直したときに、1つずつ足していったものでした。
そして、大きさは「段」ではなく「比例」で決めること。段で決めると、必ずその境目に落とし穴ができます。
まだ気づいていない場所はあると思います。iPadの実機で見て、また直します。