レスポンシブランディングページテンプレートがより良いランディングページを作成する理由
公開: 2016-05-14さておき、レオナルドディカプリオ。 メリル・ストリープ、上に移動します。
結局のところ、世界で最高の俳優は、ハリウッドの映画セットではなく、インドネシアの海の沈泥と砂の中にあります。
世界で最も驚くべき役割のプレーヤーは、適切に吹き替えられたミミックオクトパスであり、海で最も致命的な生き物の一部に扮した毎日の水中ドラマを実行します。 ウミヘビ、縞模様の靴底、ミノカサゴにすばやく変身する能力（このマスター印象派にとって複雑すぎる動物はいない）は、自然界で最も順応性のある生き物の1つです。
ミミックオクトパスは、よく引用されるダーウィンの発言を具体化したものです。
「生き残るのは最強の種でも、生き残るのに最も賢い種でもありません。 変化に最も適応できるのはそれです。」 - チャールス・ダーウィン
適応は動物界に固有のものではありません。 それはデジタルマーケティングで大きな役割を果たし続けています。
どのように？
レスポンシブウェブサイトのデザイン。
モバイルのマルチスクリーンの世界への適応
iPod、携帯電話、タブレットよりも前のWebデザイナーにとって、物事ははるかに簡単でした。 インターネットユーザーは、サイズがあまり変わらないデスクトップ画面とラップトップ画面を厳密に閲覧していました。つまり、ほとんどのWebサイトは、どこで表示しても同じように見えました。
しかし、私たちが親指でWebサーフィンを始めたとき、それはすべて変わりました。 2014年、世界中のインターネットトラフィックの大部分はモバイルからのものでしたが、それ以来、そのようになっています。
1年後、2008年のわずか20分と比較して、モバイルデバイスで1日平均約3時間過ごしました。
この変化は、インターネットユーザーがウェブを閲覧した多くの画面サイズに適応できない「固定デザイン」のウェブサイトに対する嫌悪感をもたらしました。 それらを満足させるために、新しい技術を開発しなければなりませんでした。
クリックしてツイート
アダプティブデザインとモバイルの初期
モバイル革命が数年前に始まったとき、最初はデスクトップ以外のユーザーに合わせてWebサイトを調整する最も一般的な方法は、まったく異なるモバイルバージョンのサイトを作成することでした。
これに関する大きな問題は？
ウェブサイトのメンテナンスを2倍にします。 あなたはあなたのウェブサイトのモバイル版とデスクトップ版の両方のために別々のSEOキャンペーン、PPCキャンペーン、コンテンツ戦略を必要としていました。 しかし、人々は当然のことをしました…
それは、画面サイズと解像度の数が多すぎて追いつけなくなるまでです。
Ofcomの2014年のインターネット使用状況レポートのこの図は、さまざまなデバイス設定を示しています。
Smart Insightsの別のビジュアルは、1日を通して人々のデバイスの好みを示しています。
そして、要点を打ち明けるには？ 「Galaxy」シリーズでSamsungが製造したさまざまなモバイルデバイスをすべて見てください。
スティーブ・カートライトが説明するように、あなたのウェブサイトの複数のバージョンを構築することはうまくいかないことが明らかになりつつありました。
「最近では、このアプローチの問題は、何かがモバイルデバイスで表示されるように作られているからといって、すべてのモバイルデバイスで表示できるとは限らないということです。」
それでも、アダプティブデザインに固執する人もいます。グーグルがチャイムを鳴らして、検索アルゴリズムがレスポンシブなサイトに報酬を与えるようにすぐに変更され、そうでないサイトにペナルティを科すまで。
「2015年4月21日より、ランキングシグナルとしてのモバイルフレンドリーの利用を拡大していきます。 この変更は、世界中のすべての言語でのモバイル検索に影響し、検索結果に大きな影響を与えます。 その結果、ユーザーは、デバイスに最適化された、関連性の高い高品質の検索結果を簡単に取得できるようになります。」
（ある時点でレスポンシブWebサイトは検索結果で上位にランク付けされていましたが、検索エンジンは適応サイトにも対応するように調整されていることに注意してください。）
メッセージは明確でした：より多くのデバイスに適応するか、（少なくとも検索ランキングでは）時代遅れになります。
どのように？
レスポンシブデザインを使用する。
クリックしてツイート
レスポンシブデザイン：それは何ですか、そしてそれはどのように機能しますか？
結局のところ、Googleは「Mobilegeddon」の最後通告を出すずっと前からレスポンシブデザインを提唱してきました。具体的には次のようなことを言っていました。
「モバイルフレンドリーなサイトを構築する準備ができたら、レスポンシブウェブデザインを選択してください」
「レスポンシブデザインはGoogleが推奨するデザインパターンです」
しかし、このテクニックには何が必要でしたか？ なぜアダプティブデザインよりも優れていたのですか？
これらの質問などに答えるために、Verveは、技術者以外の人が理解できる方法で物事を分解する素晴らしいインフォグラフィックを作成しました。 いくつかのハイライト：
スマートフォンを横向きにし、上下逆にします。向き、デバイス、ブラウザに関係なく、ユーザーコンテンツは常に適切に表示されます。 しかし、どのように？
「孤立したモバイルWebサイトとは異なり、レスポンシブデザインは、流動的な比率ベースのグリッドと柔軟な画像を使用して、レイアウトを表示環境に適合させます。」
基本的に、適応型Webサイトが特定の画面サイズに合わせて調整されている場合、レスポンシブWebサイトは、表示されていたデバイスの全画面のパーセンテージを使用して設計されました。 デスクトップ画面とモバイル画面の違いを視覚化するのに役立つ優れたGIFを次に示します。
レスポンシブウェブサイトの要素は、画面の特定の割合を占めるようにコード化されているため、サイズに関係なく、画面のその部分を占めます。
レスポンシブなクリック後のランディングページの例
レスポンシブページがさまざまなデバイスでどのように表示されるかを示すために、3つの例を見てみましょう。
Tableau
パルスポイント
ファンドボックス
静的なクリック後のランディングページの例
それでは、レスポンシブでないページがさまざまなデバイスでどのように表示されるかを見てみましょう。 モバイル版が画面サイズに合うようにはるかに凝縮されており、ユーザーフレンドリーではないことに注意してください。
Alteryx
レスポンシブデザインはそれだけの価値がありますか？
多くのケーススタディによると、レスポンシブ技術を使用してWebサイトを再設計すると、収益に大きな影響を与える可能性があります。 すでに適応している企業からのいくつかの結果をチェックしてください：
- Electric Pulpは、AppleデバイスでのO'Neill衣料品会社のコンバージョンを65.71％、トランザクションを112.5％、収益を101.25％押し上げます。 Androidデバイスはさらに印象的なブーストを誇り、コンバージョンは407.32％、トランザクションは333.33％、収益は591.42％向上しています。
- レスポンシブウェブサイトのデザインを使用して、Baines＆Ernstは、訪問あたりのページ数を11％、平均訪問時間を30％、モバイルコンバージョンを51％増加させ、バウンス率を8％減少させました。
- 衣料品小売業者を迅速に再設計したGravityDepartmentによると、SkinnyTiesのウェブサイトは次のように述べています。 過去3か月に対する正規化された数値は驚異的です。」
例
Skinny TiesのWebサイトの新しいバージョンは、いくつかの主要業績評価指標を急上昇させることに成功しました。
- すべてのデバイスで42.4％の収益成長
- iPhoneの377.6％の収益成長
- コンバージョン率が13.6％増加
- iPhoneでのコンバージョン率が71.9％増加
- 平均訪問期間が44.6％増加
- TIMEマガジンは、ウェブサイトを9か月間レスポンシブにリホールすることで、モバイルリーダーの増加する割合に適応しています。 結果はそれ自体を物語っています、とEconsultancyのDavidMothは言います：
- モバイルとタブレットのトラフィックは、再設計前のサイトトラフィックの15％から現在はほぼ25％になっています。 その大部分は、古いWAPサイトを使用していた人々の新しいサイトへの移行でした。
- モバイル、タブレット、デスクトップ全体での訪問あたりのページ数（PPV）は「大幅に」増加しています。たとえば、モバイルPPVは23％増加しました。
- ホームページでは、ユニーク訪問数が15％増加し、費やした時間は7.5％増加し、モバイルバウンス率は26％減少しました。
レスポンシブフロントからのすべての良いニュースのように聞こえます。 では、なぜ誰もが反応しないのでしょうか。
すべてのWebページが応答しないのはなぜですか？
Nielsen Norman Groupの記事によると、いくつかの理由があります。
- レスポンシブウェブサイトは通常、読み込みに少し時間がかかります。
- レスポンシブウェブサイトを作成するには、より高いレベルの開発スキルが必要です。 そのスキルがない場合、アウトソーシングは高額になる可能性があります。
- レスポンシブサイトは、アダプティブサイトのように複雑なタスクを常に実行できるとは限りません。また、小さなデバイスのスプレッドシートなどのリッチメディアのサイズを変更することもできます。
では、レスポンシブWebサイトを開発する時間やスキルがない場合、または再設計を専門家にアウトソーシングするための資金がない場合は、どうすればよいでしょうか。
これに対する答えについては、Googleに戻って参照します。
「 …ウェブサイトにレスポンシブテンプレートまたはテーマを選択します。 レスポンシブテンプレート/テーマは、訪問者がデスクトップ、タブレット、または携帯電話を使用しているかどうかに関係なく、訪問者に表示を適合させます。」
Instapageのシンプルなレスポンシブポストクリックランディングページソフトウェア
Instapageを使用すると、すべてのデバイスでコンテンツを美しく表示するクリック後のランディングページを簡単に設計できます。 方法は次のとおりです。
ステップ1：Instapageアカウントにログインします
もちろん、ステップ1は、Instapageアカウントにログインすることです。 まだお持ちでない場合は、こちらで作成できます。
入ったら、「CreateNewPage」ボタンをクリックします。
ステップ2：作成方法を選択する
これで、レスポンシブなクリック後のランディングページの作成を開始するための3つのオプションを示すポップアップが表示されます。
- クリック後のランディングページのデザインを保存した場合は、「。instapage」ファイルをアップロードできます
- プレミアムアカウントのメンバーは、あなたのウェブサイトから私たちのエディターにページをスキャンすることができます
- ゼロから始めたい場合は、事前に設計されたレスポンシブなクリック後のランディングページテンプレートの1つを選択してください
ステップ3：使用するレスポンシブクリック後のランディングページテンプレートを決定する
レスポンシブなクリック後のランディングページを最初から作成したいとします。 テンプレートの1つを選択する前に、ページ上部のメニューを使用して作成するクリック後のランディングページのタイプでテンプレートを並べ替えます。
から選びます：
- リードジェネレーションのクリック後のランディングページ
- リード生成（2ステップ）クリック後のランディングページ
- クリックスルーポストクリックランディングページ
- ウェビナーのクリック後のランディングページ
- モバイルアプリのクリック後のランディングページ
- 「ありがとう」のクリック後のランディングページ
ステップ4：レスポンシブなクリック後のランディングページを作成する
クリエイティブになる時が来ました。 ページ上の任意の要素をクリックして選択し、マウスをクリックして削除、ドラッグ、または編集します。 これが私たちのように見えるものです：
そして、これがモバイルでどのように見えるかです：
画面の左上にあるページのモバイル版とデスクトップ版を切り替えてプレビューし、右上の[プレビュー]ボタンを押します。
レスポンシブなクリック後のランディングページをより説得力のあるものにするには、次を追加します。
- 説得力のある見出し
- 目を引く画像
- 利益志向のコピー
- 社会的証明のダッシュ
- いくつかの推薦状
これで、レスポンシブなクリック後のランディングページを公開する準備が整いました。
ステップ5：レスポンシブなクリック後のランディングページを公開する
レスポンシブなクリック後のランディングページは、Instapageで簡単に公開できます。 次に、マウスカーソルをページの右上隅に移動し、青い[公開]ボタンをクリックします。
これを行うと、次のようなポップアップが表示されます。
次に、5つの異なる公開オプションから選択します。 あなたはできる：
- 独自のカスタムドメインに公開する
- レスポンシブなクリック後のランディングページへWordPress
- Drupalにアップロードする
- レスポンシブなクリック後のランディングページをFacebookに追加します
- または、[Instapage]をクリックして、クリック後のランディングページをサーバーでホストします。 （私たちはあなたをホストするのが大好きですが、ブランドの一貫性のために他のいずれかを選ぶことをお勧めします）。
そして今、あなたは終わりました！ とても簡単です！
応答性の高い設計
今日、Webサイトの訪問者は、使用しているデバイスに合わせたエクスペリエンスを期待しています。 レスポンシブなクリック後のランディングページを最初から作成する時間、リソース、スキルがない場合、または専門家にアウトソーシングするための資金がない場合。 今すぐInstapageEnterpriseデモにサインアップしてください。