ヒーローヘッダーの落とし穴

大きなビジュアルを配置したトップページは、多くのサイトに採用されているレイアウトです。ファーストビューが肝心のWebデザインでは、最初に飛び込んでくる解像度の高い美しい写真とキャッチコピーをコラボさせることで訴求力抜群です。近年、通信速度が快適になったことも踏まえ、画面いっぱいに色がる動画を用いたトップページを採用しているサイトも増えています。
▶動画の利用はこちらで解説しています。
▶動画を用いた背景サンプル

ヒーローヘッダーの使い方と注意点を今一度復習して見ましょう。▶ヒーローヘッダーの記述法　

ヒーローヘッダーの注意点

大きなPCモニターでは、解像度の高い画像を採用しても構いませんが、無線wifi利用の多いスマートフォンでは容量の大きい画像を読み込ませることを避けましょう。レスポンシブで、画像を切り分け、デバイスに合った画像を用意することをお勧めします。パソコンモニター用は、幅1200px以上、スマホ用は、幅600px前後が理想と考えます。また、スマホは縦長型、モニターはワイド横長の特徴も留意した上で加工準備します。

hero_headerの背景に、大きめ