【SWELL実務講座】プロの納品フローと限界突破のカスタマイズ（上級編）

中級編での「Studio Haku」制作、本当にお疲れ様でした！ 複数ページの構成、お問い合わせフォーム、そして複雑なレイアウトの調整…。ここまで作り切った時点で、あなたは既にSWELLユーザーの上位数%に入っているはずです。

しかし、もし今、クライアントからこんな相談をされたら、自信を持って「任せてください」と言えますか？

• 「ここの余白、あと数ミリだけ詰められませんか？」
• 「実績の入力が面倒で…。文字を入れるだけで勝手にデザインされるようにできませんか？」
• 「セキュリティ対策や、もし壊れた時の復旧はどうなっていますか？」

中級編までは、SWELLという「優秀なテーマの機能」を使ってサイトを作りました。
この上級編では、「あなた自身の技術」を使って、SWELLの限界を超えたカスタマイズと、プロとして責任ある納品を行うためのスキルを習得します。

これらは、SWELLに限らず、WordPressを使って仕事をするなら一生モノの知識となります。

中級編で作ったサイトが「100点の見た目」だとしたら、上級編で目指すのは「120点の使いやすさと信頼性」です。 ここを乗り越えれば、あなたはもう「初心者」ではありません。「Web制作者」としての看板を掲げる準備は整います。

さあ、最後の総仕上げに取り掛かりましょう！

【脱初心者】検証ツールとCSSで「あと1mm」をこだわる

SWELLは非常に高機能ですが、実際の案件では「ヘッダーの高さをあと5px縮めたい」「このページだけ背景色を変えたい」といった、設定画面にはない要望が出ます。
これに対応するために必須なのが、ブラウザの「検証ツール（デベロッパーツール/DevTools）」です。

必須スキル「検証ツール」の使い方

Google Chromeを使っている前提で解説します。

1. 検証ツールを開く
   • Webサイト上の調べたい要素（今回は「必須」ラベル）の上で 右クリック ＞ 「検証」 を選択します。
     （またはショートカットキー F12 または Cmd + Option + I）

2. 矢印アイコンで「要素」を選択する
   • 検証ツールの左上にある「矢印マークのアイコン」をクリックしてONにします（アイコンが青くなります）。
   • その状態で、サイト上の「色を変えたい場所（例：ステップ番号）」をクリックしてください。
     すると、検証ツールの中で「その部分のHTMLコード」が自動的に青く選択されます。

3. クラス名（セレクタ）を特定する
   • 青く反転しているコードの中に class="..." という部分があります。これが、その要素につけられた「名前」です。
   • 今回は、一番目立つ「送信ボタン（確認画面へ）」を調べたとしましょう。smf-action や smf-button-control__control といったクラス名が見つかります。これをコピーします。

4. WordPressの「追加CSS」に記述する
   • WordPress管理画面の 「外観」＞「カスタマイズ」＞「追加CSS」 を開きます。
   • ここに先ほどコピーしたクラス名を貼り付け、CSSを書いてみましょう。カスタマイザーの良いところは、コードを書くとリアルタイムで右側のプレビュー画面に反映される点です。

「Styles」タブを見ることで、「現在どのCSSが効いているか」が一目瞭然です。ここで数値を書き換えてテストし、うまくいったコードをWordPressの「追加CSS」にコピペする。これがカスタマイズの基本フローの一つです。

実践カスタマイズ（Snow Monkey Forms編）

実際にStudio Hakuのお問い合わせフォームを例に、「送信ボタン」のデザインを、サイトのテーマカラー（#4A564F）に合わせてリッチに変更してみましょう。

以下のコードを「追加CSS」に記述し、プレビュー画面でボタンが劇的に変わるのを確認してください。

/* 1. 送信ボタン（確認画面へ・送信する） */
.smf-button-control__control[type="submit"] {
    background: var(--color_main) !important;
    
    color: #fff !important;
    border-radius: 80px;
    padding: 12px 48px;
    border: none !important;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.2s;
		letter-spacing: .2em;
		text-indent: .2em;
    
    /* サイズ感調整 */
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 0 auto;
}

/* 送信ボタンのホバー時 */
.smf-button-control__control[type="submit"]:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

