ランディングページの作り方!HTMLの知識は必須?LP制作ツールとの比較も解説
ランディングページの作成を考えているけど、どんな風に作ったら売上につながるのかがわからないといった悩みを抱えていませんか?
- 商品やサービスをランディングページで訴求したい人
- 社内にはHTMLの知識を持っている人がいない企業
- ランディングページの作成方法を知りたい人
- 作成方法をHTMLとツールのどちらが良いか悩んでいる企業
上記のような悩みがあるの人もいるのではないでしょうか?そこでこの記事では、ランディングページの作り方を解説していきます。また、HTMLの知識が必要かどうかや、便利なツールについても触れています。ぜひ最後までお読みください。
データ分析、UX/UI設計に基づく戦略とデザインで伝えたい価値を伝わるカタチに。
ビジネス成果に貢献するランディングページ制作・構築を提供します。
ランディングページの作成方法
ランディングページを作成する際は、以下のようなステップで進めていきましょう。
- 目標設定とペルソナ設計
- 構成案・ワイヤーフレームの作成
- ライティング・デザイン
- コーディング
- 公開
ここからはそれぞれの工程について解説していきます。
目標設定とペルソナ設計
ランディングページ制作では、はじめに目標設定とペルソナ設計を行います。目標設定とは、ランディングページのゴールとも言えます。目標設定の例としては、以下のようなものがあります。
- 問い合わせを受ける
- 資料請求をしてもらう
- メルマガを登録してもらう
目標が決まったら、ペルソナ設計を行いましょう。ペルソナ設計とは、制作するランディングページの読者を想定して、ユーザーの属性を詳細に設定していく作業のことです。どんなユーザーをターゲットにしていて、そのユーザーがどんな職業で、どんなことに関心を持っているのかなど、具体的に考えていきます。ペルソナ設計を行うと、ユーザーに寄り添ったランディングページになります。
構成案・ワイヤーフレームの作成
目標設定とペルソナ設計が完了したら、構成案・ワイヤーフレームの作成に移ります。構成案・ワイヤーフレームとは、ランディングページをどのように設計するかを記したドキュメントのことです。構成案には以下の要素が必要です。
- キャッチコピー
- アイキャッチ画像
- 商品・サービスに関するテキスト
- 申し込み・問い合わせフォーム
こうした要素について、何をどんな風にランディングページ に盛り込むかを明確にしていきます。構成案を用意することで、制作の方向性をチームで共有することができます。
ライティング・デザイン
構成案を作成したら、ページの作成に移ります。はじめにライティングを行います。ライティングとは、ランディングページのテキストやキャッチコピーなどを作成していくことです。ユーザーに訴求したい商品・サービスの詳細や魅力、利用することでどのようなメリットがあるかなど、情報をまとめていきます。そしてテキスト・キャッチコピーが完成したら、ランディングページのデザインを作成していきましょう。商品・サービスを魅力的に見せるのはもちろん、ユーザーを申し込み・問い合わせフォームまで誘導できるよう、導線を確保することが大切です。
コーディング
ライティング・デザインが完了したら、コーディングに移りましょう。コーディングとは、HTMLやCSSなどの言語を使って、Web上にページをアップロードできるように、デザインをファイルに反映していくことです。この際ポイントとなるのが、レスポンシブになるように組み込んでいくことです。
レスポンシブとは、スマホやタブレット、PCなど、デバイスの画面サイズに合わせて表示を変えることができることです。昨今ではPCのみならず、スマートフォンで閲覧するユーザーが増えています。ユーザーにとって利用しやすいページにするには、レスポンシブデザインにすることが大切です。
デバイスごとのランディングページ制作については、下記の記事も参考にしてみてください。
LPの進化具合が面白い|株式会社ヒロックラボ
公開
ファイルを作成したら、公開作業に入ります。ただし、いきなり公開するのではなく、あらかじめテスト環境でチェックすることが大切です。その際、以下のポイントを確認しましょう。
- 日付や値段など誤った情報はないか
- テキストに誤字脱字はないか
- リンクは正しいか
- 表示は崩れていないか
ランディングページに誤った情報を記載してしまうと、ユーザーからの信用を失ってしまいます。こうした事態に発展しないよう、日付や値段、リンクなどを確認しましょう。そして、公開時に正しく反映されるよう、表示崩れについても確認してください。
ランディングページの作成にはhtmlの知識は必要?
実際に作成するにあたり、HTMLの知識は必要なのでしょうか。このテーマについては、以下のような考え方があります。
- 全てオリジナルで作成するのであればhtmlの知識は必要
- テンプレートを使用する際は不要な場合もある
- 制作を担当するなら多少の知識はあったほうがいい
ここからはそれぞれの考え方について解説していきましょう。
全てオリジナルで作成するのであればHTMLの知識は必要
完全にオリジナルのランディングページを作成する場合は、HTMLの知識は必要となります。その理由は、ゼロから作成するには、ランディングページ制作にはHTMLやCSSを使うからです。いわゆるコーダーとしての知見が必要になってくるため、知識がない人にとってはかなら難しくなります。とはいえ、HTMLやCSSの知識がなければ、絶対にランディングページを作成できないという訳ではありません。
テンプレートを使用する際は不要な場合もある
テンプレートを使用すれば、HTMLやCSSの知識が不要な場合もあります。これはCMSのように、あらかじめ用意されたテンプレートを組み合わせてランディングページを作成していく方法です。本来であればカラムなどの構成はコードを使って組み込むものですが、テンプレートの場合はあらかじめコードが書き込まれています。そのため、感覚的にパーツを組み合わせるだけで、簡単にページが作成できるのです。
制作を担当するなら多少の知識はあったほうがいい
ただし、制作の担当をする場合は知識があった方がいいでしょう。その理由は、ランディングページを運用していると、改善点や問題点を発見することがあるからです。例えば、申し込みボタンへの流入が悪い場合、なぜユーザーが申し込みボタンまでスクロールしていないのか理由を考えなければなりません。その際、知識があると原因が分かりやすいでしょう。また、ファイルをアップした際に表示が崩れてしまうなどの問題が発生することもあります。多少の知識があると、原因が見つかりやすいのでトラブルの対応もスムーズです。
HTMLがわからない|どうやってランディングページを作る?
HTMLが苦手な方はの場合は、以下2つの方法で制作が可能です。
- ランディングページが自動作成できるツールを使用する
- CMSでランディングページを作成する
- コーディングの部分だけ外注をする
それぞれの方法について、詳しく説明していきます。
ランディングページが自動作成できるテンプレートツールを使用する
1つ目は、ランディングページが自動作成できるテンプレートツールを使用する方法です。知識がなくても感覚的に作成が可能になるので、初めての方でも安心です。
HTMLやCSSのスキルがあれば、既存のテンプレートをカスタマイズすることができます。おすすめのツールは下記になります。
ペライチ
ペライチとは、株式会社ペライチが運営しているWebサイト作成ツールです。20万人以上が利用しているツールで、誰でも簡単に高品質なページを作成することができます。ペライチの特徴は、オンライン決済やネット予約管理システムなども合わせて利用できることです。ページの構成だけでなく、購入につながるシステム関連までもセットで作成が可能です。
STUDIO
STUDIODとは、STUDIO株式会社が運営しているWebサイト作成ツールです。STUDIOの特徴は、自由なデザイン制作が可能であることです。これまで知識がない場合はテンプレートに沿って作らなければなりませんでした。しかしこのツールでは、コードを書かずに細かいデザインまでが可能です。そのため、デザインで自社の魅力を伝えたい場合におすすめです。
CMSでhtmlなしのランディングページを作成する
CMSを使い、HTMLを使わずに簡単にLPを制作することもできます。
代表的なサービスは「WordPress」です。構築は難しくはありません。WordPressは、ページの見やすさやがあり、検索エンジンの評価もされやすくなっています。
ただし、HTMLテンプレートと比較するとカスタマイズにおいてやりにくさがあります。カスタマイズをしようとすると、逆に高度な技術が必要になったりします。
また近年、WordPressなどのCMSを狙ったサイバー攻撃も増えています。オープンソースのCMSはセキュリティ対策の不安も残ります。WordPressの他に代表的なCMSは下記です。
Jimdo
Jimdoはドイツ企業が開発したLP作成ツールです。複数の質問に答えるとAIが自動でLPを制作してくれます。スマホで簡単にページの更新や編集が可能です。
5ページまでは無料で作成でき、10ぺージ以上だと月額990円です。
Wix
WixはCMSとして世界4位のシェアを持ち、世界で2億2,000万人、日本だけでも300万人のユーザーがいます。Wordpressより更に制作ハードルが低く、初心者におすすめのCMSです。 こちらも月額課金となっていて、3GBで900円、10GB1,300円、35GB 2,500円です。LPなら3GB以下で運営が可能です。
コーディングの部分だけ外注をする
そして2つ目は、コーディングの部分だけ外注をする方法です。ランディングページを作成するには、ライティングとデザインが必要でした。これらの部分を社内でまかなえば、制作コストを削減することができます。そして知識が必要なコーディングの部分だけ、外注すればいいのです。
ランディングページテンプレートのメリット・デメリット
ランディングページのテンプレートにはメリット・デメリットがありますので、理解した上でテンプレートを使うかどうかを判断しましょう。
メリット
主なメリットは下記の3つです。
- HTMLなどの専門知識不要で制作できる
- 改善がやりやすい
- 自作できてコストが抑えられる
社内にhtmlのスキルや知識がない場合や、費用がかけられない場合は、メリットを享受することができます。専門知識が不要で制作や改善ができるのは良いですよね。
デメリット
続いてデメリットは以下の2つになります。
- コンバージョンが弱い
- オリジナリティに乏しい
- 違和感を感じることがある
実際、成果を出している企業のほとんどはhtmlで作成しています。テンプレートの場合、カスタマイズがしにくいので、コンバージョンを追求していくとなるとカスタマイズできないのが不自由さを感じてしまいます。
またオリジナリティにも乏しく、万が一、同業他社が同じテンプレートを使用している可能性もぬぐえません。デザインに違和感を感じることもあるでしょう。閲覧者は、それらを見たときに、不自然さを感じてしまいます。
まとめ
この記事ではランディングページの作り方を解説していきました。ランディングページ制作のポイントは、以下の通りです。
- 優れたランディングページはユーザーのペルソナに沿うことが大切
- テンプレートを使用すれば知識不要でランディングページを作成できる
- ツールを用いればより簡単に高度なページを作成できる
ランディングページで成功させるには、いきなり制作にかかるのではなく、ペルソナ設計や構成案を作成することが大切です。そしてテンプレートを使用すれば知識不要で作成できます。その際、今回ご紹介したツールを用いるのも有効です。それでも成果が出ないようであれば、ぜひTHINkBALへご相談ください。
訴求力のあるデザインと構成で売れるLPを作成
訴求力のあるLP制作をプロに依頼してみませんか?
- 商品・サービスをLPで訴求したい
- 成果の出るLPを作りたい
- LP制作の実績豊富な制作会社を探している
LPで実績のある
THINkBALにお任せください
What's New 新着情報
- Web制作
2024/10/7ランディングページのコーディングについて詳しく解説!作成の工程や費用は?- コンテンツマーケティング
2024/10/7【CV率を伸ばす】メルマガ配信の作り方を6ステップで分かりやすく解説!- コンテンツマーケティング
2024/10/7メルマガのメリットとは?配信時の注意点や書き方の事例も紹介- マーケティング
2024/10/4マイクロコンバージョンのメリットとは?設定がおすすめの理由を一挙公開!- コンテンツマーケティング
2024/10/4ホワイトペーパー作成代行会社に依頼できることとは?費用相場と選び方のポイント- マーケティング
2024/10/4マイクロコンバージョンとは?Webサイトにおけるマイクロコンバージョンの重要性
Recommend オススメ記事
- Web制作
2024/7/1BtoBサイトでおすすめの制作会社14選|BtoBビジネスで成功するには- Web制作
2024/4/13ホームページリニューアルの費用の相場は?流れ、メリットデメリット、ポイントを解説- Web制作
2024/4/28採用サイトの集客方法5選!採用に必要なコンテンツは?- UX/UIデザイン
2024/9/28サイトの問い合わせを増やす施策を8つ紹介!CTAボタンの設置方法も解説!- Web制作
2024/9/19オウンドメディアの運用方法|成果の出るポイントを押さえて運用しよう- Web制作
2024/4/28ブランドサイト参考事例10選!制作のコツや注意点についても解説- Web制作
2024/5/5コーポレートサイトのSEO対策は必要?対策方法や注意点- Web制作
2024/5/5採用サイトの改善方法とは?課題の見つけ方やリニューアルのポイントについても解説- コンテンツマーケティング
2024/4/6コンテンツマーケティングの効果的な進め方とは?3つの成功事例も紹介