Lightningで音楽フェスのランディングページ(LP)を作れるかやってみた


  1. Staff Blog
  2. WordPress
  3. Lightningで音楽フェスのランディングページ(LP)を作れるかやってみた

アドベントカレンダー参加中!

この記事は「Vektor WordPress Solutions Advent Calendar 2023」の12月19日の記事になります。

こんにちは!ベクトルスタッフのササキです。

昨日のちあきさんの記事「2023年はアジアにちょっと幅を広げてみたベクトルのお話」はもう読まれましたか?2023年の今年、ベクトルチームが日本から飛び出し、アジアで活動してきたあれこれを振り返っています。ぜひ読んでくださいね。

続いて今回の記事では、WordPressのテーマ「Lightning」を使って、架空の音楽フェスのランディングページ(LP)を作ってみたお話をまとめてみました!趣味全開です。

この記事のポイント

  • ノーコードで作るために、Lightning専用機能拡張プラグイン「Lightning G3 Pro Unit」を利用します。
  • コピペで使えるブロックパターンライブラリ「VK Pattern Library」のパターンをペタペタ貼って作ります。

※Lightning G3 Pro Unitは、「Vektor Passport(ベクトルパスポート)」を購入するとご利用いただけます。

この記事を読んで、自分でもやってみようかな?となったとき。環境の準備については、2022年のアドベントカレンダーの以下の記事を参考にしてください。Lightning でランディングページ(LP)を作るときの手順を、初心者さん向けに書いています。

Lightning でランディングページ(LP)を作ってみよう

WordPressテーマ Lightning でランディングページ(LP)を作る手順をご紹介します。

完成イメージ

以下の動画でぜひご確認ください。

プチ解説

どのパターンや機能を利用したのか?について、簡単に紹介していきます。

ヘッダーとヒーローエリア

まず、ヘッダーは透過にしています。プラグイン「Lightning Pro Unit」の機能を利用すると簡単です!

ヘッダー設定 | Lightning G3 Pro Unit とは | Lightning

様々なヘッダーレイアウトを選べます。また、スクロール時のグローバルナビの挙動とレイアウトを選べたり、ヘッダーを透過させたりなどもできます。

次に、ヒーローエリアの画像は、WordPress標準のカバーブロックを。カバーブロックなら動画も簡単に配置できます。

日付の部分は、以下のパターンから利用しました。こういうのを自分で組むと、バランスとか調整に手間がかかります。パターンならコピペして書き換えるだけ。

ヒーローエリア_店舗オープン_スライダー | VK パターンライブラリ

コピペで使える WordPress のブロックパターンライブラリ「ヒーローエリア_店舗オープン_スライダー」のパターンです。

ARTISTS

ARTISTS

Lightning

X-T9

ヘッドライナー2組にはこのパターンを利用しました。

ヘッドライナーとは

音楽フェスティバルでの主役級のバンド・アーティストのこと。演奏時間はほかの出演者よりも長めに設定されることが多く、トリを飾る。

スタッフ紹介_パネル風アニメーション | VK パターンライブラリ

コピペで使える WordPress のブロックパターンライブラリ「パネル風アニメーションでスタッフ紹介」のパターンです。

ほかの出演者はこのパターンを利用しました。業種が全然違うパターンでも「これ使えそう!」と思ったら、ぜひ試してみてください。

設備紹介_医療 | VK パターンライブラリ

コピペで使える WordPress のブロックパターンライブラリ「医療 設備紹介」のパターンです。

TIMETABLE

学習塾の時間割をアレンジしてみました!音楽フェスによくある、時間をずらして組むからちょっとずつタイテ被りになる….あの感じを表現しました。パターンなしではこんなの自分で組めません…….

タイテ被りとは

観たいライブが複数ある状態で、タイムテーブルの時間がかぶること。ステージ間の移動距離やかぶり具合によっては、どちらか一方を観るのをあきらめるなんてことも。。また、観たいライブがほぼ同じ時間帯に設定されてしまうと「モロかぶり」と言ったりする。

学習塾_時間割 | VK パターンライブラリ

コピペで使える WordPress のブロックパターンライブラリ「学習塾_時間割」のパターンです。

フェスじゃなくてイベント系なら、こっちのパターンが使いやすいですよー

イベント_タイムテーブル | VK パターンライブラリ

コピペで使える WordPress のブロックパターンライブラリ「イベント_タイムテーブル」のパターンです。

ACCESS




辺久ライナー

最短15分

バス

約10分







徒歩

1分

徒歩約20分

ベクロック会場

交通案内図を少しアレンジして利用しました!線のスタイルを変更するには、以下のようにします。

交通案内図とバス時刻表 | VK パターンライブラリ

コピペで使える WordPress のブロックパターンライブラリ「交通案内図とバス時刻表」のパターンです。

TICKETS

チケ代高い…!以下のパターンを利用しました。

料金プラン | VK パターンライブラリ

コピペで使える WordPress のブロックパターンライブラリ「料金プラン」のパターンです。

INFO

以下の会社案内のページから、地図を含むカラムのパターンを利用しました。

会社案内 | VK パターンライブラリ

コピペで使える WordPress のブロックパターンライブラリ「会社案内」のパターンです。

NEWS

ここは、VK Blocks Pro の投稿リストブロックを利用しました。

投稿リスト(Pro版のみ)

投稿リストを固定ページに表示することができます。好きな場所に投稿リストを呼び出せるのでトップページなどの作成に大変便利な機能です。

フッター

VK ROCK 2023


Follow us !

このLP下部のフッターの部分だけ利用しました!

新規店舗オープン | VK パターンライブラリ

コピペで使える WordPress のブロックパターンライブラリ「新規店舗オープン」のパターンです。

まとめ

いかがでしたか?あなたも架空の音楽フェスのサイトを作って、部屋でひとりニヤニヤしてみませんか?

最後に。パターンは複数のブロックを組み合わせているため、入り組んだ構成になっているものもあります。
作業中に、今どのブロックを選択しているのかは、編集画面最下部でわかります。また、ぜひリストビューを確認してみてください。「すごい!こんな風に組んでるの?!」って新しい発見があるかもです。

明日は、ベクトルスタッフのDRILL LANCERさん、が記事を書いてくれます!「Lightning G3 Three Column Unit をアップデートした話」とのことで、お楽しみにー!

この記事を書いた人

ササキ カオリ
ササキ カオリ
株式会社ベクトルでリモートワークしながら某レンタルサーバー会社にも時々勤務しているパラレルワーカーです。WordCamp Osaka 2019登壇しました。フジロックが好き。
フルサイト編集に対応したブロックテーマ X-T9

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。


PAGE TOP

このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。