はじめに
WordPressブロックテーマでブログを再構築するべく、ブロックテーマのおさらい、既存テーマ選び、ざっと実装イメージを勉強したところで、いよいよ実際に作業に入ります！
本記事では、デザインツール「Figma（フィグマ）」を使って、ブロックテーマ「Spectra One」との相性が良いUIを設計し、そのままGutenbergで再現しやすいブログデザインを作る方法をご紹介します。
「Spectra One」のおさらい
Spectra One は、人気のGutenbergアドオン「Spectra（旧名：Ultimate Addons for Gutenberg）」と連携する、軽量・シンプルな公式ブロックテーマです。
特徴は以下の通り：
- FSE完全対応テーマ（フルサイト編集）
- レスポンシブ設計が前提
- FlexboxやGridベースのレイアウトが簡単に作れる
- デザインテンプレートが豊富でカスタマイズも自在
ノーコードで収益ブログを作りたい人にぴったりのベーステーマ。
Figmaでこのテーマに合ったUIを設計すれば、そのままGutenberg上で再現できます。
準備編：FigmaでブログのUIを設計する前に
FigmaでブログのUI設計を始める前に、いくつかの準備をしておくと、後の作業がスムーズになります。
作業を自動化・補助してくれるプラグイン
FigmaでのUIデザインを補助してくれる素材・プラグインのまとめはこちら
Figmaにおけるデザイン構築要素
| ページ名 | 含まれる要素 |
|---|---|
① Wireframe（構造設計） | グリッド付きのレイアウト構成 |
② Components（UIパーツ） | ボタン・見出し・カードなどの部品 |
③ Templates（ページ設計） | トップページ・記事詳細・LP・比較ページなど |
④ Responsive Variants | モバイル／タブレット用のレスポンシブ設計 |
デザインルールの定義
Figmaで実際にWireframeやTemplatesを作成する前に「デザインルールの定義」を行うことは非常に重要です。
特に「Spectra One」のようなブロックベースのWordPressテーマに対応するUIをFigmaで設計する場合、統一されたルールがあることで、設計・実装・運用がブレずにスムーズに進行できます。
補足：最低限でも「3つ」定義しておくと◎
時間がないときでも以下は最低限整えておきましょう。
- カラー（ブランドカラー＋テキスト色）
- タイポグラフィ（見出し・本文・小さなテキスト）
- グリッドレイアウト（コンテナ幅＋カラム数）
さらに詳細なデザインルール参考はこちら▼
テンプレートの作成手順
Step1:新しいFigmaファイル作成
- Figmaを開き、新規ファイルを作成
- ファイル名：
Spectra One Blog Template
Step2:レイアウト・グリッド設定（共通）
「Spectra One」は最大12カラムのレイアウトに対応しているため、Figmaでも同じように12カラムのグリッドを設定します。
| Frameサイズ | グリッド設定 |
| デスクトップ：1440×1024px | 12カラム（各幅 72px / ガター 24px） マージン：左右 112px |
| タブレット：768 x 1024px | 12カラム |
| モバイル：375×812px（iPhone 13系推奨） |
Step3:デザインルールを定義しておく
- フォント階層：H1〜H3、本文サイズ、行間など
- カラースキーム：サイトカラー／CTAカラー／背景色など
- 余白ルール：パディング・マージンのベース値を決めておくと◎
Step4:UIコンポーネントの作成
| コンポーネント名 | 詳細 |
|---|---|
Button / Primary | 青背景・白文字・角丸8px |
Card / ArticlePreview | 画像＋タイトル＋抜粋＋ボタン |
Header | ロゴ＋ナビメニュー |
Footer | メニュー＋SNS＋コピーライト |
CTA | キャッチ＋ボタン＋背景色 or 画像付き |
RankingBox | ランキング順位＋画像＋比較要素＋ボタン |
※ それぞれ Auto Layout で組みましょう。
Step5:ページテンプレート作成
ここでは、Figma上で作る「Spectra One向けブログUI」の構成例を紹介します。
トップページ構成例：
- ファーストビュー:Heroセクション（H1キャッチコピー＋画像orCTAボタンなど）
- 人気記事一覧（3〜6記事を横並び or グリッド）
- カテゴリー別記事一覧（タブ式 or カード）
- メルマガ登録／無料資料DLなどのCTAセクション
記事詳細ページ構成例：
- タイトル（H1）
- アイキャッチ画像
- 本文ブロック（見出しH2, H3 + テキスト）
- 広告・CTA配置（記事下・途中・スクロール追従）
- 関連記事
共通パーツ（グローバル）
- ヘッダー（ロゴ＋ナビ）
- フッター（問い合わせ／SNSリンク／コピーライト）
- サイドバー（カテゴリ・プロフィール・広告）※表示／非表示設計を選択制に
Step6:レスポンシブ設計
- 作成済みのトップページを複製
- Frameサイズを768px（タブレット）と375px（モバイル）に変更
- レイアウト調整（縦積み・余白縮小）
モバイル対応のポイント
モバイルユーザーの割合は全体の7割以上。Figmaでは次の機能を活用して、スマホ表示も意識した設計をしましょう。
- Auto Layoutで柔軟な構成に
セクション全体をAuto Layoutで囲むと、要素の順番や間隔の調整がラクになります - Constraintsで伸縮可能な要素に
ボタンや画像のサイズを「左右中央」などに固定して、画面サイズが変わっても崩れないレイアウトに - スマホ特有のCTA設計
スクロール中でも見える「フッター固定ボタン」
モバイル専用のレイアウト（例えば、記事カードを縦に並べる）も別アートボードで設計
すぐに使えるFigma用「カラー・タイポグラフィスタイル」定義
| 名前 | 値 |
|---|---|
Primary Color | #2C74FF（Spectra Oneの青） |
Accent Color | #FFD700（黄） |
Text Primary | #222 |
Heading Font | Inter Bold（Google Fonts） |
Body Font | Inter Regular |
H1 | 48px / Bold |
H2 | 32px / Bold |
Paragraph | 16px / Regular |
FigmaからGutenbergに落とし込むワークフロー
Figmaで作ったデザインを、実際にSpectra One + Gutenberg上で再現する際のステップです。
実装ステップ
- FigmaでUI完成
- 各セクションごとにブロック構成をメモ（Group／Columns／Buttonsなど）
- WordPress上で同じ構成を再現
- パディング／マージン／カラーを微調整
- スマホ表示チェック＆修正
再現性を高めるコツ
Figmaパーツに「ブロック名（例：Group, Cover）」をメモしておく
実測ガイドはこちら
まとめ：Figma × Spectra Oneで「ブログ」設計を効率化しよう
- ブロックテーマ時代では「再現性の高いUI」が成功のカギ
- Figmaでしっかり設計しておけば、実装コストも激減
- 見た目だけでなく、「収益を意識した導線設計」が大事