LP制作のデザインにこだわりたい人へ。デザイン方法やツールをご紹介!

Web広告運用をしていく上でLP(ランディングページ)は必要不可欠な要素の一つです。そんなLPはユーザーの反応や商品のイメージを決定づけるものなので、デザインにこだわりたいという運用者の声も多く耳にします。本記事ではそんなLPの制作方法別に、どのようなデザインを作れるのか、また各制作方法のメリット、デメリットについてお伝えしていくので、ぜひ最後までご覧ください!

 

LP制作でのデザインーコーディング編ー

まずはコーディングでのLP制作について見ていきましょう。コーディングでLP制作をする手順は大まかには以下のようになっています。

 

1.マーケターや運用担当者によってLP全体の構成等をデザイナーに依頼
2.依頼を元にデザイナーがLPの原案を制作
3.マーケターや運用担当者とデザイナーとの間で何度かデザインのすり合わせを行う
4.最終的に決定したデザインをコーダーへコーディングを依頼
5.細かい箇所の修正等を行い、LPとして配信

 

基本的なコーディングの方法や相場などについてより詳しく知りたい方は、こちらの記事で解説しているので、ぜひご覧ください。

【外注する前に知りたい】 一般的なコーディングの方法とは?

 

コーディングでのLP制作で、デザイン面で重要なのが言うまでもなくデザイナーです。マーケターや運用者側でデザインの方向性がはっきりと定まっており、デザイナーがその方向性に沿って制作できるのが理想です。しかし、デザイナー側から「こうした方が良い」というような提案が来たり、LPの全体像が見えてきた段階で方向性を変更するなどといった事案も少なくないため、デザイナーの腕に寄る部分も大きいです。

では次に、LP制作においてコーディングで制作することのメリットやデメリットも一緒に見ていきましょう。

 

メリット

  1. デザインのプロに委託するため、高いクオリティのLPを細部までこだわることができる。
  2. CSSやJavaなどのコーディングを用いて、CTA(Call To Action)ボタンなど動きのある装飾を自由に利用することができる。
  3. LPの運用を進めていく中で、修正や要素の追加などを自由に行える。

 

自社がコーディングで制作したLP(FWH)

それぞれについて細かく見ていくと

1.デザインのプロに委託するため、細部までこだわった高いクオリティのLPを制作することができる。

コーディングでのLP制作最大の利点は、デザインの独自性です。1から作り上げるため、自社の製品やサービスのイメージ、または会社のイメージに即したオリジナルのLPを制作することが可能です。基本的な文章や画像をHTMLコードで指定し、CSSやJavaScriptを用いて文字の大きさや色など、様々な装飾を行っていきます。

2.CSSやJavaなどのコーディングを用いて、CTA(Call To Action)ボタンなど動きのある装飾を自由に利用することができる。

またもう一つの特徴として、CSSやJavaScriptでLPの装飾を自由に作れるという点があります。先述した通り文字の色や大きさを変えられるのはもちろんのこと、CTAボタンなどの複雑な機構もLPに組み込むことができます。
※CTAボタンとはユーザーに特定のアクションを喚起するボタンの総称。代表的なものに、「ページの下側に常に表示させる問い合わせフォームに自動で遷移するボタン」などがある。

 

↓CTAボタンの例

3.LPの運用を進めていく中で、修正や要素の追加などを自由に行える。

また、ある程度LPにPVやCVが発生するとLP内で改善すべき点などが明確になっていきます。その際に、コーディングで制作したLPであればLPのコンテンツの配置や装飾の有無まで自由に変更することが可能です。

以上がコーディングでLPをデザインする際のメリットでした。
一見するとどんなデザインでも自由自在に制作できそうなコーディングでのLP制作ですが、いくつかデメリットも存在します。

 

デメリット

  1. LPの制作開始から完成までに1〜2ヶ月ほど時間がかかる
  2. コスト面での負担が大きくなる
  3. 専門性の高い作業のため、リソースが不足する

 

