グーテンベルクブロックパターンを作って効率化！繰り返し使えるデザインの作成方法

SHARE

目次

ブロックパターンで変わるWordPress制作の効率化

皆さんは、同じようなセクションを何度も作り直していませんか？
ヘッダー部分、サービスの特徴紹介、お問い合わせセクションなど、Webサイトには似たようなデザインパターンが繰り返し登場します。そんな時に便利なのが、WordPressのブロックパターン機能です。

ブロックパターンとは？

ブロックパターンは、複数のブロックを組み合わせて作った「デザインのテンプレート」のようなものです。一度作成したパターンは何度でも再利用できるため、サイト制作の効率が大幅に向上します。

例えば、以下のようなセクションをパターン化しておくと便利です：

  • 画像と文章を組み合わせたヘッダーセクション
  • 3カラムの特徴紹介ブロック
  • お問い合わせフォームを含むCTAセクション

ブロックパターンを使うメリット

1. 制作時間の大幅な短縮

一度パターンを作成しておけば、クリック一つで同じデザインを再現できます。複雑なレイアウトも、パターンとして保存しておけば瞬時に挿入可能です。

2. デザインの統一性が保てる

同じパターンを使用することで、サイト全体のデザインの一貫性を簡単に維持できます。これは特に、複数のページを持つ大規模サイトの制作で重要になります。

3. クライアントへの引き渡しが楽になる

パターンを活用することで、クライアント自身でもプロフェッショナルなデザインのページを作成できるようになります。マニュアルも「このパターンを選んで、テキストを書き換えてください」といったシンプルな説明で済むようになります。

4. メンテナンス性の向上

デザインの修正が必要になった場合も、パターンを更新するだけで、そのパターンを使用している全てのページに変更を反映できます。

この記事では、このような便利なブロックパターンの作成方法と、テーマへの組み込み方法を詳しく解説していきます。WordPressサイトの制作をより効率的に進めるためのテクニックを、ぜひマスターしていきましょう。

ブロックパターンの基礎知識

WordPressのブロックパターンについて、基本的な概念から詳しく見ていきましょう。パターンを作成する前に、まずはその種類や特徴を理解することが重要です。

WordPressに標準搭載されているパターン

WordPressには、デフォルトでいくつかのブロックパターンが用意されています。これらは「パターンディレクトリ」から簡単に利用できます。

標準パターンの例：

  • ヘッダーパターン
  • テキストと画像の組み合わせ
  • カラムレイアウト
  • ギャラリー
  • CTAセクション

カスタムパターンとは

カスタムパターンは、開発者やデザイナーが独自に作成するブロックパターンです。サイトの要件に合わせて、オリジナルのデザインやレイアウトを自由に設定できます。

カスタムパターンのメリット

  • サイトの独自性を高められる
  • 案件に特化したデザインが作れる
  • 再利用性が高い
  • ブランドの一貫性を保てる

パターンカテゴリーについて

パターンは目的や用途に応じて、カテゴリー分けすることができます。

主なカテゴリー例

  • ヘッダー
  • セクション
  • ギャラリー
  • コンタクト
  • テキスト
  • カラム

カテゴリーを適切に設定することで、エディター画面でのパターン選択が容易になります。

パターンの構成要素

ブロックパターンは以下の要素で構成されています：

1. HTMLマークアップ

HTML
<!-- パターンのHTML構造 -->
<div class="custom-pattern">
    <div class="pattern-inner">
        <!-- ブロックの内容 -->
    </div>
</div>

2. CSSスタイル

パターンのデザインを定義するスタイル設定です。レスポンシブ対応も含めて設定します。

3. ブロック属性

  • アライメント設定
  • 余白の設定
  • 背景色の設定
  • その他のカスタム属性

パターンの登録方法について

パターンをテーマに登録するには、主に2つの方法があります：

1. エディター上での登録

  1. パターンを作成
  2. ブロックを選択
  3. 「パターンとして保存」を選択
  4. 名前とカテゴリーを設定

2. コードでの登録

