ランディングページのサイズで重要なポイントを解説【2024年最新版】

ランディングペー（LP）の制作にあたって、注意すべきなのがページのサイズです。ページサイズが最適化されていないと、ファーストビューの効果を減少させてしまいます。
今回はランディングページのサイズ選びのポイントについてご紹介！LPを最大限活用するために必要な情報をお伝えします。

【関連ページ】
LP制作にかかる費用・相場感や、あなたの目的別にホームページ制作会社をお探しいただけます。

LP制作の費用・相場
ランディングページに対応できるホームページ制作会社一覧

まずは、ランディングページに必要なページ構成についておさらいしておきましょう。ファーストビューの重要性についても見過ごすことがないよう、その効果についても確認が必要です。

ランディングページは、主にファーストビュー、本体、クロージングという3つの要素によって成立しています。ファーストビューはページを訪れたユーザーが真っ先に閲覧する情報で、ここで大きく興味関心を集めることが大切です。本体では、ファーストビューを裏付ける具体的な事例や商品の詳細について紹介します。クロージングは、文章の結びのような存在です。結論をはじめ、問い合わせや購入方法、会社紹介などの情報を記載します。

ファーストビューの良し悪しによって、LPの効果は大きく左右されます。ファーストビューでは、とにかく閲覧者の注目を惹き、簡潔に伝えるべきメッセージをまとめましょう。
冗長な内容や、インパクトの弱いファーストビューだと、その後の文章や商品紹介に興味を持ってもらうことができません。KPIを達成させるためにも、デザインと内容の両方に配慮し、ユーザーに最適化しましょう。

ランディングページのレイアウトは、大きく分けて以下の3つです。LPの目的や、自社の特性に合わせて最適なものを選べるよう、それぞれの特徴について把握しておきましょう。

ソリッドレイアウトは固定レイアウトとも呼ばれる、最もスタンダードなLPのレイアウトです。コンテンツのサイズは常に一定に固定され、デバイスに応じて表示が変わることはありません。閲覧デバイスに左右されることがないため、常に同じデザインにしたい場合に有効です。
一方で、固定サイズであるため必要以上にスクロールが必要になるなど、ユーザビリティの低下につながる可能性もある点には注意が必要です。

リキッドレイアウトは可変レイアウトとも呼ばれる、サイズの柔軟な変更が可能なレイアウト手法です。ウインドウ幅に合わせて最適なサイズで表示されるため、パソコンやタブレット、スマホなど、さまざまなデバイスからのアクセスに適しています。
デメリットとしては、デザイン幅が常に変動するため、場合によってはコンテンツのテキストが読みにくい、画像が見えづらいといった不具合を引き起こすことがある点です。

3つ目は、フレキシブルレイアウトです。これはリキッドレイアウトの可変的なデザイン設計を発展させたもので、最小幅と最大幅をあらかじめ指定することで、その設定に合わせてデザインが変動します。
リキッドレイアウトで発生していた、極端にサイズ幅が変更されるなどコンテンツの可読性が低下してしまう問題を回避することが可能。あらかじめ可読性を保てるサイズ比率を調べておき、それに合わせて数値を設定すると良いでしょう。

「自社にあった会社が見つからない」「会社選びに時間が割けない」とお悩みの方は、お気軽に「アイミツ」にお問い合わせください。数あるホームページ制作会社からあなたの要望にあった会社をピックアップして無料でご紹介いたします。

ここでは、ランディングページのファーストページを表示するにあたって、各デバイスで適切なサイズをご紹介します。コンテンツのデザインによって最適なサイズは異なりますが、ぜひ参考にしてみてください。

まずは、パソコンの場合です。パソコンでLPを表示する場合、見過ごしてしまいやすいのが、ユーザーが画面をフルサイズで表示するとは限らない点。ブラウザをフルスクリーンでは表示していないユーザーも多いため、そのことを考慮に入れましょう。目安の数値は以下のとおりです。

・ファーストビュー：550~600px(高さ)
・ソリッドレイアウト：960px〜1,100px(横幅)
・リキッドレイアウト：〜1,700px（横幅）
・フレキシブルレイアウト：最大幅設定（max-width 1,500pxなど）

続いては、スマートフォンの場合です。スマートフォンが特徴的なのは、縦長のスクリーンです。PCとは異なり、横幅が非常に狭いため、ソリッドレイアウトではスクロールの動きが無駄に増えてしまいます。推奨サイズとしては以下のとおりです。

・横幅を375pxに固定
・ファーストビューの高さを最大600pxに固定

自社コンテンツに適した比率になるよう調節してみましょう。

LP作成においてもっとも時間をかけるべきなのは、ファーストビューです。まずはLPの主題となる、メインビジュアルを固めます。ひと目でそれが何か、どんな魅力を持っているのかを伝えられるビジュアルを用意しましょう。
次に、キャッチコピーを考えます。ビジュアルの魅力をより引き出す、力強いメッセージを用意してください。関心を持ったユーザーを次のステップに移行させるためのナビゲーションも大切です。資料請求や商品販売ページへの遷移を想定した設計が求められます。ナビゲーションがないと、商品の詳細な情報や、LPには書かれていない情報を知りたいというユーザーの気持ちを阻害してしまいます。わかりやすい導線を心がけましょう。

ランディングページは一枚のページで構成されているため、制作自体は比較的簡単です。しかし、効果的なページを完成させるには、ある程度のノウハウや作成経験が欠かせません。はじめてのLP作成という場合や、自社で十分な人材を確保できない場合には、外部のホームページ制作会社に依頼するのもおすすめです。
制作を実績豊富な会社に委託することで、質の高いLPを短期間で入手できるでしょう。アイミツではLP制作に適した会社のご紹介も行っています、ぜひお気軽にご相談ください。

ランディングページの作成では、レイアウトにこだわることでその効果を大きく改善することができます。複数のレイアウト手法を使い分け、ユーザビリティに配慮したLPを用意することが必要です。LPの作成ノウハウがない場合は、外部のホームページ制作会社への委託がおすすめです。

アイミツでは、LP制作の実績が豊富なホームページ制作会社を、あなたに最適な形でピックアップし、ご紹介することができます。LP制作にお悩みの際には、ぜひお気軽にアイミツまでご相談ください。

【相談前にまずは会社一覧を見たいという方はこちら】
ランディングページに対応できるホームページ制作会社一覧

【費用感を知りたいという方はこちら】
LP制作の費用・相場