シンプルなランディングページのデザイン

高品質のランディングページの設計に専念した以前の翻訳（ ランディングページ、機能します ）は、150,000ビューを超えました。 それ以来、多くの時間が経過し、デザインへのアプローチが変わりました-ミニマルなページがますます増えています。これについては記事で説明します。



過去数年にわたって、Webデザイナーは、ページ上に要素を積み重ねることは良いアイデアではないという結論に徐々に達しました。



写真素材からの無意味な写真、背景の反発的なテクスチャ、蛇行するナビゲーション、ソーシャルボタン、ブログ投稿ウィジェット、およびその他の「付加機能」は、デザインで定められた目標からユーザーをそらします。



多くの設計者は、より多くの異なる要素やオプションを追加するよりも基本的なフォームを使用することを好みます。



そして、視覚的に前のサイトよりもシンプルなサイトを作成していますが、それらははるかに大きな結果を達成しています。

ミニマルなLPの例

同じことを確実に理解するために、ミニマルなランディングページの例を見てみましょう（以降-LP）：





メールボックス





Tinyletter





Dropbox





IFTTT



例のアプリケーションは最も単純ではないことに注意してください。 ユーザーにとって便利で革新的でやりがいのあるタスクを解決します。



しかし、LPの複雑さは、アプリケーションの複雑さとは関係ありません。



ミニマルなLPの素晴らしい例をいくつか調べて、設計アプローチ、ヒント、およびアイデアを取得しましょう。

ミニマルなLP：ビッグアイデア

最初に目を引くのは、ミニマルなLPが主な目的の1つにすぎないことです。



登録、サブスクリプション、または何かをダウンロードできますが、最も重要なことは、設計者によるとユーザーが実行する必要がある明確に定義されたアクションが1つしかないことです。



ミニマルなLPには複雑なナビゲーションはありません;多くのソーシャルボタンは表示されません。 このデザインでは、空のスペースを埋めることを目的とする写真素材の写真は使用されません。



設計の各要素は、ユーザーをメインアクションに誘導するために慎重に選択されます。

LPの例：Dropbox

LP Dropboxは、ユーザーがアクションへの唯一の呼び出し-登録を簡単に認識できるようにすることを目的とした、優れたミニマルなデザインの主な例です。







強調される唯一の要素は「登録」ボタンです。



はい、LP Dropboxにはセカンダリアクションがあります-デスクトップアプリケーションのダウンロード、認証、またはサイトツアー。 しかし、デザインはそれらに焦点を合わせておらず、新規ユーザーがメインアクション（登録）を実行するのを妨げません。



必須ではない要素はすべて、デザインから削除されるか、強調されません。

• サイトの名前（Dropbox）はLPに存在しません。 アプリケーションの名前でさえ重要でない要素であることが判明しました
• Dropboxの仕組みを説明するために、単純な描画が使用されます。これは、登録ボタンに注意を引くのにも役立ちます。
• 「あなたのもの、どこでも」というスローガンは非常に短く、シンプルです。

Dropboxは、ユーザーが実行するアクションを自信を持って選択し、LPデザインはこのアクションを強調しています。

LPの例：メールボックス

メールボックスは、ユーザーがスマートフォンで電子メールを効率的に使用できるようにするアプリケーションです。 彼のLPはミニマリストデザインのもう一つの良い例です。



主なアクションは、App Storeのアプリケーションページに移動することです。







行動を促すフレーズの右側には、メールボックスの本質を説明する実際のアプリケーションのクリック可能なスクリーンショットがあります。



サイトメニューには代替アクションもありますが、視覚的には目立ちません。

LPの例：カルマ

Karmaは、美しいミニマルなLPデザインのもう1つの素晴らしい例です。



このページの主なアクションは、[今すぐ購入]ボタンをクリックすることです。このボタンは、ページヘッダーと中央に複製されています。 両方のボタンの色、スタイル、およびテキストが一致して、ボタン間の接続が作成されます。







