更新日: 2024 / 03 / 26

初心者が自分でLPを作る方法をサンプルコード付きで解説 ツールや効率化のコツも

カテゴリー: 初心者のLP制作入門

この記事ではLPを自分で作る方法をLPのサンプルコード(HTML)も含めて解説します。

また、LP制作するさいに便利なツールやテンプレート、LP制作をさらに効率化するコツも紹介します。

  1. 初心者でも自分でLP作れる？

    1. 自分でLPを作るために必要なスキルは？
    2. 自分で作る場合のメリットとデメリット
    3. こんなときは外注した方がお得

  2. 自分でできる！LP制作のおすすめツール

    1. 自分でLPを作れるおすすめWebサービス
    2. LP制作で使えるデザインツール

  3. 自分で効率よくオリジナルデザインのLPを作る方法

    1. 自分で効率よく作る方法はこれ！
    2. 初心者でもできるLP作成の手順
    3. AIを活用したLPライティング
    4. テンプレートを使った効率的なLPデザイン
    5. デザインをWebサービスに移植
    6. デザインを効率よくHTMLコーディング
    7. LPの公開

  4. まとめ

初心者でも自分でLP作れる？

そもそもLPって自分で作れるものなんでしょうか？以前は完全に自作するのは時間もかかるし必要な知識も多いので難しかったと思います。

ただ、おすすめツールのところでも紹介してるように、ドラッグ&ドロップで簡単に作れるツールが複数あり、以前に比べてはるかに簡単に作れるようになってきています。

初心者でも自分でLP作れる？

またテンプレートも豊富にあるため、とりあえず始めてみたいという人にも手軽にLPを作れる環境が整ってきているというのが現状です。

自分でLPを作るために必要なスキルは？

以前は本当にゼロから作る必要があったので、デザインやコーディング、ライティングに関する幅広い知識が必要でした。

今もHTMLで作る場合やWordpressでLPを作る場合はコーディングの知識が必要ですが、ツールがめちゃくちゃ便利になってるので以下のような知識があれば簡単にLPを自作できます。

  • LP制作ツールを使える
  • ツール上で簡単な修正ができる
  • AIなどを使ってライティングができる

LP制作ツールはコーディング不要でデザインから公開までできてしまうので、操作方法を覚えれば思い通りのLPを作れるようになります。

テンプレートも豊富で、ゼロからはじめなくても簡単な修正ができればすぐに公開できてしまいます。

初心者でも自分でLP作れる？ 自分でLPを作るために必要なスキルは？ デザイン

また、ライティングに関しても最近注目されているChatGPTやGeminiなどのAIを使うことでLPの構成アイデアを数秒で書き出してくれます。

初心者でも自分でLP作れる？ 自分でLPを作るために必要なスキルは？ ライティング

このように新しいツールがどんどん出てきているので本当に一人でもLPを作れる環境が整ってきています。

自分で作る場合のメリットとデメリット

ここで自分でLPを作る場合のメリットとデメリットをまとめておきたいと思います。これから作成する方の参考にしていただければと思います。

LPを自分で作るメリットには次のようなことがあります。

  • 自分で作るのでコストを抑えられる
  • ツールを使って自分の思い通りにデザインできる
  • 思いついたアイデアをすぐに試せたり、すぐに修正できる

一番大きなメリットはコストを抑えられること。外注するとどんなに安くても10万円程度高いところだと100万円くらいになるので相当節約することができます。

また、自分で自由に作れるのでデザインをこだわったり、手作り感のあるLPなんかにもできます。

3つめのアイデアをすぐに試せる、すぐに修正できるというのも重要なポイント。外注すると修正を依頼するたびにお金がかかり、少しの修正でも1~2週間かかることも…

次にデメリットについてもまとめておきます。

  • クオリティには限界がある
  • 失敗したら他人のせいにできない

自分で作る場合クオリティについてはどうしても限界があります。ただキレイなデザインならいいかというとそうではなく、先ほども書いたように手作り感のあるLPで共感してもらうということもできます。

あとこれも重要な点ですが、うまくいかなかったときに外注先を変えるということができないので、自分で改善する必要があります。

これに関しては逆に言えばマーケティングの勉強ができるということでもあります。

こんなときは外注した方がお得

逆にどんなときに外注するべきかというとだいたい以下の2つになります。

  • 予算が十分にあるので限界までクオリティを追求したい
  • LPを作ったり広告の改善をする時間がない

予算が十分ある場合は無理して自分でやるより外注したほうが効率良いでしょう。

また、自分で作る時間がない場合も誰かに依頼したほうが早く結果を出せることがあります。

自分でできる！LP制作のおすすめツール

ここからは自分でLPを作る場合におすすめできるツールを紹介します。

基本的にどれも無料で使えるのでとりあえずお試しで使ってみて、使いやすさや画面の操作しやすさなんかもチェックしてみてくださいね。

自分でLPを作れるおすすめWebサービス