1.LPの制作開始から完成までに1〜2ヶ月ほど時間がかかる

まず、実際にLPを利用する際にネックになるのが、LPの制作開始から完了までの期間です。デザインや装飾が細かいほど、コーディングにかかる工数や時間も増加していくのでいつ頃から運用を開始するのか、社内のリソース等を調整しながらLPの制作を行う必要があります。

2.コスト面での負担が大きくなる

運用が進むにつれて、必要なLPの数は増えていきます。するとLPを制作するたびにデザイナーに発注、コーダーが実装と言う作業がリソースを圧迫し、必要なLPがなかなか手に入らないと言う事態が発生します。結果として新たにデザイナーやコーダーを雇ったり、業務委託という形でコストが発生してしまいます。

LP制作を外注する場合にはLP内の修正などにもコストが生じる場合があります。

3.専門性の高い作業のため、初心者には向かない

最後に大きなデメリットとしてLP制作の作業の専門性の高さがあります。
デザイナーやコーダーと呼ばれる人がいるように、LPのでデザインやコーディングには専門的な知識と技術が必要になります。

つまり、「事業を始めたばかりでデザイナーもコーダーもいない」といった状況や、デザイナーだけ抱えているといった状況では、コーディングでのLP制作ができないのが現状です。

 

以上がコーディングでのLP製作におけるメリット、デメリットでした。

 

コーディングでのLP制作とそのデザインについてまとめると

「コーディングでのLP制作はクオリティが高く、オリジナルのデザインでLPを制作できるが、作業の専門性の高さ故にコストやリソース面での負担が大きい」

と言うことになります。

 

LP制作でのデザインーテンプレート編ー

ここまでコーディングでのデザインについて紹介してきたので、次にテンプレートで制作したLPのデザインについて見ていきましょう。

コーディングの時と同様に、テンプレートでの制作手順を紹介すると

 

1.LPのテンプレートデザインを選択
2.画像やテキストを入稿する欄に、任意のコンテンツを入稿
3.文字の色や画像の大きさなどを調整して、LPの配信を開始

 

以上がテンプレートでのLP制作方法です。実際に手を動かす作業はテキストと画像の入力、そして最後の構成の部分のみです。
LPのテンプレートを制作できるサイトは様々あり、また料金設定も無料のものからダウンロードしたテンプレートの数に応じた従量課金性のものまで多種多様です。
そのため、自社の商材やサービスに合うデザイン+コスト面で負担のないものを選択する必要があります。

 

さてここで、テンプレートで制作するデザインのLPについてもメリット、デメリットを見ていきましょう。

 

メリット

  1. 誰でも簡単に様々な種類のLPを制作できる
  2. 制作期間が短い
  3. 無料でもLP制作が可能

 

それぞれについて詳しく見ていくと

1.誰でも簡単に様々な種類のLPを制作できる

まず一番の特徴として、テンプレートでのLP制作はデザインがすでに確定しているため、デザイナーやコーダーなどがいなくても誰でも簡単に制作が可能という点です。デザインは関係なしにとにかくLPを制作したいというような場合にも有効な手段と言えます。

2.制作期間が短い

また、コーディングとの違いで大きいのが制作期間の短さです。専門の業務などがないので作業が属人化することがなく、LPを制作してURLなどの配信設定が完了するとすぐに配信を開始することができます。

3.無料でもLP制作が可能

コスト面に関して、テンプレートでのLP制作は無料でも制作が可能です。デザインやサポートによって料金設定は異なりますが。LPを初めて制作する場合などには、テンプレートでのLP制作は有効な手段と言えるでしょう。

 

以上がテンプレートでのLP制作方法のメリットでした。しかし、LPのデザイン面で考えるとデメリットも…
こちらもいくつかご紹介していきます。

 

 

デメリット

  1. デザインにオリジナリティを出せない
  2. 簡単に変更ができない
  3. 装飾などの要素を追加できない

 

