アスペクト比

定義

アスペクト比とは、要素の幅と高さの比率を特定の値に固定することです。画像や動画を 入れる箱を 16:9、1:1、4:3 のように決まった比率で縛っておくと、中に何が入っても 箱のかたちはその比率を保ちます。おかげでコンテンツが実際に読み込まれる前から、 画面上に場所があらかじめ確保されます。横幅が変わっても高さが比率に合わせて一緒に 計算されるので、画面サイズが変化するレスポンシブな環境で特に役立ちます。サイズを 直接指定せず「比率だけ」を固定するのがポイントで、箱は画面に合わせて大きくなったり 小さくなったりしながらも、かたちは常に一定に保たれます。高さを毎回計算して入れる 必要がないぶん、管理もぐっと楽になります。

なぜ重要か

アスペクト比を固定する一番大きな理由は、レイアウトが突然ずれる現象、つまり レイアウトシフトを防ぐためです。比率を決めておかないと、画像が読み込まれた瞬間に 高さが一気に伸びて、下にあった内容が押し下げられ、読んでいたユーザーが一瞬で 位置を見失ってしまいます。あらかじめ場所を取っておけば、こうしたガタつきなく 画面が安定して保たれます。また同じ比率の箱をいくつも並べると、リストやギャラリーが きれいに揃い、コンテンツがバラバラのサイズで不揃いになっているときよりも、ずっと 整って信頼感のある印象を与えます。こうした安定性はユーザーに画面を快適に感じさせ、 検索エンジンが評価する画面の品質にも役立ちます。

よくある間違い

• 比率を固定せず、画像が遅れて読み込まれるときに画面が下へ押し下げられるケースです。 ユーザーがボタンを押そうとした瞬間にコンテンツが跳ねて、思わぬ場所を押してしまう ので、メディアの箱には比率をあらかじめ指定して場所を確保しておくほうが安全です。
• 箱の比率と、中に入るコンテンツの実際の比率が食い違い、画像がゆがんだり切れたり することです。箱の比率だけ決めて中の埋め方を決めないと元の絵が歪んで見えるので、 切り抜いて埋めるか余白を残して合わせるかを必ず一緒に考える必要があります。
• すべての画像にひとつの比率を無理やり押しつけることです。縦長の写真まで横比率に 押し込めると、人物の顔のような大事な部分が切れてしまうので、コンテンツの性格に 合った比率を選ぶ必要があります。

実務のヒント

• 用途ごとに比率を決めておくと選択が速くなります。16:9 は動画、1:1 はプロフィールや サムネイル、4:3 は昔ながらの写真によく合います。比率を固定しておけばコンテンツが 読み込まれる前から場所が取られていて、レイアウトが突然ずれる現象をしっかり防げます。
• 箱に比率を与えるときは、中の画像を切り抜いて埋めるか、余白を残して合わせるかも 一緒に決めておきましょう。埋め方まで決めておけば、どんなサイズの元画像が入っても 結果が一定に保たれます。
• ブラウザがアスペクト比の指定に対応していない場合に備えて、昔から使われてきた 余白ベースの代替方法も一緒に用意しておくと、古いブラウザを含むどんな環境でも 場所が安定して確保され、安心できます。

関連概念