WordPressで会社やお店のホームページを作りたいとき、候補に挙がるテーマのひとつが「Lightning(ライトニング)」です。
Lightningは、基本的なデザインを整えながら、必要に応じて機能を追加できる無料テーマです。会社案内やサービス紹介を掲載するサイトはもちろん、個人ブログにも利用できます。
この記事では、Lightningの特徴と基本的な使い方を、関連プラグインとの違いも含めて解説します。
- 1. 公式資料
- 2. Lightning:無料で使える国産WordPressテーマ
- 3. Lightningの主な特徴
- 3.1. 会社・店舗サイトからブログまで使える
- 3.2. 無料でも基本的なデザインを整えられる
- 3.3. 本文はブロックエディターで作成できる
- 3.4. 日本語の公式教材を利用できる
- 4. Lightningの基本的な使い方
- 4.1. ① Lightningをインストールする
- 4.2. ② 必要なプラグインを追加する
- 4.3. ③ ロゴとサイトの色を設定する
- 4.4. ④ 必要な固定ページを作る
- 4.5. ⑤ トップページと投稿一覧を設定する
- 4.6. ⑥ メニューとウィジェットを設定する
- 4.7. ⑦ スマートフォンで表示と操作を確認する
- 5. ページづくりに迷ったら、VKパターンライブラリを活用
- 6. 関連プラグインの違いを整理しよう
- 6.1. 無料版と有料機能はどう選ぶ?
- 6.2. 有料機能のプラグイン:「Lightning G3 Pro Unit」について
- 7. Lightningを使うときの注意点
- 7.1. G2とG3では、使い方や構造が異なる
- 7.2. 設定場所を役割ごとに覚える
- 7.3. コードで変更するときは親テーマを直接編集しない
- 8. まずは基本のページを作って、使い心地を確かめよう
公式資料
- Lightning | 無料で使えるWordPress公式ディレクトリ登録テーマ「Lightning」ビジネスサイトもブログも簡単に作れます
- Lightning の特徴 | Lightning
- Lightning | WordPress テーマ | WordPress.org 日本語
Lightning:無料で使える国産WordPressテーマ
Lightningは、株式会社ベクトルが開発するWordPressテーマです。WordPress公式ディレクトリに登録されており、管理画面から無料でインストールできます。個人利用だけでなく、会社や店舗などの商用サイトにも利用できます。
WordPressの「テーマ」は、サイトの基本的なデザインや、ページの表示方法を決めるものです。Lightningでは、その土台となる部分をテーマが担当し、本文の表現や追加機能を関連プラグインで補う構成になっています。
例えば、サイト全体のレイアウトをLightningで整え、本文にはVK Blocksのブロックを使い、問い合わせへの案内にはExUnitを活用するといった使い方ができます。
すべての関連プラグインを最初から使いこなす必要はありません。まずは基本のページを作り、必要になった機能を追加していくと取り組みやすいでしょう。

Lightningの主な特徴
会社・店舗サイトからブログまで使える
Lightningは、会社概要やサービス案内などの固定ページと、お知らせやブログ記事を組み合わせるサイトづくりに取り入れやすいテーマです。公式の基本設定講座も、会社やお店のホームページ制作を想定して用意されています。
作成するサイトの例として、次のような構成が考えられます。
| サイトの種類 | 掲載する内容の例 |
|---|---|
| 企業・個人事業のサイト | 会社概要、サービス案内、お知らせ、お問い合わせ |
| 店舗のサイト | お店の紹介、メニュー、アクセス、営業案内 |
| 団体・サークルのサイト | 活動紹介、イベント案内、活動報告 |
| 個人ブログ | 記事、カテゴリー別の一覧、プロフィール |
| 実績紹介サイト | 制作実績、対応業務、仕事の依頼方法 |
事業の基本情報は固定ページにまとめ、日々のお知らせは投稿で更新する、と役割を分けると運営しやすくなります。
無料でも基本的なデザインを整えられる
無料のLightningでも、色や背景、1カラム・2カラムのレイアウト、トップページのスライドショーなどを設定できます。
「カラム」とは、ページを縦方向に区切った列のことです。本文を広く見せる1カラムはサービス案内などに、本文の横にサイドバーを置く2カラムはカテゴリーや関連記事への案内を添えたい場合などに利用できます。
選べる設定を使って基本の形を整えられるため、最初からCSSなどのコードを書かなくてもサイト制作を始められます。ただし、細かな見た目を独自に調整したい場合は、追加の設定やCSSが必要になることもあります。
本文はブロックエディターで作成できる
投稿や固定ページの本文は、WordPressのブロックエディターで作成できます。見出し、段落、画像、ボタンなどを組み合わせてページを編集する方式です。
ここで知っておきたいのが、「本文をブロックで編集すること」と「サイト全体をサイトエディターで編集すること」の違いです。
Lightningは、サイト全体の設定にカスタマイザーなどを使うクラシックテーマです。ブロックテーマのように、サイトエディターを中心として全体を編集する方式とは操作の流れが異なります。
本文を作りたいときは投稿・固定ページの編集画面、サイト全体の見た目を変えたいときは「外観 → カスタマイズ」と、編集する場所を分けて覚えると分かりやすいでしょう。
なお、Lightningはtheme.jsonにも対応していますが、それによってブロックテーマになるわけではありません。
日本語の公式教材を利用できる
公式の学習サービス「ベクトレ」では、テーマの導入からトップページ、メニュー、レイアウトなどの設定方法まで、動画やテキストで学べます。教材は無料で閲覧できます。
検索で見つかる解説には古い世代向けのものもあるため、操作で迷った際は、まず公式の設定ガイドから確認するとよいでしょう。
Lightningの基本的な使い方
ここからは、新しく会社や店舗のサイトを作る場合を例に、基本的な流れを紹介します。すでに公開しているサイトのテーマを変更する場合は、バックアップを取り、可能であればテスト環境で表示を確認してから進めてください。
① Lightningをインストールする
WordPressの管理画面で、次のように進みます。
- 「外観>テーマ」を開く
- 「新規追加」または「新しいテーマを追加」を選ぶ
- 検索欄に「Lightning」と入力する
- Lightningをインストールし、有効化する