Webサービスは以前に比べてかなり使い勝手も機能も進化してます。どのツールもテンプレートがたくさんあり、無料プランが用意されてるのですぐにはじめられるのがポイント。

自分でできる！LP制作のおすすめツール 自分でLPを作れるおすすめWebサービス STUDIO

まずはこちら。デザインツールとしての機能がすごくよくできてるSTUDIOです。

ツールの操作性が良くて結構細かいデザインも作れます。ブログ機能や問い合わせ機能、Googleマップの埋め込みなど機能が豊富。

無料プランで作れるページ数に制限はなく、月1万PVまでアクセス可能となっています。

自分でできる！LP制作のおすすめツール 自分でLPを作れるおすすめWebサービス ペライチ

次はこちら。シンプルなLP作るときによく使われるのがペライチです。

豊富に用意されたテンプレートを編集していくことでサクッとLPを作れます。

自分でできる！LP制作のおすすめツール 自分でLPを作れるおすすめWebサービス WIX

3つめはWIX。海外のツールでテンプレートがとにかく豊富。デザインが海外向けなのでシンプルなデザインにしたいならWIXもおすすめです。

LP制作で使えるデザインツール

LPのデザインを作るなら無料で使えるFigma一択です。

自分でできる！LP制作のおすすめツール LP制作で使えるデザインツール Figma

LPに限らずWeb制作でもよく使われていて、無料で使える画像素材のUnsplashや画像の背景を切り抜けるものなど便利なプラグインが豊富。

ブラウザで使えるのとダウンロードして使えるアプリ版があります。どちらも軽量で使い勝手バツグン。

とくに優れてるのがFigmaで作ったデザインを先ほど紹介したSTUDIOにそのままコピーできるところ。わざわざ手作業で移植しなくても、自動的にデザインをコピして、STUDIOのページにペーストできます。

コピーの方法については以下の記事をご覧ください。

-> Figmaで作ったデザインをSTUDIOでそのまま公開する方法

自分で効率よくオリジナルデザインのLPを作る方法

LPを自分で作る方法としては、先ほど紹介したWebツールのテンプレートをカスタマイズすることで一応作ることはできます。

ただし、デザインが似たようなものになることや、ツールでできることにも限界があるため完全にオリジナルのLPを作るにはそれなりに時間をかける必要があります。

そこで以下では効率性を落とすことなくオリジナルデザインのLPを作る方法を

自分で効率よく作る方法はこれ！

できるだけコストをかけず、自分でLPを作るには以下の方法がおすすめ。

  • Figmaでデザインを作ってSTUDIOに移植
  • Figmaでデザインを作ってHTML化

Figmaは無料で使える軽量なデザインツール。画像の背景を切り抜いたり、簡単なフィルターをかけたりできるのでWebデザイン向きのツール。

このツールでデザインを作って、STUDIOに移植するかHTMLコーディングして公開します。

ここからは具体的なLP制作の流れを解説していきます。

初心者でもできるLP作成の手順

LPを含めたマーケティング全体で考えると目標の設定やターゲティングも必要ですが、ここではLPの作成に絞って手順を解説します。

LPの作成手順をざっくりとまとめると次のようになります。

  • ライティング: LPのコンテンツを作成する
  • デザイン: Webツールやテンプレートを使ってLPをデザインする
  • Webサービスに移植: デザインにFigmaを使う場合はWebツールに移植
  • HTMLコーディング: サーバーにアップする場合はHTMLコーディングを行う
  • 公開

ここからはそれぞれ具体的に解説していきます。まずはLPのテキストコンテンツを作成します。

AIを活用したLPライティング

最近(2024年以降)はAIの能力が上がってきてるので、商品情報とPASONAなどの構成や、競合サイトのリサーチからざっくり作った構成を渡すだけでサクッとライティングしてくれます。

ブログの場合はAIコンテンツがSEOで弾かれるので厳しいですが、SEOを気にしないLPならライティングはAIを活用しましょう。

LPのコンテンツを作るプロンプトの例とAIの回答例を載せておきます。一発でうまく出なくても何度も修正してもらうことができます。

### 商品情報
- 目的: LPのコンバージョン数の最大化
- 商品: ダイエットコーヒー
- ターゲット: 健康的に痩せたい20代の女性
- 商品の独自性: 飲むだけで健康的に痩せるサプリメント

### 構成
- キャッチコピー(30文字以内)
- Problem（問題）
- Agitation（扇動）
- Solution（解決策）
- Narrow down（絞込）
- Action（行動）

### 指示
商品情報をもとに構成に従ってLPのコンテンツを作成してください。商品情報の目的を最大化するようなコンテンツを作成してください。

PASONAの構成で書いてもらったところこんな感じの回答が出てきました。ここからさに修正を加えたり、別の構成で書き直してもらったりしながらコンテンツを作っていくことができます。

自分で効率よくオリジナルデザインのLPを作る方法 AIを活用したLPライティング

テンプレートを使った効率的なLPデザイン

