パフォーマンス（画像・フォント・アニメーション）

面接ではこう答える 読み上げ

表示の速さは、デザインで使う素材で大きく変わります。写真は WebP や AVIF、なければ JPEG、アイコンやロゴは SVG、透過のある画像は PNG や WebP、動く画像は GIF ではなく動画にする、というように素材に合った形式を選びます。大きさは表示する幅の2倍程度までで十分なことが多く、それ以上は重さが増えるだけです。特に最初の画面の大きな画像は、表示の速さの指標に直接響くので気をつけています。

面接ではこう答える 読み上げ

Core Web Vitals は、Google が示している Web の体験の指標で、3つあります。LCP は画面でいちばん大きな要素が表示されるまでの時間で 2.5 秒以内、INP は操作してから画面が反応するまでの時間で 200 ミリ秒以内、CLS は読み込み中に画面がずれる量で 0.1 以下が「よい」の基準です。デザインとの関係では、最初に見える大きな画像やフォントが LCP に、画像の大きさを決めていないことや後から差し込まれるバナーが CLS に効きます。

面接ではこう答える 読み上げ

画像は、画面の幅や密度に合わせて、エンジニアが複数の大きさを用意して出し分けられます。これを srcset といい、スマホに PC 用の大きな画像を送らずに済みます。画面の外にある画像は、スクロールで見えそうになってから読む遅延読み込みで、最初の表示を軽くできます。デザインでは、画像の縦横比を決めておくと、読み込み中に場所を確保でき、画面のずれを防げます。逆に、最初の画面のいちばん大きな画像は遅延させず、早く読む指定をしてもらいます。

面接ではこう答える 読み上げ

日本語のフォントは文字数が多いため、1つの太さだけでも大きなファイルになります。Web フォントを使う場合は、太さの種類を絞る、OS に入っているシステムフォントで十分な場所はそれを使う、使う文字だけに減らす、といった工夫で軽くします。Google Fonts などは文字を小分けにして、使う分だけ読む仕組みを持っています。また、フォントが届くまでは代わりのフォントで先に表示するのか、隠すのかを選べるので、文字が見えない時間を作らないよう、先に表示する形にすることが多いです。

面接ではこう答える 読み上げ

アニメーションの重さは、何を動かすかで大きく変わります。位置の移動や拡大縮小、透明度の変化は、配置の計算をやり直さずに済むので軽く、なめらかに動きやすいです。一方、幅や高さ、余白を動かすと、周りの要素の配置も毎回計算し直すので重くなり、性能の低いスマホではかくつきます。同じ見た目の動きでも、拡大縮小や移動で表現できないかをエンジニアと相談します。

面接ではこう答える 読み上げ

体感の速さは、実際の時間だけでなく見せ方で変わります。何も出ない画面で3秒待つより、骨組み、文字、画像と届いた順に表示するほうが短く感じられますし、押した瞬間にボタンが反応するだけでも遅さを感じにくくなります。ほかに、次に使いそうなデータを先に読んでおく、長い処理では進み具合や段階を見せる、といった工夫があります。ただし、実際の遅さを隠すだけでは限界があるので、エンジニアと実際の速さの改善もあわせて考えます。