/* 2. 戻るボタン（背景透明・枠線あり） */
.smf-button-control__control[data-action="back"] {
    background: transparent !important;
    color: #555 !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
}

/* 戻るボタンのホバー時 */
.smf-button-control__control[data-action="back"]:hover {
    background: #f5f5f5 !important;
}

いかがでしょうか？地味だったボタンが、一気に「押したくなるボタン」に生まれ変わりました。
「検証ツールでクラス名を探す → 追加CSSで書いて確認する」という流れさえ掴めば、どんなプラグインも自由にデザインできます。

Snow Monkey Formsだけでなく、Contact Form 7、SWELLボタンのCSSについては以下の記事で詳しく解説していますので、ぜひ読んでみてください！

【CMS化】ACFで「クライアントが壊せない」更新環境を作る

ここが上級編の最大の目玉です。
中級編では「投稿のブロックエディタ」を使って実績ページを作りました。しかし、クライアントに納品後、「操作を誤ってレイアウトを崩してしまう」というリスクがあります。

入力を「枠」に入れるだけで、デザインされたページが自動生成される。

これを作るために、プラグイン「Advanced Custom Fields (ACF)」を導入します。

ACFの導入とフィールド作成

1. プラグインをインストール
   「プラグイン」＞「新規追加」で「Advanced Custom Fields」を検索し、インストール・有効化します。

2. フィールドグループを作成
   左メニュー「ACF」＞「フィールドグループ」＞「新規追加」をクリック。
   タイトルを「制作実績情報」とします。

3. フィールドを追加する
   以下の3つの項目を作成しましょう。

フィールドタイプ	フィールドラベル	フィールド名
テキスト	クライアント名	client_name
番号	制作年	work_year
URL	サイトURL	site_url

4. 表示条件の設定
   • 「投稿カテゴリー」「等しい」「制作実績」に設定します。
     これで、実績投稿の時だけ、エディタの下に入力欄が出現します。

5. 「変更内容を保存」ボタンを忘れずに！

出力用の「自作ショートコード」を作る

1. Code Snippetsの導入
   • プラグイン「Code Snippets」をインストール・有効化してください。
     これは、functions.php を直接編集せずに、安全にPHPコードを追加できる便利なプラグインです。
2. コードの登録
   • 左メニュー「スニペット」＞「新規追加」をクリックし、ショートコード名を「ACFショートコード」とし、説明へ「[my_acf field="〇〇"]にて展開」と入力します。
   • 以下のコードを貼り付けて「Save Changes and Activate」をクリックします。

// ACFの値を表示する自作ショートコード
// 使い方：[my_acf field="フィールド名"]

function my_acf_shortcode_func( $atts ) {

  $atts = shortcode_atts(
    array(
      'field' => '',
      'link'  => 'auto', // auto | yes | no
      'text'  => '',     // リンク表示テキスト（空ならURLそのまま）
      'target'=> '',     // _blank など
      'rel'   => '',     // noopener noreferrer など
    ),
    $atts
  );

  if ( empty( $atts['field'] ) ) {
    return '';
  }

  $value = get_field( $atts['field'] );

  if ( empty( $value ) ) {
    return '';
  }

  $url = '';
  if ( is_array( $value ) ) {
    // ACF Link フィールド想定: ['url'] ['title'] ['target']
    $url = isset($value['url']) ? $value['url'] : '';
    if ( empty($atts['text']) && !empty($value['title']) ) {
      $atts['text'] = $value['title'];
    }
    if ( empty($atts['target']) && !empty($value['target']) ) {
      $atts['target'] = $value['target'];
    }
  } else {
    $url = (string) $value;
  }

  $is_url = filter_var( $url, FILTER_VALIDATE_URL );

  // link=auto のときはURLっぽければリンク化
  $should_link =
    ( $atts['link'] === 'yes' ) ||
    ( $atts['link'] === 'auto' && $is_url );

  if ( $should_link && $is_url ) {
    $text   = $atts['text'] !== '' ? $atts['text'] : $url;
    $target = $atts['target'] !== '' ? ' target="' . esc_attr($atts['target']) . '"' : '';
    $rel    = $atts['rel'] !== '' ? ' rel="' . esc_attr($atts['rel']) . '"' : '';
    return '<a href="' . esc_url( $url ) . '"' . $target . $rel . '>' . esc_html( $text ) . '</a>';
  }

  // 通常テキストとして返す
  if ( is_array( $value ) ) {
    // 配列の場合は最低限 title を優先、なければ url
    $fallback = !empty($value['title']) ? $value['title'] : $url;
    return esc_html( $fallback );
  }

  return esc_html( $value );
}