PHP
register_block_pattern(
    'theme-name/pattern-name',
    array(
        'title'       => 'パターン名',
        'categories'  => array('カテゴリー名'),
        'content'     => 'パターンの内容'
    )
);

次のセクションでは、これらの基礎知識を踏まえた上で、実際のパターン作成手順について詳しく解説していきます。

オリジナルブロックパターンの作成手順

実際にオリジナルのブロックパターンを作成する手順を、ステップバイステップで解説していきます。

エディタでのパターン作成

まずは、実際のエディタ上でパターンのベースとなるデザインを作成します。

作成の基本ステップ

  1. 新規ページまたは投稿を作成
  2. 必要なブロックを配置
  3. レイアウトを調整
  4. スタイルを設定
  5. プレビューで確認

パターンのHTMLコードの取得方法

作成したデザインをパターン化するために、HTMLコードを取得します。

PHP
// パターンとして登録したいブロックを選択し、
// 「コードエディター」から以下のようなHTMLが取得できます
<div class="wp-block-group has-background" style="background-color:#f8f8f8">
    <div class="wp-block-columns">
        <!-- ブロックの内容 -->
    </div>
</div>

テーマへの組み込み方法

1. functions.phpでの登録

PHP
function register_custom_block_patterns() {
    // パターンカテゴリーの登録
    register_block_pattern_category(
        'my-patterns',
        array( 'label' => 'オリジナルパターン' )
    );

    // パターンの登録
    register_block_pattern(
        'my-theme/service-section',
        array(
            'title'      => 'サービス紹介セクション',
            'categories' => array( 'my-patterns' ),
            'content'    => '<!-- ここにHTMLを記述 -->',
        )
    );
}
add_action( 'init', 'register_custom_block_patterns' );

2. 専用ファイルでの管理

大規模なテーマの場合は、パターンを別ファイルで管理することをお勧めします。

PHP
// patterns/service-section.php
return array(
    'title'      => 'サービス紹介セクション',
    'categories' => array('my-patterns'),
    'content'    => '<!-- パターンのHTML -->',
);

パターンの動的な値設定

パターンの中で動的に値を変更したい場合は、プレースホルダーを活用します。

PHP
$pattern_content = str_replace(
    array('%%TITLE%%', '%%DESCRIPTION%%'),
    array(
        __('タイトル', 'my-theme'),
        __('説明文', 'my-theme')
    ),
    $pattern_html
);

パターンのプレビュー設定

パターンをより分かりやすく表示するために、プレビュー画像を設定できます。

PHP
register_block_pattern(
    'my-theme/service-section',
    array(
        'title'         => 'サービス紹介セクション',
        'categories'    => array('my-patterns'),
        'content'       => $pattern_content,
        'viewportWidth' => 1200,
        'description'   => 'サービス紹介用のセクションです',
    )
);

注意点とベストプラクティス

  • パターン名は分かりやすい命名を心がける
  • 再利用性を考慮したHTML構造にする
  • スタイルの優先順位を考慮する
  • レスポンシブデザインに対応する
  • 不要なスタイルは極力削除する

次のセクションでは、実際によく使われるパターンの具体例を見ていきましょう。

よく使うブロックパターンの実例

実際のWebサイト制作でよく使用するブロックパターンの具体例を紹介します。これらのパターンは、多くのサイトで共通して必要となる要素をベースに作成しています。

ヘッダーセクションのパターン

基本的なヘッダーパターン

PHP
register_block_pattern(
    'my-theme/hero-header',
    array(
        'title'      => 'メインビジュアル（画像右）',
        'categories' => array('header'),
        'content'    => '
        <div class="wp-block-group hero-section">
            <div class="wp-block-columns">
                <div class="wp-block-column">
                    <h2>キャッチコピーが入ります</h2>
                    <p>サービスの説明文が入ります。</p>
                    <div class="wp-block-buttons">
                        <div class="wp-block-button">
                            <a class="wp-block-button__link">詳しく見る</a>
                        </div>
                    </div>
                </div>
                <div class="wp-block-column">
                    <figure class="wp-block-image">
                        <img src="[placeholder-image]" alt=""/>
                    </figure>
                </div>
            </div>
        </div>'
    )
);

