ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

Lightningで使えるVKブロックパターンライブラリが超便利【コピペでサイト制作】

ワードプレスにはパターンライブラリが準備されています。

『気に入ったパターンをコピペしてブロックエディターにペーストするだけ』
という優れものですが、基本的に英語で制作されているので使ってみるとイメージと違ったりしますよね。

しかしテーマLightningで有名な(株)ベクトルさんのVKブロックパターンライブラリなら日本語のパターンが使えるので嬉しい限りです。

本記事でわかること
  • VKブロックパターンとは
  • VKブロックパターンの特徴(メリット・デメリット)
  • VKブロックパターンの使い方

本記事は、2022年11月末のVektor Passportおよびプレミアムパターンのリリースに伴い、2022年12月4日に加筆・修正しました。

VKブロックパターンとは

URLhttps://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 ブロックパターンライブラリのページは以下の通りです。

VKブロックパターンライブラリのトップページ

一番上のキャッチフレーズ『コピペで使えるWordPressのブロックパターンライブラリ』の通り、コピペで使えるさまざまなブロックパターンがストックされています。

VKブロックパターンの特徴

WordPress.orgの公式ブロックパターンライブラリと違って、VKブロックパターンには以下の特徴があります。

  1. 検索機能が使いやすい
    (業種・パターンタイプ・使用プロダクト・キーワード・使用デモサイトで検索可能)
  2. プレビュー画面があり、レシポンシブ表示の確認もできる
  3. 使用素材(画像)の元サイトがわかる
  4. LightningやEvergreen等各使用プロダクトの各機能をうまく活かしたパターンとなっている
  5. お気に入りに登録すれば、ワードプレスのブロックエディター内で呼び出すことができる
    (ベクターパスポートに加入し、VKパターンライブラリのアカウント登録が必要)
  6. より洗練されたプレミアムパターンが使用できる
    (ベクターパスポートに加入し、VKパターンライブラリのアカウント登録が必要)

公式サイトのパターンライブラリよりも使いやすいのがわかりますよね。
次の使い方の説明で、これらの特徴も確認していきましょう。

反対にデメリットとしては以下の通りとなります。

  • 開設されて日が浅いのでパターンの数は多くない
     (2022年2月27日現在35パターン)
  • 使用プロダクトによって使用できるパターンが限定される

本記事を最初に投稿した2022年2月27日段階では、開設されて日が浅かったため選択できるパターン数は35パターンでしたが、2022年12月4日現在152パターンが公開中です。

使用プロダクトについても使い方のところで詳しく説明します。

VKブロックパターンの使い方

基本的な使い方

使い方は簡単。次の3ステップだけです。
(もちろん、サイト側にはプラグインVK BlocksやVK Blocks Proがインストール・有効化されている前提)

  1. プラグインをインストール・有効化しておく
  2. パターンをコピー
    (VK パターンライブラリから気に入ったパターンをコピーします)
  3. ブロックエディターにペースト
    (ブロックエディターの本文欄にペーストします)

1.プラグインをインストール・有効化しておく

有効化するプラグインにより選択できるパターン数が変わります。
VK BlocksおよびVK Block Patternsは無料なので、最低限インストール・有効化しておきましょう。

有料版であるVK Blocks Proを使用の場合はVK Blocksは不要です。もちろんですが、有料版のほうが選択できるパターン数は多くなります。

2.パターンをコピー

下記事例では料理のメニューパターンをコピー

パターンをコピー

3.ブロックエディターにペースト

段落ブロックにパソコンのペースト操作をすればOKです。

パターンをペースト

メニューパターンが本文欄にペーストされました。あとは画像差し替えやテキストを編集してコンテンツを仕上げます。

検索機能

ページ上部の検索機能によってパターンを絞り込むことができます

検索項目種類
業種指定なし・ウェブ制作・システム開発・デザイン・ダミーテキスト・ビジネス全般・医療・士業・建築・不動産・教育・スクール・求人サイト・福祉・飲食
使用プロダクト指定なし・Evergreen・VK Block Patterns・VK Blocks・VK Blocks Pro・X-T9・カスタムCSS
パターンタイプセクション(CTA・Q&A・カラムレイアウト・スタッフ紹介・スライダー・テキスト・ヒーローエリア・ボタン・メニュー・レビュー・地図・料金表・注目・流れ・表・製品紹介)・プレミアムパターン・ページ全体(404・サービス案内・トップページ/LP・プライバシーポリシー・会社案内)
使用デモサイトEvergreen・Katawara・学習塾・工務店・採用情報・歯科医院・法律事務所・訪問介護
キーワード(任意のキーワードを入力する)
お気に入りお気に入りで絞り込む(登録している場合)
2022年12月4日現在
パターンの検索

キーワード検索除くこれらの検索は、各パターンの下部にあるメタ情報と連動します。

パターンのメタ情報

使用プロダクトについて

指定できる使用プロダクトはいずれも(株)ベクトルさんが提供しているプラグインまたはテーマです。使用プロダクトに応じて使えるパターンが変わります。

  • 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そのものは無料)

有料プラグインのほうが高機能なブロックを使用できるため、ブロックパターンのバリエーションも豊富で素敵なデザインが多くなります

Vektor Passportに含むもの
  • テーマ機能拡張プラグインLightning G3 Pro Unit
  • ブロック追加プラグインVK Blocks Pro
  • プレミアムパターンライブラリおよびパターンのお気に入り登録機能が使用可能
  • テーマLightning Pro(旧製品)
  • ライセンスキー

