ランディングページの作り方！HTMLの知識は必須？LP制作ツールとの比較も解説

ランディングページの作成を考えているけど、どんな風に作ったら売上につながるのかがわからないといった悩みを抱えていませんか？

上記のような悩みがあるの人もいるのではないでしょうか？そこでこの記事では、ランディングページの作り方を解説していきます。また、HTMLの知識が必要かどうかや、便利なツールについても触れています。ぜひ最後までお読みください。

ランディングページを作成する際は、以下のようなステップで進めていきましょう。

ここからはそれぞれの工程について解説していきます。

ランディングページ制作では、はじめに目標設定とペルソナ設計を行います。目標設定とは、ランディングページのゴールとも言えます。目標設定の例としては、以下のようなものがあります。

目標が決まったら、ペルソナ設計を行いましょう。ペルソナ設計とは、制作するランディングページの読者を想定して、ユーザーの属性を詳細に設定していく作業のことです。どんなユーザーをターゲットにしていて、そのユーザーがどんな職業で、どんなことに関心を持っているのかなど、具体的に考えていきます。ペルソナ設計を行うと、ユーザーに寄り添ったランディングページになります。

目標設定とペルソナ設計が完了したら、構成案・ワイヤーフレームの作成に移ります。構成案・ワイヤーフレームとは、ランディングページをどのように設計するかを記したドキュメントのことです。構成案には以下の要素が必要です。

こうした要素について、何をどんな風にランディングページ に盛り込むかを明確にしていきます。構成案を用意することで、制作の方向性をチームで共有することができます。

構成案を作成したら、ページの作成に移ります。はじめにライティングを行います。ライティングとは、ランディングページのテキストやキャッチコピーなどを作成していくことです。ユーザーに訴求したい商品・サービスの詳細や魅力、利用することでどのようなメリットがあるかなど、情報をまとめていきます。そしてテキスト・キャッチコピーが完成したら、ランディングページのデザインを作成していきましょう。商品・サービスを魅力的に見せるのはもちろん、ユーザーを申し込み・問い合わせフォームまで誘導できるよう、導線を確保することが大切です。

ライティング・デザインが完了したら、コーディングに移りましょう。コーディングとは、HTMLやCSSなどの言語を使って、Web上にページをアップロードできるように、デザインをファイルに反映していくことです。この際ポイントとなるのが、レスポンシブになるように組み込んでいくことです。

レスポンシブとは、スマホやタブレット、PCなど、デバイスの画面サイズに合わせて表示を変えることができることです。昨今ではPCのみならず、スマートフォンで閲覧するユーザーが増えています。ユーザーにとって利用しやすいページにするには、レスポンシブデザインにすることが大切です。

デバイスごとのランディングページ制作については、下記の記事も参考にしてみてください。
LPの進化具合が面白い｜株式会社ヒロックラボ

ファイルを作成したら、公開作業に入ります。ただし、いきなり公開するのではなく、あらかじめテスト環境でチェックすることが大切です。その際、以下のポイントを確認しましょう。

ランディングページに誤った情報を記載してしまうと、ユーザーからの信用を失ってしまいます。こうした事態に発展しないよう、日付や値段、リンクなどを確認しましょう。そして、公開時に正しく反映されるよう、表示崩れについても確認してください。

実際に作成するにあたり、HTMLの知識は必要なのでしょうか。このテーマについては、以下のような考え方があります。

ここからはそれぞれの考え方について解説していきましょう。

完全にオリジナルのランディングページを作成する場合は、HTMLの知識は必要となります。その理由は、ゼロから作成するには、ランディングページ制作にはHTMLやCSSを使うからです。いわゆるコーダーとしての知見が必要になってくるため、知識がない人にとってはかなら難しくなります。とはいえ、HTMLやCSSの知識がなければ、絶対にランディングページを作成できないという訳ではありません。

テンプレートを使用すれば、HTMLやCSSの知識が不要な場合もあります。これはCMSのように、あらかじめ用意されたテンプレートを組み合わせてランディングページを作成していく方法です。本来であればカラムなどの構成はコードを使って組み込むものですが、テンプレートの場合はあらかじめコードが書き込まれています。そのため、感覚的にパーツを組み合わせるだけで、簡単にページが作成できるのです。

