【Web制作実践】LPを制作してみる Part1 LP制作の概要
そもそもLPとは？
Landing Pageの略でLPと呼ばれている。ここでいう"Landing"は「着陸・着地」の意味。
広い意味では、「とある訪問者がそのWebサイトで最初に訪れたページ」となり、Google Analyticsで分析できるのはこちら。
ただ、Web制作の現場で「LP制作」というと、商品やサービスのPRを目的とした「特設ページ」として制作されることが多い。
商品やサービスのPRから購入などのアクションまで1つのページ内ですべて完結させるような作りとなるので、1ページが非常に大きくなりやすい。
また、ページを制作する目的が「商品やサービスへの【問い合わせ】【購入】【申し込み】を行ってもらう」ということになるので、マーケティング寄りの作業が非常に多くなる。
業務としてLP制作をトータルで行おうとすると、かなり広い範囲の知識・ノウハウが必要になってくるが、HTML/CSS/JavaScriptのコーディングという観点では一般的なホームページと特に違いはなく、LPならではの特殊な技能がいるわけでは無い。
そのうえ、デザイン的にも目を引く凝ったLPも多数あり、1つのページ内で様々なテクニックを求められることも多いので、HTML/CSSの学習を行う上でLP制作は「実戦練習用のネタ」としてはおススメ。
LP制作時のワークフロー
LPもWebページの一種とはいえ、基本的にLPは業務の中で制作するものだし、コーポレートサイトや個人のブログとは違って「商品やサービスへの【問い合わせ】【購入】【申し込み】を行ってもらう」という目的がより明確なので、LP自体の成否はコーディングする前の準備がモノをいう。
なので、純粋にHTML/CSSの勉強ということであれば、Part1の内容はすっ飛ばしていきなりコーディングしても良いかと思う。
ただ、LP制作という業務の予行演習のつもりであれば、事前準備のステップから全部やっていく必要があるが、まったくの新規でオリジナルのLPを作っていくのもハードルが高いので、既存のLPを参考にしながら、このLPだったら各ステップでそれぞれどういうことを準備するのか、自分なりにシミュレーションすれば良いかと。
それに、実際の業務でコーディングに専念するとしても、そういった場合はディレクターやデザイナーとコミュニケーションを取りながら進めていくことになるので、全体の流れやLPを制作する目的なんかをちゃんと把握しておいた方が、コミュニケーションの質も上がり、結果仕事のクオリティーも上がるので、全体を理解しようとするのは重要。
LP制作の過程を大まかに図でまとめると以下のようになる。
以下、各工程について、簡単に紹介。
要件定義
マーケティング面の要件
- そもそものLPの目的を明確に
- 何を誰に売りたいのか？
実際のLP制作だと最重要になるのがこの工程。
いくら素晴らしいデザインを作っても、完璧なコーディングを行ったとしても、そのLPで売りたい商品・サービスに対して、ターゲットの設定を間違えていたら成果が上がるわけはないので、ここはマーケターの腕の見せ所。
実装面の要件
- 対象のデバイスはどうするのか？
- PCメイン or スマホメイン
- デザインの方向性はどうするのか？
- インパクト重視なのか、落ち着いた雰囲気なのか、など
- ワイヤーフレーム（大まかなページのレイアウト）の準備
マーケティング面の要件を踏まえて、どういう層にアピールするかによって、デザインの方向性やより重視するデバイスも変わってきたりするので、その辺のすり合わせをキッチリと最初にやっておく。
マーケターやディレクターが必ずしも技術面に明るいとは限らないので、技術的に実現可能な要件なのか判断するためにもプログラマー・コーダーのサポートも重要になってくる工程。
デザイン・ライティング
- ワイヤーフレームやデザインの方向性をもとに、実際のデザインを行う。
- バナーなどに入れ込むキャッチコピーを考える
- その他の箇所の文章全般を用意
この辺りは、デザイナー・ライター・ディレクターでコミュニケーション取りながら進める工程。
HTML/CSSコーディング
- HTMLコーディング
- CSSコーディング
- JavaScriptコーディング
- 問い合わせフォームの設置
表示チェック＆動作チェック
- 問い合わせフォームの動作チェック
- 画面アクション（アニメーションなど）の動作チェック
- 想定しているデバイスでの表示チェック
完成→運用
チェックが終われば、LPをリリース（公開）することになります。
ただ、実際には作って終わりになるわけでは無く、ちゃんと売り上げや問い合わせにつながったのか、という評価を行う必要があり、それを踏まえて、修正だったり、別バージョンを作ったり、ということも行う。
とはいえ、その後のサイクルも何か特別なことをする訳ではなく、「要件定義（見直し）」→「デザイン・ライティング」→「コーディング」の工程を繰り返していくことになる。
ということで、Part1はここまで。
どちらかというとディレクター志望の人向けの内容になってしまったが、Part2からは実装の話に入っていく。
Discussion