商品やサービスをオンラインで販売するために必要なランディングページですが、ランディングページを作るためには何が必要で、どのような知識・スキルが必要なのかをご存知でしょうか?

ランディングページと言えど、ある程度のコーディングの知識やスキルが必要になるわけですが、実際にどの程度のスキルがあればランディングページが作れるのでしょうか?

また、ランディングページを作るためには必要な素材を把握できていますか?

本稿ではそんな疑問にお答えするために、ランディングページの作り方を初心者にもわかりやすく解説していきます。ランディングページ制作の基礎知識から、必要素材とランディングページ制作に便利なツールのご紹介も行っていきます。

ランディングページ作成に必要なコーディング

ランディングページを作るためには、コーディングと呼ばれる作業が必要になります。

コーディングとは、コード(プログラム)を書く作業を指しますが、LP制作のコーディングはウェブページを制作する際に使われる、HTML・CSS・JavaScriptを使ってウェブページを作成する作業を指す場合が多いです。

そのため、自分でコーディングをしてLP制作を行うためには、以下の知識・スキルが必要になります。

  • HTML
    HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、ウェブページを作るための基本的な言語のひとつです。ウェブブラウザで閲覧するウェブページの大半がこのHTMLによって作られています。見出しなどの文書構造を記述することができます。
     
  • CSS
    CSSとは、Cascading Style Sheets(カスケーディング・スタイル・シート)の略で、テキストにデザインを施す役割を持った言語です。HTMLが見出しやテキストなどの文書構造を作るための言語であるのに対して、CSSは文書構造に装飾を加えて見栄えを良くすることができます。
     
  • Javascript
    JavaScriptとは、動的なウェブページを作ることができるプログラミング言語のひとつです。JavaScriptを使うことで、ユーザーのアクションに応じたコンテンツの表示や、ブラウザ上で表示される動的なコンテンツを表示することができます。HTML・CSSと同様に、多くのウェブサイトで使われています。

ランディングページ作成にはどんな素材が必要?

ランディングページを作成する際には、下記のような素材が必要になります。

  • デザインカンプ
    デザインカンプとは、デザインの完成見本のことを指します。画像やテキストを含め、コーディングを行った結果、ブラウザ上でどのような見た目になるのかという見本です。コーディングを行うためには、見本となるこのデザインカンプが必要です。
     
  • テキストデータ
    テキストデータとは、ブラウザ上で実際に表示されるテキストデータです。
     
  • 画像
    画像は、ブラウザ上で実際に表示される画像データです。

ランディングページ作成のツール

ランディングページを作成するために必要な知識を身につけるツールや、ランディングページを簡単に作成できるツールには以下のようなものがあります。

Progate(プロゲート)


Progateは、オンラインでプログラミングを学ぶことができるサービスです。イラスト中心のスライドで、紙の参考書や動画よりも学びやすいスライド学習が採用されています。自分のペースで勉強しやすく、復習しやすいのが強みです。

HTML・CSS専用のレッスン、JavaScript専門のレッスンも用意されており、ランディングページ作成を行いたい方にもおすすめです。

プラン 概要 価格
無料会員 プログラミングに触れることで、プログラミングの基礎を体験・学べるプランです。 無料
プラス会員 プログラミングの応用と実践を通して、論理的思考や実践的なプログラミング能力を身につけられるプランです。 980円/月(税別)

ドットインストール


ドットインストールは、3分の短い動画でプログラミングを学ぶことができるサービスです。HTML・CSS・Javascriptを学ぶためのレッスン動画が揃っています。「すべての人にプログラミングを」という理念で運営されており、初級動画は無料で見放題となっています。

プラン 概要 価格
無料会員 無料レッスン動画の視聴が可能なプランです。 無料
プレミアム会員 プレミアムレッスン動画の視聴や、文字起こし・ソースコードの閲覧ができます。 1,080円/月(税込)

 

ランディングページ作成ツール


HTMLやCSSの知識がなくともランディングページを簡単に作成することができる、ランディングページ作成ツールをご紹介します。

ペライチ


ペライチは、無料で使うこともできるランディングページ作成ツールです。豊富に用意されたテンプレートの中から、自分が作りたいイメージに合ったものを選び、テキストや画像を入れてランディングページの作成を行います。

ランディングページを作成したら、あとは公開ボタンを押すだけで、あっという間にランディングページを公開することができます。

