この記事について
この記事は、最近VK Pattern Libraryに登録されたプレミアムパターン（有料版）のランディングページ（LP）を4つ紹介しています。
プレミアムパターンのご利用は、ベクトルパスポート有効期間中のVWSアカウントが必要です。
ランディングページ（LP）は、特定の目的を達成するために設計された1ページのWEBページのことを指します。
最近では、企業がより効果的に製品やサービスを販売するために、訴求力のあるランディングページを提供することが不可欠になってきています。
ランディングページは、企業の魅力的な面をアピールすることができるのと、求職者の応募意欲を高める効果や採用活動のあらゆるプロセスの効率化にもつながります。人手不足が深刻化する中で、訴求力のあるランディングページを用意することは、企業にとって重要なポイントとなっています。
そういった背景もあり、VK Pattern Library ではランディングページに力を入れています。
ここでは最近登録したランディングページのデザインポイントや編集のコツなどをご紹介していきます。
ランディングページの作り方についてはこちら
Lightning でランディングページ（LP）を作ってみよう
ランディングページ4選
LP_求人_カスタムCSSあり
ビジネス全般で幅広くご利用いただける採用LPパターンです。
どんな業種にも適応できるように、求人サイトでよく使われる「メッセージ」「募集職種・募集要項」「メンバー紹介・インタビュー」「企業情報」の基本的なコンテンツを載せています。
※ナビゲーション付きのLPサイトです。ナビゲーションのメニューの設置方法はこちらをご参照ください。
デザインのポイント
- メインビジュアルのキャッチは、アニメーションブロックを使用して速度を上下ずらして一列づつ読みやすくしています。
少し左に余白を空けてSCLOLLの文字で下のコンテンツへの誘導を促しています。 - INFO部分はスライダーブロックと投稿リストで1件づつスライドする動きをつけて、目立たせています。
- メッセージ部分は、テキストを中央に寄せにすることで、他のセクションとの差をつけていて、目がいくようにしています。
- MISSIONとVISIONをいれることで、企業と求職者の価値観の合った人材を募集できるようにしています。
- 募集職種の一覧は、カラムを少しづつずらして目線を誘導しています。
適切な人材を確保できるように、募集背景や業務内容を詳しく掲載しています。 - 募集要項は見やすくシンプルな表にしています。
- メンバー紹介は、カラムを少しづつずらして目線を誘導しています。
会社の雰囲気が伝わるように、社員インタビューを載せています。 - 全体的には、タイトルを右寄せ・左寄せ・中央と配置していて、他のセクションとの差別化を図っています。
［編集のコツ］
- INFOMATION部分は1件スライドなので、スライダーアイテムの投稿リストブロックの「表示条件」>「表示件数」は1件となっています。
スライダーアイテム2つ目は「表示条件」>「オフセット数」は1にすることで、2件目から投稿リストが表示されています。
スライダーアイテム3つ目は「表示条件」>「オフセット数」は2にすることで、3件目から投稿リストが表示されています。 - メンバー紹介は、グリッドカラムカードで実装していますので、ページ内リンクはグリッドカラムアイテムのリンクURLから挿入しています。
LP_求人_医療_カスタムCSSあり
医療系でご利用いただける採用LPパターンです。
※ナビゲーション付きのLPサイトです。ナビゲーションのメニューの設置方法はこちらをご参照ください。
デザインのポイント
- メインビジュアルのキャッチコピーとリード部分は白い枠で囲い、背景色と背景画像をずらして目立つようにしています。
- メッセージ部分の本文は、短く適切な内容を載せて、読みやすくにしました。
- 新着情報部分は、スライダーブロックのスライダーアイテム内に投稿リストブロックをカード表示で4件表示にしていて、多くの情報が見えるようにしています。アイキャッチ画像があると記事の内容を視覚的にイメージしやすいです。
- 募集職種は、背景色をずらして目線を誘導しています。
職種紹介の本文は、画像と重ねて目立つようにしています。 - メンバー紹介は、スライドさせているので、省スペースで多くのメンバーが紹介できます。
- 充実した「福利厚生制度」を載せて、適切な人材が応募しやすくしています。情報を理解しやすくするためにアイコンブロックを設置しました。
- フッター上には、院内見学会のバナーを設置しています。
- 全体的には、テキストなどにアニメーションを使用していないので、シンプルで情報がすぐに見えるようにしています。（場合によってはアニメーションをつけてみてください。）
［編集のコツ］
- 職種紹介一覧部分は、ブリッドカラムアイテムの「カラム設定」>「リンクURL」にリンクを設定しています。
- メンバー紹介部分は、スライダーブロックのスライダーアイテムの中にカバーブロックを配置し、カバーブロックのコンテンツ位置を「コンテンツ位置左上」にして、業種部分（段落）が左上に表示されるようにしています。
LP_求人建築カスタムCSSあり
建築系でご利用いただける採用LPパターンです。
※ナビゲーション付きのLPサイトです。ナビゲーションのメニューの設置方法はこちらをご参照ください。
デザインのポイント
- メインビジュアルのキャッチコピーを縦に中央配置して目立つようにしています。
- メッセージ部分は、求職者の意欲を高めるキャッチフレーズにして、現場作業中の画像を背景に設置して、求職者のモチベーションを向上させる狙いがあります。
- 暗めの背景の上の白文字には、より読みやすくなるようにカスタムCSSで影を入れてます。
- より印象に残るようにセクションを斜めの線で区切っています。
- メンバー紹介部分は、スライドさせているので、省スペースで多くのメンバーが紹介できます。
- 会社案内は、数字で実績数や休日日数など、魅力的な条件を数字でアピールすることで、より多くの応募者が集まることを期待しています。
- スペシャルコンテンツを配置して、業界で働くイメージを促すために、従業員による対談コンテンツ「建築女子トーク」と「同期対談」のバナーを設置しました。
- エントリー部分の採用フローは、アイコンとテキストと矢印で簡単にまとめて、視覚的に分かりやすくしました。
- 全体的には、アニメーションや斜めの背景を利用して、スクロールしたくなるようなデザインを心がけました。
［編集のコツ］
- 職種紹介部分のバナーはグリッドカラムカードアイテムの中にカバーブロックを入れています。リンクを入れる場合は、グリッドカラムカードアイテムの「カラム設定」>「リンク URL」に設置してください。
- メンバー紹介部分はスライダーブロックのスライドアイテム内にグリッドカラムカードを入れています。
グリッドカラムアイテムボディ内にカバーブロックを「コンテンツ位置左上」にして、段落ブロックに業種を入れています。
リンクを入れる場合は、グリッドカラムカードアイテムの「カラム設定」>「リンク URL」に設置してください。 - スペシャルコンテンツ部分のバナーはグリッドカラムカードアイテムの中にカラムブロックを入れています。リンクを入れる場合は、グリッドカラムカードアイテムの「カラム設定」>「リンク URL」に設置してください。
フィットネス_トップページカスタムCSSあり
フィットネスクラブのトップページを想定したLPパターンです。
これからフィットネスクをやってみようか考えているかた向けに、入会に必要な情報を1ページに掲載しています。
デザインのポイント
- ヒーローエリアはスライダーと新着情報をブロークングリッド風にアレンジし、印象付けています。
- 最新情報は投稿リストブロックを使って、投稿から最新3件を表示しています。
- 施設の説明は、ダイナミックな写真を選びリズムを付けたレイアウトにしました。
- おもなレッスンの紹介では、代表的なクラスを4つ紹介しています。「もっと見る」ボタンで詳細ページに誘導します。
- 料金紹介は丸いラベルをワンポイントに、スタンダードプランが目立つ配色にしました。迷っているお客さんが選びやすい効果があります。
- おもなスタッフ紹介は、丸枠の写真とひとことメッセージで親しみを出しています。
- よくある質問は、初心者がひっかりそうなポイントや、入会前に気になる点を選んで表示しています。
- バナーで、無料体験レッスンや インストラクターの募集を告知。
- 地図と基本情報。
- 最後に、SNS をフォローしてもらえるよう誘導します。
［編集のコツ］
- ヒーロエリアは全幅グループのなかに2カラムブロック、左のカラムにスライダーブロックを設置しています。グループのグラデーション背景を利用し、段差を出しています。グラデーションではキーカラーが使えないため、編集する際には色を再設定してください。
- 料金紹介の丸いラベルは段落に追加CSSクラスを付与し、親であるグリッドカラムカードブロックにカスタムCSSを書いています。表示する位置や大きさ、色など調整してください。
- サイトの第一印象は写真のイメージが大きいです。写真を用意することが難しい場合は、フリー素材をうまく使うのもありです。パターンごとに「参考画像素材」を紹介しています。
この記事を書いた人
最近の投稿
WordPress2024年10月13日Advanced Custom Field をご利用の方へ
WordPress2024年7月31日記事がもっと読まれる！QAアナリティクスのご紹介- WordPress2023年4月20日サイト作成をスムーズに！パターンで作るWordPressサイト4選_LP編
WordPress2023年4月20日コピペで簡単！現場で使える枠線ボックスを使ったアラートブロックパターン8選！
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる VK AB Testing
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。