画像マスクの巨大タイポ FV
巨大な英字タイトルを画面いっぱいに置き、その背景に写真を敷いて文字を塗り潰すように見せるヒーローです。 object-fit:cover で背景画像を全面に広げ、見出しには mix-blend-mode:screen を効かせて文字と画像を混ぜ合わせます。
このパーツの使いどころと実装ポイント
巨大な英字タイトルを画面いっぱいに置き、その背景に写真を敷いて文字を塗り潰すように見せるヒーローです。object-fit:coverで背景画像を全面に広げ、見出しにはmix-blend-mode:screenを効かせて文字と画像を混ぜ合わせます。文字サイズはclamp()で画面幅に応じて伸縮し、どの端末でもタイトルが画面の主役になります。
向いている場面
- デザイン事務所や写真家のクリエイティブ系サイト
- 展示会・イベント・ブランドローンチの特設ページ
- 短い英単語を強く印象づけたいファッションやアートの導入部
カスタマイズと注意点
差し替えるのは主に背景画像のsrcと見出しのテキストです。mix-blend-modeは背景の明暗で見え方が大きく変わるため、画像を入れ替えたら必ず実機で確認し、必要なら明度を調整した写真を使います。長い日本語をこの巨大文字に入れると改行が崩れるので、英字や短い語に向きます。背景は装飾的な意味合いが強いので、altは空ではなく内容を補う短い説明を入れ、本文中に同じ情報をテキストでも置くと検索エンジンや読み上げに伝わります。
よくある質問
文字が背景に溶け込んで読めません
mix-blend-modeは背景画像の明暗に強く影響されます。文字が沈む場合は、もう少しコントラストのある写真に替えるか、画像の上に薄い暗幕を重ねて文字の地を作ると読みやすくなります。
日本語の長い見出しを入れたいです
巨大タイポは短い英単語向けの演出です。長い日本語は折り返しで崩れやすいため、メインは英字や数語にとどめ、説明はサブテキストとして小さく添えるバランスがきれいにまとまります。