プラン 概要 価格
スタートプラン ペライチを試してみたい方におすすめのプランです。すぐにホームページを作りたい方におすすめです。 無料
ライトプラン 独自ドメインやお問い合わせフォーム機能を利用することができるプランです。 980円/月(税別)
レギュラープラン ライトプランの内容に加えて、独自のHTML要素を差し込むことができる機能、ペライチフッターの非表示機能を使えるプランです。 1,980円/月(税別)
ビジネスプラン レギュラープランの内容に加えて、メルマガ配信機能や決済機能が使えるプランです。 2,980円/月(税別)

Jimdo(ジンドゥー)


ジンドゥーは、無料でかんたんにランディングページを作ることができるサービスです。日本国内の利用者も非常に多く、さまざまなテンプレートが用意されているため、自分の好みに合ったデザインのランディングページを作ることができます。また、スマホアプリが用意されているため、外出先から更新をすることもできます。

プラン 概要 価格
PLAY 無料でホームページを作れるプランです。ドメインは「◯◯.jimdosite.com」になります。 無料
START 初回契約時に、無料のドメインを利用できるプランです。広告も非表示になります。 990円/月(税込)
GROW 企業や個人事業主にもおすすめなSEO対策がされたプランです。 1,590円/月(税込)

Wix(ウィックス)


Wixはコーディングが一切不要で、ドラッグ&ドロップの直感的な操作でランディングページを作ることができるツールです。

2万点以上の無料写真・動画素材も利用することができるため、よりクリエイティブなランディングページを作成することができます。

プラン 概要 価格
ドメイン接続 独自ドメインを利用可能なプランです。ウェブサイトで広告表示されます。 500円/月(税別)
ベーシック 趣味・個人サイトに最適なプランです。独自ドメインを利用可能です。 900円/月(税別)
アドバンス 帯域幅無制限 + 大容量データが使えるプランです。 1,300円/月(税別)
VIP 最上級の特典と優先サポートを受けられるプランです。 2,500円/月(税別)

 

Wordpressでランディングページを作成する方法

WordPressでランディングページを作成するには、自分が作りたいイメージに合った無料テーマを探して、WordPressにインストールして使う方法がおすすめです。

もちろん、無料テーマで自分の気に入ったデザイン、イメージに合ったデザインが見つからない場合は、有料テーマも含めてテーマを探してみると良いでしょう。

自分で1からテーマをカスタマイズしてデザインを作成するよりも、既存のテーマを使うことで大幅に手間を減らすことができます。

WordPressのテーマをインストールしたら、作りたいランディングページの内容に合わせてテキストや画像を挿入してください。

もちろん、CTA(コールトゥアクション:ウェブサイトの訪問者を具体的な行動に誘導すること)も設定しましょう。

ランディングページ作成の外注方法と費用

続いて、ランディングページを外注する方法と外注費用について見ていきましょう。

ランディングページ作成の外注方法

ランディングページを外注して作ってもらう方法としておすすめなのが、クラウドソーシングサイトを利用して外注する方法です。

はじめてランディングページ作成を外注する方は、どこの会社、あるいは誰に依頼すればいいのかを選ぶのに迷われると思います。

クラウドソーシングサイトを利用することで、クラウドワーカーや会社の実績、評価を確認することができ、さらにコンペ形式で依頼をすることで、ラフデザインを見てから選ぶこともできます。

また、アイミツ(https://imitsu.jp/)のような複数のウェブ制作会社に対して、一括見積もり請求を行うことができるサービスを利用する方法もおすすめです。複数の業者の提案や料金を比較して選ぶことができるため、自分に合った外注先を探すことができます。

ランディングページ作成の費用の相場

ランディングページ作成にかかる費用はおおよそ20〜60万円程度が相場となっています。かなりレンジが広くなっていますが、これは1からデザインを作り上げるのか、ある程度既存のデザインテンプレートに沿った形で、コンテンツをカスタマイズしていくのかによって変わってきます。

当然、1からデザインを作り上げていく方法のほうが費用が高くなります。

まとめ

ランディングページの作成には、HTML・CSS・JavaScriptの知識が必要になります。

しかし、今はさまざまなランディングページ作成ツールがリリースされているため、コーディングを行うことなく、ランディングページを作ることもできます。

まずは自分が作りたいランディングページのイメージを明確にして、ランディングページ作成ツールを使って作れるかどうかを検討してみてはいかがでしょうか。

より高度なランディングページを作りたいという場合は、HTML・CSS・JavaScriptのスキルを学び、ランディングページの制作に取り組んでみてくだ下さい。

New Call-to-action

 New Call-to-action

元記事発行日: 2019年11月27日、最終更新日: 2019年11月28日

トピック::

ランディングページ