ユーザーが実行できる代替アクションは、[詳細]ボタンをクリックすることです。 ただし、このボタンは透明であり、視覚的な重みが低くなっているため、メインボタン「今すぐ購入」（今すぐ購入）の邪魔​​になりません。



ボタンの上部にある短い説明には、WiFiの公開配信というユニークな価値提案が含まれています。



この例では、背景写真は非常に重要です-製品の外観を示し、デバイスのサイズを視覚的に表現します（デバイスを持っている手は一種のヒントです）。

ミニマルなLPの主要なコンポーネント

3つの繰り返しのミニマルなLPデザイン要素に気付いたはずです。

1. 主なアクション
2. 製品/サービスの説明
3. 代替アクション

次のセクションを読んで例を見るとき、これらの3つの点に留意してください。

ミニマルなLPデザインのヒント

このセクションでは、上記の主要なLPコンポーネントに基づいたいくつかのヒントとアイデアを見ていきます。

優れた視覚的階層の作成に焦点を当てる

LPの最も重要な部分に注意を引くためには、視覚的な階層を適切に構築する必要があります。



視覚的階層とは、デザイン要素の思慮深い配置であり、表示要素の順序が尊重されます（つまり、ユーザーは最初に最も重要な要素に注意を払います）。



視覚的階層における設計要素の位置に影響するいくつかの特性のリストは次のとおりです。

• サイズ サイズが大きいほど、階層内の要素が高くなります
• ページ上の位置 。 ほとんどのサイトでは、ヘッダーおよびページの左側の要素が階層の上位にあります
• 色のコントラスト 。 要素と背景または隣接する要素とのコントラストが高いほど、階層内の要素の位置が高くなります
• 視覚的な複雑さ 。 隣接要素と比較して要素が複雑になるほど、階層内で要素が高くなります
• 空のスペース 。 要素の周囲の空きスペースが多いほど、要素は高くなります。

この例では、サイズ、場所、コントラスト、視覚的な複雑さ、および空白が視覚的階層を形成するためにどのように使用されているかに注目してください。

LPの例：Numbrs

Numbrsのミニマルなデザインを例として使用すると、視覚的階層の原理を理解できます。



説明アプリケーション（1）とアクションボタン（2）の呼び出しは、ページ上の最も顕著な2つの要素です。







サウンドコントロールボタン（3）は、視覚的な階層でかなり高い位置にあります。 ユーザーはページのサウンドをオフにすることができます。



ご覧のとおり、製品名（4）と代替アクション（5）は視覚的な階層ではるかに低くなっています。

LPの例：さまよう

LP Wanderでは、優れた視覚的階層の別の例を見ることができます。



ページにアクセスすると、4つの要素のみが表示されます。







階層の最も重要な要素は碑文です。これは、プロジェクトに新しいユーザーが必要であることを説明しています（1）。 碑文の下には、ユーザーにログインを促す「行動を促すフレーズ」ボタンがあります（2）。



視覚的階層で著しく低いのは代替アクションです。たとえば、Facebookの「いいね」ボタンは、現在のいいねの数も表示し、ユーザーにメインのアクション（登録）を実行させるよう説得します。



階層の最下位の要素は、プロジェクトのソーシャルプロファイルのビューです。

デザインに視覚的な階層を作成する

視覚的階層のガイドラインへのリンクを次に示します。

• デザインで視覚的な重みを使用する -視覚的な階層の位置に基づいて適切な視覚的な重みを選択するためのガイド
• デザインに焦点を当てる -デザイン要素に注意を引くためのテクニックの説明
• 設計におけるゲシュタルトの原則 -視覚的階層を構築するための有用なテクニックを暗示する心理学的理論（ゲシュタルト）のセット

メインアクションが最も顕著な要素であることを確認してください。