add_shortcode( 'my_acf', 'my_acf_shortcode_func' );

トグルがオンになっていればOKです！
（不要なデフォルトショートコードは”Trash”にて削除しておきましょう。）

SWELLブログパーツでテンプレートを作る

自作ショートコードができたので、あとはSWELLの「ブログパーツ」で出力用テンプレートを作るだけです。

1. ブログパーツの新規作成
   • 「ブログパーツ」＞「新規追加」で、タイトル「実績詳細テンプレート」を作成します。
2. ショートコードで値を呼び出す
   • ACFの値を表示するショートコード[my_acf field="フィールド名"] を使って、以下のようなテーブルブロックを作成します。
     • クライアント：[my_acf field="client_name"]様

     • 制作年：[my_acf field="work_year"]年

     • URL：[my_acf field="site_url"]

実際に投稿して確認する

準備は整いました！実際に制作実績を投稿して、魔法のような挙動を確認しましょう。

1. 「制作実績」の投稿を編集（新規追加でも構いません）
2. カテゴリーを選択（重要！）：
   新規投稿の場合は、カテゴリー「制作実績」にチェックを入れます。
   ※STEP 1の表示条件により、チェックを入れるとACFの入力欄が出現します。
3. カスタムフィールドに入力：
   編集画面エディタの下の方（またはサイドバー。カスタムCSS&JSなどの入力欄がある部分です。）に「制作実績情報」というパネルが出現しています。
   ここにクライアント名やURLを入力します。
   ※ここに入力したデータが、ショートコードを通じて自動的に表示されます。

4. テンプレートを呼び出し：
   本文エリアに、STEP 3で作ったブログパーツ「実績詳細テンプレート」を配置します。

これで公開ボタンを押して記事を見てみてください。
本文に文字を直接打ち込まなくても、入力したデータが綺麗にデザインされて表示されているはずです。

↓

この手法なら、クライアントは「文字を入れるだけ」で済み、操作ミスでデザインが崩れる心配もありません。
しかも、出力されるデザイン自体はSWELLの機能でリッチに作り込めるため、「管理のしやすさ」と「デザインの自由度」を両立できます。まさにプロの仕事です！

【品質管理】サイトの表示速度とSEO内部対策

納品前に必ずチェックすべき「品質」の部分です。特に「表示速度」はGoogleの評価にも直結します。

プロの画像管理術（ファイル名とAltテキスト）

意外と見落とされがちなのが、画像の扱い。納品後のサイトが画像検索に載るか、SEOで評価されるかはここにかかっています。

1. ファイル名は「内容がわかる英語」に

Googleは公式に「ファイル名は画像の内容を判断する重要な手がかりになる」と明言しています。内容を表す英語名にリネームしてからアップするのが鉄則です。

❌ 悪い例：IMG_0001.jpg（何かわからない） 
⭕️ 良い例：my-new-black-kitten.jpg（黒い子猫だとわかる）

2. Altテキスト（代替テキスト）は「説明的」に

Googleのガイドラインでは、キーワードの詰め込みを避け、画像を見なくても内容が想像できるような記述を推奨しています。

【避けるべき】キーワードの詰め込み
「ダルメシアン 子犬 犬 飼い主 散歩 おもちゃ 餌…」

※スパムと見なされ、逆効果になる可能性があります。

【推奨】説明的で有用なテキスト
「取ってこいをして遊ぶダルメシアンの子犬」

※画像を見なくても内容が想像できるのがベストです。

Googleは、アクセシビリティ（読み上げソフトを利用するユーザー）と、画像検索エンジンへの理解の両面でAltテキストの入力を強く推奨しています。

（参照：Google 画像検索 SEO ベスト プラクティス）

SWELL「高速化設定」の正しい歩き方

