WordPressでデザイン性の高いページを作りたいけれど、毎回レイアウトを一から組むのは大変…。
「VK Block Patterns」は、よく使うレイアウトやデザインを「ブロックパターン」として登録し、ワンクリックで呼び出せる便利な無料プラグインです。
そこで本稿では、VK Block Patternsの使い方・設定・無料プランなどを徹底解説します。
目次
VK Block Patternsとは？
VK Block Patternsは、事前にデザインのパターンを登録し、ブロックエディター（Gutenberg）で呼び出せる無料プラグインです。
見出しや画像、ボタンなど複数のブロックを、コードを書かずに簡単に追加・編集できます。
「手軽にデザイン性を高めたい」「作業時間を短縮したい」というWordPressユーザーにおすすめのプラグインです。
メリット
- WordPressの標準ブロックエディター（Gutenberg）と高い互換性
- 公式ライブラリからデザイン性の高いパターンを選び、コピーして利用できる
- 独自のパターンを作成し、繰り返し利用できる
デメリット
- 使用テーマや一部プラグインとの組み合わせによってはレイアウト崩れの可能性
- 独自のパターンを作成するには、HTMLやCSSの知識が必要な場合がある
- WordPress公式のクラシックエディター・プラグインには非対応
※TCDクラシックエディタのプラグインでも動作確認をしましたが、利用できませんでした。各TCDテーマのテーマオプションやクイックタグでもレイアウト調整や装飾を追加できますのでご検討ください。
VK Block Patternsの料金とライセンス
VK Block Patternsは完全無料で提供されており、プラグイン単体で利用する場合に料金はかかりません。
より多くのデザインパターンを利用したい場合は、姉妹サイトの「Pattern Library（パターンライブラリ）」を通じてプレミアムパターンを追加できます。
無料のアカウント登録を行い、さらに「Vektor Passport」を購入・有効化することで、プレミアムパターン（有料デザイン）を利用できるようになります。
Vektor Passportは、以下のようなライセンス期間と価格で利用できます。
| ライセンス期間 | 価格（税込） |
|---|---|
| 1年 | ¥11,000 |
| 3年 | ¥29,700 |
| 5年 | ¥44,000 |
このライセンスを有効化するとプレミアムパターンだけでなく、同社による複数のプラグインのPro版も利用できるようになります。
VK Block Patternsの使い方
インストール方法
VK Block Patternsを利用するには、WordPressプラグイン「VK Block」もインストールする必要があります。
「VK Blocks」と「VK Block Patterns」をそれぞれインストールしてください。
- WordPress管理画面の左側から「プラグイン」→「プラグインを追加」をクリック
- 検索窓に「VK Blocks」または「VK Block Patterns」と入力
- プラグインが表示されたら「今すぐインストール」→「有効化」の順をクリック
以下の公式ページからZIPファイルをダウンロードし、アップロードして有効化することもできます。
WordPressで制作したサイトは、プラグインを使って簡単に機能を拡張することができますよね。当記事では、プラグインのインストール方法について解説してきます。 おすすめプラグインを見る プラグインのインストール方法は2つ プラグインのインストール方法は、下記の2つになります。基本的には、...
メニューの機能
VK Block Patternsをインストールすると、WordPress管理画面の左側にメニューが表示されます。
- VK Block Patterns：作成したパターンの一覧を表示
- 投稿を追加：通常の投稿と同じ画面で、新しいパターンの作成や保存ができる
- カテゴリー：パターンを分類するためのカテゴリの作成と管理（任意）
- パターンライブラリ：公式のパターン集サイトへアクセス
※VK Block Patternsのカテゴリーは、WordPress標準のカテゴリーと同じ方法で設定できます。
カテゴリーの基本的な設定方法について解説します。カスタム投稿のカテゴリーでも活用できますので、当記事を参考に操作方法を覚えておきましょう。 カテゴリーとは？ 投稿で作成したページを分類して管理する機能です。分類することで、カテゴリーに応じた記事一覧ページが生成され、ユーザーは目的のペ...
ライブラリの利用方法
独自のパターン作成ではなく、公式のパターンを利用したい場合は、メニュー内にある「パターンライブラリ」をクリックします。
ページ内には、細かく絞り込み検索ができるようになっています。利用したいパターンがあれば「コピーする」をクリックしておきます。
なお、公式ライブラリのパターンは、ウィジェットに貼り付けて利用することもできます。ウィジェットの使い方は、以下をご参照ください。
2021/3/23 情報を更新いたしました。 WordPressには、特定のエリアを管理画面から簡単に装飾できるパーツ（ウィジェット）が複数用意されています。これらを活用すれば、下記のようにサイドバーやフッターを装飾できます。 （例：TCDテーマ「Muum」） フッター ...
パターンの設定方法
WordPress管理画面の左側にあるVK Block Patternsのメニューから、以下の操作を行います。
- 「投稿を追加」をクリック
- パターンのタイトルを追加と、独自のパターンを作成するか、パターンライブラリからコピー＆ペースト
- 対象の投稿タイプ（投稿・固定ページ・メディア・カスタム投稿タイプ）と、パターンの追加方式（指定なし・自動挿入・候補に表示）を選択
パターン内のテキスト編集や画像の置換もできますが、未編集や一部のテキストだけ削除して空の状態で保存することもできます。
右上の「公開」をクリックすると保存できます（サイト上には公開されません）。パターン内のテキスト編集や画像の置換は、次の項目で解説します。
ページに追加する方法
通常の投稿や固定ページなどのエディタ画面を開き、以下の手順で操作します。
- パターンを挿入したい行を選択
- 左上の「＋」をクリック（クリック後は「✕」に変わる）
- 「パターン」をクリック
- 「VK Block Petterns」をクリック
- 事前に作成した利用したいパターンを選択
表示されたパターン上のテキストをクリックするとテキストを編集できます。上部のバーから太字・リンク・上下の余白などを調整できます。
パターン内の画像を変更するには、ブロックを選択後、以下の操作を行います。
- 上部の「置換」をクリック
- メディアライブラリ・アップロード・アイキャッチ画像から選択
画像が置き換わったら、右側から画像の詳細設定を行うことができます。
その後、右上でプレビューして、確認して問題なければ「公開」します。
VK Block Patternsの活用例
- よく使うレイアウトを保存：パターンとして登録しておくことで、次回以降はワンクリックで呼び出せる
- 編集と再利用が容易：挿入後は通常のブロックと同じように文章や画像を差し替え可能
- デザインの統一：見出しやCTAなどをパターン化し、全ページのレイアウトや配色を揃える
- A/Bテスト：季節バナーや価格表の差し替え、CTA配置の比較検証を素早く実施
- 社内のデザインライブラリ化：ボタン・カード・FAQなどを社内デザインシステムの部品として保存
以下、公式ライブラリ内にある無料パターンをいくつかご紹介します。
ヒーローヘッダー
ヒーローヘッダーとは、WebサイトやLPの最上部に大きく配置されるビジュアルエリアのことです。
ライブラリでは、いくつかのヒーローヘッダーが用意されており、複数のLPでA/Bテストをしたい場合に登録しておくと便利です。
※画像を登録するとオーバーレイがかかりますので、画像の明るさや色など微調整が必要な場合があります。
プログラミングやデザイン用語として「オーバーレイ」という言葉があります。 オーバーレイとは「重ねて貼る」という意味で、Webデザインの世界では、画像の上にさらに色や画像などを重ねて、印象を変える役割があります。具体的に得られるメリットは次のようなものです。 色味・彩度をフラットに ...
3カラム
トップページやサービス紹介ページで利用できる3カラムです。パソコン画面では3カラムが横並びになりますが、スマートフォン画面では縦に3つ並びます。
メニュー・価格表
飲食店や美容室などのホームページで利用できる、メニューや価格表のパターンも提供されています。
これから新しいメニューが増えたり、特定の季節だけメニューが増える場合は、事前に登録して準備しておくことができます。
CTA（Call to Action）
各ページの下部などで行動を喚起する「CTA」のパターンも利用できます。
全ページまたは全投稿の下に表示できるウィジェットがあれば、そちらにパターンを設置することで複数ページに追加する手間が減ります。
※ヒーローヘッダーと同様で、画像にオーバーレイがかります。
よくある質問（FAQ）
Q. 利用する上で必須条件はありますか？
A. はい。「VK Blocks」プラグインのインストールとブロックエディターが必須です。VK Blocksを有効化した上でVK Block Patternsを追加すると利用できます。
Q. クラシックエディターで使えますか？
A. いいえ。WordPress標準のブロックエディター専用です。クラシックエディターやTCDクラシックエディタでは利用できません。
Q. どのテーマでも使えますか？
A. 公式的に動作確認をしていないテーマでは、デザインが崩れる場合があります。
いくつかのTCDテーマで動作確認したところ、デザイン崩れを確認しました。CSSでの調整や、TCDテーマオプションとクイックタグでのレイアウトなども検討ください。
Q. 公式ライブラリのパターンは無料ですか？
A. 無料パターンはそのまま利用可能です。有料のプレミアムパターンを使う場合は、アカウント作成とVektor Passportのライセンス購入が必要です。
Q. ウィジェットエリアでも使えますか？
A. はい。WordPress 5.8以降のブロックウィジェットであれば、パターンをそのまま貼り付けて使用できます。
まとめ
VK Block Patternsは、WordPressのブロックエディタで高品質なレイアウトを無料で簡単に作成できるプラグインです。
公式が提供する多彩なブロックパターンを選んで配置するだけで、企業サイトやブログ、ランディングページなど幅広い用途に対応できます。
一方で、独自デザインにはHTML・CSSの知識が必要な場合があり、テーマやプラグインの組み合わせによってはレイアウト崩れが起こる場合があります。
初心者から中級者まで、「素早く美しいページを作りたい」「作業効率を高めたい」ユーザーにおすすめのプラグインです。
WordPressテーマ集
コメント