Lightningで使えるVKブロックパターンライブラリが超便利【コピペでサイト制作】
ワードプレスにはパターンライブラリが準備されています。
『気に入ったパターンをコピペしてブロックエディターにペーストするだけ』
という優れものですが、基本的に英語で制作されているので使ってみるとイメージと違ったりしますよね。
しかしテーマLightningで有名な（株）ベクトルさんのVKブロックパターンライブラリなら日本語のパターンが使えるので嬉しい限りです。
- VKブロックパターンとは
- VKブロックパターンの特徴（メリット・デメリット）
- VKブロックパターンの使い方
本記事は、2022年11月末のVektor Passportおよびプレミアムパターンのリリースに伴い、2022年12月4日に加筆・修正しました。
VKブロックパターンとは
| URL | https://patterns.vektor-inc.co.jp/ |
| 制作者 | 株式会社ベクトル |
| 価格 | 無料 |
| 使用条件 | ・ワードプレスversion5.8以上のブロックエディタ ・VK Blocks、VK Blocks Proなど各パターン記載の使用プロダクト（プラグイン）が必要 |
プラグインVK Blocks（無料）やVK Blocks Pro（有料）はテーマLightningのブロック機能拡張用プラグインです。しかしこれらのプラグインをインストール・有効化すればLightning以外のテーマでもVKパターンライブラリは使用可能です。
ただし、サイトのコンテナ幅がLightningと違いすぎるとレイアウト的に微妙となります。もしLightning以外のテーマでVKパターンライブラリ使いたい場合は、プラグインVK Blocks（無料）をインストール・有効化してから試してみるとよいでしょう。
とはいえ、VKブロックパターンを最大限に活用するためには、テーマLightning+VK Blocks Proの組み合わせ、さらには、後述するようにベクターパスポートへの加入がおすすめです。
VK ブロックパターンライブラリのページは以下の通りです。
一番上のキャッチフレーズ『コピペで使えるWordPressのブロックパターンライブラリ』の通り、コピペで使えるさまざまなブロックパターンがストックされています。
VKブロックパターンの特徴
WordPress.orgの公式ブロックパターンライブラリと違って、VKブロックパターンには以下の特徴があります。
- 検索機能が使いやすい
（業種・パターンタイプ・使用プロダクト・キーワード・使用デモサイトで検索可能） - プレビュー画面があり、レシポンシブ表示の確認もできる
- 使用素材（画像）の元サイトがわかる
- LightningやEvergreen等各使用プロダクトの各機能をうまく活かしたパターンとなっている
- お気に入りに登録すれば、ワードプレスのブロックエディター内で呼び出すことができる
（ベクターパスポートに加入し、VKパターンライブラリのアカウント登録が必要） - より洗練されたプレミアムパターンが使用できる
（ベクターパスポートに加入し、VKパターンライブラリのアカウント登録が必要）
公式サイトのパターンライブラリよりも使いやすいのがわかりますよね。
次の使い方の説明で、これらの特徴も確認していきましょう。
反対にデメリットとしては以下の通りとなります。
開設されて日が浅いのでパターンの数は多くない（2022年2月27日現在35パターン）- 使用プロダクトによって使用できるパターンが限定される
本記事を最初に投稿した2022年2月27日段階では、開設されて日が浅かったため選択できるパターン数は35パターンでしたが、2022年12月4日現在152パターンが公開中です。
使用プロダクトについても使い方のところで詳しく説明します。
VKブロックパターンの使い方
基本的な使い方
使い方は簡単。次の3ステップだけです。
（もちろん、サイト側にはプラグインVK BlocksやVK Blocks Proがインストール・有効化されている前提）
- プラグインをインストール・有効化しておく
- パターンをコピー
（VK パターンライブラリから気に入ったパターンをコピーします） - ブロックエディターにペースト
（ブロックエディターの本文欄にペーストします）
１．プラグインをインストール・有効化しておく
有効化するプラグインにより選択できるパターン数が変わります。
VK BlocksおよびVK Block Patternsは無料なので、最低限インストール・有効化しておきましょう。
有料版であるVK Blocks Proを使用の場合はVK Blocksは不要です。もちろんですが、有料版のほうが選択できるパターン数は多くなります。
２．パターンをコピー
下記事例では料理のメニューパターンをコピー
３．ブロックエディターにペースト
段落ブロックにパソコンのペースト操作をすればOKです。
メニューパターンが本文欄にペーストされました。あとは画像差し替えやテキストを編集してコンテンツを仕上げます。
検索機能
ページ上部の検索機能によってパターンを絞り込むことができます。
| 検索項目 | 種類 |
|---|---|
| 業種 | 指定なし・ウェブ制作・システム開発・デザイン・ダミーテキスト・ビジネス全般・医療・士業・建築・不動産・教育・スクール・求人サイト・福祉・飲食 |
| 使用プロダクト | 指定なし・Evergreen・VK Block Patterns・VK Blocks・VK Blocks Pro・X－T9・カスタムCSS |
| パターンタイプ | セクション（CTA・Q&A・カラムレイアウト・スタッフ紹介・スライダー・テキスト・ヒーローエリア・ボタン・メニュー・レビュー・地図・料金表・注目・流れ・表・製品紹介）・プレミアムパターン・ページ全体（404・サービス案内・トップページ/LP・プライバシーポリシー・会社案内） |
| 使用デモサイト | Evergreen・Katawara・学習塾・工務店・採用情報・歯科医院・法律事務所・訪問介護 |
| キーワード | （任意のキーワードを入力する） |
| お気に入り | お気に入りで絞り込む（登録している場合） |
キーワード検索除くこれらの検索は、各パターンの下部にあるメタ情報と連動します。
使用プロダクトについて
指定できる使用プロダクトはいずれも（株）ベクトルさんが提供しているプラグインまたはテーマです。使用プロダクトに応じて使えるパターンが変わります。
- VK Block Patterns（ワードプレス内で独自パターン登録といった機能のほか、VKパターンライブラリと連携するのに使用。無料）
- VK Blocks（ブロック拡張用プラグイン。無料）
- VK Blocks Pro（VK Blocksの有料版）
- Evergreen（デザインスキンプラグイン。プラグインLightning Pro Unitと合わせて使用する）
- X-T9（ベクトルさんが提供するブロックテーマです。ワードプレスのフルサイト編集が主流になれば、Vectorさん提供テーマもLightningからX-T9に軸足が移ると予測されます）
- カスタムCSS（VK Blocks Proに付随しているブロック毎にCSSを記述する機能です。）
無料のVK Block PatternsとVK Blocks以外を使用するには、Vektor Passportの購入が必要です。
（テーマX-T9そのものは無料）
有料プラグインのほうが高機能なブロックを使用できるため、ブロックパターンのバリエーションも豊富で素敵なデザインが多くなります。
- テーマ機能拡張プラグインLightning G3 Pro Unit
- ブロック追加プラグインVK Blocks Pro
- プレミアムパターンライブラリおよびパターンのお気に入り登録機能が使用可能
- テーマLightning Pro（旧製品）
- ライセンスキー
※Evergreenは現在キャンペーン中につき、Vektor Passport購入者であれば無料ダウンロードできます。
つまりのところVektor Passportに加入すれば、全パターンが使用可能だということです。
Vektor Passportはサブスクリプションサービスです。ライセンス期間終了後はアップデートはできませんが、引き続き継続使用可能です。
| Vektor Passport １年ライセンス | 9,900円 （税込） |
| Vektor Passport ３年ライセンス | 26,400円 （税込） |
| Vektor Passport ５年ライセンス | 39,600円 （税込） |
パターンのプレビュー
各パターン右下の”詳しく見る”ボタンからプレビュー画面に入ることができます。
プレビュー画面の上部でデバイス幅の切り替えが可能です。
デバイス幅は次の６種類が切り替え可能です。
- 超特大幅/Extra Extra Large(1400px)
- 特大幅/Extra Large(1200px)
- 大幅/Large(992px)
- 中幅/Medium(768px)
- 小幅/Small(576px)
- 極小幅/Extra Small(360px)
使用素材の元サイト情報
画像が含まれているパターンでは、パターンの左下に画像素材の元サイト名が表示されています。
これらの画像データは自分のワードプレスサイトにペーストした後でも、ベクトル社のサーバーから引っ張ってきています。したがって、必ず差し替えて使ってください。
※パターンの画像素材はあくまで仮なので必ず差し替えて使うようにしましょう。
パターンによっては素材元情報の記載がないものがあります。おそらくベクトルさんオリジナルなのだと思いますが、必ず差し替えて使用するようにしましょう。
各プロダクトの特徴を生かしたパターン
（株）ベクトルさんが作成したパターンだから当然だと言われるかもしれませんが、それでも実際に使ってみてあらためて実感するメリットです。
例えば、各パターンを自分のサイトにコピペしてみると、サイトのキーカラーに合わせて自動的に配色されます。あらためて配色し直す必要がないわけで、ワードプレスの公式パターンライブラリではできないことですね。
当然キーカラーを変更するだけでパターン内の配色も自動変更されます。ちなみにキーカラーは、外観＞カスタマイズ＞色 で設定できます。
また、背景画像とテキストコンテンツの配置をわざとずらしたレイアウトを使用したければ、使用プロダクトをEvergreenで検索すれば簡単にパターンが見つかります。Evergreenでは標準でずらしレイアウト用CSSクラスが準備されているからです。
https://web-children.com/2021/11/21/shift-layout-using-everg...お気に入り登録とプレミアムパターンの使用方法
すでに紹介したVektor Passportに加入すれば、パターンのお気に入り登録とプレミアムパターンの使用が可能となります。その場合、VKパターンライブラリのアカウント登録が必要となります。
Vektor Passportや旧サービスであるLightning G3 Pro Packに加入しているユーザーさんは、すでにベクトルさんのマイアカウントをお持ちだと思いますが、ここでいうVKパターンライブラリのアカウントはそれとは異なりますのでご注意ください。
VKパターンライブラリのアカウント登録
VKパターンライブラリのアカウント登録手順は次の通りです。
- ベクトルのマイアカウントにログイン
- メニューの中の”VK Pattern Library ユーザー登録”をクリックして登録画面へ
- 規約に合意し、”VK Pattern Libruary登録”ボタンをクリックし、登録手続き
（メールアドレスとパスワードを登録）
VKパターンライブラリへログインする
VK Pattern Libruaryアカウントに登録したメールアドレスとパスワードを使ってログインします。
ログインする前には表示されていなかった、プレミアムパターンのコピーボタンとお気に入り追加ボタンが表示されるようになります。
プレミアムパターンの使い方は他のパターンと同じですが、ベクトルさんがデザインに力を注いだ力作だけあって非常に洗練されており、そのままサイトに使用可能です（もちろん画像とテキストの入れ替えは必要ですが）。
お気に入り登録したパターンをブロックエディター内で呼び出す
お気に入り登録したパターンをブロックエディター内で呼び出す手順は以下の通りです。
①画面左上の+マークをクリック
②パターンタブを選択
③ドロップダウンメニューの中の”VK Patterns Libruaryのお気に入り”を選択
④表示されたパターンをクリックして本文内に挿入
まとめ
VKブロックライブラリの特徴と使い方について紹介してきました。
すごく使い勝手がよいパターンライブラリだとわかって頂けたと思います。パターンライブラリを使えば、
- サイトの雛形が簡単に出来上がる
- 必要な素材やテキストがイメージしやすくなる
- 自分のサイト制作やクライアントとのイメージ合わせに役立つ
といったメリットがあるので、積極的に使ってみるとよいでしょう。
しかしVKブロックライブラリを100％活用するには、Vektor Passportへの加入が欠かせません。この機会にご検討されてみてはいかがでしょうか。
テーマLightningとLightning G3 Proについては、以下の記事もおすすめです。
