AIでWordPressにフローティングボタンを設置する方法

これまでWordPressに、フローティングボタンを付けようと思うとプラグインなどを利用して設置していたのですが、今回はAIに作ってもらうことにしました。

フローティングボタンの重要性と効果

Webサイトにおいて、コンバージョン率（CVR）を高めることは最も重要な課題の一つです。ユーザーがサイトのどの位置にいても、すぐにアクションを起こせるようにする「フローティングボタン（追従ボタン）」は、そのための強力なツールとなります。

特にスマートフォンユーザーにとっては、画面の右下や下部に固定された「電話をかける」ボタンや「WEB予約」ボタンがあることで、問い合わせのハードルが大きく下がります。

AIを使った簡単な実装方法の紹介

従来、このようなフローティングボタンを設置するには、HTMLやCSSの専門的な知識が必要でした。しかし、現在では生成AIを活用することで、プログラミングの知識が全くない方でも、ほんの数分で高度な機能を実装できるようになりました。

この記事では、Genspark AIのスーパーエージェントを使用して、WordPressサイトにフローティングボタンを設置する具体的な手順を解説します。

Genspark AIスーパーエージェントとは

機能の説明

Genspark AIスーパーエージェントは、ユーザーの自然言語による指示を理解し、複雑なタスクを実行・解決する高度なAIアシスタントです。単に質問に答えるだけでなく、Web検索を行ったり、具体的なコードを生成したり、複数のステップにわたる推論を行うことができます。

なぜコーディング初心者でも使えるのか

最大の特長は、専門用語を使わずに「やりたいこと」を伝えるだけで機能する点です。

「右下にボタンを置きたい」「色は赤にしたい」といった日常的な言葉で指示を出せば、AIがそれを理解し、必要なHTMLやCSSコードを完璧な形で出力してくれます。エラーが出た場合でも、その状況を伝えれば修正案を即座に提示してくれるため、コーディングの学習コストをかけずに実装が可能となります。

実際の作成手順

こんな感じのフローティングボタンを作ります。

ステップ1: Genspark AIにアクセス

まず、Genspark AIのインターフェースにアクセスし、スーパーエージェントモードを選択します。https://www.genspark.ai/

ステップ2: 命令文の入力

具体的で明確な指示を出すことが、良質なコードを得るためのコツです。今回は、以下の命令文を使用しました。

使用したプロンプト:
WordPressの画面右側に追従するフローティングボタンを設置したい。
WEB予約と電話をかける２つのボタンを設置するHTMLとCSSを書いて。
電話番号は0584-123-4567
WEB予約のリンク先は以下になります。
https://ai.osslicense.jp/contact/

ステップ3: 生成されたコードの確認

AIは指示に基づき、HTML構造とそれを装飾するCSSコードを生成します。生成されたコードには、指定した電話番号やリンク先が既に組み込まれているため、コピー＆ペーストするだけで使用できる状態になっています。

生成されるコードの例

以下は、AIによって生成された実際のコード例です。これをそのままWordPressで使用できます。

HTMLコード

<!-- フローティングボタン -->
<div class="floating-buttons">
  <a href="https://ai.osslicense.jp/contact/" class="float-btn float-btn-booking" target="_blank" rel="noopener">
    <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
      <line x1="16" y1="2" x2="16" y2="6"></line>
      <line x1="8" y1="2" x2="8" y2="6"></line>
      <line x1="3" y1="10" x2="21" y2="10"></line>
    </svg>
    <span class="btn-text">WEB予約</span>
  </a>
  
  <a href="tel:0467-123-4567" class="float-btn float-btn-phone">
    <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
    </svg>
    <span class="btn-text">電話する</span>
  </a>
</div>

CSSコード

/* フローティングボタン コンテナ */
.floating-buttons {
  position: fixed;
  right: 20px;
  bottom: 80px; /* 20pxから80pxに変更 */
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ボタン共通スタイル */
.float-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
}

/* アイコンのスタイル */
.btn-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* WEB予約ボタン */
.float-btn-booking {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
}

.float-btn-booking:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* 電話ボタン */
.float-btn-phone {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: #ffffff;
}

.float-btn-phone:hover {
  background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 87, 108, 0.4);
}

/* アニメーション効果 */
.float-btn:active {
  transform: scale(0.95);
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .floating-buttons {
    right: 15px;
    bottom: 70px; /* 15pxから70pxに変更 */
    gap: 10px;
  }
  
  .float-btn {
    padding: 12px 16px;
    font-size: 14px;
  }
  
  .btn-icon {
    width: 18px;
    height: 18px;
  }
}

