WordPressでプロのような高品質なサイトを作るには、専門知識やデザインスキルが必要だと思われがちです。
しかし、実際にはコーディングの知識がなくても、短時間で美しいサイトを構築する方法が存在します。
それを可能にするのが、WordPressのブロックエディタを強化する「拡張プラグイン」です。
この記事では、400件以上のWeb制作案件に携わったプロの視点から、本当におすすめできるブロックエディタの拡張プラグインを3つ厳選してご紹介します。
そもそもWordPressのブロックエディタとは？
ブロックエディタ（Gutenberg）は、2018年にリリースされたWordPress 5.0から標準搭載された新しい編集機能です。
それまでの文章を書き連ねていくエディタ（クラシックエディタ）とは異なり、ブロックエディタでは、文章、画像、見出し、ボタンといったページを構成するあらゆる要素を「ブロック」という部品として扱います。
まるでレゴブロックのようなイメージで文章や画像、動画といったようなコンテンツのブロックを組み合わせて、自分好みのページが作れます。
この仕組みのおかげで、プログラミングなどの専門知識がない人でも、ブロックを直感的に配置していくだけで、簡単にページを構築できるようになりました。
拡張プラグインを導入する3つのメリット
ブロックエディタの機能を拡張するプラグインを導入することで得られる、代表的な3つのメリットをご紹介します。
- デザイン済みのパターンで制作時間を短縮できる
- 標準にはない表現でデザイン性を向上できる
- コーディングの専門知識が不要
メリット1：デザイン済みのパターンで制作時間を短縮できる
プラグインを導入する大きなメリットは、プロがデザインしたブロックパターンを使えることです。
例えば、「お客様の声」「料金表」「Q&A」といったよく使われるセクションを作る際、通常は複数のブロックを自分で組み合わせてレイアウトを調整する必要があります。
しかし、プラグインを使えば、用意されたパターンを選んでコピー＆ペーストするだけで、一瞬にしてデザイン済みのセクションが完成します。
その結果、デザインやレイアウトに悩む時間が少なくなり、サイト制作の時間を短縮することが可能です。
メリット2：標準にはない表現でデザイン性を向上できる
拡張プラグインは、標準のブロックにはない、より高度でデザイン性の高いブロックを追加してくれます。
例えば、次のようなものがあります。
- リッチなカラムレイアウト
- 背景に画像や動画を設定したセクション
- 動きのあるスライダーやアコーディオン
- 見栄えの良いプロフィールカードやタイムライン
上記のようなプロが作ったWebサイトでよく見るような洗練されたデザインを、クリック操作だけで簡単に実装できるようになります。
そのため、初心者の方でも手軽にクオリティの高いWebサイトを作ることが可能です。
メリット3：コーディングの専門知識が不要
ブロックエディタのプラグインを使ううえで、HTMLやCSSといったコーディングの専門知識は不要です。
「この部分の色を変えたい」「カラムの幅を調整したい」といったカスタマイズも、プラグインが用意してくれている設定画面から直感的に行えます。
ブロックエディタのプラグインは、まだコーディングを学習中の人でも、プロが作成するようなサイトを作れるようにしてくれる便利なツールといえます。
プロが厳選！WordPressブロック表現を拡張するおすすめプラグイン3選
Webコーディングをメインに400件以上の案件に関わってきたはにわまんさんが厳選した、WordPressブロック表現を拡張するおすすめプラグインは次の3つです。
- Snow Monkey Blocks
- VK Blocks
- Arkhe Blocks
どのようなプラグインなのか、順に確認していきましょう。
気になるものからインストールしてみてくださいね。
1：Snow Monkey Blocks
Snow Monkey Blocksは、シンプルで洗練された美しいデザインパターンが豊富です。
直感的な操作性も魅力で、多くのWebデザイナーにも愛用されています。
カード型コンテンツやお客様の声、料金表など、Webサイトで頻繁に使われるパーツが美しくデザインされており、テキストや画像を差し替えるだけで、サイト全体のクオリティをぐっと引き上げてくれます。
2：VK Blocks
VK Blocksは、「ページ丸ごと」のテンプレートが用意されている点が特徴です。
例えば、「ビジネス用トップページ」のパターンをコピーして貼り付けるだけで、スライダー付きの本格的なトップページが瞬時に完成します。
「こんなお悩みありませんか？」といった訴求セクションから会社案内まで、必要な要素がすべて組み込まれているため、あとはテキストや画像を差し替えるだけです。
サイト制作を効率化したい場合に、強力な味方となるでしょう。
3.：Arkhe Blocks
Arkhe Blocksは、装飾が控えめなミニマル・シンプルなデザインが特徴です。
カスタマイズの土台として使いやすく、玄人好みの一面も持っています。
特徴的なのは、パターンを貼り付けると、そのスタイルを調整するためのCSSも一緒に表示される点です。
CSSが分からない方はそのまま使い、知識がある方はその場で色や余白などを細かく調整するといった使い方ができます。
プラグインの使い方はどれも共通！
ここまで紹介してきた3つのプラグインは、どれも簡単な操作で利用できます。
使い方はすべて共通で、必要なのは以下の3ステップだけです。
- 各プラグインの「パターンライブラリ」にアクセスする
- 使いたいデザインを見つけて「コピー」ボタンをクリックする
- WordPressの編集画面に戻り、「貼り付け」（右クリック or Ctrl+V）する
簡単にプロがデザインしたようなセクションをページに追加できるので、ぜひ利用してみてください。
まとめ：ブロック拡張プラグインを使いこなしてサイト制作の効率を上げよう
今回は、WordPressのブロック表現を拡張する、プロが選んだおすすめプラグインを3つご紹介しました。
- Snow Monkey Blocks
- VK Blocks
- Arkhe Blocks
上記のプラグインを使えば、コーディングの知識がなくても、「パターンライブラリ」から好きなデザインをコピー＆ペーストするだけで、短時間で高品質なサイトを作ることが可能です。
今回紹介したプラグインは、すべて無料で試すことができます。
まずはインストールして、その手軽さと表現力の高さを体感してみてください。
未経験からWeb制作を学ぶならデイトラWeb制作コースがおすすめ！
東京フリーランスは、1日1題のステップでWebスキルを身につけられる”デイトラ”を運営しています。
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptを始めとした言語の基本からデザインカンプをもとにしたコーディング、WordPressのオリジナルテーマ作成まで、学習カリキュラムはなんと100日分！Web制作を網羅的に学べます。
また、中級・上級の最終課題はメンターによる課題レビューつき！品質を現場目線でチェックしてもらえるため、「自分は今どのくらいのスキルがあるのか」が客観的にわかります。
Discordによる公式サポートの質問部屋も用意。実務を経験しているメンター陣があなたの疑問に回答してくれます。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！
はにわまんさん（@haniwa008）
Webコーダー。コーディングを中心にディレクションからサイト運用・保守まで、Web制作全般の仕事に400件以上携わった経験あり。デイトラのマネージャーも務めている。