お知らせエリアのパターン

ニュース一覧パターン

PHP
register_block_pattern(
    'my-theme/news-section',
    array(
        'title'      => 'お知らせ一覧（3カラム）',
        'categories' => array('section'),
        'content'    => '
        <div class="wp-block-group news-section">
            <h2 class="section-title">お知らせ</h2>
            <!-- 最新の投稿を表示するクエリブロック -->
            <!-- wp:query {"queryId":1,"query":{"posts":3}} -->
            <div class="wp-block-columns">
                <!-- ここに投稿ループの内容 -->
            </div>
        </div>'
    )
);

特徴紹介ブロック

3つの特徴を紹介するパターン

PHP
register_block_pattern(
    'my-theme/features',
    array(
        'title'      => '特徴紹介（アイコン付き）',
        'categories' => array('section'),
        'content'    => '
        <div class="wp-block-group features-section has-background">
            <h2 class="section-title">サービスの特徴</h2>
            <div class="wp-block-columns">
                <!-- 特徴1 -->
                <div class="wp-block-column feature-item">
                    <figure class="feature-icon">
                        <!-- アイコン画像 -->
                    </figure>
                    <h3>特徴1のタイトル</h3>
                    <p>特徴の説明文が入ります。</p>
                </div>
                <!-- 特徴2、3も同様 -->
            </div>
        </div>'
    )
);

CTAセクション

シンプルなCTAパターン

PHP
register_block_pattern(
    'my-theme/cta-simple',
    array(
        'title'      => 'シンプルなCTA',
        'categories' => array('cta'),
        'content'    => '
        <div class="wp-block-group cta-section has-background">
            <h2>お問い合わせはこちら</h2>
            <p>ご質問・ご相談はお気軽にどうぞ</p>
            <div class="wp-block-buttons">
                <div class="wp-block-button">
                    <a class="wp-block-button__link">お問い合わせ</a>
                </div>
            </div>
        </div>'
    )
);

お問い合わせエリア

連絡先情報付きパターン

PHP
register_block_pattern(
    'my-theme/contact-info',
    array(
        'title'      => '連絡先情報',
        'categories' => array('contact'),
        'content'    => '
        <div class="wp-block-group contact-section">
            <div class="wp-block-columns">
                <div class="wp-block-column">
                    <h3>電話でのお問い合わせ</h3>
                    <p class="phone-number">000-0000-0000</p>
                    <p>受付時間：平日9:00〜18:00</p>
                </div>
                <div class="wp-block-column">
                    <h3>メールでのお問い合わせ</h3>
                    <!-- Contact Form 7のショートコード -->
                </div>
            </div>
        </div>'
    )
);

実装時のポイント

  • 各パターンは必要に応じてカスタマイズできるよう、シンプルな構造を維持
  • クラス名は具体的で分かりやすいものを使用
  • レスポンシブデザインを考慮した構造設計
  • 画像やアイコンは差し替えやすい実装に
  • カラーやフォントサイズはカスタマイザーと連携できるように設定

次のセクションでは、これらのパターンをさらにカスタマイズする方法について説明していきます。

パターンのカスタマイズ

作成したブロックパターンをより柔軟に活用できるよう、カスタマイズ方法について解説していきます。パターンを基本として、様々なデザインバリエーションを作成できるようにすることが重要です。

画像の差し替え対応

プレースホルダー画像の設定

PHP
// パターン登録時に画像を差し替えやすい形で実装
function get_pattern_with_placeholder() {
    return str_replace(
        '[placeholder-image]',
        get_theme_file_uri('assets/images/placeholder.jpg'),
        $pattern_content
    );
}

画像サイズの最適化

CSS
/* 画像のアスペクト比を保持しつつ、レスポンシブ対応 */
.pattern-image img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
}

色やフォントの変更方法

