非対称グリッド FV
この FV（メインビジュアル）は、左にコピー、右に3枚の画像をずらして配置した非対称グリッドです。全体を display:grid の 1fr 1fr で左右2列に分け、右側では --1 --2 --3 の各画像を少しずつ位置やサイズを変えて重ね、規則正しさをあえて崩すことで動きと余白の抜けを生んでいます。
このパーツの使いどころと実装ポイント
この FV（メインビジュアル）は、左にコピー、右に3枚の画像をずらして配置した非対称グリッドです。全体を display:grid の 1fr 1fr で左右2列に分け、右側では --1 --2 --3 の各画像を少しずつ位置やサイズを変えて重ね、規則正しさをあえて崩すことで動きと余白の抜けを生んでいます。本文は Georgia 系のセリフ書体で大きく見せ、クリエイティブな印象を強めています。
向いている場面
- 制作実績を前面に出すデザイン会社や写真スタジオのトップ
- ポートフォリオサイトやクリエイター個人サイトの FV
- 世界観で勝負するブランドやアパレルの導入
カスタマイズと注意点
このパーツの肝は画像です。現状は枠だけのプレースホルダーなので、必ず実写を入れてください。3枚はトーンを揃えると散らからず、ずらしの度合いを強めるほど躍動感が出ます。差し替えどころはタグ文・見出し・実績へのリンク文言です。実装上の注意は、狭い画面で左右2列のままだと画像が潰れる点で、スマホではコピーを上・画像を下の縦1列に切り替えてください。各画像には内容を表す alt を付け、装飾的な重なり画像は読み込み遅延 loading="lazy" を活用すると表示が軽くなります。
よくある質問
画像の枠が空のままですが何を入れますか
ここはプレースホルダーなので、実際の制作実績やブランドの写真を入れてください。3枚はトーンや色味を揃えると非対称配置でも散らかりません。各画像には内容を説明するalt属性を付け、FV以外の画像には遅延読み込みを使うと表示が軽くなります。
スマホでレイアウトが崩れませんか
左右2列のまま狭い画面に入れると画像が小さく潰れます。スマホではコピーを上、画像を下の縦1列に並べ替えるのが安全です。ずらした重なりは縦並びでも残せますが、重なりすぎて読みにくくならない程度に調整してください。