1.デザインにオリジナリティを出せない

LPデザインを利用する上でテンプレートを利用することで、デザインがどうしても他サイトと被ってしまうことがあります。そのため、最初のうちはテンプレートで制作していたものの、オリジナリティを持たせるためにコーディングのLPに移管したと言う例も多く耳にします。

2.制作したものを簡単に変更ができない

テンプレートの別のデメリットは、配信を行った後に簡単にはLP内の構成などの変更ができないと言う点です。多くの場合、テンプレートのLPに大きな変更を加える場合は、そのLPのコードをコピー&ペーストし、書き換える必要があります。

3.装飾などの要素を追加できない

2と並行して言えるのが、装飾などの要素が簡単に追加できないということです。
CTAボタンや複雑な装飾はコードを追加することで利用できるようになるので注意が必要です。

以上がテンプレートでのLPのメリット、デメリットでした。テンプレートで制作するLPのデザインについてまとめると

「テンプレートでのLP制作は、制作コストやリソースこそ手軽だが、オリジナリティのあるLPを作成するのは難しい」

つまり、コーディングとテンプレートのLP制作は

 

【デザインのクオリティやオリジナリティ】

コーディング>テンプレート

【制作期間やコスト面でお得】

コーディング<テンプレート

という関係性があると言えます。(大きさはユーザーのコントロールのしやすさを表しています。)

 

LP制作でのデザインーCMS編ー

ここまで制作の方法別にご紹介してきましたが、次にCMSを2つピックアップしてご紹介していきます。

 

ferret one 

株式会社ベーシックのBtoBマーケティングツール「ferret One」についてご紹介します。
ferret oneは、ノーコードでのLP制作が可能、でMicrosoft PowerPointのように画像やテキスト、装飾などをLP内に自分で配置してデザインすることが可能なツールです。

LPのテンプレートも存在しているので、初めてLP制作をする人にも安心のツールになっています。
テンプレートでの作成と同様に、HTMLやCSSの知識がなくてもLPの作成が可能で、作成後にすぐサーバーへのアップロードができます。

LPの作成の他にも

  • Webサイト制作
  • SEO分析
  • 行動履歴レポート
  • メールマーケティング
  • 見込み顧客管理
  • アクセス解析
  • ABM

などマーケティングツールと、CMSが一つに集約されたようなツールになっています。

 

ferret oneデザイン例

こちらのサイトに制作事例が掲載されています。

Squad beyond

株式会社SIVAのWeb広告運用に特化したCMSツール「Squad beyond」についてもご紹介します。

Squad beyondはコーディングとノーコードでの2種類でのLP制作が可能で、今までWordpress等で利用していたデザインも、初めて制作したLPのデザインも全て1つのツール上で管理が可能になります。

ノーコードでのLP制作では、200種類を超える装飾が標準搭載されており、こんな装飾も追加して欲しいという場合には、問い合わせに対して最短半日でカスタマーサクセスチームが装飾の制作をします。

Squad beyondは2種類のLP制作ツールの他に

  • ヒートマップ
  • レポート
  • 離脱防止ポップアップ

などWeb広告運用に必要なツールが全て集約されています。
Squad beyondについて詳しい機能を知りたい方はこちらから

まずはコレを読んで!! 全機能をざっと紹介!beyondの全体像

 

Squad beyondデザイン例

ノーコードでの制作方法では以下の動画のような簡単なLPを作成することが可能です。

また、コーディングで本格的なLPを作成することももちろん可能です。

 

実際に導入していただいた企業様の声を随時更新しています!
こちらも是非ご覧ください!

導入事例

 

まとめ

今回はLP制作におけるデザインについて、

  • 制作方法
  • ツール

の二つの観点から見ていきました。
ご自身の運用状況や社内体制に応じて、テンプレートのデザインやこだわり抜いたデザインを使い分けていきましょう。