レスポンシブ対応で便利！活用できるランディングページのテンプレートは？

webページは、パソコン、タブレット、スマートフォンといったさまざまなデバイスで閲覧されます。デバイスごとに画面サイズが異なるため、それぞれのデバイスで見やすいページを作成する必要があります。その方法の一つがレスポンシブデザインで、パソコン用、スマートフォン用として別々のURLを持つのではなく、共通のHTMLファイルを画面サイズに合わせて表示します。レスポンシブ対応デザインは、同一のHTMLファイルを利用するため、管理や更新作業が一括でできるというメリットがあります。

それでは、実際にはどうやってデバイスごとに表示を変えるのでしょうか。HTMLは同一ですが、デバイスによっての表示はCSS3のメディアクエリを利用します。画面幅ごとに適応CSSを変えるという指示を記述することで、デバイスごとの表示切り替えが可能となります。



実際、レスポンシブ対応デザインを使用するとデバイスごとに表示切り替えが可能になりますが、パソコンとスマートフォンで表示が少し異なります。
例えば、パソコンの場合は、メニューが画面上部横一列に表示されていても、スマートフォンの場合は、該当部分をタップするとメニューが開くようになります。

さらに、レスポンシブ対応デザインを作成するときは、いくつか必要な技術的要素があります。

1つ目は、レイアウトを構築する技術です。
レイアウトを修正するときに、CSSを活用します。
CSSを用いてページレイアウトを構成する技術がなければ、実際に作成することは難しいと言えます。

2つ目は、デバイスごとのCSSを適用する要素です。
レスポンシブデザインを作成するにはデバイスごとのCSSを適用する要素が必要で、これをメディアクエリと言います。
例えば、表示領域の幅によってどのCSSを適用すると良いのかという指示が出せます。

レスポンシブデザインを作成するには、柔軟なレイアウトアプローチだけではなく、最適化が難しいです。
そのため、メディアクエリに関して理解が必要です。

3つ目は、画像サイズの調整です。
レスポンシブデザインでは、表示領域が画像の元のサイズよりも狭くならない限り全ての画像が元のサイズで読み込まれます。
そのため、レイアウトだけではなく、画像サイズの調整技術も必要なのです。

また、レスポンシブデザインは、検索エンジンが推奨していることもあり、SEO対策にも有効だと言われています。さらに、デバイスごとにURLが分かれていないためSNSでのシェアが分散しません。
それもレスポンシブ対応のメリットの一つです。

先ほど、管理や更新作業が一括でできるというメリットや、デバイスごとにURLが分かれていないためSNSでのシェアが分散しないことをメリットとして挙げましたが、このようにいくつかメリットが挙げられます。

1つ目は、情報がみやすくなることです。
今までは、専用のデバイスで閲覧しなければ、レイアウトが崩れて内容が正しく表示されませんでした。

しかし、レスポンシブデザインは、ユーザーが使用しているデバイスに関係なく自動調整します。
そのため、最適なレイアウトの表示が可能になり、情報が読みやすくなります。

2つ目は、アクセス解析が簡単になることです。
今までは、URLごとにアクセス解析を行う必要がありました。
URLごとにアクセス解析を行うとなると面倒に感じる方も多いでしょう。

しかし、レスポンシブデザインにすることで、アクセス解析のデータも一括で把握できるようになります。

3つ目は、Webサイトの管理が簡単になることです。
どのデバイスでもひとつのファイルで対応できるので、管理が簡単になります。
今までの方法は、Webサイト上の情報を更新するときは、デバイスごとに調整する必要がありました。
レスポンシブデザインにすることで、複数のHTMLを調整するのではなく、1回の更新で作業が終わります。

4つ目は、検索サイトで上位に表示されやすくなることです。
今までは、サイトを作るときは、パソコン専門のWebサイト、スマートフォン専用のWebサイトなど、別々のURLを用意する必要がありました。

しかし、先ほども紹介したようにレスポンシブデザインではURLが統一されます。
URLが統一されるということは、検索エンジンの評価がひとつにまとまり、順位の向上につながります。