なお、新しく導入する場合は、基本的にG3の設定で利用します。古いサイトを引き継ぐ場合は、G2が使われている可能性があるため、世代の設定を確認しておきましょう。
従来の Lightning : バージョン 〜13.x まで。下記の新しいG3と比較するため「G2」と記載することがあります。
従来の Lightning との違い | Lightning
新しい Lightning:バージョン 14.x系〜。Generation3(第3世代)として「G3」と記載しています。
② 必要なプラグインを追加する
まずは標準のブロックでページを作り、表現を増やしたくなったら「VK Blocks」などのプラグインを追加する、といった進め方で構いません。
ExUnit(下記参照)などのプラグインを利用する場合も、必要な機能を選んで使いましょう。すでに導入しているSEOやアクセス解析のプラグインと、役割が重ならないか確認することが大切です。
③ ロゴとサイトの色を設定する
「外観>カスタマイズ」を開き、ロゴや色などの基本デザインを整えます。キーカラーは「色」から設定できます。

キーカラーは、サイトの印象を決める中心的な色です。Lightningでは、見出しやボタン、メニューの一部などに反映されます。
会社や店舗のロゴに使われている色を基準にすると、全体に統一感を持たせやすくなります。ただし、本文のブロックで個別に指定した色などは、キーカラーを変更しても一括で変わらない場合があります。
④ 必要な固定ページを作る
会社や店舗のサイトなら、まず次のような固定ページを用意すると構成を考えやすくなります。
- ホーム
- サービス案内・商品紹介
- 会社概要・店舗案内
- お問い合わせ
各ページは「固定ページ>新規追加」から作成します。

問い合わせフォームを設置する場合は、フォーム用プラグインなども別途用意します。
いきなりすべてのページを完成させようとせず、ページ名と見出しを先に決め、文章や画像を順に埋めていくと進めやすいでしょう。
⑤ トップページと投稿一覧を設定する
作成した「ホーム」をサイトのトップページに表示する場合は、「設定>表示設定」で「ホームページの表示」を「固定ページ」に変更し、対象のページを指定します。

お知らせやブログの一覧も用意したい場合は、一覧用の固定ページを作成し、「投稿ページ」に指定します。
Lightning G3では、トップページに指定した固定ページの本文へ、ブロックを配置して構成する方法が基本です。
⑥ メニューとウィジェットを設定する
「外観>メニュー」または「外観>カスタマイズ>メニュー」で、各ページへのリンクを設定します。メニューを作成したら、表示する位置も確認しましょう。
ウィジェットは、サイドバーやフッターなど、テーマが用意した場所に情報を配置する仕組みです。不要な初期表示を取り除き、サイトの目的に合った案内を設置します。