カラーパレットとの連携

PHP
// テーマ側でカラーパレットを設定
add_theme_support('editor-color-palette', array(
    array(
        'name'  => 'メインカラー',
        'slug'  => 'primary',
        'color' => '#0066cc',
    ),
    array(
        'name'  => 'アクセントカラー',
        'slug'  => 'accent',
        'color' => '#ff6600',
    ),
));

フォントサイズの設定

PHP
// テーマ側でフォントサイズを設定
add_theme_support('editor-font-sizes', array(
    array(
        'name' => '小',
        'slug' => 'small',
        'size' => 14,
    ),
    array(
        'name' => '標準',
        'slug' => 'normal',
        'size' => 16,
    ),
    array(
        'name' => '大',
        'slug' => 'large',
        'size' => 24,
    ),
));

レスポンシブ対応の設定

メディアクエリの活用

CSS
/* レスポンシブ対応のベーススタイル */
.custom-pattern {
    padding: 4rem 2rem;
}

/* タブレット向け */
@media (max-width: 768px) {
    .custom-pattern {
        padding: 3rem 1.5rem;
    }
}

/* スマートフォン向け */
@media (max-width: 480px) {
    .custom-pattern {
        padding: 2rem 1rem;
    }
}

再利用可能なCSSクラスの活用

汎用的なユーティリティクラス

CSS
/* 余白の調整用クラス */
.mt-l { margin-top: 2rem; }
.mb-l { margin-bottom: 2rem; }
.px-l { padding-left: 2rem; padding-right: 2rem; }

/* テキストの配置用クラス */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* フレックスボックス用クラス */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }

アニメーション効果の追加

CSS
/* ホバーエフェクト */
.hover-zoom {
    transition: transform 0.3s ease;
}
.hover-zoom:hover {
    transform: scale(1.05);
}

/* フェードインアニメーション */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

カスタマイズ時の注意点

  1. 一貫性の維持
    • カラーコードは変数化して管理
    • フォントサイズは段階的に設定
    • 余白の値は統一された基準で設定
  2. 拡張性への配慮
    • 新しいバリエーションの追加を想定した設計
    • クラス名は命名規則に従う
    • コメントで意図を明確に記述
  3. パフォーマンスの最適化
    • 不要なスタイルの削除
    • CSSの最小化
    • 画像の最適化

次のセクションでは、これらのパターンを効率的に管理・メンテナンスする方法について説明していきます。

パターンの管理とメンテナンス

効率的なブロックパターンの運用には、適切な管理とメンテナンス体制が不可欠です。ここでは、パターンを長期的に活用していくためのベストプラクティスを解説します。

パターンの命名規則

一貫性のある命名規則を採用することで、パターンの管理が容易になります。

基本的な命名規則

PHP
// パターン登録時の命名例
'my-theme/section-service-three-column'    // サービス紹介（3カラム）
'my-theme/header-main-visual-right'        // メインビジュアル（画像右）
'my-theme/cta-contact-simple'              // お問い合わせCTA（シンプル）

命名のポイント

  1. プレフィックスの統一（例：my-theme/）
  2. カテゴリーを先頭に記述
  3. 具体的な用途を記述
  4. バリエーションを末尾に記述

カテゴリー分け

パターンを目的別にカテゴリー分けすることで、エディター上での選択が容易になります。

PHP
// カテゴリーの登録
function register_custom_pattern_categories() {
    register_block_pattern_category(
        'sections',
        array('label' => 'セクション')
    );
    register_block_pattern_category(
        'headers',
        array('label' => 'ヘッダー')
    );
    register_block_pattern_category(
        'cta',
        array('label' => 'CTA')
    );
}
add_action('init', 'register_custom_pattern_categories');

推奨カテゴリー構成

  • Headers（ヘッダー系）
  • Sections（セクション系）
  • Features（特徴紹介系）
  • CTAs（コンバージョン系）
  • Articles（記事レイアウト系）
  • Contact（問い合わせ系）

バージョン管理

