標準のランディングページはピクセル単位でどのサイズにする必要がありますか?

ノートパソコンを持っているコーヒーショップのクリエイティブビジネスチーム

画像クレジット: Jacob Ammentorp Lund / iStock / Getty Images

適切に設計されたランディングページは肯定的な印象を残し、Webサイトで提供する製品やサービスを効果的に販売します。 デバイスが不適切なウィンドウサイズを使用すると、ランディングページの印象を残し、訪問者が「X」をクリックしてウィンドウを閉じることができなくなる可能性があります。 ランディングページは、ユーザーを引き込み、製品やサービスを明確に説明する概念に基づいて設計する必要があります。 ランディングページはホームページではありません。訪問者はリンクまたは広告をクリックしてランディングページにアクセスします。

デスクトップランディングページの寸法

デスクトップモニターとラップトップモニターにはさまざまなサイズと解像度があり、ランディングページのサイズを決めるときに最小公分母にアピールするのが簡単になります。 平均画面サイズは拡大し続けていますが、ほとんどのモニターは少なくとも1024 x768の解像度を備えています。 960ピクセル幅のデスクトップランディングページは、ほとんどすべてのコンピューターモニターで機能します。 720ピクセルの高さ内のランディングページのコンテンツは、ページの読み込み時に画面に安全に表示されます。 デスクトップユーザーは画面を下にスクロールして追加のコンテンツを表示できるため、デスクトップのランディングページの幅は高さよりもはるかに重要です。 いつでも小さなページを作成して、画面のスペースを犠牲にすることができます。

今日のビデオ

モバイルデバイス向けの設計

大きなデスクトップランディングページはモバイルデバイスでは機能しません。コンテンツが横にこぼれたり、判読できないサイズに縮小したりします。 モバイルデバイスは「小さい」画面サイズのカテゴリに該当し、約320ピクセルの安全な解像度幅を備えています。 一部のモバイルデバイスはより大きな画面を備えていますが、320ピクセル幅用に設計されたランディングページは、ほとんどのモバイルデバイスで適切に表示されます。 デスクトップと同様に、高さはモバイルランディングページの二次的な懸念事項です。 ただし、一度に約426の垂直ピクセルのコンテンツを画面に収めることができます。

タブレットデバイス用にカスタマイズ

タブレットサイト用にカスタマイズされたランディングページを開発できます。 ただし、960ピクセル幅のデスクトップランディングページは、より大きなタブレットデバイスに適合します。 7インチの範囲の小さなタブレットは、通常640ピクセル幅の画面を備えています。960ピクセル幅の画面用に設計されたランディングページは、小さな画面に収まるように約3分の1に縮小されます。 品質を犠牲にすることなく、より小さなコンテンツをより大きな画面に表示できるため、 読みやすさ、幅640ピクセル、高さ480ピクセルのタブレットランディングページのデザインは すべてのデバイス。 小さいタブレットユーザーはデバイスを横向きモードで保持することを選択できますが、大きいタブレットユーザーはデバイスを縦向きモードで保持するため、640ピクセルの幅で両方の画面サイズに対応できます。

レスポンシブデザインに切り替える

デバイスごとに異なるランディングページを作成するのをやめ、代わりにメディアクエリと 訪問者のサイズに応じてコンテンツを再配置するページを構築するためのレスポンシブデザインコンセプト 画面。 レスポンシブデザインのランディングページは、コンテンツ内を移動したり、さまざまな解像度範囲でコンテンツサイズを変更したりするように構成できるため、コンテンツを任意の画面に快適に表示できます。