テーマ選びとカスタマイズ

テーマのカスタマイズ——SWELL・Cocoon・Lightningを使いこなす

WordPressのテーマはサイトの「外観と機能の土台」です。テーマを選ぶ段階での判断と、インストール後のカスタマイズ方法を正しく理解することで、プロ品質のWebサイトを短時間で構築できます。このレッスンでは、国内人気の3大テーマ（SWELL・Cocoon・Lightning）の特徴比較から始め、WordPressカスタマイザーの各設定項目、ヘッダー・フッター設計のポイント、ウィジェット配置の考え方、そして本番環境に必須の子テーマの作り方まで体系的に学びます。

---

テーマカスタマイズ全体像

WordPressテーマカスタマイズ全体図 — SWELL/Cocoon/Lightning

テーマ選択からカスタマイザー設定・子テーマ作成までが一連の作業です。後から変更しにくい部分（テーマの選択・子テーマの有無）を最初に正しく判断することが、後工程の手戻りを防ぐ鍵になります。

---

国内3大テーマ徹底比較

SWELL（有料・17,600円）

SWELLはWordPress専業デベロッパーが開発した有料テーマで、ブロックエディタへの対応品質と表示速度の高さが最大の特徴です。カスタマイザーとブロックエディタの設定が統合されており、コードを書かずにプロ品質のページを作成できます。

💡 SWELLの「フルワイドブロック」: カラムブロックをフル幅表示にできる専用ブロックがあり、ヒーローセクションやCTAセクションをコーディングなしで作成できます。トップページの制作効率が他テーマより大幅に高いです。

Cocoon（無料）

Cocoonは国内WordPressテーマでダウンロード数トップクラスの無料テーマです。スキン機能で外観を大幅に変更できるため、無料でありながら多様なデザインを実現できます。ブロックエディタとクラシックエディタ両方に対応しています。

⚠️ Cocoonの注意点: 機能が豊富な反面、設定項目が多くどこで何を設定するかが分かりにくいことがあります。カスタマイザー・Cocoon設定・個別記事設定の3層があるため、反映されない場合はどの設定が優先されているかを確認してください。

Lightning（無料・有料Pro版あり）

LightningはVektorInc.が開発するビジネス向けWordPressテーマです。無料版でもコーポレートサイト品質のデザインを実現でき、専用プラグイン「VK Blocks」と組み合わせることで機能が大幅に拡張されます。

---

カスタマイザーの設定手順

WordPressのカスタマイザー（外観 → カスタマイズ）は、サイトのデザインをリアルタイムプレビューで確認しながら変更できるツールです。設定の順序を意識することで効率よく作業が進みます。

設定の推奨順序

ステップ1: サイト基本情報の設定 「サイトの基本情報」でサイトタイトル・キャッチフレーズ・サイトアイコン（ファビコン）を設定します。サイトタイトルはSEOに影響するため、キーワードを含む正式名称を入力してください。サイトアイコンは512px×512pxのPNG形式が推奨です。

ステップ2: 色とフォントの設定 テーマカラー・リンク色・見出し色・本文フォントを統一します。色は主色（Primary）・補色（Secondary）・アクセント色の3色に絞ることで、統一感のあるデザインになります。Googleフォントを使う場合は読み込み速度への影響を考慮し、1〜2種類に抑えてください。

ステップ3: ヘッダーの設定 ロゴ画像をアップロードし、ヘッダーの高さ・背景色・文字色を設定します。固定ヘッダー（スクロール時もヘッダーが追従する機能）はユーザービリティが高まりますが、コンテンツ表示領域が狭くなるため、サイトの目的に応じて判断してください。

ステップ4: フッターの設定 フッターにはウィジェットエリアを設定し、問い合わせ先・メニュー・SNSリンクなどを配置します。コピーライト文には会社名・年号（自動更新）を入力します。

テーマ別カスタマイザーの特徴

---

ヘッダー設計の考え方

ヘッダーはサイトへの訪問者が最初に目にするエリアです。視覚的な第一印象と、サイト内を迷わずナビゲートできる機能性の両方が求められます。

ヘッダーに配置する要素

必須要素

• ◆ロゴ（サイト名）: 左上に配置し、クリックでトップページに戻れるようにする
• ◆グローバルナビゲーション: メインメニュー（5〜7項目程度に絞る）

推奨要素

• ◆CTA（電話番号・問い合わせボタン）: 右上に目立つ色で配置
• ◆検索フォーム: 情報量の多いサイトではヘッダー内に設置

避けるべき要素

• ◆バナー画像の多量配置（ヘッダーが重くなる）
• ◆深い階層のメニュー（3階層以上のドロップダウン）

グローバルナビゲーションの作り方