/* さらに小さい画面用 */
@media screen and (max-width: 480px) {
  .floating-buttons {
    right: 10px;
    bottom: 70px; /* 10pxから70pxに変更 */
  }
  
  .float-btn {
    padding: 10px 14px;
    font-size: 13px;
  }
  
  /* モバイルではテキストを短縮するオプション */
  .btn-text {
    display: inline;
  }
}

コードの各部分の説明

• position: fixed;: これにより、スクロールしても画面の定位置（右下）にボタンが固定されます。
• z-index: 9999;: サイト上の他のコンテンツ（画像や文章）の下に隠れてしまわないよう、最前面に表示させる設定です。
• flex-direction: column;: 2つのボタンを縦に並べる設定です。横に並べたい場合は row に変更します。

WordPressへの実装方法

生成されたコードをWordPressに設置する方法はいくつかありますが、ここでは代表的な3つの方法を紹介します。

方法1: カスタムHTMLブロックを使用（特定のページのみ）

特定の記事や固定ページだけにボタンを表示させたい場合に適しています。

1. WordPressの投稿編集画面を開きます。
2. ブロック追加ボタン（+）をクリックし、「カスタムHTML」を検索して追加します。
3. 生成されたHTMLコードを貼り付けます。
4. CSSについては、同ページ内にあるカスタムCSSに記述するか、テーマのカスタマイズ画面の「追加CSS」に記述します。

方法2: テーマファイルに直接追加（全ページ共通）

サイト全体に表示させたい場合の標準的な方法ですが、慎重な操作が必要です。

1. 管理画面の「外観」>「テーマファイルエディター」へ進みます。
2. 右側のファイル一覧から footer.php を探してクリックします。
3. </body> タグの直前に、生成されたHTMLコードを貼り付けます。
4. 「ファイルを更新」をクリックして保存します。
5. CSSは「外観」>「カスタマイズ」>「追加CSS」に貼り付けます。

注意: 親テーマを直接編集すると、テーマのアップデート時に変更が消える可能性があります。可能な限り「子テーマ」を使用することをお勧めします。

子テーマの作り方はこちら→【図解】WordPressのブロックテーマ｜子テーマの作り方

方法3: カスタムHTML/CSSプラグインを使用（推奨）

最も安全で管理しやすい方法です。「Simple Custom CSS and JS」などのプラグインを使用します。

1. プラグインをインストールし有効化します。
2. 「Add HTML」で新しいHTMLコードを追加し、Footerに出力する設定にします。
3. 「Add CSS」で新しいCSSコードを追加します。
4. テーマファイルを直接触らないため、誤ってサイトを壊すリスクが低く、初心者におすすめです。

動作確認のポイント

設置が完了したら、必ず実際の端末で確認を行いましょう。

• スマートフォンでの表示確認: パソコン画面だけでなく、スマホの実機で右下に正しく表示されているか確認します。文字が小さすぎないか、ボタンが押しやすい大きさかもチェックポイントです。
• リンク動作確認: 「WEB予約」ボタンをクリックして、指定した問い合わせフォームへ正しく遷移するか確認します。
• 電話番号のタップ動作確認: スマホで「電話」ボタンをタップした際に、電話発信画面が立ち上がるか確認します。

カスタマイズのヒント

AIが生成したコードをベースに、さらに自分好みに調整することも可能です。

ボタンの色やサイズの変更

CSSの background-color のカラーコードを変更すれば色が変わり、width と height の数値を変更すればサイズが変わります。

位置の調整

現在は右下（right: 20px; bottom: 20px;）に設定されていますが、左下にしたい場合は right を left に書き換えます。下からの距離を調整したい場合は bottom の数値を変更します。

アイコンの追加

絵文字は、Font Awesomeなどのアイコンフォントを使用することで、より洗練されたデザインにすることができます。

8. トラブルシューティング

ボタンが表示されない場合

キャッシュが残っている可能性があります。ブラウザのキャッシュを削除するか、シークレットモードで確認してください。また、z-index の値をさらに大きく（例: 99999）してみるのも有効です。

スマホで正しく表示されない場合

メディアクエリを使用して、PCとスマホでCSSを書き分ける必要があります。AIに対して「スマホの時だけボタンを大きくして」と追加で指示を出せば、対応するCSSを生成してくれます。

他の要素と重なる場合

フッターのcopyright表記などと重なる場合は、bottom の数値を大きくして位置を上にずらすか、フッター側に余白（padding-bottom）を追加して調整します。

まとめ

AIを活用することで、コーディングの専門知識がなくても、機能的でユーザービリティの高いWebサイトパーツを自作することが可能です。

今回は「フローティングボタン」を例にしましたが、同様の手順で「よくある質問（アコーディオン）」や「料金表」、「お問い合わせフォームのデザイン」なども作成可能です。ぜひAIをパートナーとして、サイト改善のアイデアを形にしてみてください。