ホームページ

レスポンシブ対応テンプレでLP作成|無料・有料おすすめ9選

本記事では、

  • ランディングページ用HTMLテンプレートの基礎知識
  • 利用するメリット・デメリット
  • 無料/有料のおすすめテンプレート
  • レスポンシブランディングページの作り方

を中心に解説します。

注意点として、使用するテンプレートによってランディングページのパフォーマンスは大きく左右されるということを覚えておきましょう。

ランディングページに使える無料・有料おすすめHTMLテンプレート

さて、ここからはランディングページに向いているHTMLテンプレートをご紹介します。無料で利用できるもの、有料のものをそれぞれ集めてみましたので、チェックしてみて下さい。

デモサイトでイメージを確認できる場合もありますので、気になるテンプレートがあれば、まずはデモサイトを参考にしてみましょう。

無料のランディングページ用HTMLテンプレート

LPクリエイト / ランディングページテンプレート

LPクリエイト

画像引用元:「 LPクリエイト 」公式HP

ランディングページ専門の制作会社が提供している無料のテンプレートです。初心者でもストレスなくカスタマイズできるよう設計されているのもポイント。

また、短期間で作成したいという方にも向いているテンプレートになります。商用でも個人でも無料で使用でき、著作権表示もないのが嬉しいですね。

【 ポイント 】

  • 商用でも個人でも無料で気軽にダウンロードできる
  • 著作権表示なしで利用可能
  • 初心者でも簡単にカスタマイズできる

→ 詳細・ダウンロードはこちらから

テンプレどん / ランディングページテンプレート

テンプレどんHP

画像引用元:「 テンプレどん 」公式HP

使い勝手の良いとてもシンプルなランディングページ用のテンプレートです。こちらも商用・個人ともに無料で利用することができ、日本人が作成したテンプレートなので日本語にも合わせやすいです。

レスポンシブデザインで構築されているので、パソコンとスマートフォンそれぞれのページを作る面倒もなく、丁寧にデザインされているので1ページだけでしっかりと訴求できる印象があります。

そのまま使用しても良いですし、自由にカスタマイズして自社にとって理想的なデザインを追求するのにもぴったりなテンプレートです。

【 ポイント 】

  • スマホ対応・日本語にも合わせやすいHTMLテンプレート
  • シンプルで丁寧なデザイン
  • ファイルが軽量でユーザーに負担がかからない

デモサイトをチェック
→ 詳細・ダウンロードはこちらから

Freebie: Responsive Landing Page Template With Flexbox

Freebie

画像引用元:「 Freebie 」公式HP

flexbox に対応したレスポンシブデザインテンプレートです。Flexboxとは、「 Flexible Box Layout Module 」のことを指しており、その名の通りフレキシブルで簡単にレイアウトを組めるというものです。

例えば、コンテンツを上下左右、好きな順序に並び替えられたり、スペースも自由自在に操作できます!

こちらもこれまでのテンプレートと同様、特に特徴的なデザインではありませんが、レイアウトセンスが良く、スタイリッシュさのあるデザインです。

インパクトで勝負するというよりかは、洗練された世界観を出したい場合におすすめです。

【 ポイント 】

  • レイアウトセンスが良くスタイリッシュなデザイン
  • flexbox対応で編集操作が簡単
  • シンプルな海外風ページを作成したい人向け

デモサイトをチェック
→ 詳細・ダウンロードはこちらから

有料のランディングページ用HTMLテンプレート

Glint (Single Template License) - Colorlib

Colorlib HP

画像引用元:「 Colorlib 」公式HP

ブラック、ホワイト、グリーン3色の組み合わせがとてもかっこよく、オシャレな印象のテンプレートです。デザイン映えする商品のランディングページなどと効果は抜群です。

多種多様な商材・サービスに利用できる基本的なトピック要素が揃っているだけでなく、最後にはしっかりとフォームも設置してあるため、カスタマイズの必要もなくコンバージョンの獲得できる構成だと言えます。

無料ではありませんが21ドルほどで購入できるため、このテンプレートが気に入った方はほんの少し手を伸ばしてゲットされることをおすすめします。

同サイトから他のテンプレートもチェックできますので、自分にピッタリなテンプレートを見つけることができるでしょう。

【 ポイント 】

  • スタイリッシュでかっこいいイメージ
  • フォームもお洒落で魅力的
  • コンバージョンの獲得しやすい構成でカスタマイズ要らず

デモサイトをチェック
→ 詳細・ダウンロードはこちらから

