ワードプレスでCocoonを使っていると、「このままのテーマでLPも作れたら楽なのにな…」と感じることはありませんか。
このページでは、CocoonでLPを作る方法を知りたい人に向けて、設定からレイアウト、文章構成までを一気にまとめてお伝えします。
一言でまとめると、Cocoonでもポイントさえ押さえれば、有料ツールに頼らなくても十分実用的なLPを作れます。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
cocoonでLPを作る前に知っておきたい基本
最初に、LPとはそもそも何か、通常のページとどこが違うのか、そしてCocoonでLPを作るときの全体像を軽く押さえておきます。いきなり設定を触るより、ゴールのイメージを持っておいた方が作業がずっと楽になります。
LPと通常ページの違いをざっくり比較
「LPって普通のブログ記事と何が違うの？」という疑問をよく聞きます。まずは、それを簡単な表で整理してみます。
| 項目 | LP（ランディングページ） | 通常のブログ記事・固定ページ |
|---|---|---|
| 目的 | 問い合わせ・申し込みなど、特定のゴールに絞る | 情報提供やアクセスアップなど、目的が広い |
| 構成 | 1ページで完結する縦長の構成 | 必要に応じて他ページへの誘導も前提 |
| 導線 | 他ページへのリンクは最小限 | 内部リンクや関連記事リンクが多い |
| デザイン | 1カラムで世界観を統一することが多い | サイドバーやヘッダー、フッターが普通に表示 |
CocoonでLPを作るときは、「1つのゴールに集中させる縦長ページ」を意識して構成すると、自然とLPらしい見た目と流れになります。
cocoonでLPを作る作り方の全体フロー
CocoonでLPを作るときのざっくりした流れは、次のようになります。
- 固定ページを新規作成し、LP専用のページを用意する。
- Cocoonのページ設定やテーマ設定を使って、ヘッダーやサイドバーを非表示にし、1カラムに近い見た目にする。
- 余白や文字サイズを整えて、縦長でも読みやすいレイアウトにする。
- ブロックエディターで、LPに必要なセクションを上から順番に作っていく。
- 問い合わせフォームやボタンを設置して、ゴールとなるアクションを用意する。
- スマホでの表示や読みやすさをチェックし、必要なところを微調整する。
このあと、ひとつひとつのステップを追いながら、CocoonでLPを作る具体的な手順を見ていきます。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
cocoonでLP用の固定ページを作る作り方
ここからは、LPの土台となる固定ページを用意していきます。Cocoonでは、投稿よりも固定ページを使った方が、LPの管理やメニュー配置がしやすく、あとから見つけやすいです。
固定ページでLPの土台を作る
まずはワードプレスの管理画面から、LP用の固定ページを作成します。
- 管理画面の「固定ページ」から「新規追加」をクリックする。
- タイトルに「商品名＋LP」など、自分が見てすぐ分かる名前を付ける。
- パーマリンク（スラッグ）は、短めの英単語をつなげて分かりやすくしておく。
- 右側の「テンプレート」「ページ属性」などに、Cocoonの独自設定があれば確認する。
Cocoonでは、テーマやバージョンによって「1カラム」や「本文のみ」といったページタイプが選べる場合があります。LPに向いていそうなものを選ぶと、あとからの調整が少し楽になります。
| 設定項目 | 内容 | LP向きの目安 |
|---|---|---|
| 投稿タイプ | 投稿 / 固定ページ | 固定ページがおすすめ |
| ページタイプ | デフォルト / 1カラム / 本文のみ など | 1カラム系のテンプレート |
| サイドバー | あり / なし | なし |
この段階では、まだ普通の固定ページですが、次のステップでLPらしい見た目に整えていきます。
スラッグとパーマリンクの決め方
CocoonでLPを作るとき、意外と後回しにしがちなのがURLの見た目です。SNSやメルマガでURLを貼ることを想定して、最初に決めておくのがおすすめです。
- できるだけ短く、意味が分かる英単語にする。
- あとから変えずに済むよう、ある程度しっくりくるものを選ぶ。
- 「lp」「campaign」「service」など、LPだと分かる単語を入れてもOK。
きれいなパーマリンクにしておくと、他のページとの区別もしやすくなりますし、見る人にとっても分かりやすいです。
アイキャッチ画像とOGPの設定
LPの第一印象を左右するのが、アイキャッチ画像とOGP（SNSでシェアされたときの見え方）です。CocoonはOGPの設定がしやすいテーマなので、LPでもしっかり活用しましょう。
- アイキャッチには、サービスや商品のイメージが伝わる画像を設定する。
- Cocoonの「OGP」設定で、FacebookやX（旧Twitter）での表示を有効にしておく。
- LP専用のサムネイル画像があると、SNSのタイムラインで目に留まりやすくなる。
アイキャッチやOGPを整えておくと、「なんとなく見たときの印象」が良くなり、その後の読まれ方にも関わってきます。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
cocoonの設定でLPらしく見せる作り方
ここからは、Cocoonの設定やカスタマイズを使って、LPらしい見た目に整えていきます。Cocoonはブログ向けのテーマなので、そのままだとヘッダーやサイドバーが目立ち、LPの「一点集中感」が薄れてしまいます。
非表示にするパーツを整理しよう
まずは、「LPでは何をあえて消すのか」を整理しておきましょう。全部を表示したままだと、せっかくのLPが普通のブログ記事のように見えてしまいます。
| 画面の場所 | 非表示にしたいもの | 理由 |
|---|---|---|
| 上部 | グローバルメニュー、サイトロゴ、ヘッダー画像 | 他ページへの導線が増え、LPから離脱しやすくなるため |
| 記事上部 | パンくずリスト、日付、カテゴリ、投稿者名など | 情報量が増えすぎて、LPのメッセージがぼやけるため |
| コンテンツ横 | サイドバー（プロフィール、新着記事など） | LPの内容に集中してもらうため |
| 下部 | フッターメニューやウィジェット（必要最低限だけ残す） | LPの世界観を最後まで保つため |
実際の非表示設定は、Cocoonの固定ページ個別設定やテーマ設定、ウィジェットの管理、場合によってはCSS調整などを組み合わせて行います。
1カラム・フル幅にするための設定
CocoonでLPを作るときによくあるのが、「1カラムの設定にしたのに、まだ左右に余白が残る」というケースです。まずは、管理画面からできる範囲で整えます。
- 固定ページの編集画面で、「サイドバーなし」や「1カラム」などのテンプレートがあれば選ぶ。
- Cocoon設定の「レイアウト」で、サイト全体の横幅やコンテンツ幅を確認する。
- 必要に応じて、テーマや子テーマのカスタムCSSで、特定のページだけ幅を調整する。
例えば、特定の固定ページだけコンテンツ幅を少し広くしたい場合は、ページIDに合わせてスタイルを指定する方法があります。
イメージとしては、次のようなCSSを子テーマや追加CSSに書くことがあります。
例：特定ページのメインコンテンツの最大幅を広げるイメージです。
※実際に書くクラス名やIDは、使用している環境によって異なるので、ブラウザの検証ツールなどで確認してください。
少しずつ変化を確認しながら調整していくと、大崩れせずに済みます。
余白や文字サイズのちょうどいいバランス
LPはどうしても縦に長くなるので、余白の取り方や文字サイズのバランスがとても重要です。ここが整っていないと、内容は良くても「なんとなく読みづらいLP」に見えてしまいます。
- 見出しの上と下には、やや広めの余白を取る。
- 本文の文字サイズは、小さすぎないように気を付ける。
- 行間は詰めすぎず、少しゆったり目に保つ。
Cocoonは初期設定でも読みやすさを意識したフォントサイズになっていますが、LPでは「少し大きいかな」くらいがちょうどいいことも多いです。実際にスマホで自分のLPを読みながら、目が疲れないかチェックしてみてください。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
ブロックエディターでLPの中身を作る作り方
【稼げるキーワード教えます】
▼ ▼ ▼
ここからは、いわゆる「中身づくり」の部分です。ブロックエディターを使って、LPの各セクションを上から順番に積み上げていきます。文章だけでなく、レイアウトも一緒に組み立てていくイメージです。
LPの基本セクション構成を決める
最初に、どんな順番で情報を並べるかを決めておくと、作業がスムーズになります。よくある構成を表にまとめると、こんな感じです。
| セクション名 | 目的 | 使いやすいブロック例 |
|---|---|---|
| ヒーロー（ファーストビュー） | 一瞬で「誰向けの何のLPか」を伝える | カバーブロック、見出し、ボタン |
| 共感・問題提起 | 読者の悩みを代弁し、「自分ごと」だと感じてもらう | 段落、リスト |
| 解決策・ベネフィット | 商品やサービスでどう解決できるかを示す | 見出し、カラム、ボックス風ブロック |
| 実績・お客様の声 | 安心材料を増やして信頼感を高める | 吹き出し、カラム、画像 |
| 具体的な内容・料金 | 得られる内容と必要な費用を明確にする | テーブル、リスト |
| FAQ | よくある不安や疑問を事前に解消する | 見出し、段落 |
| 最終CTA | 最後のひと押しで行動につなげる | ボタン、目立つボックス |
Cocoonのブロックや装飾を活用しながら、この流れを意識して作ると、読む側にとって分かりやすいLPになりやすいです。
ファーストビュー（ヒーロー）を作るコツ
LPでもっとも重要なのが、一番上に表示されるファーストビューです。ここで「自分に関係ありそうだ」と感じてもらえないと、そもそもスクロールしてもらえません。
- 大きめの見出しで、「誰の」「どんな悩み」を解決するのかをはっきり書く。
- 「申し込む」「無料で相談する」など、行動を促すボタンを必ず置く。
- 背景画像を使うなら、文字が読みにくくならないように色の濃さや重ね方を調整する。
Cocoonでも、カバーブロックとボタンブロックを組み合わせれば、十分見栄えの良いファーストビューが作れます。私も最初はシンプルな構成から始めて、あとから少しずつ整えていきました。
信頼を高めるセクションの作り方
LPはどうしても「売り込み感」が出やすいので、信頼を補うセクションが欠かせません。数字や声を見せるだけで、印象はかなり変わります。
- 実績（導入社数、販売数など）があれば、数字を大きく目立たせる。
- お客様の声は、吹き出しやボックスを使って読みやすく見せる。
- 顔写真付きの声が用意できる場合は、画像ブロックで載せる。
Cocoonには吹き出しやボックスといった装飾が用意されているので、LP用のスタイルをいくつか登録しておくと、別のLPでも流用しやすくなります。
CTAボタンのデザインと配置
CocoonでLPを作っていると、つい「申し込みボタンは一番下に置けばいい」と考えがちですが、それだとチャンスを逃してしまうことがあります。
- ファーストビュー、途中の重要なセクション、最後のセクションに、CTAボタンを数か所設置する。
- ボタンの色は、サイト全体のカラーと馴染ませつつも、パッと目に入る色を選ぶ。
- ボタンのテキストは、「お問い合わせ」よりも「○○について相談する」のように、具体的な行動を書いておく。
ボタンのスタイルは、追加CSSや子テーマを使えばLP専用のデザインにまとめることもできます。毎回ゼロから考えるのではなく、「LPのボタンはこのスタイル」と決めておくと、制作がかなり楽になります。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
フォーム設置と計測でLPの成果を最大化する
LPの目的は、最後まで読んでもらうことではなく、行動してもらうことです。ここでは、問い合わせフォームの設置と、最低限おさえておきたい計測の考え方を整理します。
問い合わせフォームを設置する流れ
よく使われる方法は、問い合わせフォーム用のプラグインを使い、CocoonのLP内にフォームを埋め込むやり方です。
- 問い合わせフォーム系のプラグインをインストールして有効化する。
- フォームを作成し、名前やメールアドレス、問い合わせ内容など必要な項目を設定する。
- 発行されたショートコードをコピーし、LPの「問い合わせ」セクションに貼り付ける。
問い合わせフォームをどこに置くかによっても、反応は変わってきます。よくある置き方をまとめると、次のようになります。
| 置き場所 | メリット | こんなときにおすすめ |
|---|---|---|
| LPの一番下 | 最後まで読んだ人が、そのまま申し込みや問い合わせに進みやすい | しっかり説明を読んでから判断してほしいサービス |
| 中盤と最後の2か所 | 途中で「もう十分分かった」と感じた人も取りこぼしにくい | セミナーやイベントの申し込み、キャンペーンLPなど |
| 目立つボタンから別ページのフォームに誘導 | LPは説明に集中させ、フォームは別ページで落ち着いて書いてもらえる | 入力項目が多いフォームを使う場合 |
Cocoonで作ったLPでも、フォームの位置と数を少し工夫するだけで、結果が変わることがあります。
ボタンやフォーム送信の計測イメージ
LPを作ったら、ざっくりでもいいので「どのくらい反応があったか」を把握できるようにしておきたいところです。難しい設定は後回しでも良いので、最低限の数字は見られるようにしておきましょう。
- アクセス解析ツールを導入して、LPページのアクセス数を確認できるようにする。
- CTAボタンのクリック数をイベントとして計測できるように設定する。
- 問い合わせ完了後に表示されるサンクスページを用意し、そのページへのアクセスをコンバージョンとして見る。
イメージしやすいように、見るポイントを簡単な表に整理すると、次のようになります。
| 計測したいもの | どこを見るか | 意味 |
|---|---|---|
| LPのアクセス数 | LPページの閲覧数 | LP自体がどれくらい見られているか |
| CTAボタンクリック数 | イベントの回数 | 興味を持ってボタンを押した人の数 |
| サンクスページの閲覧数 | 特定URLのアクセス数 | 実際に問い合わせや申し込みを完了した人の数 |
最初から完璧な計測を目指す必要はありませんが、「作りっぱなし」ではなく「数字を見ながら育てるLP」にしていく意識を持っておくと、改善のヒントが見つかりやすくなります。
cocoon lp 作り方でよくある失敗と対処法
ここでは、CocoonでLPを作るときによくあるつまずきポイントと、その対処法をまとめます。私自身も同じところで悩んだ経験があるので、「あるある」な失敗を先にお伝えしておきます。
デザインがごちゃごちゃして伝わらない
Cocoonは装飾ブロックが豊富で便利ですが、使いすぎると一気に読みづらくなります。「せっかく機能があるから」と全部盛りにしてしまうのは、LPでは逆効果です。
- 吹き出しやボックスは、「ここだけは強調したい」というところに絞って使う。
- 色はメインカラーとサブカラーを中心にして、多色使いは避ける。
- 1つのセクションの中で、フォントサイズをバラバラにしすぎない。
完成したLPを自分のスマホでじっくり眺めて、「なんとなく落ち着かない」と感じたら、装飾を減らしてみるのも一つの手です。
スマホで崩れる・読みにくい
CocoonでLPを作るときに特に注意したいのが、スマホ表示です。PCではいい感じに見えていても、スマホで見ると文字が小さすぎたり、画像が横にはみ出したりすることがあります。
- カラムブロックを多用しすぎると、スマホでは縦長になりすぎるので、使う数を調整する。
- 文字を画像の上に重ねるデザインは、スマホでも読みやすいコントラストになっているか必ず確認する。
- ボタンやリンクは、指1本で押しやすいサイズを意識する。
特にスマホでは、少しの読みにくさが離脱につながります。実際に自分の手で触りながら、「自分だったらこのLPを最後まで読むか？」をチェックしてみてください。
どの導線からLPに飛ばすか決めていない
がんばってCocoonでLPを作ったものの、「誰もそのページにたどりつかない」というのもよくあるパターンです。LPを活かすには、入り口をちゃんと用意しておく必要があります。
- 関連するブログ記事の最後に、LPへのリンクボタンを設置する。
- サイドバーやメニューに、さりげなくLPへの導線を入れる。
- SNSやメルマガからも、LPのURLを案内する。
どのページからLPに来てほしいかを決めておくと、「この記事にはLPへの案内を入れておこう」といった工夫がしやすくなります。
★ちょっとブレイク★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
よくある質問：cocoon lp 作り方Q&A
最後に、CocoonでLPを作るときによく聞かれる質問を、Q&A形式でまとめます。
Q1. Cocoonだけで本格的なLPは作れますか？
A. はい、工夫次第でCocoonだけでも十分実用的なLPは作れます。確かに、専用のLPツールのような細かいアニメーションや、ドラッグ＆ドロップでのレイアウト調整は得意ではありません。ただ、1カラムの構成にして、ブロックエディターとCocoonの装飾を上手に組み合わせれば、「読みやすくて申し込みもしやすいLP」は十分実現できます。
Q2. 有料のLPツールと比べて、Cocoonで作るメリットは何ですか？
A. 一番大きいメリットは、ブログと同じドメイン・同じテーマのままLPを運用できる点です。
- 新しく高価なツールを導入しなくてもよい。
- SEOの観点でも、既存サイトの評価を活かしやすい。
- ブログ記事からLPへの内部リンクが貼りやすい。
一方で、デザインを細かく作り込みたい場合や、チームでLP制作を回していきたい場合は、有料ツールの方が向いていることもあります。まずはCocoonで一度LPを作ってみて、「もっとこうしたい」という希望が出てきたら、別ツールを検討するイメージがおすすめです。
Q3. CocoonのLPには、どれくらいの文字数が必要ですか？
A. 商品やサービスにもよりますが、LPは「1ページの中で疑問や不安に一通り答える」役割があるので、どうしてもある程度のボリュームになります。目安としては、簡単なサービス紹介でも数千文字くらいになることが多いです。大事なのは、文字数そのものではなく、読者の疑問に順番に答えているかどうかです。「このあと何が知りたいか」を想像しながら、必要な情報を足していくイメージで構成してみてください。
まとめ
この記事のポイントを整理します
- Cocoonでも、固定ページとテーマ設定、ブロックエディターを組み合わせれば、しっかりしたLPを作れる。
- LPらしく見せるコツは、1カラムの構成にして余計なパーツを消し、ゴールに集中させるレイアウトにすること。
- LPの中身は、ファーストビュー → 共感 → 解決策 → 実績 → 詳細 → FAQ → CTA という流れを意識すると組み立てやすい。
- 問い合わせフォームやボタンの設置だけでなく、簡単でも良いので計測の仕組みを用意しておくと改善しやすくなる。
- デザインや装飾は「やりすぎない」を合言葉に、スマホでの読みやすさを最優先に考える。
今日できる最初の一歩としては、まずCocoonで新しい固定ページをひとつ作り、「これはLP専用ページにする」と決めて、タイトルとファーストビューだけでも形にしてみてください。そこまでできれば、あとはこの記事を見ながらセクションを足していくだけで、自分のサービスに合ったLPが少しずつ出来上がっていきます。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
記事を読んだらコチラ
▼ ▼ ▼
