企業のWeb担当者の方は、ランディングページ制作を検討する機会があると思います。そんな方のためにランディングページ制作の手順を説明します。
ランディングページ制作には企画段階に「コンセプト設計」や「ワイヤーフレーム設計」などの工程が発生しますが、今回は計画を立てた後の制作工程についての解説をしていきます。
目次
一般的なWeb制作会社の作り方
Web制作会社ではランディングページを一から作っていきます。
制作の流れとしては、デザインソフトを使ってランディングページのビジュアル部分を制作し、コーディングによってWeb上に表示できる様にしていきます。
それぞれの工程については事項から詳しく解説していきます。
Photoshop・illustratorを駆使してデザインを作成
Web制作会社の多くは、デザインソフトにAdobeのPhotoshopとIllustratorを使用します。
Photoshopは画像の加工などに優れたソフトです。ランディングページのほとんどをPhotoshopで作ることができます。Illustratorはロゴデザインやイラスト素材を使用する際に使います。
Photoshop とIllustratorを使い、計画書に基づいてデザインを作成していきます。
デザインを作成する上で気を付けるポイントは下記の内容になります。
- 最初に見られるファーストビューは画像とキャッチコピーを強調する
- キャッチコピーやテキスト部分は可読性を意識する
- コンテンツの切り替わりは色分けしてメリハリを付ける
- 画像は雰囲気にバラつきが出ない様にカラートーンを揃える
- ボタンなどのコンバージョンはしっかりと目立たせる
HTML・CSSでコーディング
ランディングページのビジュアルができたらコーディングを行っていきます。
コーディングとはマークアップ言語であるHTMLとCSSを使ってデザインをWeb上に表示する作業のことです。コーディングを施さなければ、デザインをブラウザに表示することができません。
コーディングは、デザインと違いユーザーに見えない部分のため軽視されがちです。しかしコーディングの美しさはSEOに影響を与えます。
ランディングページはWebサイトに比べてデザインの自由度が高い分、それを忠実に再現するには高いコーディングスキルが求められます。
動きを付けるにはJavaScriptの知識が必要
ランディングページに動的なデザインを付けるには、プログラム言語の「JavaScript」が必要です。
動的デザインとは、画像が横に動いて切り替わる「スライダー」や、ボタンをクリックするとコンテンツが出現する「アコーディオン」などのことです。入力フォームのエラチェックなどにもJavaScriptが使われています。
JavaScriptは複雑な言語ですが、jQueryなどのライブラリを利用することで簡単に実装することができます。
ランディングページを一から作るメリット
ランディングページを一から作るメリットは、デザインを自由に決められるところにあります。
市販のテンプレートを使えば、ある程度のデザインクオリティで手軽にランディングページを作ることができますが、良いことばかりではありません。
ランディングページの強みは、ユーザーに見せるコンテンツの順番を目的に合わせ変えられるところにあります。あらかじめ構成の決まっているテンプレートでは最適なランディングページを作ることができません。
最近ではランディングページを手軽に作れるサービスも増えてきましたが、一から作る場合に比べてデザインクオリティは下がります。
ランディングページを一から作るデメリット
ランディングページを一から作るデメリットは、制作にスキルが必要ということです。ランディングページを作るには下記のスキルが求められます。
- Photoshop・Illustratorなどデザインソフトのスキル
- デザインの原則や色彩・広告デザインのスキル
- コーディングスキル
- JavaScriptなどプログラミングスキル
- ランディングページをサーバーにアップするスキル
ランディングページを作るだけでこれだけのスキルが求められます。その他にも企画から考えた場合、コンセプトを考えるマーケティングの知識や、広告文を作るコピーライティングの知識も必要になります。
スキルがない場合でも自作できる方法
Web業界に明るい方でなければ、一からランディングページを作ることはハードルが高いと感じるでしょう。
そういった方のために、簡単にランディングページを作成できるサービスをご紹介します。
WordPressを使用する
WordPressテーマには、ランディングページ作成機能がついているものがあります。WordPressサイトの中に直接ランディングページを作る方法です。
テンプレート感は有りますが、テーマによってはそれなりにデザイン性の高いランディングページを作ることができます。
WordPressでランディングページを作るデメリットは、ランディングページのみの利用の場合無駄が多いということです。
ランディングページ作成サービスを使用する
ランディングページ作成サービスを使用すれば、制作スキルのない初心者でもランディングページを作ることができます。
おすすめのランディングページ作成サービスを紹介します。
ペライチ
ペライチを使えば簡単にランディングページを作ることができます。国産のサービスで使いやすいことが魅力です。
メールアドレスを登録して、質問に答えていくだけでランディングページが完成します。無料で使うことができますが、機能に制限があります。
有料プランは３種類から選ぶことができます。テンプレートも豊富に用意されているので、目的の業種に合わせて選ぶことができます。
Wix
Wixはイスラエルのベンチャー会社が開発した、クラウド型のホームページビルターです。ランディングページの作成も行うことができます。
ランディングページの作成はドラック&ドロップの直感的な操作で簡単に行うことができます。
Wixの特徴は動的なデザインをとくいとしている点です。テキストを動かしたり、背景を動画にしたりすることができます。
500MBまでなら無料で使うことができ、機能を拡張したい場合は4種類の料金プランの中から選ぶことができます。
Jimdo
Jimdoは国内NO,1のシェアを誇る、クラウド型のホームページビルターです。AIビルダーという、AIが自動でホームページを作成してくれるサービスが特徴的です。
Jimdoでもランディングページを作成することができます。豊富なテンプレートからデザインを選択でき、ボタン一つでコンテンツの入れ替えができます。Jimdoは500MBまでなら無料で使用することができます。
HubSpot
HubSpotはCRM（顧客管理機能）ツールですが、CMS機能を使ってランディングページを制作できます。ランディングページは豊富なテンプレートの中から選ぶことができます。
コンテンツの配置もドラック&ドロップで簡単に変更できます。HubSpotのランディングページはCMSで作っているので手軽にABテストが行えます。
更に「スマートルール」という機能を使えば、ユーザー属性ごとに表示するランディングページを変えることができます。
まとめ
今回はランディングページの制作工程を紹介しました。ランディングページ制作にはデザインソフトやコーディングなど、様々なスキルが必要なことが分っていただけたと思います。
専門的なスキルはないけどランディングページを自作したいという方は、ランディングページ制作サービスの使用を検討してみるといいでしょう。