Cruip

cruip HP

画像引用元:「 cruip 」公式HP

Cruipは元々スタートアップのために無料で配布されていたLPテンプレート集で、今風なレイアウトやエフェクトなど、スタートアップ要素のあるテンプレートが複数あります。

現在は49ドルと有料になっています。

ただ、49ドルで15パターンのテンプレートが利用できるだけでなく、今後新しくリリースされるものも利用できたり、1年間のサポートも付いてくるなどメリットは多いです。

レスポンシブに対応した動きのあるテンプレートで、カスタムメイドのSVGファイルも付いているとか。カスタマイズしやすいように制作されています。

【 ポイント 】

  • 様々なスタートアップにマッチするテイスト
  • カスタマイズしやすく設計されており、使い勝手が良い
  • 有料だが複数のテンプレートを利用できる

デモサイトをチェック
→ 詳細・ダウンロードはこちらから

カラフルなLPは「Bootstrap」のテンプレートで決まり!

Bootstrap HP

画像引用元:「 bootstrap 」公式HP

Bootstrap(ブートストラップ)は、Twitter社が開発したウェブサイト制作のためのフレームワークです。

ランディングページ制作に特化されたものではありませんが、国内外のハイセンスなテンプレートが無料で提供されていることで人気があります。

Bootstrapで作成するランディングページも、レスポンシブ対応機能が備わっており、スマートフォンにも美しく表示されます。

こちらも制作の際は他のテンプレートと同じく、白紙の状態からCSSを書く必要はないため、初心者の方でも気軽に使うことができます。

ただし、カスタマイズをしたい場合は他のテンプレートと同様に最低限のコーディング知識が必要になることは忘れないで下さい。

では次に、Bootstrapを使ったおすすめのテンプレートを4つ紹介します。

Rooky - Bootstrap

rooky-app

画像引用元:「 rooky.app 」公式HP

こちらのBootstrapテンプレートは、アプリを紹介するランディングページに特化して設計されたものです。どこか爽やかさも感じるユニークなデザインと、カスタマイズ性にも優れているところも特徴。

【 ポイント 】

  • アプリの紹介に特化されたテンプレート
  • ユニーク且つ、ミニマルでモダンなデザイン
  • スクロールアニメーション付きのナビゲーションメニュー有り

デモサイトをチェック
→ 詳細・ダウンロードはこちらから

Landing Page - Bootstrap

Landing Page HP

画像引用元:「 Landing Page 」公式HP

こちらも同じくBoostrapに対応したランディングページに使えるHTMLテンプレートで、無料で利用できます。

デザイン性は保ちながらも、端的で分かりやすいランディングページを作りたい人にはおすすめです。

【 ポイント 】

  • シンプルかつデザイン性のある汎用性の高いテンプレート
  • トップ画像上にメールアドレスを入れるボックス有り
  • 製品やサービスの必要な情報だけを伝えられる

デモサイトをチェック
→ 詳細・ダウンロードはこちらから

Valet - Bootstrap

Valet HP

画像引用元:「 Valet 」公式HP

Boostrapに対応したテンプレートの中でも、爽やか且つ上品な印象の海外製デザインです。

ランディングページに必要なポイントを押さえた万能なテンプレートで、エフェクトなどには最新のデザインが搭載されているのもポイントです。

【 ポイント 】

  • 爽やか且つ上品なデザイン
  • ランディングページに必要なコンテンツが揃っている
  • 日本語を配置しても違和感のないデザイン設計

デモサイトをチェック
→ 詳細・ダウンロードはこちらから

Honoka - Bootstrap

Honoka画像引用元:「 honoka 」公式HP

こちらは、日本語対応の数少ないBootstrapテンプレートとなっています。

他の海外版テンプレートとは違って、説明もすべて日本語なので困ることはありません。

さすが日本語対応ということもあり、日本語フォントが美しく表示されるようにカスタマイズされているデザインも嬉しいです。

【 ポイント 】

  • 日本語対応のテンプレート
  • 日本語のフォントがキレイに表示されるデザイン設計
  • 既にBootstrapを使って作成したページのCSSを置き換えるだけで簡単に利用できる

デモサイトをチェック
→ 詳細・ダウンロードはこちらから

そもそもレスポンシブ対応って何?

PCとスマホでfacebookを見る人の写真

今日、インターネットはパソコンだけでなく、スマートフォンやタブレットといった様々なデバイスで利用されています。

