Cocoonアピールエリアに検索フォームを設置する方法｜コピペOK＋回遊率アップ

Cocoonのアピールエリアに検索フォームを設置すると、ユーザーが知りたい情報へ最短でアクセスでき、回遊率・滞在時間の改善につながります。

しかも設定はシンプル。コピペだけで10分ほどで完成します。

この記事では、Cocoonのアピールエリアに検索フォームを設置する方法を、初心者でも迷わない手順＋コピペコード付きで解説します。

Cocoon検索フォームの設置コード【コピペOK】

時間がない方は、まず以下のコードをそのまま使ってください。

<form class="search-box input-box" method="get" action="https://あなたのドメイン/">
  <input type="text" placeholder="サイト内を検索" name="s" class="search-edit" aria-label="検索キーワード">
  <button type="submit" class="search-submit" aria-label="検索する">
    <span class="fas fa-search" aria-hidden="true"></span>
  </button>
</form>

※ actionのURLは必ず自分のサイトに変更してください

実際に入力するとこのように表示されます。

アピールエリアへ設置した完成イメージです。

Cocoonの検索フォーム設置方法の違い【比較】

Cocoonでは、検索フォームを設置する方法が複数あります。設置場所によって使い勝手や効果が大きく異なるため、目的に合わせて選ぶことが重要です。

比較一覧

設置方法	設置場所	特徴
検索ブロック	記事内・固定ページ	シンプルで手軽に設置できる
ウィジェット	サイドバー・フッター	デザインが整っていて使いやすい
アピールエリア	トップページ上部	ファーストビューで目立つ・導線が強い

それぞれの違いを詳しく見ていきましょう。

検索ブロック

検索

検索

「検索ブロック」は、記事や固定ページ内に簡単に設置できる標準機能です。

• ブロックを追加するだけで使える
• 初心者でも迷わない
• デザインはシンプル

手軽に設置できる反面、デザインがイマイチなのがデメリットです。

ウィジェット

ウィジェットの検索フォームは、サイドバーやフッターに設置できます。

• 入力欄＋ボタンで使いやすいデザイン
• 設置が簡単
• 多くのテーマで標準対応

ただし、ユーザーの視線が届きにくい位置にあることも。

アピールエリア（本記事の方法）

アピールエリアに検索フォームを設置すると、トップページのファーストビューに配置できるのが最大のメリットです。

• 最初に目に入る位置に設置できる
• 目的が明確なユーザーを即誘導できる
• 回遊率・滞在時間の改善につながる

HTMLで作成する必要はありますが、一度作ればテンプレート化して使い回しできるなので運用の手間もほとんどありません。

検索導線をしっかり作りたいなら、アピールエリアに設置するのが効果的です。

▶ さらに改善したい方はこちら

• 検索フォームのデザインを整える
• アピールエリアをフルスクリーン化する

実装手順｜Cocoonアピールエリアに検索フォームを設置する3ステップ

HTMLを作成

上記のコードをコピーして使います。

パターンに登録（推奨）

再利用する場合は、WordPressのパターン機能に登録しておくと便利です。

• 毎回コピペ不要
• 複数ページで使い回せる

作成したパターンにはショートコードが付与されます。パターン一覧で確認できます。

• 例）[ pattern id="123" ]

アピールエリアに設置

• Cocoon設定 → アピールエリア
• メッセージ欄に貼り付け
  → ショートコード（またはHTML）そのまま貼るだけでOK

これで設置完了です。

回遊率を上げるカスタマイズ

マイクロコピーを入れる

ただの検索窓よりも、一言添えるだけでクリック率が上がります。

例：

<div class="wp-block-cocoon-blocks-micro-text aligncenter micro-text micro-top">
  <span class="micro-text-content">＼知りたい情報をすぐ検索できます／</span>
</div>

背景を透過して馴染ませる

背景画像を活かしたい場合におすすめです。

.appeal-content {
  background-color: transparent;
}

入力文言を変える

placeholderを変えるだけで操作が分かりやすくなります。

例：
「サイト内を検索」→「キーワードを入力」

その他、細かい部分のデザイン調整をしたい場合、CSSに基本を以下の記事にまとめているので参考にしてください。（初心者向け）

まとめ

アピールエリアに検索フォームを設置すると、ユーザーが迷わず目的の記事にたどり着ける導線が作れます。

特に記事数が多いサイトほど効果が大きいので、ぜひ導入してみてください。

検索フォームだけでなく、トップページ全体の導線を整えることで回遊率はさらに改善します。サイト型トップページの作り方は、以下で詳しく解説しています。

▶ Cocoonトップページ作成ガイド（サイト型）