次はLPのデザインを作っていきます。完全にゼロから作るとなると結構時間がかかりますが、LPテンプレートを使うことで効率化できます。

今回はこちらのテンプレートを使ってデザインしていきます。このテンプレートはコンテンツに合わせてブロックが用意されているので、必要なブロックを選んで積み重ねていくだけでLPを作成できます。

自分で効率よくオリジナルデザインのLPを作る方法 テンプレートを使った効率的なLPデザイン

デザインをWebサービスに移植

「Figma to STUDIO」というプラグインを使うことでFigmaでデザインしたLPやWebサイトをそのままSTUDIOに移植することができます。

手順はFigmaでプラグインを起動して、コピーしたものをSTUDIOの画面でペーストするだけ。

自分で効率よくオリジナルデザインのLPを作る方法 デザインをWebサービスに移植

詳しくはこちらの記事をご覧ください。

デザインを効率よくHTMLコーディング

Webサービスを利用せずHTMLコーディングする場合も先ほどのLPテンプレートが使えます。

デザインと同じUIパーツがHTMLコード化されているので、これらをコピーして組み合わせるだけでページを作成可能です。また、CSSスタイルにはBootstrap5を使用しており、CSSコードを書かずにある程度のレイアウトが可能です。

<div class="container">
  <div class="row row-gap-24">
    <div class="col-md-4">
      <div class="d-flex flex-column align-items-center bg-body py-40 px-20">
        <h5 class="mb-0 h6 fw-bold text-body text-center">最適なターゲット設定</h5>
        <img class="mt-20 img-fluid w-80" src="../images/problem/problem_1.png" alt="">
        <div class="mt-30">
          <p class="mb-0 fs-text-md fw-bold text-body">LPテンプレートには、デザインやレイアウトがすでに決まっているため、初心者でも簡単に見栄えの良いLPを作成できます。</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="d-flex flex-column align-items-center bg-body py-40 px-20">
        <h5 class="mb-0 h6 fw-bold text-body text-center">最適なターゲット設定</h5>
        <img class="mt-20 img-fluid w-80" src="../images/problem/problem_2.png" alt="">
        <div class="mt-30">
          <p class="mb-0 fs-text-md fw-bold text-body">LPテンプレートには、デザインやレイアウトがすでに決まっているため、初心者でも簡単に見栄えの良いLPを作成できます。</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="d-flex flex-column align-items-center bg-body py-40 px-20">
        <h5 class="mb-0 h6 fw-bold text-body text-center">最適なターゲット設定</h5>
        <img class="mt-20 img-fluid w-80" src="../images/problem/problem_3.png" alt="">
        <div class="mt-30">
          <p class="mb-0 fs-text-md fw-bold text-body">LPテンプレートには、デザインやレイアウトがすでに決まっているため、初心者でも簡単に見栄えの良いLPを作成できます。</p>
        </div>
      </div>
    </div>
  </div>
</div>

このようなUIパーツをコピーしてページを作っていくことができます。

-> デモページはこちら

<!DOCTYPE html>
<html lang="ja" itemscope itemtype="http://schema.org/WebPage">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>uikit</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="../assets/design1.css">
</head>
<body>

<!-- ここにヘッダーを配置 -->

<!-- ここにメインビジュアルを配置 -->

<!-- ここによくあるお悩みを配置 -->

<!-- ここにサービス内容を配置 -->

<!-- ここにCTAを配置 -->

<!-- ここに選ばれる理由を配置 -->

<!-- ここに主な特徴を配置 -->

<!-- ここにCTAを配置 -->

<!-- ここにお客様の声を配置 -->

<!-- ここにご利用の流れを配置 -->

<!-- ここにCTAを配置 -->

<!-- ここによくある質問を配置 -->

<!-- ここにCTAを配置 -->

<!-- ここにフッターを配置 -->

  <!-- Javascript -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
</body>
</html>

LPの公開

最後に作成したLPを公開して完了です。FigmaからSTUDIOへ移植した場合は管理画面から以下のような流れで公開設定を行います。

  • エディタからサイト設定
  • サイトの管理画面からドメイン接続
  • Googleアナリティクスの連携

サイト設定ではページのタイトルや説明文などを設定します。ドメインの設定もできますが、なくても公開はできます。

自分で効率よくオリジナルデザインのLPを作る方法 LPの公開

STUDIOで作ったサイトの公開は以下の記事をご覧ください。

-> 初心者のためのSTUDIO超入門ガイド 基本からホームページの公開まで

HTMLコードの場合はファイルをサーバーにアップロードすることで公開できます。

サーバーを初めて使う場合はどのサーバーでも数日間の無料期間があるのでお試し利用することができます。

まとめ

この記事では自分で効率よくLPを作る方法を紹介しました。まとめるとこちらのようになります。

  • ペライチやSTUDIOなどのツールがあるので自分でLPを作ることは可能
  • AIやテンプレートを活用して効率よくLPの作成ができる
  • 予算が十分にあってクオリティを重視したいなら外注した方がいい