インスパイアデザイン編集部
はじめに
カスタムブロックとは
カスタムブロックとは、WordPressのブロックエディタに独自のブロックを追加するためのものです。通常のブロックエディタにはあらかじめ用意された標準ブロックが存在しますが、カスタムブロックを使えば、自社のニーズに合わせた独自のデザインや機能を実装できます。企業のウェブ担当者様は、カスタムブロックを利用することで、サイトの操作性や表現力を向上させ、より効果的なコンテンツ作成や効率的な運用、管理コストの削減が可能になります。
下記は、ワプツクというサイト用に開発したカスタムブロック一覧です。標準のブロックにはない独自のブロックであることがお分かりいただけるかと思います。
カスタムブロック 4つのメリット
効率的な運用
カスタムブロックを使えば、日常的に行うコンテンツ作成作業を大幅に効率化できます。たとえば、商品紹介ページで頻繁に使用するレイアウトや機能（画像ギャラリー、ボタン、テキストボックスなど）をカスタムブロックとして事前に用意しておくことで、ページごとに個別に設定する手間を省けます。これにより、ページの追加や編集が短時間で完了し、コンテンツ制作にかかる時間を大幅に短縮できます。また、カスタムブロックを利用すると、サイト全体で同じブロックを再利用できるため、企業のウェブ担当者様は効率的にコンテンツを更新・管理することが可能です。
管理コストの削減
通常、特定のデザインや機能の変更には制作会社の手を借りる必要があり、外部に依頼するとその都度コストが発生します。しかし、カスタムブロックを導入することで、これらの変更をウェブ担当者様自身が行えるようになります。例えば、プロモーション期間中に特定のバナーを各ページに表示したい場合や、季節ごとのキャンペーンに合わせてデザインを変更したい場合でも、カスタムブロックを使えば柔軟に対応できます。これにより、外注費コストを削減できるだけでなく、スピーディーにコンテンツを変更できるため、タイムリーな情報発信が可能になります。また、カスタムブロックは一度開発してしまえば長期間利用できるため、長期的に見ても運用コストの削減に寄与します。
統一感のあるデザイン
カスタムブロックは、サイト全体でデザインの一貫性を保つための強力なツールです。例えば、企業サイトではブランドイメージを維持するために、特定の色やフォント、ボタンのスタイルなどを統一することが重要です。カスタムブロックを使うことで、これらのデザイン要素をブロック単位で一元管理できます。ウェブ担当者様はカスタムブロックを使用するだけで、ページごとにデザインのばらつきを防ぎ、統一感のあるプロフェッショナルなサイトを構築できます。さらに、ブランドガイドラインに従ったデザインを簡単に実装できるため、新しいページやセクションを追加する際も、デザインの整合性を保ちながらコンテンツを拡充することが可能です。
特定の機能の実装
標準のブロックエディタではカバーできない特定の機能を実装したい場合にも、カスタムブロックが役立ちます。例えば、製品ページに商品レビューを表示するカスタムブロックや、サービスページに料金プランを表形式でわかりやすく表示するカスタムブロックを作成することで、サイトの機能性を向上させることができます。また、顧客が製品を選択しやすくするためのカスタムフィルタや、よくある質問（FAQ）を折りたたみ形式で表示するカスタムアコーディオンブロックなど、UX（ユーザーエクスペリエンス）を高めるための独自の機能を追加することも可能です。これにより、訪問者にとって使いやすく、価値のあるサイトを構築できるだけでなく、サイト運用者はマーケティングや販売促進のための機能を手軽に追加できます。
カスタムブロックのサンプル紹介
ここでは、すぐに利用できるカスタムブロックのサンプルをいくつか紹介します。
サンプル1: プロフィールブロック
プロフィールブロックは、チームメンバーやスタッフの情報を効果的に紹介するためのブロックです。メンバーの一覧を表示し、詳細ボタンを押すとモーダルウィンドウが立ち上がり、詳細なプロフィール情報を表示する仕様になっています。このブロックは、企業のコーポレートサイトやチーム紹介ページで特に有用です。
下記は、ワプツクというサイトのメンバー紹介のセクションです。View Profileをクリックするとモーダルウィンドウが開き、詳細なプロフィール情報が表示される仕様になっています。
上記セクションの投稿画面では、メンバーを追加ボタンがあり、メンバーを追加することが可能です。
WordPressで、こうした独自のCMS機能の実装は他にも方法がありますが、カスタムブロックであればノーコードで直感的に更新ができるため、非常に利便性が高くストレスフリーなのが特徴でありメリットと言えます。
機能と特長
- メンバーのプロフィール管理: 名前、役職、写真、簡単な紹介文など、メンバーの基本情報を入力・管理できます。新しいメンバーの追加や既存メンバーの編集も簡単に行えます。
- 一覧表示とモーダル機能: ページ上ではメンバーの一覧がコンパクトに表示され、各メンバーに「詳細」ボタンが配置されます。このボタンをクリックするとモーダルウィンドウが開き、詳細なプロフィール情報が表示されます。これにより、ページのスペースを効率的に使いながら、訪問者に対して詳細情報を提供できます。
- カスタマイズ可能なデザイン: プロフィールブロックのデザインはカスタマイズ可能で、各メンバーのカードのレイアウトやモーダルのスタイルをサイトのデザインに合わせて調整できます。たとえば、モーダルの背景色、テキストのフォント、ボタンのスタイルなどを変更して、ブランドイメージに合ったプロフィール紹介が可能です。
使用例
- コーポレートサイトのチーム紹介ページ: 会社のコーポレートサイトで、役員やスタッフを紹介するために利用。チームの顔を見せることで、企業の信頼性と親しみやすさを伝えます。
- プロジェクトメンバーページ: プロジェクトごとのチームメンバーを一覧表示し、個々のスキルや役割を詳細に説明する場面で活用。モーダルで詳細を表示するため、ページ全体が整理され、見やすいデザインを維持できます。
- オンラインスクールや講師紹介: オンラインスクールの講師紹介ページに利用し、各講師の専門分野や経歴を詳細に紹介。訪問者はモーダルで講師の詳細情報を手軽に確認できます。
プロフィールブロックを活用することで、サイトの訪問者にチームメンバーの人柄や専門性を効果的に伝えられ、信頼性の向上やブランドイメージの強化に繋がります。
サンプル2: FAQブロック
FAQブロックは、よくある質問と回答を簡潔に表示するためのブロックです。アコーディオンのデザインで、ユーザーがクリックすると回答が表示されるため、ページの見た目をすっきりと保てます。
こちらも、ワプツクというサイトのFAQセクションです。Qの欄の「ー」「＋」で開閉するアコーディオンの仕様になっています。
その下の「＋」のアイコンをクリックすると、空の質問と回答項目が追加され、情報を入力して更新することが可能です。
機能と特長:
- 質問と回答を簡単に追加・編集
- シンプルなスタイルと多彩なカスタマイズオプション
- サイト全体のFAQセクションで再利用可能
使用例:
- 製品サポートのFAQセクション
- サービス利用に関するQ&A
- 企業情報に関する質問の掲載
サンプル3: マルチブロック
3つ目に紹介するブロックは、様々なパターンに対応できるボックスです。下記では、いくつかのデザインパターンのパーツを紹介していますが、全て1つのブロックで作成することが可能な仕様です。
パターン1
ボックスの中に、見出し・アイコン・ボタンを配置し、下層ページへの誘導リンクとして使用。
テキストや枠の色の変更、ボタンの色やタイプ、外枠の角丸化なども設定可能。
パターン2
ボックスの中に、見出し・アイコン・ボタンを配置し、下層ページへの誘導リンクとして使用。
ボックスのベタ塗や背景画像の設定が可能。
パターン3
ボタンのような使用例。ボックスに対しリンクの設定が可能なため、リンクを無しに設定し、背景色を薄いグレーにすることで、該当ページであることを示すような表現も可能。
最後にご紹介したマルチに使用できるカスタムブロックでは、ベースとなるデザインと仕様の明確化、それとカスタムブロックを開発できる技術力が必要となります。
カスタムブロックの活用事例
カスタムブロックは、ランディングページ、サービスサイト、コーポレートサイトなど、多様な用途で効果的に活用できます。ここでは、それぞれのケースでカスタムブロックをどのように活用できるかについて詳しく説明します。
コーポレートサイトでの活用
コーポレートサイトでは、企業のブランドイメージやビジョンを明確に伝えることが重要です。カスタムブロックを使うことで、企業の魅力やメッセージを効果的に伝えられます。
- 企業理念・ビジョンの紹介: カスタムブロックを使って、企業の理念やビジョンを視覚的に表現できます。例えば、ビジュアル要素を取り入れたミッションステートメントブロックや、企業の歴史を年表形式で表示するタイムラインブロックなど、ブランドイメージを強く訴求するデザインを作成できます。
- メンバー紹介: 企業の信頼性を高めるために、チームメンバーを紹介するカスタムブロックを作成することができます。メンバーの写真、役職、プロフィールをカード形式で表示し、訪問者が企業の人間性を感じられるようなデザインを提供します。また、個々のメンバーの専門性や実績を強調するカスタムブロックを使うことで、企業の信頼性をアピールできます。
- 採用情報・企業文化の発信: 採用ページでカスタムブロックを使い、企業文化や福利厚生、募集要項をわかりやすく紹介することも可能です。たとえば、オフィスの写真や社員インタビューをスライダー形式で表示するカスタムブロックや、応募プロセスをステップごとに示すタイムラインブロックなど、求職者に企業の魅力を伝えるためのデザインが実現できます。
コーポレートサイト事例
上記は弊社にてデザインからCMS構築まで一貫してご対応させていただいたウェブサイトとなりますが、随所をカスタムブロック化しており、お客様はノーコードでサイトを更新することが可能となっています。
ランディングページでの活用
ランディングページ（LP）は、特定の目的に焦点を当てて設計されたページです。例えば、新商品のプロモーション、イベントの告知、資料請求フォームなど、コンバージョンに直結する重要なページです。カスタムブロックを利用することで、ランディングページをより魅力的で効果的なものにできます。
- CTAボタンのカスタマイズ: ランディングページでは、訪問者に特定のアクションを促すことが重要です。カスタムCTAブロックを活用することで、デザインやテキストを一貫してカスタマイズし、視覚的に目立つボタンを配置できます。例えば、訪問者がフォームに入力する前に行動を起こすように促す、目を引く色とアニメーションを持つCTAボタンを簡単に追加できます。
- カスタムレイアウト: ランディングページのコンテンツは、訪問者の関心を引きつけ、スムーズに情報を伝えるためにレイアウトが重要です。カスタムブロックを使うことで、テキスト、画像、動画などを組み合わせた独自のレイアウトを簡単に作成できます。たとえば、3カラムの特徴説明セクション、顧客の声を表示するカスタムブロック、ステップバイステップの手順を表現するタイムラインブロックなど、ターゲットに合わせたページデザインを実現できます。
- インタラクティブな要素: カスタムブロックを使って、ユーザーのアクションを促すインタラクティブな要素を追加できます。例えば、アコーディオンスタイルのFAQブロックや、ビジュアルエフェクトを持つカウントダウンタイマーなど、訪問者の関心を引きつける動的なコンテンツを組み込むことが可能です。これにより、ランディングページのコンバージョン率を向上させることができます。
ランディングページ事例
上記は弊社にてデザインからCMS構築まで一貫してご対応させていただいたウェブサイトとなりますが、よく使いまわすパーツはカスタムブロック化しており、お客様はノーコードでサイトを更新することが可能となっています。
サービスサイトでの活用
サービスサイトでは、提供するサービスの内容をわかりやすく、魅力的に伝えることが求められます。カスタムブロックを使うことで、情報を整理し、訪問者にとって見やすく操作しやすいサイトを構築できます。
- サービス紹介ブロック: サービス内容を簡潔かつ視覚的に伝えるために、カスタムブロックを利用したサービス紹介セクションを設けることができます。例えば、各サービスの特徴をアイコンやグラフィックとともに表示するカスタムブロックを作成し、閲覧者が視覚的に情報を理解しやすいようにします。また、アニメーションやホバーレイアウトを組み込むことで、よりインパクトのあるプレゼンテーションが可能です。
- 価格プラン表: サービスサイトでは、料金プランをわかりやすく提示することが重要です。カスタムブロックを使って、複数の価格プランを表形式で表示するブロックを作成すれば、訪問者が簡単にプランの違いを比較できるようになります。特典や割引情報を強調表示したり、プランを選択しやすくするためのボタンを組み込むことも容易に行えます。
- 導入事例・お客様の声: 信頼性を高めるために、カスタムブロックを使って導入事例やお客様の声を掲載するセクションを作成できます。例えば、カルーセル形式でお客様の声を表示するカスタムブロックや、プロジェクトごとの詳細を記載したカード型ブロックを使用して、閲覧者にリアルな成功事例をアピールします。これにより、潜在顧客に対して自社サービスの信頼性を効果的に伝えることができます。
- FAQセクション: サービスに関するよくある質問をカスタムFAQブロックで表示することで、訪問者の疑問を解消し、問い合わせの手間を減らすことができます。アコーディオン形式のFAQブロックを活用すれば、ページの見た目をすっきりと保ちながら、詳細な情報を提供できます。
サービスサイト事例
上記は弊社が制作会社様や代理店様を対象としたサービスとして運用しているワプツクというサイトですが、更新の際はカスタムフィールドなどではなく、全てカスタムブロックにて更新ができる完全ノーコード仕様となっています。私たちは制作会社ですので、もちろんソースは書けますが、ノーコードでサクッと更新できるのは、非常に価値のあることだと感じます。
これらの活用事例を通じて、カスタムブロックがランディングページ、サービスサイト、コーポレートサイトの作成において、効率的な運用やコンバージョン向上、ブランドイメージの強化にどれだけ貢献できるかがわかります。カスタムブロックは、訪問者にとって魅力的で使いやすいサイトを構築するための強力なツールとなります。
カスタムブロックの導入・設定方法
カスタムブロックを導入する方法は、大きく分けて2つあります。一つは、すでにプラグインとして提供されているカスタムブロックを利用する方法、もう一つは、独自のカスタムブロックを開発する方法です。それぞれの導入方法について詳しく見ていきましょう。
1. プラグインとして提供されているカスタムブロックを使う
この方法は、カスタムブロックの導入にあまり時間をかけたくない場合や、プログラミングの知識がなくても簡単に導入したい場合に適しています。多くのカスタムブロックは、プラグインとして提供されており、WordPressの公式プラグインディレクトリから無料または有料でダウンロードできます。
- プラグインのインストール:
- WordPress管理画面から「プラグイン > 新規追加」を選択します。
- 検索バーに「カスタムブロック」や「Gutenbergブロック」などのキーワードを入力して、目的のプラグインを検索します。
- 使用したいプラグインを選んで「今すぐインストール」をクリックし、その後「有効化」ボタンを押します。
- カスタムブロックの利用:
- プラグインが有効化されると、ブロックエディタに新しいカスタムブロックが追加されます。
- 投稿や固定ページを編集する際に、追加されたカスタムブロックを選択し、コンテンツに挿入します。
- 各ブロックには独自の設定オプションがあり、デザインや機能を簡単にカスタマイズできます。
この方法は、既製のカスタムブロックをすぐに利用できるため、短時間でサイトの機能を拡張したい場合に最適です。ただし、提供されているブロックのデザインや機能が、自社のニーズに完全に合致しない場合もあるため、その点を考慮する必要があります。
2. 独自でカスタムブロックを開発する
既存のプラグインでは対応しきれない特定のデザインや機能を実装したい場合、独自でカスタムブロックを開発する方法が有効です。この方法は、より高度なカスタマイズが必要な場合に適していますが、開発にはJavaScript（特にReact）やPHPの知識が必要です。
独自開発は、自由度の高いカスタムブロックを作成できるため、企業のブランドや独自の機能に合わせたブロックを実現できます。ただし、開発には時間と技術力が必要となるため、事前にリソースを考慮して取り組むことが重要です。
まとめ
カスタムブロックは、WordPressサイトの運用を効率化し、独自性を高めるための強力なツールです。運用者は、これらのブロックを活用することで、サイト全体のデザインと機能を向上させ、ユーザーエクスペリエンスを強化できます。
次のステップとして、さらなるカスタムブロックの導入や独自のカスタマイズを検討することをおすすめします。