メインビジュアルをPCの画面幅いっぱいにデザインすることはよくあります。
しかし、その際に注意すべき点は、デバイスの画面解像度（以下、画面解像度）によって、制作したデザインとコーディング後のメインビジュアルの見え方が大きく異なる可能性があることです。
理想的には、複数の画面解像度を考慮したデザインを制作し、デザイン段階でその見え方を確認することが望ましいですが、工数の面で課題があります。
メインビジュアルの高さや横幅の見せ方には、大きく分けて以下の2つのアプローチがあります。
- 高さ固定／左右の見えるエリアを調整
- 高さ・横幅とも同比率で拡大・縮小
高さ固定／左右の見えるエリアを調整
メインビジュアルの高さを固定し、画面の解像度に応じて左右の見えるエリアを調整します。
この方法では、画面の解像度によってメインビジュアルの左右に見えない部分ができるため、全体を表示したい画像には適していません。
メリット
画像の高さが固定されているため、どの解像度のPCで閲覧してもファーストビューの見た目が安定しています。
特に「このエリアまでは見せたい」というケースに適しています。
デメリット
最大解像度を考慮し、見た目に不都合が生じない画像を選ぶ必要があります。
また、設置されている画像サイズよりも小さい解像度の画面で表示すると左右が切れることがあります。
逆に、大きい解像度の画面では画像が拡大されて上下が切れてしまう可能性もあります。
高さ固定／左右の見えるエリアを調整サンプルページ
（ブラウザの画面右端をドラッグインして画面サイズを変更するか、デベロッパーツールのデバイス切り替えで確認して下さい。）
高さ・横幅とも同比率で拡大・縮小
メインビジュアルの高さと横幅を、画面の解像度に合わせて同比率で拡大・縮小します。
メリット
画像の左右が切れず、全体を表示したい画像に適しています。
デメリット
解像度に応じて画像の縦幅も拡大されるため、選択した画像のアスペクト比によっては下部分がファーストビューに収まらず、スクロールが必要になることがあります。
また、解像度が小さい場合、メインビジュアルの画像の高さが小さくなり、コンテンツエリアの画像とのサイズバランスが悪くなる可能性もあります。
高さ・横幅とも同比率で拡大・縮小サンプルページ
（ブラウザの画面右端をドラッグインして画面サイズを変更するか、デベロッパーツールのデバイス切り替えで確認して下さい。）
上記の通り、この2つの方法にはそれぞれメリット、デメリットがあります。
改善方法
メインビジュアルの高さを画面の解像度に応じて拡大・縮小する際のデメリットについては、前述の通りです。この問題に対処するための方法として、アスペクト比の異なる複数の画像を用意し、画面の解像度に応じて適切な画像に差し替えることが考えられます。これにより、高解像度モニター（2K、4K）で発生しがちな画像のボケを軽減することができます。
ただし、この方法にはいくつかのデメリットもあります。
デメリット
- デザイン段階で、複数のアスペクト比で問題なく切り出せる画角の画像を選定する必要があり、使用する画像に制約が生まれます。
- 複数の画像を制作・入れ替えるため、工数が増えてしまいます。
- 複数枚の画像を読み込むことで表示が重くなる懸念があります。
最後に、「複数枚の画像を読み込むと表示が重たくなる懸念」については、
閲覧者の解像度に応じて適切な画像のみを読み込むことで、不要な通信を防ぎ、表示速度を向上させることが可能です。
改善方法サンプルページ
（ブラウザの画面右端をドラッグインして画面サイズを変更するか、デベロッパーツールのデバイス切り替えで確認して下さい。）
メインビジュアルの高さの固定と可変はそれぞれメリットとデメリットがあり、画像によってそれぞれの手法を分ける必要があります。
