サイトを開いた瞬間に飛び込んでくる最初のエリア、ファーストビュー。ここがパソコンやスマホの画面サイズにぴったり収まっていると、一気に洗練されたデザインになりますよね。実はElementor なら、難しいコードを使わなくても設定を一つ変えるだけで簡単に実現可能です。
今回は、どんなモニターサイズでもセクションを画面いっぱいに美しく表示させる高さの設定テクニックを解説します！
なぜ「画面ピッタリ」が重要なのか
ファーストビューは、ユーザーがサイトの印象を決める最も重要なエリアです。中途半端に下のコンテンツが見えてしまったり、逆に余白が広すぎたりすると、少し素人っぽく見えてしまうことがあります。
これをユーザーの画面サイズに合わせて常に100%の高さで表示させることで、一枚のポスターのような没入感を与え、伝えたいメッセージや画像を最も美しい状態で見せることができます。
基本の設定手順
Elementor のコンテナ（またはセクション）のレイアウト設定から、高さを調整してみましょう。
- 画面いっぱいにしたい一番上のコンテナを選択します。
- 左パネルの [ レイアウト ] タブを開きます。
- 最低の高さ（Min Height）の単位を、デフォルトのpxから「vh」に変更します。
- 数値を「100」に設定します。
この「vh」とはViewport Height（画面の高さ）の略です。100vhに設定することで、どんな大きさのモニターで見ても常に画面の高さ100%で表示されるという単位です。
スマホ表示での注意点と微調整
PCでは美しい100vhですが、スマホ表示の際は少しだけ注意が必要です。スマホのSafariなどのブラウザには上下にURLの検索バーやメニューバーがあるため、100vhに設定すると一番下の要素が少し見切れてしまうことがあります。
そういった場合も綺麗に見せるのがプロのテクニックです。これを防ぐため、スマホ表示の余白を調整する、または100vhの高さを少し小さくすると良いでしょう。 画面上部のレスポンシブモードをモバイルに切り替え、最低の高さを100vhから80vh〜90vh程度に下げて調整してみてください。これで見切れを防ぎつつ、美しいファーストビューを保つことができます。
まとめ
- ファーストビューを画面ぴったりにすると、プロっぽく没入感のあるデザインになる。
- コンテナ（セクション）のレイアウトタブで、最低の高さを「100vh」に設定するだけ。
- スマホではブラウザのメニューバーで見切れることがあるため、微調整。
たったこれだけの作業で、サイトを開いた瞬間のインパクトが劇的に変わります。
トップページの顔となる一番上のセクションに、ぜひ取り入れてみてくださいね！