Evergreenは現在キャンペーン中につき、Vektor Passport購入者であれば無料ダウンロードできます。

つまりのところVektor Passportに加入すれば、全パターンが使用可能だということです。

Vektor Passportはサブスクリプションサービスです。ライセンス期間終了後はアップデートはできませんが、引き続き継続使用可能です。

Vektor Passport 1年ライセンス9,900円
(税込)
Vektor Passport 3年ライセンス26,400円
(税込)
Vektor Passport 5年ライセンス39,600円
(税込)
※価格は2022年11月24日現在のものです

パターンのプレビュー

各パターン右下の”詳しく見る”ボタンからプレビュー画面に入ることができます。

パターンを詳しく見るボタン

プレビュー画面の上部でデバイス幅の切り替えが可能です。

デバイス幅ExtraExtraLarge
デバイス幅:Extra Extra Large(1400px)のプレビュー
デバイス幅smallのプレビュー
デバイス幅:Small(576px)のプレビュー

デバイス幅は次の6種類が切り替え可能です。

  • 超特大幅/Extra Extra Large(1400px)
  • 特大幅/Extra Large(1200px)
  • 大幅/Large(992px)
  • 中幅/Medium(768px)
  • 小幅/Small(576px)
  • 極小幅/Extra Small(360px)

使用素材の元サイト情報

画像が含まれているパターンでは、パターンの左下に画像素材の元サイト名が表示されています。

参考画像素材の表示

これらの画像データは自分のワードプレスサイトにペーストした後でも、ベクトル社のサーバーから引っ張ってきています。したがって、必ず差し替えて使ってください。

※パターンの画像素材はあくまで仮なので必ず差し替えて使うようにしましょう。

パターンによっては素材元情報の記載がないものがあります。おそらくベクトルさんオリジナルなのだと思いますが、必ず差し替えて使用するようにしましょう。

各プロダクトの特徴を生かしたパターン

(株)ベクトルさんが作成したパターンだから当然だと言われるかもしれませんが、それでも実際に使ってみてあらためて実感するメリットです。

例えば、各パターンを自分のサイトにコピペしてみると、サイトのキーカラーに合わせて自動的に配色されます。あらためて配色し直す必要がないわけで、ワードプレスの公式パターンライブラリではできないことですね。

当然キーカラーを変更するだけでパターン内の配色も自動変更されます。ちなみにキーカラーは、外観>カスタマイズ>色 で設定できます。

また、背景画像とテキストコンテンツの配置をわざとずらしたレイアウトを使用したければ、使用プロダクトをEvergreenで検索すれば簡単にパターンが見つかります。Evergreenでは標準でずらしレイアウト用CSSクラスが準備されているからです。

お気に入り登録とプレミアムパターンの使用方法

すでに紹介したVektor Passportに加入すれば、パターンのお気に入り登録とプレミアムパターンの使用が可能となります。その場合、VKパターンライブラリのアカウント登録が必要となります。

Vektor Passportや旧サービスであるLightning G3 Pro Packに加入しているユーザーさんは、すでにベクトルさんのマイアカウントをお持ちだと思いますが、ここでいうVKパターンライブラリのアカウントはそれとは異なりますのでご注意ください。

VKパターンライブラリのアカウント登録

VKパターンライブラリのアカウント登録手順は次の通りです。

  1. ベクトルのマイアカウントにログイン
  2. メニューの中の”VK Pattern Library ユーザー登録”をクリックして登録画面へ
  3. 規約に合意し、”VK Pattern Libruary登録”ボタンをクリックし、登録手続き
    (メールアドレスとパスワードを登録)

VKパターンライブラリへログインする

VK Pattern Libruaryアカウントに登録したメールアドレスとパスワードを使ってログインします。

VK Pattern Libruaryへのログイン

ログインする前には表示されていなかった、プレミアムパターンのコピーボタンとお気に入り追加ボタンが表示されるようになります。

プレミアムパターンコピーボタンとお気に入り追加ボタン

プレミアムパターンの使い方は他のパターンと同じですが、ベクトルさんがデザインに力を注いだ力作だけあって非常に洗練されており、そのままサイトに使用可能です(もちろん画像とテキストの入れ替えは必要ですが)。

お気に入り登録したパターンをブロックエディター内で呼び出す

お気に入り登録したパターンをブロックエディター内で呼び出す手順は以下の通りです。

①画面左上の+マークをクリック
②パターンタブを選択
③ドロップダウンメニューの中の”VK Patterns Libruaryのお気に入り”を選択
④表示されたパターンをクリックして本文内に挿入

お気に入りパターンの呼び出し方法

まとめ

VKブロックライブラリの特徴と使い方について紹介してきました。

すごく使い勝手がよいパターンライブラリだとわかって頂けたと思います。パターンライブラリを使えば、

  • サイトの雛形が簡単に出来上がる
  • 必要な素材やテキストがイメージしやすくなる
  • 自分のサイト制作やクライアントとのイメージ合わせに役立つ

といったメリットがあるので、積極的に使ってみるとよいでしょう。

しかしVKブロックライブラリを100%活用するには、Vektor Passportへの加入が欠かせません。この機会にご検討されてみてはいかがでしょうか。

Vektor Passport(ライセンス期間1年)
Vektor Passport(ライセンス期間3年)
Vektor Passport(ライセンス期間5年)

テーマLightningとLightning G3 Proについては、以下の記事もおすすめです。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる