【SWELL中級】受注できるコーポレートサイトの作り方講座｜フォーム・投稿機能まで完全網羅

初級編の制作、本当にお疲れ様でした！

「Komorebi Cafe」の制作を通じて、SWELLの基本的なブロックエディタ操作やカスタマイズの楽しさは体感いただけたかと思います。

この中級編では、いよいよ「通常のクライアントワークで納品できるレベルの本格的なコーポレートサイト」制作にステップアップします。

中級編のサイト制作が完了すれば、基本的なコーポレートサイト制作の案件に挑むための下地は整えられるはずです。今回制作するデモサイトは、あなたのポートフォリオとして活用していただいて構いませんので、ぜひ一緒に最後まで走り抜けましょう！

【重要】
本講座では、複数ページ、お問い合わせフォーム、投稿機能などの実務的な機能の実装を扱います。 ブロックエディタの細かい操作方法やWordPressの基本操作に関する詳しい解説は含まれておりません。WordPressが初めての方や、基本操作に自信のない方は、ぜひ初級編の記事をご参照ください。

まずは、初期設定編の記事を参照して、WordPressのインストール、SWELLテーマの有効化などの土台を整えてください。ヘッダーロゴやファビコン（サイトアイコン）などは、この後の設定時に改めて解説します。

あわせて読みたい

中級編のゴール

中級編では、架空のデザイン事務所「Studio Haku（スタジオ・ハク）」のWebサイトを制作します。

単なる見た目の再現ではなく、実務で必須となる以下のテーマを重点的に学びます。

1. 複数ページ構成: HOME、SERVICE、WORKS、CONTACTなど、本格的な企業サイトの構造を実装します。
2. 実務的な機能: お問い合わせフォーム（Snow Monkey Forms）の実装と、SWELLテーマに馴染ませるためのデザイン調整。
3. SWELLの応用: 「WORKS」をサイトの主役にするための「投稿ページ設定」や、「ブログパーツ」機能など、SWELLを使いこなすための応用スキルを習得します。

読み終わる頃には、あなたはSWELLを使ったWeb制作において、自信を持って案件を獲得できるレベルに到達しているはずです。

制作するサイトのイメージ

中級編で制作する「Studio Haku」のサイトイメージです。 「明朝体と余白」を活かした、洗練されたミニマルなデザインを目指します。

完成サイトの構成（一覧）

ページ名	役割	学習テーマ
HOME	サイトの導線集約	ブロックの応用、共通パーツの作成
NEWS	お知らせ	投稿機能とカテゴリーの運用
CONCEPT	企業理念	メディアとテキスト、余白の調整
SERVICE	事業内容・料金	ステップブロック、テーブルブロック
WORKS	制作実績	SWELLタームタブ設定とページネーションの実装（中級編の目玉）
COMPANY	会社概要	テーブルブロック、カスタムHTML（マップ）
CONTACT	お問い合わせ	Snow Monkey Formsの導入とデザイン調整
Privacy Policy	必須ページ	サイト制作における必須ページの作成

固定ページは青、投稿機能が絡むページは赤にしています。

完成サイトの構成（ワイヤーフレーム）

今回は、こちらのワイヤーフレームに従って制作していきましょう！SWELLと合わない部分は、適宜判断していきます。実際の制作では、ディレクターやクライアントと相談しつつ進めていきましょう。

ぜひ各ページを保存していただき、進めていきましょう！

また、画像素材提供サイトの「Unsplash」にてStudio Haku のサイト制作に使用する画像を選定しました。
使用される場合はこちらを参考にしてください。

WEBサイトを制作するための事前準備

事前準備は、初期設定編です。中級編では初期設定の解説は飛ばすので、ぜひ初期設定編から始めてください。
ブログ向けテーマであるSWELLを用いてコーポレートサイトを制作するための土台作りはここから始まります！
※サイトに固有の設定は、飛ばしていただいて問題ございません！

Studio Hakuに固有の設定

SWELLを本格的に運用していくために、サイトの基本構造とデザイン設定を最初に行います。

WordPressの基本設定

サイト基本情報の設定 「外観」→「カスタマイズ」→「WordPress設定」→「サイト基本情報」は、以下を設定します。

項目	設定値
サイトのタイトル	Studio Haku
キャッチフレーズ	余白を、デザインする。

ファビコン（サイトアイコン）も、初級編と同様に正方形の画像を設定しておきましょう。

デザイン初期設定

「Studio Haku」のモダンで洗練された雰囲気を出すため、基本カラーとフォントを変更します。

基本カラーの変更 「外観」→「カスタマイズ」→「サイト全体設定」→「基本カラー」に進みます。

項目	設定値	目的
メインカラー	#4A564F	深みのあるユーカリグリーン。自然体でありながら洗練された、モダンな印象を与えます。
テキストカラー	#333333	濃すぎず、コントラストの高いグレー系。

プラグインのインストール

プラグイン名	目的
Snow Monkey Forms	高機能で確認画面付きのお問い合わせフォーム作成
SEO SIMPLE PACK	SEO設定（OGP設定など）の簡略化

プラグインの導入手順
初期設定編では、不要プラグインの削除だけ一緒に実施しましたね。
管理画面メニューの「プラグイン」→「プラグインを追加」から、右上の検索窓に対象のプラグイン名を入力します。 表示されたら「今すぐインストール」をクリックし、忘れずに「有効化」まで行いましょう。

4. サイト構造の重要設定

ここが中級編で最も重要な設定です。「WORKS」をサイトのメインコンテンツとして扱うための設定です。

固定ページの作成 まずは、サイト構成図に合わせた固定ページを作成します。

左側メニュー「固定ページ」→「新規固定ページを追加」で、以下のページ名とパーマリンク（URLスラッグ）を設定し、「公開」します。

ページ名	パーマリンク (スラッグ)
トップページ	home
WORKS	works
CONCEPT	concept
SERVICE	service
COMPANY	company
CONTACT	contact
Privacy Policy	privacy

5.投稿ページの設定（WORKSを主役にする）

次に、WordPressとSWELLに「WORKSこそが、このサイトのメインコンテンツ（投稿一覧）である」と認識させます。

「設定」→「表示設定」に進みます。

項目	設定値
ホームページの表示	固定ページ にチェック
ホームページ	トップページ を選択
投稿ページ	WORKS を選択 ←ここが最重要ポイント！

「変更を保存」をクリックしてください。これで、domain.com/works/ が自動でページネーション付きの「制作実績一覧」として機能するようになります。

次はこの設定を元に、グローバルナビゲーションの設定と、TOPページから実際のコンテンツ制作を進めていきます。

メニューの新規作成

初期設定編で学習済みの箇所は、簡単に説明していきますね！

1. 管理画面の 外観 → メニュー に進みます。
2. メニュー名：任意の名前（例：「グローバルメニュー」）を入力します。
3. 「メニューを作成」ボタンをクリックします。
4. 「固定ページ」→「すべて選択」をクリックし、トップページだけチェックを外し、「メニューに追加」します。

5. 「カテゴリー」→「お知らせ」をクリックし、「メニューに追加」します。

6. 「お知らせ」を展開し、「ナビゲーションラベル」を「お知らせ」「NEWS」に設定します。

7. メニューのブロックをドラッグ&ドロップで並び替えます。

8. 保存することを忘れずに！

固定ページのタイトル表示設定

固定ページのタイトルの表示設定を変更しておきましょう。 これを設定することで、ワイヤーフレームのように「背景画像の上にタイトルが乗る」リッチなデザインになります。

1. 管理画面メニューの「外観」→「カスタマイズ」をクリックします。
2. 「投稿・固定ページ」→「タイトル」に進みます。
3. 「■固定ページ」の項目を探し、「タイトルの表示位置」を「コンテンツ上」に変更します。

これで、すべての固定ページでヘッダー画像（コンテンツヘッダー）とタイトルが重なって表示されるようになります。 「公開」を押して設定を保存しましょう。

ここから先は、いよいよ下層ページの制作に入っていきます！

投稿カテゴリー・確認用記事の準備

メインビジュアルの作成に進む前に、投稿機能で使用するカテゴリーを準備しておきましょう。 今回は「お知らせ（NEWS）」と「制作実績（WORKS）」の2つの軸で投稿機能を運用します。

左側メニューの「投稿」→「カテゴリー」に進みます。

未分類のリネーム（NEWS用）

デフォルトである「未分類」カテゴリーを編集し、NEWS用に変更します。

項目	設定値
名前	お知らせ
スラッグ	news

WORKS用カテゴリーの作成

次に、実績を管理するためのカテゴリーを作成します。 実績はジャンルごとに分けられるよう、親カテゴリーと子カテゴリーを作成します。

項目	設定値
名前	制作実績
スラッグ	works

子カテゴリー（実績の種類） 親カテゴリーを「制作実績」に設定して、以下のカテゴリーを追加します。

名前	スラッグ	親カテゴリー
Web制作	website	制作実績
グラフィック	graphic	制作実績
その他	other	制作実績

これで、投稿する際に「お知らせ」なのか、「Web制作の実績」なのかを明確に振り分ける準備が整いました。

表示確認用記事の準備

トップページの「NEWS」セクションや、この後設定する「WORKS」ページでリストが正しく表示されるかを確認するために、テスト用の記事をいくつか作成しておきましょう。

記事がない状態だと「投稿が見つかりませんでした」と表示されてしまい、デザインの調整がしづらいためです。

1. 管理画面の「投稿」→「投稿を追加」をクリックします。
   （サンプル記事は削除してしまいましょう！）

2. タイトルと本文を入力し、カテゴリーを選択して「公開」します。
   • 本文は「テストです。」などのダミーテキストで構いません。

テスト用記事ではスラッグは設定する必要はありませんが、今のうちから癖付けておいた方が今後のためなので、ぜひ設定しておきましょう。
スラッグを設定していないと、URLがタイトルそのまま（=日本語のURL）になってしまいます。
文字化けして長くなってしまう上に、SEO上も英字で設定するのがベストプラクティスなので、忘れないようにしましょう！

作成する記事のリスト（例）

以下の内訳で、合計6記事ほど作成してください。

• お知らせ用（3記事）
  • タイトル：お知らせ1、お知らせ2、お知らせ3
  • カテゴリー：「お知らせ」のみにチェック
• 制作実績用（3記事）
  • タイトル：実績1 Web制作、実績2 グラフィック、実績3 その他
  • カテゴリー：「制作実績」と、「Web制作」などの子カテゴリーの2つにチェック
  • アイキャッチ画像：実績用の記事には、必ず「アイキャッチ画像」を設定してください。（WORKS一覧でサムネイルとして表示されるため）

次はこの設定を元に、グローバルナビゲーションの設定と、TOPページから実際のコンテンツ制作を進めていきます。

メインビジュアルの作成（ブログパーツの活用）

いよいよサイトの顔となる「メインビジュアル」を作成します。

SWELLの標準機能でもテキストは入力できますが、今回は「ボタンを設置する」「フォントサイズや余白を自由に調整する」といった高度なデザインを実現するため、ブログパーツを活用したテクニックを使います。

実際の案件では、メインビジュアルはブログパーツを使用して自由度高く制作していくことになると思います。ここでマスターしましょう！

メインビジュアルの中身を作る

まずは、メインビジュアルの上に表示させる「文字とボタン」の部分をブログパーツで作ります。

1. 管理画面の「ブログパーツ」→「投稿を追加」をクリックします。
2. タイトルに「メインビジュアル」と入力します（管理用なのでサイトには表示されません）。
3. ブロックエディタを使って、以下のようにコンテンツを作成します。

作成のポイント

• キャッチコピー: 「本質を、描く。」（段落ブロック / サイズ：XXL / 中央揃え）
• メインコピー: 「余白を、デザインする。」（段落ブロック / サイズ：3em / 中央揃え / 明朝体）
• ボタン: SWELLボタンブロックを追加。「VIEW MORE」と入力し、リンク先に「WORKSページ」のURLを設定。（スタイル：ノーマル、中央揃え）
• 余白調整: 各ブロックのブロック下の余白量を調整して、バランスを整えます。（例：キャッチコピーの下は 0.5em など）

作成できたら「公開」をクリックします。

ブログパーツのIDを控える

公開後、ブログパーツの一覧画面に戻ります。 作成した「MV用パーツ」の右端に表示されている「ショートコード」の中にある数字（ID）をメモしてください。

例：

なら、53 がIDです。

カスタマイザーで設定する

作成したブログパーツを、トップページのメインビジュアルにセットします。
「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」に進みます。

1. 高さの設定 まずはメインビジュアルの高さを設定します。

項目	設定値
メインビジュアルの高さ設定	数値で指定する
高さ (PC)	87vh
高さ (SP)	90vh

2. スライドの設定 次に、背景画像とブログパーツを組み合わせます。

• スライド画像[1]: 背景にしたい画像を設定します。（オフィスの風景など、雰囲気のある画像を選びましょう）
• ブログパーツID[1]: 先ほど控えたID（数字のみ）を入力します。