⑦ スマートフォンで表示と操作を確認する
ひととおり作成したら、パソコンだけでなくスマートフォンでも確認しましょう。
- 文字が小さすぎないか
- 画像の重要な部分が切れていないか
- メニューを開き、目的のページに移動できるか
- ボタンを押しやすいか
- 問い合わせフォームの送信とメール受信ができるか
管理画面のプレビューに加えて、実際のスマートフォンで触ってみると、読みづらさや操作しにくい部分を見つけやすくなります。
ページづくりに迷ったら、VKパターンライブラリを活用
ページの見せ方を一から考えるのが難しい場合は、公式の「VKパターンライブラリ」が役立ちます。
公開されているパターンをコピーし、WordPressの編集画面に貼り付けることで、用意されたレイアウトをもとにページを作れます。あとは、自分のサイトに合わせて文章や画像を変更します。
ただし、パターンごとに必要なプラグインや利用条件が異なります。無料で利用できるものもあれば、VK Blocks Proなどの有料製品を必要とするものもあります。
貼り付ける前に「使用プロダクト」などを確認し、使用する画像の条件やリンク先も確認しましょう。デモの文章や連絡先が残っていないかも、公開前に見直してください。
参考リンク
関連プラグインの違いを整理しよう
Lightningを使ううえで、テーマ本体と関連プラグインの役割を理解しておくと、必要な機能を選びやすくなります。
| 製品名 | 主な役割 | 無料・有料 |
|---|---|---|
| Lightning | サイト全体の基本デザインやレイアウトを担当するテーマ | 無料 |
| VK Blocks | 吹き出し、スライダーなど、本文で使えるブロックを追加 | 無料 |
| VK All in One Expansion Unit(ExUnit) | SNS連携、お問い合わせ情報の表示、CTAなどを追加 | 無料 |
| VK Block Patterns | 独自に作成したブロックパターンを登録・管理 | 無料 |
| Lightning G3 Pro Unit | Lightningのヘッダー、フッター、レイアウトなどを拡張 | 有料 |
| VK Blocks Pro | VK Blocksのブロックや編集機能を拡張 | 有料 |
「CTA」は、問い合わせや申し込みなど、読者に次の行動を案内する部分です。「ブロックパターン」は、複数のブロックを組み合わせたレイアウトのひな形を指します。
役割の違いとして、ページの本文を作りやすくするのがVK Blocks、サイト運営に役立つ機能を補うのがExUnitと考えると整理しやすいでしょう。
Lightning G3 Pro UnitとVK Blocks Proも、それぞれ別のプラグインです。G3 Pro Unitを有効化するだけで、VK Blocks Proの機能まで自動的に使えるわけではありません。
無料版と有料機能はどう選ぶ?
基本的な会社案内やブログであれば、まず無料のLightningと必要な無料プラグインで作り始める方法が考えられます。
有料機能を検討する際は、「どの部分を、どのように変えたいのか」を明確にすると選びやすくなります。
| やりたいこと | 検討する製品・構成 |
|---|---|
| 基本的な会社案内やブログを作る | Lightning+必要な無料プラグイン |
| 本文で使えるブロックや編集機能を増やす | VK Blocks Pro |
| ヘッダー・フッターをブロックで独自に作る | Lightning G3 Pro Unit |
| スマートフォンの画面下に固定ナビゲーションを設ける | Lightning G3 Pro Unit |
| ページヘッダーや記事一覧の表示を細かく調整する | Lightning G3 Pro Unit |
有料機能のプラグイン:「Lightning G3 Pro Unit」について
Lightning G3 Pro Unitは、無料テーマのLightningに機能を追加する専用プラグインです。
現在は、ライセンスパッケージ「Vektor Passport」に含まれています。購入時には、使いたい機能に加え、ライセンス期間や更新条件も確認しましょう。
なお、旧製品の「Lightning Pro」は有料テーマであり、現在の「Lightning+G3 Pro Unit」とは構成が異なります。名称が似ているため、古い購入案内や設定記事を読むときは注意してください。
Lightningを使うときの注意点
G2とG3では、使い方や構造が異なる
Lightningには、旧世代のG2と現行のG3があります。世代によってトップページの作り方やウィジェットの構成などが異なり、古い解説の手順をそのまま使えない場合があります。
特に、既存サイトをG2からG3へ切り替える操作は、通常の更新と同じ感覚で行わないようにしましょう。公式でも互換性への注意が案内されているため、事前のバックアップと表示確認が必要です。
設定場所を役割ごとに覚える
Lightningと関連プラグインを組み合わせると、設定場所が複数に分かれます。
| 変更したい内容 | 主に確認する場所 |
|---|---|
| サイト全体の色やレイアウト | 外観 → カスタマイズ |
| 記事・固定ページの文章や画像 | 各投稿・固定ページの編集画面 |
| ページへの案内メニュー | 外観 → メニュー |
| サイドバーやフッターなどの配置内容 | 外観 → ウィジェットなど |
| 関連プラグインの追加機能 | 各プラグインの設定画面 |
設定が見つからない場合は、まずテーマ本体の機能なのか、追加したプラグインの機能なのかを確認すると探しやすくなります。
コードで変更するときは親テーマを直接編集しない
通常の設定やページ編集だけであれば、最初から子テーマを用意する必要はありません。
一方、PHPやテンプレートファイルを変更する場合は、子テーマなどを使って管理します。親テーマのファイルを直接変更すると、テーマ更新時に変更が失われるためです。
子テーマは、元のテーマの機能やデザインを引き継ぎながら、独自の変更を加えるためのテーマです。Lightningでは、公式の子テーマサンプルが用意されています。
まずは基本のページを作って、使い心地を確かめよう
Lightningは、用意された基本デザインを活用しながら、ブロックや関連プラグインで必要な機能を追加していきたい方に向いたテーマです。
初めて使うなら、まず「トップページ」「サービスなどの案内ページ」「お知らせ・ブログの一覧」を作ってみてください。その過程で、本文の表現を増やしたいのか、ヘッダーやフッターを独自にしたいのかが見えてきます。
操作に迷ったときは、公式のLightning基本設定講座を参照しながら、必要な設定を一つずつ進めてみましょう。



