斜め分割フォトヒーロー
左にコピー、右に斜めに切り取った実写を置いた2カラムのヒーローです。画像は clip-path のポリゴンで斜めにクリップされ、左側のテキストとの境界に動きが生まれます。レイアウトはCSS gridの 1fr 1fr で組み、画像は object-fit:cover で枠いっぱいに敷き詰めています。
このパーツの使いどころと実装ポイント
左にコピー、右に斜めに切り取った実写を置いた2カラムのヒーローです。画像はclip-pathのポリゴンで斜めにクリップされ、左側のテキストとの境界に動きが生まれます。レイアウトはCSS gridの1fr 1frで組み、画像はobject-fit:coverで枠いっぱいに敷き詰めています。コーポレートやサービス紹介の冒頭で、堅すぎず印象を残したいときに向きます。
使いどころ
- 制作会社・士業・コンサルなど信頼感と動きを両立したいトップ
- 採用サイトのファーストビューで写真の世界観を見せたい場面
- 一枚の象徴的な写真を主役にしたいサービスLP
カスタマイズと注意
差し替えどころは画像URLとコピー、そして斜めの角度です。角度はclip-pathの頂点座標を変えるだけで調整でき、深くすると躍動感が、浅くすると落ち着いた印象になります。srcsetとsizesを備えているので、解像度に応じた配信のために幅違いの画像を用意しておきます。モバイルでは1カラムに切り替わり、斜めの向きも変わるため、写真の主要被写体が切れない位置取りを確認します。h1はページに1つに保ち、装飾の矢印アイコンにはaria-hiddenを付けて読み上げの邪魔をしないようにします。
よくある質問
斜めの角度はどう変えればいいですか？
画像に当てているclip-pathのpolygon座標を編集します。左上の頂点のX値を大きくすると傾きが深くなり、小さくすると浅くなります。モバイル用の指定は別に持たせて、縦並びでも被写体が切れないようにします。
画像の主役が斜めのクリップで切れてしまいます。
object-fitがcoverなので、object-positionで表示の基準点をずらすと改善します。あわせて被写体が中央寄りの写真を選ぶか、左に余白のある構図を使うと、斜めに切ってもバランスを保ちやすくなります。