ただし、制作の担当をする場合は知識があった方がいいでしょう。その理由は、ランディングページを運用していると、改善点や問題点を発見することがあるからです。例えば、申し込みボタンへの流入が悪い場合、なぜユーザーが申し込みボタンまでスクロールしていないのか理由を考えなければなりません。その際、知識があると原因が分かりやすいでしょう。また、ファイルをアップした際に表示が崩れてしまうなどの問題が発生することもあります。多少の知識があると、原因が見つかりやすいのでトラブルの対応もスムーズです。

HTMLが苦手な方はの場合は、以下2つの方法で制作が可能です。

それぞれの方法について、詳しく説明していきます。

1つ目は、ランディングページが自動作成できるテンプレートツールを使用する方法です。知識がなくても感覚的に作成が可能になるので、初めての方でも安心です。

HTMLやCSSのスキルがあれば、既存のテンプレートをカスタマイズすることができます。おすすめのツールは下記になります。

ペライチとは、株式会社ペライチが運営しているWebサイト作成ツールです。20万人以上が利用しているツールで、誰でも簡単に高品質なページを作成することができます。ペライチの特徴は、オンライン決済やネット予約管理システムなども合わせて利用できることです。ページの構成だけでなく、購入につながるシステム関連までもセットで作成が可能です。

STUDIODとは、STUDIO株式会社が運営しているWebサイト作成ツールです。STUDIOの特徴は、自由なデザイン制作が可能であることです。これまで知識がない場合はテンプレートに沿って作らなければなりませんでした。しかしこのツールでは、コードを書かずに細かいデザインまでが可能です。そのため、デザインで自社の魅力を伝えたい場合におすすめです。

CMSを使い、HTMLを使わずに簡単にLPを制作することもできます。

代表的なサービスは「WordPress」です。構築は難しくはありません。WordPressは、ページの見やすさやがあり、検索エンジンの評価もされやすくなっています。

ただし、HTMLテンプレートと比較するとカスタマイズにおいてやりにくさがあります。カスタマイズをしようとすると、逆に高度な技術が必要になったりします。

また近年、WordPressなどのCMSを狙ったサイバー攻撃も増えています。オープンソースのCMSはセキュリティ対策の不安も残ります。WordPressの他に代表的なCMSは下記です。

Jimdoはドイツ企業が開発したLP作成ツールです。複数の質問に答えるとAIが自動でLPを制作してくれます。スマホで簡単にページの更新や編集が可能です。

5ページまでは無料で作成でき、10ぺージ以上だと月額990円です。

WixはCMSとして世界4位のシェアを持ち、世界で2億2,000万人、日本だけでも300万人のユーザーがいます。Wordpressより更に制作ハードルが低く、初心者におすすめのCMSです。 こちらも月額課金となっていて、3GBで900円、10GB1,300円、35GB 2,500円です。LPなら3GB以下で運営が可能です。

そして2つ目は、コーディングの部分だけ外注をする方法です。ランディングページを作成するには、ライティングとデザインが必要でした。これらの部分を社内でまかなえば、制作コストを削減することができます。そして知識が必要なコーディングの部分だけ、外注すればいいのです。

ランディングページのテンプレートにはメリット・デメリットがありますので、理解した上でテンプレートを使うかどうかを判断しましょう。

主なメリットは下記の3つです。

社内にhtmlのスキルや知識がない場合や、費用がかけられない場合は、メリットを享受することができます。専門知識が不要で制作や改善ができるのは良いですよね。

続いてデメリットは以下の2つになります。

実際、成果を出している企業のほとんどはhtmlで作成しています。テンプレートの場合、カスタマイズがしにくいので、コンバージョンを追求していくとなるとカスタマイズできないのが不自由さを感じてしまいます。

またオリジナリティにも乏しく、万が一、同業他社が同じテンプレートを使用している可能性もぬぐえません。デザインに違和感を感じることもあるでしょう。閲覧者は、それらを見たときに、不自然さを感じてしまいます。

この記事ではランディングページの作り方を解説していきました。ランディングページ制作のポイントは、以下の通りです。

ランディングページで成功させるには、いきなり制作にかかるのではなく、ペルソナ設計や構成案を作成することが大切です。そしてテンプレートを使用すれば知識不要で作成できます。その際、今回ご紹介したツールを用いるのも有効です。それでも成果が出ないようであれば、ぜひTHINkBALへご相談ください。