パターンの更新履歴を適切に管理することで、安全なアップデートが可能になります。

PHP
// パターンのバージョン管理
define('MY_PATTERN_VERSION', '1.0.0');

function update_pattern_version() {
    $current_version = get_option('my_pattern_version');
    
    if ($current_version !== MY_PATTERN_VERSION) {
        // パターンの更新処理
        update_option('my_pattern_version', MY_PATTERN_VERSION);
    }
}
add_action('init', 'update_pattern_version');

アップデート方法

パターンの更新手順

  1. バックアップの作成
  2. テスト環境での動作確認
  3. 変更内容のドキュメント化
  4. 本番環境への適用
PHP
// パターン更新時のバージョンチェック
function check_pattern_updates() {
    if (version_compare(get_option('my_pattern_version'), MY_PATTERN_VERSION, '<')) {
        // 更新が必要な場合の処理
        update_patterns();
        log_pattern_update();
    }
}

// 更新ログの記録
function log_pattern_update() {
    $log = array(
        'version' => MY_PATTERN_VERSION,
        'date'    => current_time('mysql'),
        'details' => '更新内容をここに記録'
    );
    add_option('pattern_update_log', $log);
}

メンテナンスのチェックリスト

定期的なチェック項目

  1. デザインの一貫性
    • カラースキームの確認
    • タイポグラフィの統一
    • 余白の一貫性
  2. 機能の確認
    • レスポンシブ動作
    • ブラウザ互換性
    • 画像表示
  3. パフォーマンス
    • 読み込み速度
    • CSSの最適化
    • 画像の最適化
  4. コードの品質
    • 不要なクラスの削除
    • コメントの更新
    • 命名規則の遵守

トラブルシューティング対策

PHP
// デバッグモード時のパターン情報表示
function debug_pattern_info() {
    if (WP_DEBUG) {
        add_action('admin_footer', function() {
            echo '<div class="pattern-debug-info">';
            // パターン情報の表示
            echo '</div>';
        });
    }
}
add_action('init', 'debug_pattern_info');

次のセクションでは、これらのパターンを効果的に活用するための方法について説明していきます。

まとめ

ブロックパターンの活用は、WordPressサイト制作の効率化と品質向上に大きく貢献します。ここまでの内容を整理し、実践的なアドバイスをまとめていきましょう。

ブロックパターン活用のベストプラクティス

1. 設計時のポイント

  • モジュール化を意識する
    • 再利用可能な単位でパターンを作成
    • 汎用的な使用を想定した設計
    • カスタマイズ性の確保

一貫性のある構造

PHP
// パターン登録の基本構造
register_block_pattern(
    'my-theme/pattern-name',
    array(
        'title'       => 'パターン名',
        'categories'  => array('category-name'),
        'description' => 'パターンの説明',
        'content'     => $pattern_content,
    )
);

2. 実装のチェックリスト

  • 適切な命名規則の適用
  • レスポンシブ対応の確認
  • アクセシビリティへの配慮
  • パフォーマンスの最適化
  • クロスブラウザ対応の確認

効率的な運用のためのTips

開発フロー

1.プロトタイプの作成

  • エディタでデザインを作成
  • 動作確認とテスト
  • フィードバックの収集

2.実装とテスト

PHP
// テスト環境でのパターン検証
function test_pattern_implementation() {
    if (defined('WP_DEBUG') && WP_DEBUG) {
        // テストコードの実行
        run_pattern_tests();
        log_test_results();
    }
}

3.ドキュメント化

  • 使用方法の記録
  • カスタマイズオプションの説明
  • 更新履歴の管理

このように、ブロックパターンは単なるテンプレートではなく、効率的なサイト構築とメンテナンスを実現するための重要なツールとなります。

適切な設計と運用により、クライアントにとっても使いやすく、開発者にとっても管理しやすいWebサイトを実現することができます。

前の記事

制作スピードが格段に上がる！Tailwind CSSの便利なシ…

次の記事

プログラミングの3つの考え方：手続き型、関数型、オブジェクト指…