SWELLは元々爆速ですが、設定を間違えると不具合の原因になります。安全かつ効果的な設定例を紹介します。

管理画面 ＞ 「SWELL設定」 ＞ 「高速化」

• キャッシュ機能： 基本的には「デフォルト（初期設定）」のままで十分高速です。
  さらなる高速化を目指して「ヘッダー」や「サイドバー」などのキャッシュをONにする場合は、デザイン変更時に反映されないことがあるため、必ずこまめに「キャッシュクリア」を行う癖をつけましょう。
• 遅延読み込み機能： 画像（Lazyload）はON。「スクリプトの遅延読み込み」は上級者向けなので、不具合が起きたらOFFにしてください。

SEOプラグインの深掘り（XMLサイトマップの導入）

SEO対策として「SEO SIMPLE PACK」を入れていると思いますが、このプラグインには「XMLサイトマップ（検索エンジン用サイトマップ）」を生成する機能がありません。
WordPress標準のサイトマップ機能もありますが、プロとして細かい制御を行うために専用プラグインを導入します。

プラグイン：XML Sitemaps（旧 Google XML Sitemaps）

これをインストール・有効化するだけで、Googleに「サイトの構造」を正しく伝えるXMLファイルが自動生成されます。

1. サイトマップの有効化：
   「設定」＞「表示設定」から、XMLサイトマップインデックスを有効化します。

2. 設定のポイント：
   「設定」＞「XMLサイトマップ」から、「一般」タブの「サーバー」をプラグインにし、「投稿者」を無効化します。

3. 優先順位の設定について：
   「優先順位（priority）」という設定項目がありますが、現在のGoogleはこの数値を無視する仕様になっているため、デフォルト（空欄）のままで変更しなくてOKです。
4. サイトマップ生成の確認：
   • 「設定」>「表示設定」に戻り、サイトマップを表示してみましょう。サイトマップページが表示されれば、問題なく生成されています！

プロなら見逃さない！スラッグとディスクリプションの設定

意外と忘れがちなのが、記事ごとの「URL（スラッグ）」と「説明文（メタディスクリプション）」の設定です。
ここが適当だと、せっかく良いサイトを作っても「素人っぽい」と思われてしまいます。

URLスラッグは必ず「半角英数字」に

記事タイトルを入力したままだと、URLが日本語（例：/会社概要）になります。
日本語URLは、SNSやメールで共有した際に %E3%81%... のように記号化され、めちゃくちゃ長い怪しいリンクに見えてしまいます。

❌ NG：studio-haku.com/会社概要
⭕️ OK：studio-haku.com/company

設定場所：投稿画面の右側サイドバー「URL」をクリックして変更します。
※固定ページだけでなく、投稿記事も /news-open のように英語にするのがマナーです。

メタディスクリプションは「クリック率」と「SNS」のために

「検索順位には直接影響しない（Google公式見解）ため、SEO効果はない」と誤解されがちですが、プロは必ず設定します。
理由は以下の2点です。

• 検索結果のクリック率（CTR）を上げる：
  順位が同じでも、魅力的な説明文があるかどうかでクリックされる確率は変わります。
• SNSシェア時の表示（OGP）：
  Googleは説明文を勝手に書き換えることがありますが、SNS（XやLINE）でシェアされた時は、ここに入力した文章が100%使われます。

設定場所：記事編集画面の下部、「SEO SIMPLE PACK設定」＞「このページのディスクリプション」に入力。
（PC検索結果で表示される120文字前後を目安に、記事の要約を入力しましょう）

SEOプラグインの深掘り（noindex活用）

「SEO SIMPLE PACK」を使っていると思いますが、重要なのは「インデックスさせないページ」の設定です。

【実務の守り】セキュリティとバックアップの鉄壁化

「作って終わり」ではありません。クライアントの大切な資産を守る設定を施します。

【玄関を守る】XO Security の推奨設定

まずは管理画面への侵入を防ぐため、プラグイン「XO Security」を導入します。
インストールするだけでなく、以下の設定を必ず確認・有効化してください。

REST API の無効化について（プロの心得）