当たり前ですがデバイスごとに画面サイズは異なるため、それぞれのデバイスで見やすいランディングページを作成する必要がありますよね。

そこで大活躍するのが、「 レスポンシブ対応 」というページ機能です。

レスポンシブ対応とは、パソコン、スマートフォン、タブレットなど異なるデバイスから見たときのページレイアウト・デザインを最適化してくれる機能のことを言います。

これまでは、パソコン、スマートフォン、タブレットと、デバイスごとでURLが別々に分かれていました。

しかし、レスポンシブ対応のデザインでは同一のHTMLファイルを利用するため、SNSなどでシェアする際に分散する問題もありませんし、管理や修正作業が一括で済むというメリットもあります。

また、レスポンシブデザインはGoogleなどの検索エンジンも推奨しており、SEO対策にも有効だというところも大きなメリットです。

テンプレートがレスポンシブ対応しているかどうかを判断するには?

テンプレートがレスポンシブ対応かどうか判断できず不安な場合、簡単に判断する方法は主に3つあります。

  1. デモサイトがあればブラウザサイズを変更して表示形式が変わるか確認する
  2. パソコンで見たときとスマホで見たときのURLが統一されてるか確認する
  3. CSS3で構成されているか確認する

ランディングページ用HTMLテンプレートとは?

PCでサイトを検索する男性

今回紹介するランディングページ用HTMLテンプレートとは、ランディングページの「 ひな型 」となるツールのことを指します。

制作に必要なHTML、CSS、JavaScript、画像などのファイルが、事前にセットで準備されている、すごく便利なものだと考えると分かりやすいです。

デザインのベースにしたいテンプレートを選んで、各コンテンツにテキストや画像を入れると、簡単にランディングページを制作することができます。

ランディングページの特徴は、扱う商品やサービスが異なっても、ページの素材となるコンテンツは基本的には変わりません。

例えば、

  • ファーストビューにはメイン画像とアイキャッチ
  • 商品から得られるベネフィットについての説明
  • 申し込みのフォーム

といったような形です。

そのため、どんな商品やサービスを扱う企業でも、多くのHTMLテンプレートを選択肢に入れることができます。

もちろん業界に特化したテンプレートもあるので、その場合はそちらを利用するのも手でしょう。

HTMLテンプレートにはデザインと機能がすでに用意されているので、何もないところからコツコツと制作を始める必要がなく大幅な時間短縮に繋がります。

さらに、初心者の方でもプロが作ったかのようなオシャレなランディングページを作ることもできます。

特にレスポンシブWEBデザインなど制作工数がかかるものは、HTMLテンプレートの利用をおすすめします。

慣れたらカスタマイズにも挑戦しよう!

ダウンロードしたHTMLテンプレートは、自由にカスタマイズすることもできます。

初心者の方では少し難しいですが、少々技術力がある方であれば、テンプレートにプラスアルファの要素も取り入れ、より自社のイメージに近いランディングページに仕上げることも可能です。

HTMLを学習している人にとって、テンプレートはプロの技術を学べるというメリットもあります。

ランディングページ用テンプレートを利用するメリット・デメリット

メリットとデメリットとスマホの写真

ランディングページ用テンプレートを利用する前に知っておいてもらいたいメリットとデメリットをまとめてみましたので、順に見てみましょう。

メリット① 低コストで作成できる

制作会社にランディングページの制作を依頼する場合、その相場は10万円〜70万円とも言われています。また、修正箇所があったりすると、その都度追加費用が必要になります。

その点、テンプレートを利用するのであれば先ほど紹介したように無料のものもありますし、有料でも数千円などで嬉しい機能が付いているものもあります。

どちらにせよ、制作会社に依頼するより断然安く抑えることが可能です。

メリット② HTMLなどに関する知識がなくても作成できる

通常、ランディングページの制作・構築にはHTMLやCSS、JavaScriptなどの少し複雑なコーディング知識が必要ですが、テンプレートを使えばそれらの知識がなくても簡単にオシャレなページを作成できます。

プロが用意してくれたデザインをそのまま使えるため、配色や配置のセンスなども問われないのが嬉しいです。

メリット③ 運用しながらより良くするための改善ができる

ランディングページの効果を向上させるには、PDCAサイクル( Plan→ Do→ Check→ Act )を回すことは欠かせません。

その点で、テンプレートを利用すれば制作時間はカットでき、最終確認をした後はすぐにページを公開できます。

