Webサイトを閲覧していて、「あ、いまボタンが急にガクッとズレた！」とイラッとした経験、ありませんか？
あれはレイアウトシフト（CLS）と呼ばれる現象で、Googleも「ユーザー体験を損なうから気をつけようね」とかなり厳しく警告しているポイントです。特に、Webフォントを読み込むときや、`` や `` といったインライン要素の装飾が切り替わる瞬間に、この「ガクッ」は起きがちなんです。
今日は、そんな目に見えない「フォントの身勝手な振る舞い」をいなしつつ、Webサイトのレイアウトをピシッと安定させる魔法のテクニックを伝授しますね。
—
なぜ、フォントが変わるとレイアウトが「ガクッ」とするの？
想像してみてください。あなたは今、行列に並んでいます。自分の前で「お辞儀が深い人」から「姿勢の良い人」に急に入れ替わったら、後ろにいるあなたは驚いて一歩後ろに下がりますよね？
Webサイトのブラウザも全く同じです。
最初は「標準的なフォント」で表示されていたのに、読み込みが完了した瞬間に「おしゃれなWebフォント」に切り替わると、文字の横幅や高さがわずかに変わります。すると、隣り合っていた `` 要素や `` で強調した文字が、居場所を追い出されて「ガクッ」と移動してしまうんです。
これがCLSの正体。これを防ぐには、「あらかじめ場所を予約しておく」という考え方が非常に重要になります。
—
対策その1：line-heightで「高さの余白」を確保する
インライン要素（`` や `` など）の高さは、実は `line-height`（行間）に強く依存しています。フォントが切り替わっても、行の高ささえ一定なら、大きなガクつきは防げます。
/ インライン要素に「行の高さ」を指定して安定させる /
strong {
/ 単位なしの数値を使うのがコツ。親要素のフォントサイズ×1.5の高さになる /
line-height: 1.5;
/ フォントが切り替わっても影響を受けにくいよう、ブロックっぽく振る舞わせる /
display: inline-block;
}
「あれ？ `inline-block` にしたら横に並ばないんじゃ？」と思うかもしれませんが、大丈夫。この設定をしておけば、フォントが変わって文字が少し太くなっても、予約した「高さの箱」の中で収まってくれるので、周囲のレイアウトを破壊しません。
—
対策その2：`font-size-adjust` で「見かけの大きさ」を統一する
ここが今回のハイライト。「Webフォントを読み込むまで、代替フォント（Arialなど）を表示しておく」という設定は一般的ですが、代替フォントとWebフォントは、同じ「16px」を指定しても、見た目の大きさが全然違うことがよくあります。
そこで登場するのが `font-size-adjust` です。
.text-content {
/ Webフォントが読み込まれるまでの間、フォントの「小文字の高さ」を調整してくれる魔法 /
/ 0.5は一般的な目安。適宜調整してみてください /
font-size-adjust: 0.5;
}
これは「フォントが変わっても、小文字の大きさを基準に全体のバランスを保つよ」という設定です。これを入れておくだけで、フォントが切り替わった瞬間の文字サイズの「膨らみ」や「縮み」が抑えられ、視覚的な違和感がグッと減ります。
—
迷ったときの「安心のレシピ」
初学者のうちは、あれこれ設定しすぎて混乱することもありますよね。まずはこの構成を試してみてください。
ここは普通の文章ですが、強調された言葉は
レイアウトが崩れないように工夫されています。
※ `font-display: swap;` は、CSSの `@font-face` 設定で使うものですが、これを入れておくと「フォントが読み込まれるまで、とりあえずデフォルトの文字を表示する」という動作になり、真っ白な画面でユーザーを待たせることがなくなります。
—
最後に：完璧を目指さなくても大丈夫
レイアウトシフトをゼロにするのは、プロでも非常に骨が折れる作業です。「あ、またズレた！」と気づいたときが、成長のチャンス。
「この要素の高さがフォントの影響を受けているのかな？」と推測できるようになっただけで、あなたはもう立派なフロントエンドエンジニアの視点を持っています。
まずは、自分の作ったサイトをスマホで開いて、Webフォントが切り替わる瞬間をじっくり観察してみてください。その「気づき」こそが、美しいWebサイトを作る一番の近道ですよ！
焦らず、一つずつ調整を楽しんでいきましょうね。
コメント