【設計紹介】メインビジュアルのデータをどう作るか
メインビジュアルは、その名の通りサイトの中心的な役割となるため、縦横幅や、パーツのサイズが大きく作られることが多いです。
そこで出てくるのが、「どのサイズでデザインを作ればいいの？」「どんな風に組む？」という問題。
エンジニア視点から考えてみようと思います。
デザイン時のサイズは？
デザイン時のサイズは、幅や比率自体に決まりはないので、クライアント確認がしやすい=よく見る比率でのサイズ感で問題ありません。例えば、PCなら1440×810（比率16:9）など。
なぜ決まりがないのかというと、どのような比率でデザインされたとしても、コーディング時には縮んだり・広がったりするからです。
Webの特徴として、縦横の幅や、縦横比率が可変であることが挙げられます。
PCがブラウザのサイズを自由に変更できたり、スマホの縦横比率が機種によって異なったり。また、ブラウザのバーの分、表示領域の縦幅が縮むことがあったりなど。
こういった理由から、エンジニアはデザインカンプよりも縦横の幅が縮んだ・広がった時にどうなるか？を考えながら作業することになりますし、デザイナーもある程度比率の変動を念頭に置いた上でデザインしていくのが望ましいです。
よくある例としては、390×844等のiPhoneに合わせたサイズでデータを頂くものの、実際にはブラウザのバーの領域があるため、ファーストビューはもう少し縦幅が短くなる…といった場合があります。
iPhone11例。縦幅だけがブラウザによって変わってくるため、KVの縦横比率にも変動が生じます
組み立て方のパターン
では、縦横の幅が縮んだ・広がった時、どうなるように組み立てられることが多いのでしょうか？実際の事例を見てみましょう。
1.左右のみ100%表示
メリット：すべてのパーツを（スクロールすれば）見せることができる。常にパーツ同士の比率が保たれる
デメリット：ファーストビューからはみ出たり、ファーストビュー中に下のセクションが見えたりする
参考例：
https://fumino.b-rave.tokyo/
横幅合わせで、イラストや映像が必ず見えるようになっています。
なお、スマホの場合は細かなパーツを排除し、左右上下100%表示に変更されます。
2.左右上下100%表示＋パーツ見切れ
→キャッチコピーは浮かせてファーストビューに収めることが多いですが、写真やイラスト、特に背景と言えるような大きい写真は見切れさせるパターンがあります。
メリット：ファーストビューにピッタリ収まる
デメリット：重要なパーツが端にあると見切れて出てこない
参考例：
https://careers.goodpatch.com/
中央寄せの構造になっており、顔が真ん中の方にあるので、ある程度縮められても顔が見切れず問題ないようになっています。スマホも同様です。
3.左右上下100%表示＋パーツは中に収める
→写真やイラストなどのパーツを見切れさせずファーストビューに収めるパターンです。
メリット：ファーストビューにピッタリ収まる
デメリット：パーツ配置のバランスが変わる
参考例：
https://gakugeinomori-coe.com/
細かなパーツを多く見せることができます。イラストや写真切り抜きの多いサイトに適していそうです。
コーディング時にどの構造を採用するのが良いのか？
おおよそのパターンが分かったところで、では採用基準を考えてみましょう。
まずは「ファーストビューに収まっていないといけないパーツがあるか」を確認します。
これがある場合は、常にファーストビュー上に収まる造りにする必要があります。
例えばキャッチコピーはこれに該当するので、浮かせてファーストビューに収めることがほとんどですね。
次に、「見切れてはいけないパーツがあるか」を確認します。
例えば、写真上にある人の顔・イラストレーターさんが書いた絵など。
これがある場合は、（極端な画面比率を除き）そのパーツをファーストビューに収めるか、見切れるような構造は避けてスクロールで必ず見えるようにする必要があります。
その次は、パーツのバランスを重視するか、見せることを重視するか。これはデザインによりけりだと思うので、迷ったらデザイナーさんと相談して決めましょう。その際には参考サイトをいくつか共有できると伝わりやすいですね。