最初に、ユーザーが実行するアクションを決定する必要があります。 特定のボタンをクリックしますか？ Facebookページが好きですか？ フォームに記入しますか？



唯一のメインアクションを選択し、それにのみ焦点を合わせます。ページデザインはこのアクションのみに焦点を合わせる必要があります。

LPの例：enthuse.me

メインアクションが強調表示されているページの良い例はLP enthuse.meです：

LPの例：IFTTT

IFTTT LPの行動を促すフレーズがどのように印象的であるかに注目してください。

色と活版印刷を戦略的に使用する

ミニマルなLPを作成するWebデザイナーのツールは限られています。その中で最も重要なのは色と活版印刷です。

LPの例：Basecamp

Basecampは、色とフォントが大きな役割を果たすミニマルなLPの良い例です。







緑は、行動を促す主要な呼びかけに使用されます。 青は、マイナーなアクションコール（承認またはサービスを使用する25の理由の表示）に使用されます。



フォントサイズと要素の色のバリエーションにより、LP要素間で注意が正しく分散されます。

LPの例：パス

次の例はLPパスで、色と細かいフォントを使用して適切な視覚的階層を作成します。



主なアクション（フォームへの入力）には、注目すべき緑色が使用されています。







フォントサイズ、テキストの色、およびレイアウトの違いにより、LPはさまざまな注意領域に正しく分割されます。

できるだけ少ないテキストを使用します。

ユーザーがページでテキストを読むことはめったにないことが現在知られています 。 ユーザーが初めて目にする製品のLPでは、彼の忍耐はさらに小さいと想定するのは論理的です。



ミニマルなLPには短くて明確なラベルが必要です。 ユーザーが読む必要が少ないほど、必要なアクションをより速く実行できます。

LPの例：満足

Contentlyの本質は3つの言葉で説明できます-「Tell Great Stories」。 これが本質がコンテンツに焦点を合わせているサービスであることがすぐに明らかになります。 ページ上のテキストの量が最小限に抑えられ、ユーザーが迷う可能性が低くなります。

LPの例：出荷

LPの短いテキストの良い例はShipmentです。 「デザインを共有してレビューする」という5語のみで、ユーザーはShipmentがどのように役立つかを完全に理解する必要があります。

製品/サービスの本質を迅速に説明する

製品/サービスがどのように機能するかを示す多くの方法があります。 ここでの唯一のルールはシンプルさです。

ビデオの説明例：カップル

カップルプロジェクトでは、 動画がコンバージョンに大きなダメージを与える可能性があるという事実を踏まえて、動画を使用して作品の本質を説明しています。



画面中央のアイコンをクリックすると、ビデオが徐々に表示されます。







クリックすると、YouTubeビデオがモーダルウィンドウで開きます。 閉じるのは簡単なので、ユーザーは次の手順を実行する前にビデオ全体を見る必要はありません。







この例は、二次的なアクションとコンテンツに適用する必要があるルール、つまり段階的な発見も示しています。 ページ上のビデオには大きな視覚的重みがあり、視覚的階層に大きく影響するため、ユーザーが希望する場合にのみ開きます。

インタラクティブな説明の例：Apple Mac Pro

ミニマルなLP Apple Mac Proは、製品説明のもう1つの一般的なサブコードであるインタラクティブツアーを示しています。







説明は、注目を集めてページがインタラクティブであることを示すために、小さなアニメーションで始まります。

静止写真を使用した説明の例：Wallmob

LP Wallmobの高解像度写真は、写真を使用してメッセージを送信する例です。







Wallmobが何であるかを明確に示しています-モバイルデバイス用のキャッシュレジスタアプリケーションです。

複雑なシンプルさ

ご覧のとおり、LPのミニマリストデザインはシンプルなコンセプトに基づいています-焦点は1つだけの目標でなければなりません。



不要な要素を削除することにより、本当に重要な要素のみにデザイン（およびユーザーの注意）を向けることができます。