【重要】 この時、「メインテキスト[1]」と「サブテキスト[1]」は必ず空欄にしてください。ここに入力があると、ブログパーツと重複して表示されてしまいます。

これで、「背景画像」の上に「自由にレイアウトした文字とボタン」が重なって表示される、高品質なメインビジュアルが完成しました！

トップページのコンテンツ制作

メインビジュアルの下に続くコンテンツを作っていきます。 中級編では、効率的に制作を進めるために「ブロックパターン」の機能を活用します。

NEWSセクションの制作、テンプレートパターン登録

STEP 1：ベースとなるセクションを作る

まず、「NEWS」や「SERVICE」などで共通して使える「白い背景のセクション」のひな形を作ります。

1. 固定ページ「トップページ」の編集画面を開きます。
2. メインビジュアルの下に、「フルワイドブロック」を追加します。
3. 右側サイドバーのブロック設定で、背景色を「白 (#FFFFFF)」に設定します。

4. フルワイドブロックの中に、以下のブロックを配置してデザインを整えます。

• 見出しブロック (H2): 「NEWS」（欧文フォント、中央揃え）
  • ブロック下の余白量：0em（下の日本語と近づけるため）
• 段落ブロック: 「お知らせ」（サイズ：S、中央揃え）

STEP 2：パターンとして登録する

作成したフルワイドブロックを、他のセクション（SERVICEやCOMPANY）でも使い回せるようにパターン登録します。

1. 作成した「フルワイドブロック」を選択します。
2. ツールバーの「︙（オプション）」をクリックし、「パターンを作成」を選択します。

3. パターンの名前（例：「フルワイドテンプレ」）を入力します。
4. 「同期」のチェックを外します。
   • ※ここがポイント！同期をオフにすることで、配置後に中身（テキストなど）を自由に書き換えられるようになります。
5. 「追加」をクリックします。

これで、次回から「パターン」メニューから呼び出すだけで、一瞬でフルワイドセクションの土台が作れるようになりました。 この調子で、NEWSセクションの中身を作っていきましょう。

NEWSセクションの中身を作る

登録したパターンを使って、NEWSセクションを完成させましょう。

1. 先ほど配置した「フルワイドブロック」の中にある「段落（お知らせ）」の下に「投稿リスト」ブロックを追加します。

2. 右側のブロック設定で以下のように調整します。
   • 表示する投稿数: 3
   • レイアウト: テキスト型
   • タクソノミーの条件設定: カテゴリー「お知らせ (news)」にチェックを入れる
     • ※これで、WORKSの実績は表示されず、お知らせだけが表示されます。

3. 投稿リストの下に、「SWELLボタン」を追加します。
   • テキスト：「一覧を見る」
   • スタイル：MOREボタン
   • リンク先：カテゴリー「お知らせ」のURL（例：/category/news/）

これで、トップページのNEWSセクションが完成しました！ パターン機能を使えば、次の「SERVICE」や「COMPANY」セクションも、「呼び出す」→「書き換える」だけでサクサク作れます。

CONCEPTセクションの作成

続いて、企業理念を伝えるCONCEPTセクションを作成します。 ここは背景色を変えて、メリハリをつけましょう。

1. NEWSセクションの下に、新しく「フルワイドブロック」を追加します。
2. ブロック設定で背景色を「薄いグレー (#f7f7f7)」に設定します。

3. 見出しの下に、「メディアとテキスト」ブロックを追加します。
4. 画像をアップロード（または選択）し、右側のブロック設定で以下のように調整します。
   • メディアの幅: 40
   • 画像を切り抜いて調整: オン（これで画像が縦長にトリミングされ、スタイリッシュになります）

5. テキストエリアに、キャッチコピーと本文を入力します。
   • キャッチコピー（H3）：「伝わるデザインは、『引き算』から生まれる。」
   • 本文（段落）：「情報は詰め込むほどに……」
6. 最後に、「SWELLボタン」を追加します。
   • テキスト：「私たちについて」
   • スタイル：MOREボタン
   • リンク先：CONCEPTページのURL（例：/concept/）

これで、画像と文章がバランスよく配置されたCONCEPTセクションの完成です。

SERVICEセクションの作成

次に、事業内容を紹介するSERVICEセクションを作成します。 ここでは「リッチカラム」ブロックを使って、サービス内容を美しく3列に並べます。

1. CONCEPTセクションの下に、NEWSセクション制作時に作成した「フルワイドテンプレ」パターンを呼び出します。
   • ※「パターン」メニューから一発で追加できます。

2. 見出しを「SERVICE / 事業内容」に書き換えます。
3. 見出しの下に、「リッチカラム」ブロックを追加します。

4. 1つ目のカラムの中に、以下のブロックを順番に追加します。
   • 画像ブロック: サービスのアイコン画像（またはイメージ画像）を配置。
     • スタイル：中央揃え
     • サイズ：小さめ（高さ120px）
   • 見出しブロック (H3): 「Web制作」
     • スタイル：セクション用
     • 配置：中央揃え
   • 段落ブロック: 「コーポレートサイトからLPまで……」
     • 配置：中央揃え

5. 右側のブロック設定で、列数を「3」（スマホは「1」）に設定します。

5. 1つ目のカラムができたら、カラム全体を選択して「複製」すると効率的です。
   • ※リッチカラム全体ではなく、中の「カラム項目」を選択してツールバーの「︙」から「複製」を選びます。

6. 複製した2つ目、3つ目のカラムの内容（画像とテキスト）を、「ブランディング」「運用サポート」などに書き換えます。
7. 最後に、リッチカラムの下に**「SWELLボタン」**を追加します。
   • テキスト：「サービス詳細へ」
   • スタイル：MOREボタン
   • リンク先：SERVICEページのURL（例：/service/）

これで、プロのような3カラムレイアウトのSERVICEセクションが完成しました。

※文字の納まりが気になる場合は、テキストの変更や、余白・幅の調整で整えてみましょう！

WORKSセクションの作成

トップページ制作の最後に、実績を表示するWORKSセクションを作成します。 ここでは、ワイヤーフレームのデザインに従って、見出しを左揃えにし、「制作実績」カテゴリーの記事だけを画像付きで表示させます。

1. SERVICEセクションの下に、「フルワイドテンプレ」パターンを呼び出します。
2. ブロック設定で背景色を「薄いグレー (#f7f7f7)」に変更します（CONCEPTと同じ色で統一感を出します）。
3. 見出しを「WORKS」、段落を「制作実績」に書き換えます。
4. 見出しと段落を選択し、ツールバーの配置設定で「左寄せ」に変更します。
5. 段落の下に、テキストを追加します。
   • テキスト：「View More」
   • スタイル：シンプル
   • 配置：右寄せ
   • ボタンに矢印アイコンを追加してみましょう。 ボタンのテキスト「View More」の後ろにカーソルを合わせ、ツールバーの「▼（その他）」または「アイコン（☺マーク）」から、「→（矢印）」アイコンを選択して挿入します。

リンク先はWORKSページです。

このようになれば完成です！

6. 見出しの下に、「投稿リスト」ブロックを追加します。
7. 右側のブロック設定で以下のように調整します。
   • レイアウト: カード型（画像を見せるため）
   • 最大カラム数: PC・TAB 3 / SP 1
   • タクソノミーの条件設定: カテゴリー「制作実績」にチェックを入れる
     • ※これで、お知らせは除外され、実績記事だけが表示されます。

8. ボタンに矢印アイコンを追加してみましょう。 ボタンのテキスト「View More」の後ろにカーソルを合わせ、ツールバーの「▼（その他）」または「アイコン（☺マーク）」から、「→（矢印）」アイコンを選択して挿入します。

これで、シンプルながらも機能的なWORKSセクションの完成です！

COMPANYセクションの作成

トップページ最後のセクションとして、会社概要と地図を表示するCOMPANYセクションを作成します。 ここでは、「テーブル（表）」と「Googleマップ埋め込み」の実装方法を学びます。

1. WORKSセクションの下に、「フルワイドテンプレ」パターンを呼び出します。
2. 見出しを「COMPANY」、段落を「会社概要」に書き換えます。
3. 見出しの下に、「リッチカラム」ブロックを追加します。
4. 左側のカラムに、「テーブル」ブロックを追加します。
   • カラム数：2
   • 行数：5

5. テーブルの右側設定で「表のセル幅を固定」をオフにし、スタイルを「シンプル」に設定します。
   • これで、会社名や住所などの情報が見やすく整理されます。表の中に「会社名」「代表者」「設立」「所在地」「事業内容」などを入力しましょう。

6. 右側のカラムには、Googleマップを表示させます。 ブロックの追加から「カスタムHTML」を選択します。
7. Googleマップで表示したい場所（今回は例として「東京駅」）を検索し、「共有」ボタンをクリックします。
8. 「地図を埋め込む」タブに切り替え、「HTMLをコピー」をクリックします。

9. コピーしたコードを、WordPressの「カスタムHTML」ブロックに貼り付けます。 ここでひと工夫！ そのままだとサイズが固定されてしまっているので、コードの中の数値を少し書き換えます。
   • width="600" → width="100%" （横幅を親要素に合わせる）
   • height="450" → height="300" （高さをバランスよく調整）

「プレビュー」ボタンを押して地図が表示されれば成功です！ これでトップページのすべてのコンテンツが完成しました。お疲れ様でした！

共通CTA（フッター直前エリア）の作成

最後に、サイトの全ページ（トップページ以外も含む）のフッター直前に表示させる「お問い合わせエリア（CTA）」を作成します。

これを「ブログパーツ」で作っておくことで、文言やデザインを修正したい時に、一箇所直すだけで全ページに反映されるようになります。これが中級者以上の必須テクニックです！

1. 管理画面の「ブログパーツ」→「新規追加」をクリックします。
2. タイトルに「フッター前CTAセクション」と入力します（例）。
3. 「フルワイド」ブロックを追加します。
4. 右側のブロック設定で、背景色を「濃いグレー（#4A564F）」、文字色を「ホワイト」に設定します。
   • これで、フッターと一体感のある引き締まったデザインになります。

5. フルワイドブロックの中に、以下の内容を作成します。
   • 見出し (H2): 「CONTACT」（中央揃え、ブロック下の余白：0.5em）
   • 段落: 「Web制作、デザインに関するご相談は……」（中央揃え）
   • SWELLボタン:
     • テキスト：「お問い合わせフォームへ」
     • リンク先：CONTACTページのURL（/contact/）
     • ボタンサイズ設定：小
     • 段落（電話番号）: 「TEL: 03-1234-5678」（中央揃え）

6. 完成したら「公開」をクリックし、呼び出しコードを控えておきます。

7. トップページの編集画面に戻ります。
8. 一番下（COMPANYセクションの下）に、「ブログパーツ」ブロックを追加し、先ほど控えたCTAを呼び出します。
   • ※またはショートコードブロックに
     と入力してもOKです。

これでトップページが完全に仕上がりました！ この「共通CTA」ブログパーツは、今後作成する「CONCEPT」や「SERVICE」ページの最後にも配置していきます。

CONCEPTページの作成

それでは、最初の固定ページ「CONCEPT」を作成していきます。 ここでは、タイトル背景の設定と、余白を活かしたレイアウトを学びます。

管理画面の「固定ページ」→「固定ページ一覧」から、「CONCEPT」の「編集」をクリックします。

タイトル背景画像の設定

• エディタ右側のサイドバーにある「タイトルの背景画像」という項目を探します。 「画像を選択」をクリックし、ページトップに表示させたい画像（雰囲気のある抽象画や風景など）を設定します。

リードメッセージの作成

タイトルの下に、企業の想いを伝えるリード文を作成します。

• フルワイドブロックを追加し、背景色を「白 (#FFFFFF)」に設定します。
• 見出しや段落を配置します。
  • 見出し (H2)：「ノイズを消し……」 / スタイル：セクション用 / 中央揃え
  • 段落：「余白は、何もない……」 / 中央揃え

3つの指針（OUR VALUE）の作成

トップページに、ほぼ同じレイアウトのセクションがありましたね。手っ取り早く、トップページのSERVICEセクションをコピペしてしまいましょう！

1. CONCEPTページに戻りペーストし、セクションの背景色を「#F7F7F7」に設定します。
2. カラム内の画像を削除し、代わりに数字（例：01）を入力します。
3. 編集バーより、数字のテキストは太字にし、ブロック下の余白量を0.5emに設定。

4. 右側バーより、テキスト色を#4b575026にし、フォントサイズを3.5emに設定。

5. 見出しの下にバーを追加するため、「-」（半角ハイフン）を3つ入力し、Enter。

5. 区切りの色は「グレー」を選択します。
6. 残りのテキスト（見出しや本文）はワイヤーフレームの内容に書き換えてください。
7. ワイヤーフレームに沿った形で、3つの約束セクションが完成しました！

代表挨拶の作成

1. フルワイドセクションを追加し、背景を白（#FFFFFF）に設定します。
2. 「メディアとテキスト」ブロックを使って、代表者の写真とメッセージを配置します。
   • 配置：トップページのCONCEPTとは逆（画像左、テキスト右）にするとリズムが生まれます。
   • テキストはワイヤーフレームから流用してください。

代表挨拶セクションも完成です！

共通CTAの配置

最後に、ページの一番下に「ブログパーツ」ブロックを追加し、「フッター前CTAセクション」を呼び出します。

これで、統一感のあるCONCEPTページが完成しました！

SERVICEページの作成

続いて、SERVICE（事業内容）ページを作成します。 ここでは、「他のページで作ったデザイン（スタイル）をコピーして使い回す」という時短テクニックを学びます。

3つの事業内容セクションの作成

1. 管理画面の「固定ページ一覧」から、「SERVICE」の「編集」をクリックします。
2. タイトル背景画像の設定 CONCEPTページと同様に、右側サイドバーの「タイトルの背景画像」を設定します。

3. サービス詳細エリアの作成 ワイヤーフレームに従って、サービス内容を交互に配置していきます。
   • フルワイドブロックを追加し、背景色を「白 (#FFFFFF)」に設定します。
   • その中に、「メディアとテキスト」ブロックを追加します。
   • 数字「01」の作成（スタイルコピーの活用）先ほど作ったCONCEPTページの編集画面を別タブで開きます。
     • 「01」という数字のブロック（段落）を選択し、ツールバーの「︙」から「スタイルをコピー」をクリックします。
     • SERVICEページに戻り、メディアとテキストのテキストエリアに「01」と入力した段落を作ります。
     • その段落のツールバー「︙」から「スタイルを貼り付け」を選択します。
     • これで、フォントサイズや色、太字などの設定が一瞬で反映されます！

4. 画像の設定
   • メディアの幅：50
   • 画像を切り抜いて調整：オン
5. テキストの入力
   • ワイヤーフレームから、見出し「Web制作」や説明文をコピーして貼り付けます。

6. 2つ目、3つ目のサービスを追加 作成した「メディアとテキスト」ブロックを複製し、画像とテキストを入れ替えます。
   • 2つ目（ブランディング）：ブロック設定で「メディアを右に表示」をオンにして、左右を入れ替えるとリズムが出ます。
   • ワイヤーフレームを参考に、テキストを整えていきます。
   • 1つ目と2つ目の「メディアとテキスト」ブロックの「ブロック下の余白量」を5emに設定します。

3つの事業内容セクションの完成です！

料金表（PRICE）の作成

次はPRICEセクションです。

1. 「フルワイドテンプレ」パターンを呼び出します。
2. フルワイドセクションの背景色を「薄いグレー (#f7f7f7)」に変更し、テキストを見出し「PRICE」、段落「参考価格」に整えます。
3. 見出しの下に「グループ」ブロックを挿入し、グループの背景色を「白 (#FFFFFF)」に設定します。
4. グループの中に「テーブル」ブロックを挿入します。

5. テーブルのスタイルを「シンプル」にします。

6. 価格の列（右列）を選択し、ツールバーの配置設定で「右揃え」にします。

7. 作ったテーブルブロックを複製し、テキストを整えます。
8. 注意書きは、フォントサイズを「S」に設定します。

PRICEセクションの完成です！

CTAセクションの作成

ワイヤーフレームには無いのですが、ブログパーツから「フッター前CTAセクション」を呼び出して、挿入しましょう。

近年では生成AIを利用した競合調査・ワイヤーフレームの作成が主流となっています。
使用者がしっかりとコントロールを握ったAIコンテンツは大変優秀であり、工数の削減・品質の向上を確保でき、制作者・クライアント共に最新技術の利益を受けることができます。

ですが、生成AIの仕組み上、CTAセクションなどのすべてのページに共通のセクションなどは、微妙に異なるコンテンツを生成することがあります。
「本当は、全く同じものを設置する想定なのか？」「敢えてページごとに最適なテキストを設置しているのか？」「このページだけ、共通パーツが無いんだけど？」といった疑問が生じた場合は、必ずディレクターに確認するか、適宜判断してクライアントに変更点を説明する必要がありますのでご注意ください。

さて、今回は「ワイヤーフレームから抜けていました。設置してください。」という判断です。

これで、SERVICEページが完成しました！そろそろ慣れてきたでしょうか？あと少し、一緒に頑張りましょう！

COMPANYページの作成

続いて、会社概要（COMPANY）ページを作成します。 ここでは、テーブルブロックのデザイン調整と、Googleマップの埋め込みを行います。
復習が中心のページです！

タイトル背景画像の設定

1. 管理画面の「固定ページ一覧」から、「COMPANY」ページの「編集」をクリックします。
2. タイトル背景画像の設定 他のページと同様に、右側サイドバーで設定します。

会社概要（PROFILE）セクションの作成

1. 「フルワイドテンプレ（白）」パターンを呼び出します。
2. 見出しを「PROFILE」、段落を「基本情報」に書き換えます。
3. 見出しの下に「テーブルブロック」を追加します。
   • カラム数：2
   • 行数：7
4. 設定：「表のセル幅を固定」をオフ

5. さらに、左側の列を見出し（thタグ）に変更して、デザインを引き締めます。
   • テーブルを選択した状態で、ツールバーの「タグの切り替え」ボタン（Tのようなアイコン）をクリックし、「tbody の1列目を th に変換する」を選択します。

4. これで左列が薄いグレーになり、本格的な会社概要表になります。「会社名」「設立」「代表者」などの情報を入力していきましょう。

PROFILEセクションの完成です！

アクセスセクションの作成

1. PROFILEセクションの下に、「フルワイドテンプレ」パターンを呼び出します。
2. フルワイドセクションの背景を薄いグレー（#F7F7F7）に変更します。
3. 見出しを「ACCESS」、段落を「アクセス」に書き換えます。
4. ブロックの追加から「カスタムHTML」を選択します。
5. Googleマップで表示したい場所（今回は例として「東京駅」）を検索し、「共有」ボタンをクリックします。
6. 「地図を埋め込む」タブに切り替え、「HTMLをコピー」をクリックします。

7. コピーしたコードを、WordPressの「カスタムHTML」ブロックに貼り付けます。 ここでひと工夫！
   そのままだとサイズが固定されてしまっているので、コードの中の数値を少し書き換えます。
   • width="600" → width="100%" （横幅を親要素に合わせる）

8. マップの下に、住所や最寄り駅の情報を追加します。
   • リッチカラム（2列）を追加し、左列に「オフィス住所」、右列に「最寄り駅」を入力すると綺麗にまとまります。
9. 左カラム
   • 見出し (H3)：「Studio Haku オフィス」
   • 段落：「〒150-0000東京都渋谷区〇〇 1-2-3 Haku Building 3F」
10. 右カラム
    • 見出し (H3)：「最寄り駅」
    • 段落：「JR山手線「渋谷駅」より徒歩8分東京メトロ副都心線「明治神宮前駅」より徒歩5分」

沿革 (HISTORY) の作成

最後に、沿革を作成します。年表のようなレイアウトも、テーブルブロックを使えば簡単に作れます。

1. 「フルワイドテンプレ」パターンを呼び出します。
2. 見出しを「HISTORY」、段落を「沿革」に書き換えます。
3. 見出しの下に「ステップ」ブロックを追加します。
4. デザインの調整（ここがポイント！） 通常だと「STEP 1」と表示されてしまいますが、これをシンプルな年表に変えます。
   • 親の「ステップブロック」を選択し、スタイルを「シンプル」にします。
   • 中にある「ステップ項目」を一つずつ選択し、右側サイドバー「STEPテキストの上書き設定」の「番号を非表示にする」「テキストを非表示にする」の2つにチェックを入れます。
   • これで「STEP 1」の文字が消え、シンプルな「丸（●）」だけのデザインになります。

5. 内容の入力
   • コンテンツエリアに「年月（例：2024.01）」と「出来事」を入力していきましょう。
6. 共通CTAの配置 最後に「フッター前CTAセクション」ブログパーツを配置して完了です。

COMPANYページが完成しました！
次からは、フォームプラグインや投稿機能との連携が絡んだページの制作となります！

CONTACTページの作成

CONTACT（お問い合わせ）を作成します。 ここでは、高機能なフォームプラグイン「Snow Monkey Forms」を使って、入力→確認→完了の画面遷移がある本格的なフォームを実装します。

お問い合わせフォーム（ブロック）の作成

まずは、プラグインの設定画面でフォームそのものを作成します。

1. 管理画面メニューの「Snow Monkey Forms」→「投稿を追加」をクリックします。

2. フォーム全体の設定
   • まず、フォームの挙動とデザインを設定します。 エディタ上部の「フォーム設定を開く」をクリックし、右側のパネルで以下を設定してください。
     • 確認画面を使用する：オン
     • フォームスタイル：Letter

3. フォームの全体設定
   • まず、フォームの挙動とデザインを設定します。 エディタ上部の「フォーム設定を開く」をクリックし、右側のパネルで以下を設定してください。
     • 確認画面を使用する：オン
     • フォームスタイル：Letter
4. 「お名前」フォームの設定
   • お名前項目ラベルに「必須」の記載
   • プレースホルダーを入力

3. 「貴社名」フォームの設定
   • お名前フォームの下に、左側メニューより「項目」ブロックを選択
   • 項目ラベルに「貴社名」と入力
   • 項目の中に「テキスト」ブロックを挿入
   • プレースホルダーへ「例）株式会社Studio Haku」と入力
   • 「属性」メニューのNAMEへ「company-name」と入力

4. 「メールアドレス」フォームの設定
   • 項目ラベルを「メールアドレス」とし、お名前フォームから、「必須」の部分をコピペ
   • emailブロックのプレースホルダーを「例）info@example.com」と設定
5. 「お問い合わせ種別」フォームの設定
   • メールアドレスフォームの下に「項目」ブロックを追加
   • 項目ラベルを「お問い合わせ種別」と設定、「必須」の部分はお名前フォームからコピペする
   • 項目の中に「セレクトボックス」ブロックを挿入
   • 必須トグルをオン、属性：NAMEへtypeと入力
   • 属性：OPTIONへ選択肢を入力
     • "":"選択してください"
Web制作について
ブランディングについて
その他のお問い合わせ

6. 「お問い合わせ内容」フォームの設定
   • お問い合わせ種別フォームの下に「項目」ブロックを追加
   • 項目ラベルを「お問い合わせ内容」とし、お名前フォームから「必須」の部分をコピペ
   • テキストエリアブロックの属性：NAMEを「message」と設定
   • 属性：ROWSを「3」と設定
   • テキストエリアブロックのプレースホルダーを「ご相談内容を具体的にご記入ください。」と設定
7. 「完了画面」テキストの設定
   • 完了画面テキストを編集
     • お問い合わせフォームの送信を完了致しました。
この度はお問い合わせいただきまして誠にありがとうございます。
ご入力頂いたメールアドレス宛へ、ご確認メールをお送りしておりますのでご確認ください。
内容を確認次第、担当者より折返しご連絡させていただきます。今しばらくお待ちくださいませ。

メール通知設定（最重要！）

フォームの見た目が完成したら、次は「中身」の設定です。 ここが正しく設定されていないと、「せっかくお問い合わせがあったのに気づかない」「お客様に確認メールが届かない」という事故につながります。

Snow Monkey Formsの設定において最も重要なのが、name属性です。 例えば、先ほどの設定で「お問い合わせ種別」のname属性を type に設定しました。この type というキーワードを使って、メール本文に選択された内容を呼び出します。

管理者宛メールの設定（自分への通知）

まず、お問い合わせがあった時にあなた（サイト管理者）に届くメールを設定します。

1. ブロックエディタのまま、フォーム全体を選択します。
2. 右側ブロック設定パネル（または画面上部）にある「管理者宛メール」をクリックして設定を開きます。
3. 以下のように入力してください。

項目	設定内容	解説
To（メールアドレス）	（管理者のメールアドレス）	重要：お問い合わせを受け取りたいメールアドレスを直接入力してください。
件名	【Studio Haku】お問い合わせがありました	受信トレイで見落とさない件名にしましょう。
BODY	（下記コードをコピペ）	以下の内容をコピーして貼り付けてください。
FROM（メールアドレス）	noreply@studio-haku.com	サイトのドメインに合わせます（存在しなくても送信は可能ですが、実在するアドレス推奨）。
送信者	Studio Haku	追加設定：ここを設定しないと差出人が「WordPress」になります。分かりやすい名前を入れましょう。

 管理者宛メールの本文

ウェブサイトよりお問い合わせがありました。

■お名前
{fullname}

■貴社名
{company}

■メールアドレス
{email}

■お問い合わせ種別
{type}

■お問い合わせ内容
{message}

--------------------------------------------------
送信日時：{_date} {_time}
--------------------------------------------------

自動返信メールの設定（お客様への確認）

次に、送信ボタンを押した直後にお客様へ自動で届くサンクスメールを設定します。 これがあることで、お客様は「ちゃんと送れたんだな」と安心できます。

1. 右側設定バー下部、「自動返信メール」の設定項目を開きます。
2. 以下のように入力してください。

項目	設定内容	解説
To（メールアドレス）	{email}	重要！ お客様が入力したメアド（name="email"）に送ります。
From（メールアドレス）	info@studio-haku.com	お客様が返信ボタンを押した時の宛先になります。
送信者	Studio Haku	メーラーの「差出人」欄に表示される名前です。
件名	【Studio Haku】お問い合わせありがとうございます
BODY	（下記コードをコピペ）

 自動返信メールの本文

{fullname} 様

この度は、Studio Hakuへお問い合わせいただき誠にありがとうございます。
以下の内容で受け付けいたしました。

担当者より2営業日以内にご連絡させていただきますので、
今しばらくお待ちいただけますようお願い申し上げます。

--------------------------------------------------
■お名前
{fullname}

■貴社名
{company-name}

■お問い合わせ種別
{type}

■お問い合わせ内容
{message}
--------------------------------------------------

※お急ぎの場合は、お電話（03-1234-5678）にてご連絡ください。
※このメールにお心当たりがない場合は、お手数ですが破棄をお願いいたします。

━━━━━━━━━━━━━━━━━━━━━━━━━━
Studio Haku（スタジオ ハク）
URL: https://example.com
Mail: info@studio-haku.com
━━━━━━━━━━━━━━━━━━━━━━━━━━

設定のポイント：
name属性の展開 今回ご紹介したメール本文や件名は、あくまで「一例」です。 Snow Monkey Formsのメール設定で最も重要なルールは、「フォーム項目の name 属性（fullname など）を {} で囲む（{fullname}）と、その部分に入力内容が展開される」 という仕組みです。

このルールさえ理解していれば、クライアントの要望に合わせて自由にメール文面をカスタマイズできます。ケースバイケースで確認しながら、最適なメール設定を実装しましょう。

CONTACTページへの設置

フォームの設定が完了しましたが、まだ「固定ページ」には表示されていません。 作成したフォームを「CONTACT」ページに設置して、実際に使える状態にしましょう。

1. WordPress管理画面から 「固定ページ」＞「CONTACT」 の編集画面を開きます。
2. 他のページと同様に、右側サイドバーでタイトル背景画像を設定します。

3. 本文エリアに 「フルワイドブロック」 を挿入します。
4. フルワイドブロックの設定を行います。
   • 背景色：白（#ffffff）に設定し、清潔感を出します。
5. フルワイドブロックの中に、ワイヤーフレームに従いテキストを配置します。
6. 「Snow Monkey Forms」ブロック を挿入します。
7. 作成したフォームを選択します。
   • プルダウンメニューから、先ほど作成したフォーム（例：「お問い合わせ」）を選びます。
   • これで、デザイン済みのフォームがページ内に呼び出されます。

動作テスト（必ず実施！）

設定が終わったら「更新」して、実際のページでテスト送信を行ってください。

• 入力内容が正しくメールに反映されているか？
  • 特に「name属性（{fullname}など）」が正しく表示されているか確認しましょう。
• 管理者とお客様（テスト用メアド）、双方にメールが届いたか？
• 必須項目チェックは機能しているか？

問題なければ、お問い合わせフォームの実装は完了です！

NEWSページ（カテゴリー）のカスタマイズ

次は「NEWS（お知らせ）」ページです。 これは「固定ページ」で作るのではなく、WordPress標準の「投稿カテゴリー」機能を使い、SWELLの設定で見た目を整えます。

こうすることで、「投稿 ＞ 新規追加」でお知らせを書くだけで、自動的にこのページに記事が溜まっていくようになります。

カテゴリー編集画面を開く

1. WordPress管理画面の 「投稿」＞「カテゴリー」 をクリックします。
2. 以前作成したカテゴリー「お知らせ」の「編集」をクリックします。

SWELL設定でリッチにする

編集画面に入ると、通常の名前などの設定の下に、「SWELL設定」というエリアがあります。 ここで以下の2点を設定するだけで、カテゴリーページが一気にメインビジュアル付きの固定ページのような見た目に変わります。

1. 「リストレイアウト」を「テキスト型」に変更
   • 制作事例と違い、お知らせはサムネイルの設定をしない簡易的なお知らせを想定しているので、「テキスト型」としましょう！
2. 「タイトル位置」を「コンテンツ上」に変更
   • ここを「コンテンツ上」に設定することで、タイトルが背景画像の上に重なり、メインビジュアルのような洗練されたデザインになります。
3. 「アイキャッチ画像」を設定
   • ここで設定した画像が、そのままページヘッダー（タイトルの背景）として表示されます。他の固定ページと同じ画像を設定して、サイト全体の統一感を出しましょう。

設定できたら、画面一番下の「更新」ボタンを押してください。

これで、「NEWS」という固定ページを作らなくても、「カテゴリー：お知らせ」にアクセスするだけで、立派なニュース一覧ページが表示されるようになりました。

サイドバーとウィジェットの設定

今回のサイトでは、トップページや固定ページを「1カラム（サイドバーなし）」で作成してきましたが、ブログ記事（投稿）の詳細ページなどでは、読者の回遊率を高めるためにサイドバーを表示させることが一般的です。

サイドバーに関する要望があった時に「何もわからない！」という状態にならないよう、SWELLのウィジェット機能を使ってサイドバーを整える方法も学んでおきましょう。

1. WordPress管理画面の 「外観」＞「ウィジェット」 を開きます。
2. 「共通サイドバー」 というエリアを探します。
   • ここに入っている項目が、サイドバーありのページすべてに表示されます。
   • 初期状態ではWordPressデフォルトのブロックが入っているので、すべて削除（枠外へドラッグ、またはクリックして削除）してまっさらにしましょう。

3. ウィジェットを追加します。
   • 画面左側の「利用できるウィジェット」一覧から、必要なウィジェット例）[SWELL] プロフィール を探し、「共通サイドバー」へドラッグ＆ドロップします。

3. [SWELL]プロフィールを設定します。
   設定内容：
   • 名前：Studio Haku
   • プロフィール文：簡単な紹介文を入力します。
   • アイコン画像：ロゴマークや顔写真などを設定。
   • プロフィール背景画像：おしゃれな画像をアップロードすると雰囲気が良くなります。
   • SNSアイコンリストを表示する：チェックを入れると、ユーザー設定で登録したSNSリンクが表示されます。
   • アイコンを丸枠で囲む：デザインの好みで設定しましょう。

4. 最後に画面右上の 「更新」 をクリックして保存します。

これで、もし「投稿ページ」などでサイドバーを表示する設定にした場合、美しいプロフィールと意図したナビゲーションが表示されるようになりました。

WORKSページ（投稿ページ）のカスタマイズ

次は「WORKS（制作実績）」ページです。 初期設定編で、この固定ページをWordPressの「投稿ページ」に設定しました。 そのため、このページは自動的に「記事一覧（ブログ）」が表示される特殊なページになっています。

SWELLでは、この投稿ページのデザインを「固定ページの編集画面」と「カスタマイザー」の2箇所で調整します。

固定ページでメインビジュアルを設定

まず、WORKSページの「見た目（ヘッダー）」を整えます。

1. WordPress管理画面の 「固定ページ」＞「固定ページ一覧」 をクリック。
2. 「WORKS」 の「編集」をクリックします。
3. 「アイキャッチ画像」 に、WORKS用のヘッダー画像をアップロードします。

「お知らせ」カテゴリーを除外する

現在、このWORKSページには「全ての投稿」が表示されてしまうため、先ほど設定した「お知らせ（NEWS）」の記事も混ざって表示されてしまいます。 WORKSページには実績だけを表示したいので、「お知らせ」カテゴリーを除外する設定を行います。

カテゴリーIDを調べる

1. 「投稿」＞「カテゴリー」 を開きます。
2. 除外用に「お知らせ」カテゴリーの 「ID」 をメモします（例：1）。
3. タブ設定用に「Web制作」「グラフィック」「その他」カテゴリーの「ID」も控えておきます（例：4,5,6）。

リストレイアウトを設定

1. 「リストレイアウト（PC/Tab）」を「リスト型（左右交互）」に設定します。

カスタマイザーで除外設定

1. 管理画面メニューの 「外観」＞「カスタマイズ」 をクリック。
2. 「記事一覧リスト」 をクリック。
3. 「投稿一覧から除外するカテゴリーID」 に、メモしたID（例：1）を入力します。

タームタブ（カテゴリー切り替え）の設定

さらに、実績一覧の上部に「Web制作」「グラフィック」などの切り替えタブを表示させて、ユーザーが見たい実績を絞り込めるようにしましょう。

1. 「■タブ切り替え設定（トップページ）」 の「タームタブの設定」に、タブ設定用にメモしたID（例：4,5,6）を入力します。
2. 「タブデザイン」を「下線」に設定します。

設定できたら、画面上部の「公開」 を押して完了です！

WORKSページは完成です！ワイヤーフレーム通りになったでしょうか？
これで全てのページが完了！…と言いたいところなのですが、プライバシーポリシーページが残っています。。

プライバシーポリシーページの作成

サイト公開前の最後のピース、「プライバシーポリシー（個人情報保護方針）」の作成です。 お問い合わせフォームを設置して個人情報（名前やメールアドレス）を取得する以上、このページは事実上必須となります。

一から自分で考える必要はありません。信頼できるひな形を利用しましょう。

1. WordPress管理画面の 「固定ページ」＞「プライバシーポリシー」 を開きます。
2. 本文エリアに 「フルワイドブロック」 を挿入します。
3. フルワイドブロックの設定を行います。
   • 背景色：白（#ffffff）に設定。
4. フルワイドブロックの中に、コピーしたひな形テキストを貼り付けます。
5. 内容を編集します。
   • 「サイト名」「URL」「制定日」「連絡先」などを、Studio Haku（または自分のサイト）の情報に書き換えます。
   • 不要な項目があれば削除し、自社の運用に合わせて調整してください。
6. 「公開」（または更新）をクリックします。

上級設定：特定のメニュー項目にCSSクラスを付与する

必須のプライバシーポリシーページですが、積極的な回遊を促したいページではありません。プライバシーポリシーページを含まないメニューを作り、表示設定を分けるやり方でもよいですが、今回はサクッとCSSコピペで対応してしまいましょう。
プライバシーポリシーをPCヘッダーから隠すために、この項目だけに目印（クラス名）をつけます。

1. 画面右上にある 「表示オプション」 タブをクリックして開きます。
2. 詳細メニュー設定を表示の項目にある 「CSSクラス」にチェック を入れます。

3. これで、各メニュー項目の設定の中に「CSS class (オプション)」という入力欄が出現します。
4. メニュー構造の中にある 「Privacy Policy」 の ▼ をクリックして開きます。
5. 「CSS class (オプション)」 の欄に menu-privacy と入力します。
6. 「メニューを保存」 をクリックします。

※ この設定だけではまだ消えません。後ほど「追加CSS」でこのクラスに対して display: none; を指定することで、自由に表示/非表示をコントロールできるようになります。

1. 管理画面の 「外観」＞「カスタマイズ」 をクリックします。
2. 一番下にある 「追加CSS」 をクリックして開きます。
3. 出てきた入力欄に、以下のコードをコピーして貼り付けます。

#gnav,#fix_header {
	.menu-privacy {
		display: none;
	}
}

これで、フッター・スマホ開閉メニューには残したままヘッダーメニューからは非表示になりました！

完成！Studio Haku 公式サイト

お疲れ様でした！これですべての工程が終了です。 トップページに戻り、ブラウザを更新してみてください。

• ヘッダーのメニューに「NEWS」があり、クリックするとカスタマイズした一覧ページが表示されますか？
• 「WORKS」ページを開くと、お知らせが除外され、カテゴリー切り替えタブが表示されていますか？
• お問い合わせフォームからメールが送れますか？

これで、WordPressテーマ「SWELL」を使った、実務レベルのコーポレートサイト「Studio Haku」の完成です！

Next Step：SWELL構築講座【上級編】予告

中級編、本当にお疲れ様でした！ これだけでも十分プロとして通用するクオリティですが、実際の制作現場では「もっとここを調整したい」「独自の入力項目が欲しい」といった、テーマ標準機能だけでは対応しきれないオーダーもガンガン発生します。

次回の【上級編】では、今回作成したこの「Studio Haku」のサイトをベースに、さらに本格的なカスタマイズ（モディファイ）を加えていきます。

▼ 上級編で学ぶこと（予定）

• アニメーションの強化
  • SWELL標準の機能だけでなく、プラグインを使ったリッチなアニメーション設定。
• 脱・初心者！CSSカスタマイズ
  • Google Chromeなどの「検証ツール」を使って、自分でセレクタ（クラス名）を調べてCSSを当てる方法。
  • 実際の微調整で使える実務的なコード紹介。
• カスタムフィールドの活用（Advanced Custom Fields）
  • 「制作実績」などの投稿フォーマットを整備。
  • クライアントが入力するだけで綺麗なレイアウトが自動生成される仕組みづくり。

より「実務」に即した、エンジニア寄りのスキルを身につけていきましょう。 まずは完成したこのサイトをあなた自身のポートフォリオとして公開し、自信を持って次のステップへ進んでください！

上級編でお会いしましょう！