「毎回同じデザインのブロックを一から作るのが面倒…」 「クライアントごとに似たようなヘッダーやCTAを何度も組んでいて、正直時間がもったいない…」
WordPressテーマ「SWELL」を使っているWEBデザイナーやコーダーの方の中には、こんなお悩みを抱えている方も多いのではないでしょうか。
実はSWELLには「マイパターン」という、よく使うデザインをワンクリックで呼び出せる便利な機能があります。この機能を使いこなせば、制作のたびにゼロからブロックを組む手間がなくなり、作業スピードも大きくアップします。
この記事では、SWELLのマイパターンの基本的な使い方から登録方法、さらに実務で役立つ活用テクニックまで、初めての方にもわかりやすく解説していきます。
SWELLの「マイパターン」とは？基本機能を解説
マイパターンでできること
マイパターンとは、自分がよく使うブロックのデザインを保存しておき、必要なときにいつでも呼び出せる機能です。
たとえば以下のようなパーツを保存しておくことができます。
- ⚫︎ お問い合わせボタン付きのCTAブロック
- ⚫︎ サービス紹介用のカードデザイン
- ⚫︎ よく使う見出しデザイン
- ⚫︎ 独自にカスタマイズしたヘッダーやフッターの一部
一度デザインを作ってしまえば、次回からはそのパターンを呼び出すだけで同じ見た目のブロックを再現できます。
マイパターンを使うメリット(作業効率化)
マイパターンを活用する一番のメリットは、なんといっても作業時間の短縮です。
- ⚫︎ ゼロからデザインを組む手間が省ける
- ⚫︎ 装飾やスタイル設定を毎回やり直さなくて済む
- ⚫︎ サイト全体でデザインの一貫性を保ちやすい
- ⚫︎ 制作フローがシンプルになり、ミスも減らせる
特に複数のサイトを制作するコーダーやデザイナーにとっては、案件をまたいで使い回せる点も大きな魅力です。
標準パターン・再利用ブロックとの違い
SWELLには「マイパターン」以外にも似た機能があるため、混同しないよう整理しておきましょう。
- ⚫︎標準パターン:SWELLにあらかじめ用意されているデザインテンプレート。自分で編集はできますが、元のテンプレート自体は変更されません。
- ⚫︎再利用ブロック:WordPress標準の機能で、一度作ったブロックを複数の場所に呼び出せます。ただし一箇所を編集すると、使用している全ての箇所に反映される点が特徴です。
- ⚫︎マイパターン:自分だけのオリジナルデザインとして保存する機能。呼び出すたびに独立したブロックとして挿入されるため、後から個別に編集しても他の箇所に影響しません。
この「呼び出すたびに独立して編集できる」という点が、マイパターンならではの大きな特徴です。
SWELLマイパターンの登録方法
ここからは、実際にマイパターンを登録する手順を紹介します。
ブロックエディタでパターン化したい要素を選択する
まずは、パターンとして保存したいブロックを準備します。
投稿・固定ページの編集画面を開く
保存したいデザインのブロックを作成、またはすでにあるブロックを用意する 複数のブロックをまとめて保存したい場合は、範囲選択しておく。
このとき、あとで使い回しやすいように、色やフォントサイズなどの装飾も含めて仕上げておくのがポイントです。
「マイパターンに登録」ボタンから保存する手順
デザインの準備ができたら、ブロックを選択した状態でツールバーを確認します。
- ①選択したブロックのツールバーにあるメニューを開く「マイパターンに登録」の項目を選択する
- ②パターンの名前を入力する
- ③登録内容を確認して保存する
名前をつける際は、後から見てもすぐに内容がわかるよう、「CTA_問い合わせ用」「ヘッダー_シンプル型」のように、用途がひと目でわかる名称にしておくのがおすすめです。
カテゴリー分けして管理しやすくする方法
マイパターンの数が増えてくると、目的のデザインを探すのに時間がかかってしまうことがあります。そんなときはカテゴリー分けをして整理しておきましょう。
- ⚫︎用途ごとにカテゴリーを作成する(例:ヘッダー、CTA、カード、フッターなど)
- ⚫︎パターン登録時にカテゴリーを指定する
- ⚫︎定期的にパターン一覧を見直し、不要なものは整理する
カテゴリーごとに管理しておくことで、パターン挿入時の一覧からも目的のデザインを見つけやすくなります。
マイパターンを使いこなす活用テクニック
基本の使い方がわかったところで、実務でさらに役立つ活用方法もご紹介します。
よく使うヘッダー・フッターデザインを登録する
複数のサイトを制作する機会が多い方は、自分の「型」となるヘッダーやフッターのデザインをパターン化しておくと便利です。
- ⚫︎ロゴ配置とナビゲーションを組み合わせた基本ヘッダー
- ⚫︎SNSリンクやコピーライトを含めた基本フッター
- ⚫︎サイトごとに微調整しやすいシンプルな構成
一から組み立てる手間がなくなるため、サイト制作の初速を大きく上げることができます。
クライアント案件でテンプレート化して時短する方法
案件ごとに似たような構成のページを作る機会が多いコーダー・デザイナーの方は、ページ単位でのパターン化もおすすめです。
- ⚫︎会社概要ページのレイアウト
- ⚫︎サービス紹介ページの基本構成
- ⚫︎お問い合わせフォーム周りのデザイン
あらかじめ「型」を用意しておくことで、クライアントごとの個別対応に集中する時間を増やすことができます。
マイパターンのエクスポート・インポート活用法
制作環境やサイトを移行する際、これまで登録したマイパターンを引き継ぎたい場面もあるかと思います。データの移行方法については、SWELLの公式マニュアルやサポート情報を確認しながら進めるのが確実です。バージョンによって仕様が変わる可能性もあるため、実施前に最新情報をチェックしておくことをおすすめします。
まとめ
SWELLのマイパターン機能を活用すれば、日々の制作作業を大きく効率化できます。
- ⚫︎よく使うデザインを保存していつでも呼び出せる
- ⚫︎標準パターンや再利用ブロックとは異なり、独立して編集できる
- ⚫︎カテゴリー分けで管理もしやすい
- ⚫︎ヘッダーやCTAなど、案件を超えて使い回せる資産になる
最初はひとつのパターンを登録するところから始めてみましょう。使い慣れてくるほど、制作スピードの違いを実感できるはずです。ぜひこの記事を参考に、マイパターンを活用した効率的なサイト制作を進めてみてください。
LINEでのお問い合わせ