ここまでメリットについて紹介しましたが、デメリットも存在します。

1つ目は、Webサイトの制作に時間がかかることです。
レスポンシブデザインにするときは、ひとつのHTMLファイルの中にデバイスごとにデザインを制作して、それに合わせたコードを埋め込んでいきます。
通常より手間がかかりますが、後にWebサイトの管理が楽になります。

2つ目は、デザインに制限があることです。
スマートフォンの読み込みに時間がかからないサイトにするには、シンプルなデザインが好ましいと言えます。
そのため、読み込みに時間がかからないことを重視したい方は、凝ったデザインや大きな画像は避けることをおすすめします。

使ってみたいと思ったテンプレートがレスポンシブ対応かどうかはどうやって見分けたら良いのでしょうか。

まず、前述の通りレスポンシブデザインはデバイスごとにHTMLファイルを分けないため、URLが統一されています。表示の切り替えはCSSで行いますが、そのための指示はCSS3のメディアクエリを利用します。そのため、テンプレートがCSS3で構成されていることが、レスポンシブ対応テンプレートの条件でもあります。テンプレートがレスポンシブ対応かどうかを判断するには、CSS3で構成されているか、URLが統一できるかどうかを確かめるようにしましょう。

また、テンプレートのデモサイトがある場合は、実際にブラウザサイズを変えてみることでレスポンシブ対応かどうか確かめることもできます。レスポンシブ対応の場合は、ブラウザ幅が小さくなれば、タブレット、スマートフォンで閲覧するのと同様の表示が確認できるでしょう。

ランディングページのテンプレートはたくさんありますが、レスポンシブ対応でなければデバイスごとに複数のページを作らなければなりません。ここからは、レスポンシブ対応しているテンプレートの中で無料で使える4種類を紹介します。

続いて、ワードプレスで使える有料のレスポンシブ対応テンプレートを4つ紹介します。

テンプレートを利用してランディングページを作成する場合、まずはテンプレートをダウンロードしましょう。続いて、ダウンロードしたテンプレートを、作成したいランディングページの内容に合わせてHTMLファイルを編集します。テキストや画像がデモ画面そのままになっていることがほとんどなので、細かな部分も忘れずに編集しましょう。HTMLやCSSの知識がある場合は、細かなデザインのカスタマイズを行うこともできます。ブラウザで表示の確認をして、問題がなければサーバーにアップします。使用する画像やCSSファイルなど、漏れがないようにアップロードしましょう。足りないファイルがあると、表示が崩れてしまうかもしれません。サーバーアップ後にブラウザで確認をして、きちんと表示されていればランディングページの完成です。

ワードプレスのテンプレートを使用する場合も、たいていは同じような作業手順となります。ダウンロードしたテーマを、ワードプレスを導入したサイトにインストールするとテーマが使用できるようになります。テーマを有効化したら、ランディングページの中身を作成していきます。ページの中身に関しては、HTMLテンプレートと違ってワードプレスの管理画面上で行います。必要に応じてデザインや構成をカスタマイズしたらランディングページの完成です。

テンプレートを利用すればランディングページは比較的簡単に作成できます。しかし、HTMLやCSSにあまり詳しくないと、テンプレートがレスポンシブ対応かどうかの判断が難しいことがあります。さらに、テンプレートはダウンロードしたそのままでは使うことができません。自社のランディングページの内容に書き換える必要があります。その際に、HTMLやCSSの知識がないと、間違った箇所を変更して表示が崩れてしまうかもしれません。テンプレートをある程度カスタマイズするには、どうしてもHTMLやCSSの知識が必要となります。確実にレスポンシブ対応のランディングページが作成したいのであれば、制作会社に相談するのがおすすめです。テンプレートでは実現できないデザイン面などの要望を聞いてもらえたり、SEO効果の高いページを作成してもらえたり、制作会社に依頼することには金額以上のメリットがあります。オリジナリティに溢れ、コンバージョン率の高いランディングページを作成するために、制作会社への依頼を検討してはいかがでしょうか。