外観 → メニュー → 新規メニューを作成 → 固定ページや投稿をメニューに追加 → 「グローバルナビ」などのメニューロケーションに割り当て、という手順でナビゲーションを設定します。項目の並び順はドラッグ&ドロップで変更でき、サブメニュー（ドロップダウン）は項目を右にインデントして作成します。

💡 ハンバーガーメニューについて: スマートフォン表示では多くのテーマがグローバルナビを自動的にハンバーガーメニュー（三本線ボタン）に切り替えます。ただしユーザーが発見しにくい傾向があるため、重要なCTA（問い合わせ・電話）はヘッダー固定エリアに直接表示することを推奨します。

---

フッター設計の考え方

フッターはページの最下部に位置し、ユーザーがページを最後まで読んだ後に目にするエリアです。適切な情報を配置することで、離脱防止と信頼性向上に貢献します。

フッターに配置すべき情報

---

ウィジェット配置の考え方

ウィジェットはサイドバーやフッターなどの決められたエリア（ウィジェットエリア）に配置できる機能の部品です。外観 → ウィジェットからドラッグ&ドロップで配置します。

サイドバーのウィジェット構成例

1. ◆プロフィール: 著者や会社の簡潔な紹介（ブログ系サイト）
2. ◆CTA: 問い合わせや資料請求への誘導ボタン
3. ◆カテゴリ一覧: コンテンツのカテゴリを一覧表示
4. ◆最新投稿: 直近5〜7件の記事タイトルをリスト表示
5. ◆検索フォーム: キーワード検索

ブロックウィジェットへの移行

WordPress 5.8以降、ウィジェットエリアでもブロックエディタが使えるようになりました（ブロックウィジェット）。SWELLなど一部テーマは独自のウィジェット管理UIを採用しているため、テーマのドキュメントを確認してから作業を始めてください。

⚠️ ウィジェットの乱用に注意: サイドバーにウィジェットを詰め込みすぎると、重要なCTAが埋もれ、ユーザーの注意が分散します。ウィジェットの優先順位を決め、最重要のもの（CTA・プロフィール）を上部に配置する設計思想を持つことが重要です。

---

子テーマの作り方と必要性

子テーマ（Child Theme）は、親テーマの機能・デザインを引き継ぎながら、独自のCSSやPHPコードを安全に追加するための仕組みです。

子テーマが必要な理由

親テーマのファイルを直接編集すると、テーマのアップデート時に変更内容が上書きされてしまいます。子テーマにカスタマイズを記述しておくことで、親テーマをアップデートしても変更が保持されます。

子テーマの最小構成

子テーマには最低2つのファイルが必要です。

style.css（必須）

/*
Theme Name: MyTheme Child
Template: cocoon (親テーマのフォルダ名)
*/

functions.php（親テーマのCSSを読み込む）

<?php
add_action('wp_enqueue_scripts', function() {
  wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
});

この2ファイルをフォルダにまとめてzip化し、外観 → テーマ → 新規追加 → テーマのアップロードでインストールします。

カスタムCSSの書き方

子テーマのstyle.cssに追記する方法と、カスタマイザーの「追加CSS」に記述する方法の2種類があります。カスタマイザーの追加CSSはデータベースに保存されるため、テーマを変更すると失われます。恒久的なカスタマイズは子テーマのstyle.cssに記述することを推奨します。

💡 Cocoonは公式子テーマを配布: Cocoonは公式サイトで子テーマを無料配布しています。自分でファイルを作る必要がなく、ダウンロードしてインストールするだけで子テーマ環境が整います。SWELLも公式ドキュメントで子テーマの作り方を説明しています。

---

🏋️実践ワーク

以下のワークを実施してください。

1. ◆テーマ選択診断: 制作予定のサイトの用途（ブログ・コーポレート・EC）と予算を確認し、SWELL・Cocoon・Lightningの中から最適なテーマを選ぶ。選んだ理由を3点書き出す
2. ◆カスタマイザー設定: ローカル環境またはステージング環境でテーマをインストールし、サイトタイトル・ファビコン・テーマカラー・ロゴ・コピーライトを設定する
3. ◆メニュー作成: グローバルナビゲーションにトップ・サービス・会社概要・ブログ・お問い合わせの5項目を設定し、スマートフォン表示で正しく表示されることを確認する
4. ◆子テーマ作成: 使用テーマに対応した子テーマを作成（またはダウンロード）し、子テーマのstyle.cssに見出しの色やフォントサイズを変更するCSSを1行追加して反映を確認する

📝まとめ

テーマのカスタマイズはWordPressサイト制作の根幹です。有料テーマ（SWELL）は制作効率と品質を求める場合、無料テーマ（Cocoon・Lightning）は予算を抑えつつ学習や基本的なサイト構築に適しています。カスタマイザーで設定できる範囲は必ずカスタマイザーで行い、コード変更が必要な場合は必ず子テーマに記述する習慣を最初から身につけることが、保守性の高いWordPressサイト制作の基本です。