運用中、もし気になるところがあれば制作会社など専門的な会社に依頼する必要なく、その場ですぐに修正できるのも、自社で制作する強みの1つです。

それだけでなく、ページのコピーも簡単にできるので、リスティング広告のキーワードを複数に分ける場合などは、キャッチコピーや文言を少し使い分けたランディングページを複数用意することも容易です。

デメリット① テンプレートなのでオリジナル感が出せない

特に無料や、比較的安いテンプレートの場合はシンプルで凝ったデザインが少ないため、扱う商品やサービスによってはイメージとズレが生じ、印象を悪くしてしまう可能性もあります。

初心者だけどカスタマイズをしたいという方は、WordPressのテーマやプラグインを利用すると知識がなくても感覚的に組み立てられるのでおすすめです。

レスポンシブ対応のランディングページの作り方・注意点

資料を確認している男性二人のイラスト

 

①テンプレートをダウンロード

上記の一覧などから利用したいテンプレート見つけたら、まずはそのテンプレートをサイトからダウンロードしましょう。HTMLファイルをゲットできます。

②HTMLファイルを編集

続いて、HTMLファイルの内容を編集し、自社のコンテンツに差し替えます。テキストや画像がデモ画面のままになっていることが多いので、隅々までチェックしましょう。

HTMLやCSSの知識がある方は、細かいカスタマイズにも挑戦するのもありです。

③ブラウザで表示確認をしたらサーバーにアップ

ランディングページの編集作業が完了したら、問題がないかブラウザで表示確認をしましょう。そして、問題がなければサーバーにアップします。

足りないファイルがあると表示が崩れる可能性がありますので注意してください。

そして最後に、サーバーアップ後にブラウザで最終確認をして、問題なく表示されていればランディングページはこれで完成です!

WordPress( ワードプレス )で作成する場合は?

WordPress上でランディングページを作成する際に、WordPress専用のテンプレート( テーマ )を使用する場合も、先ほど説明した作業手順とほとんど同じ流れになります。

ダウンロードしたテーマをインストールすると、そのテーマを使用できるようになります。使いたいテーマを有効化したら、次はランディングページの中身をWordPress上で作成していきます。

【 ポイント 】

WordPressの場合は、これまでに紹介してきたHTMLテンプレートと異なり、WordPressの管理画面上で行うことになります。

最近では、ドラッグ&ドロップなどで感覚的に編集作業ができるテーマが多くなったので、HTMLの知識はないけれど、カスタマイズしたい方にはWordPressでランディングページを作成することもおすすめです。

▼WordPressでのランディングページ作成に興味のある方はこちら▼

関連記事:WordPressでランディングページを作成する方法|おすすめのテーマ・プラグイン9選

外国版テンプレートを利用する場合の注意点

黄色い背景で考え事をしている男女の写真

本記事でも多数紹介しましたが、外国製のテンプレートといえば洗練されたオシャレなデザインも多く、つい利用したくなりますよね。

ただ、外国製のテンプレートを利用する際には注意したいこともあります。

  • 英語だった部分に日本語を入れてみたら、少し違和感があった
  • 英語だとかっこよかったのに、日本語にした途端そうでもなくなった

このようなことを思った場合は、フォントやフォントサイズを調整してみると解決されることがあります。

また、見出しだけでもWEBフォントでアクセントを付けてみると、日本語独特の野暮ったさが無くなり、おしゃれな雰囲気を出すこともできますよ!

WEBフォントは、最近では無料でゲットできるものも増えているそうなので、フォントにこだわりたい方はぜひ調べてみてください。

関連記事:ランディングページのおすすめテンプレート20選

まとめ

虫眼鏡で本の内容を見ている男性のイラスト

今回はランディングページ用HTMLテンプレートの基本的な説明から、おすすめのテンプレート、作成方法まで通して紹介させていただきました。

テンプレートはコストの低さが魅力ではありますが、後々全く成果が出ずに後悔するなんてことのないよう、目的や用途に適した機能を備えているかどうかを見極めて選ぶようにしましょう。

ここまで読んでくださった方は理解されている思いますが、ランディングページは一度完成させたらそれで終わりではありません。

本記事でも少し触れましたが、コンバージョン率( 成約率 )をより向上させるには、運用前のテストや、運用中の検証も必ず必要となります。

テンプレートを利用される方は、自社で作成・修正するというメリットを活かして改善を繰り返し、効果的なランディングページを作り上げましょう!

あわせて読む

LPにおけるコンバージョン率の平均とやるべき11の事