ランディングページ作成の流れ
ランディングページ（LP）を作る際は、下記の流れに沿って行うとスムーズです。
- コンバージョン(CV)の決定
- ターゲット層・ペルソナの決定
- ページを構成する情報の収集・パーツ分け
- ライティング - 掲載文章の作成
- ページ構成（ワイヤーフレーム）の決定
- ページデザインの決定
- コーディング
- ページの検証
- 公開
Webデザイナーの担当は？
上記のLP作成フローのうち、Webデザイナーが担当する業務は“6.ページデザイン”の部分です。制作会社などでは完全に分業制になっていて、デザイン作成のみを行っているということもあります。
しかし、フリーランスでWebデザイナーとして仕事を受け持った場合は、Webディレクターやコーダーの業務範囲までを行う場合もあります。クライアントがWebに詳しくない場合は、ディレクション・ページに掲載する情報収集やそれ以前から行わなくてはいけない時もあるでしょう。 一人でWebサイト制作会社の受け持ちを全て行わけです。
フリーランスではない場合も、会社の方針や状況によって「デザイン」以外の業務までWebデザイナーが受け持つケースは結構あります。デザインからコーディングまでを通しで行ったり、製品パンフレットを渡されてLPに再構築したり、というパターンです。
このためWebデザイナーも、LPの構成や、よく使われるパーツにはどのような意図があるのかなど、Webマーケティング領域までの知識が必要です。しっかりとした知識はアドバンテージになります。
クライアントが詳しくない方の場合は、「こういうパーツを入れた方が良いですよ（なぜならば～）」と提案できるようになることを目指しましょう！
LP制作はLPを見ることでも学べる
ランディングページのデザインやパーツ分け・構成は理論的な部分もあります。
次回以降のレッスンで紹介する理論やパターンを知ることも、クライアントとの話し合いや制作に必要です。
しかし、もう一つ大事なことがあります。
それは「実際にリリースされているページから学ぶ」ということ。
現役のランディングページを見ることでデザインや構成の目的を体感し、自分の中のストックを増やしていくことも重要です。日頃から意識してランディングページやWebサイトを見ている、これも大切な学習です。
また、業務でも既存のページをデザイン参考に使用することは多々あります。
プロでも、完全な白紙からデザインしているわけではないのです。
とは言え、ランディングページは広告をクリックしないとたどり着けないページも多いですよね。下記では参考LP探しに役立つサイトと探し方を紹介します。 本講座の実習や課題制作にも、業務にも役立ちますよ。
LPのギャラリーサイト7選
①LPアーカイブ
LPアーカイブは掲載数が多く、更新頻度も高いランディングページアーカイブサイト。
PC/スマホ別、イメージ・色・業種など絞り込みも可能。
電球と！マークのアイコンから移動できるブログ（LPノウハウ)も、Webマーケを中心に用語解説やTipsなど役立つ情報が多く公開されています。
②Parts.
Parts.はLPをパーツごとに分けて掲載してくれている便利サイト。
ここだけデザインがしっくりこない……なんて時にとても役立ちます。掲載元URLも載っているので「このデザインなら、他のパーツはどんな風にするんだろう？」と考えてから見てみても勉強になりますよ。
企業系、サービス系LPに強い半面、ファッションや美容系は少ないです。
https://partsdesign.net/
Parts. - SaaS/LPのパーツ別Webデザイン集
③LP幹事
LP幹事は、Web制作に関する相談サイト“Web幹事”の企業が作成しているLPデザインギャラリーです。業種やイメージなどのカテゴリー分けが細かく、業種×カラー×イメージを使った絞り込み検索ができるので、デザイン参考を探すにはとても便利。
④Web Design Clip [L]
Web Design Clip [L]もカテゴライズが細かく、タグ検索でボタンや入力フォームなどの設置パーツデザインでも絞り込み可能なことが特徴。掲載数はあまり多くありませんが、クオリティの高いページを厳選されている感もあります。
シンプルなデザインなので、目的のデザインを探す時・勉強のためにいろいろなデザインを見たい時、どちらも役立つサイトです。
⑤LP（ランディングページ） | SANKOU!
WebデザインギャラリーサイトSANKOU!にある、LPカテゴリーも充実しています。
「ステキなインフォグラフィックあり」「グリッドレイアウト」など他サイトにはないタグがあること、全体のカラーテイストではなく配色イメージで検索できることが特徴。サイト自体もシンプルかつオシャレで、使いやすいですね。
https://sankoudesign.com/category/lp/
LP（ランディングページ） | SANKOU!
⑥LP advance
LP advanceも複数条件を指定した絞り込み検索ができます。
特徴的なのは「LPのキャッチコピーを見る」という項目があり、業種ごとにデザインではなくキャッチコピー中心の比較ができる点です。LPやバナー制作でコピーを考えなくてはいけないときに役立ちます。
⑦ランディングページ（LP）集めました。
タイトル通り、ランディングページがひらすらクリップされています。LPまとめサイト系では最古参のサイトなので、掲載年代別にみるとページ構成の変化やデザイントレンドの移り変わりも見えてくるかもしれません。
カテゴリーは分けはカラーと業種のみとシンプル。目的のイメージがある場合は少し探しにくいかもしれません。化粧品関係のLP掲載数がかなり多いのが特徴。
ギャラリーサイト以外のおすすめ
Webギャラリーサイトは制作者の好みも入りますし、自分が制作する業種のクリップが少ない場合もあります。別ルートからもデザイン参考を探せると、よりアイディアが広がるでしょう。
Pinterest（ピンタレスト）
広告バナー参考探してでも登場したPinterest。Webサイト上にある画像を集めてブックマークできるサービスで、自分が保存した画像をまとめてシェアする目的でよく使われています。
が、実は画像検索機能がものすごく優秀。
ユーザーが参考としてアーカイブしたLPデザイン集を見ることも出来るため、デザインアイディア探しにも活用できます。自分のアカウントを作って、独自のデザイン参考ボードにまとめるのも良いですね。
業種やテイストで検索すると結構出てきます。
ただしマイナーなワードを入れてしまうと欲しい情報が出てきません。作成するLPの種類によっては、関係ない画像のほうが多く出てきてしまう可能性もあります。
ペライチ（テンプレート一覧）
ペライチというホームページ作成サービスがあります。
テンプレートが用意されていて、Wordを使うような感覚で文字を打ち替えたり、色を変えたりするとWebページとして公開できる仕組みになっています。
ペライチは型（テンプレート）をアレンジする仕様なので、ベースとなるテンプレートがものすごく豊富。LPとしての必要なパーツが組み込まれていて、オーソドックスな作りテンプレートが多いです。
お金を頂いて完全オリジナルのWebサイトを作るのが私達のウリですから、これよりクオリティの高いページを作る、という一種の目安にもなるでしょう。
上記で紹介したサイト以外にも、LPまとめや参考サイトは沢山あります。
時間のある時にブックマークを整理して各サイトの特徴を掴んでおくと、業務の時に「時間がない、参考も見つからない、もっと時間がない」という負のループを起こしにくくなります。