セキュリティ対策として「REST APIの無効化」が推奨されることがありますが、フォームプラグイン（Contact Form 7 やSnow Monkey Formsなど）はメール送信にREST APIを使用しているため、「全て無効化」するとお問い合わせ機能が停止します。

💡 トラブルシューティングの知識として
もし将来、「フォームの送信ボタンがくるくる回ったまま動かない」といった不具合が発生した際、すぐに「REST APIの設定や制限が影響していないか？」を疑える知識を持っておきましょう。これがプロと素人の違いです。

お問い合わせフォームの不具合は、クライアントの機会損失（売上ダウン）に直結する重大な事故です。
「プラグインの更新で仕様が変わることもあるため、定期的な動作チェックが必要です」と伝えれば、保守契約（メンテナンス契約）の重要性をクライアントに理解してもらう良いきっかけにもなります。

【攻撃を弾く】BBQ Firewall の導入

プラグインレベルでの防御に加え、URLリクエストなどによる攻撃（SQLインジェクションなど）を防ぐために、簡易ファイアウォールを導入します。

「もしも」に備える自動バックアップ

サーバー側のバックアップだけでなく、WordPress側でもバックアップを取ります。
今回は、バックアップ機能とサーバー移行（引越し）機能が1つになった万能プラグイン「WPvivid Backup & Migration」を使用します。

💡 WPvividを採用する理由
従来はバックアップに「UpdraftPlus」、移行に「All-in-One WP Migration」と使い分けるのが主流でしたが、WPvividならこれ1本で完結します。
無料でGoogle Driveへの自動保存ができ、容量制限も緩いため、プロの現場でも採用率が急増しているプラグインです。

自動バックアップのスケジュール設定

まずは、勝手にバックアップが取られるようにスケジュールを設定しておきましょう。これだけで最低限の保険になります。

1. プラグインを有効化したら、「スケジュール」タブを開きます。
2. 「バックアップの有効化」にチェックを入れます。
3. 頻度は「毎週（Weekly）」を選択し、一番下の「変更を保存」をクリック。

4. 「設定」タブから、バックアップの保持数を「6」に設定します。

5. 一番下の「変更を保存」をクリック。

手動バックアップとダウンロード（納品用）

納品時や大きな変更の前には、手動でバックアップを取り、そのデータをPCにダウンロードして保管します。

1. 「バックアップ＆復元」タブを開きます。
2. 「保存先：ローカル（Local）」が選択されていることを確認し、「バックアップ」をクリック。

3. 処理が完了するとページ下部にバックアップファイルが表示されます。
4. 必ず「ダウンロード」ボタンを押して、「ダウンロード」タグに表示される全てのバックアップファイルを自分のPCに保存してください。
   • 保守契約を結ばない単発案件の場合は、情報保護の観点から納品時バックアップファイルはクライアントに提出し、手元のファイルは削除しましょう。
   • サーバー内に置いておくだけでは、サーバー自体がダウンした時に復旧できません。PCにも持っておくのが鉄則です。

【実務の最終工程】テスト環境から本番環境への移行（お引越し）

いよいよラストステップ。制作環境で作ったサイトを、本番環境へ移行（リリース）します。
本章で導入した「WPvivid」には、面倒なファイルのダウンロード・アップロードを省略し、サーバー同士で直接データを転送する「自動移行」機能があります。これを使えば、驚くほどスムーズに納品作業が完了します。

WPvividを使った自動移行手順

公開直後の「納品チェックリスト」

公開したら終わりではありません。最低でも以下の3点を必ず確認してください。

おわりに：Web制作者として生きていくあなたへ

上級編、完走おめでとうございます！
ここまでの内容を理解し、実践できたあなたは、もう「SWELLを使ってみた初心者」ではありません。
「セキュリティ」「更新性」「SEO」まで考慮した、高品質なWebサイトを納品できるプロの制作者です。

今回制作した「Studio Haku」は、ぜひあなたのポートフォリオ実績として掲載してください。
「ACFで更新しやすい環境を作りました」「セキュリティ対策も万全です」という言葉は、プロに頼む理由として最強の殺し文句になります。

さあ、自信を持って営業に行きましょう。
あなたのスキルを待っているクライアントが、必ずいます。

シリーズを通して学習いただきありがとうございました！