Cocoon トップページの作り方ガイド！おしゃれなサイト型にする7つの手順

Cocoonでブログを始めたものの、トップページが初期設定のままで「思ったより味気ないな…」と感じていないでしょうか。

この記事では、Cocoonトップページの作り方を、ブログ型からサイト型のレイアウトに変えながらおしゃれに整える方法としてまとめました。

一言でいうと、固定ページをトップページに設定し、いくつかのルールを決めてブロックを配置していくだけで、コードが苦手でもCocoonのトップページをサイト型でおしゃれな見た目に整えられます。

Cocoonトップページをサイト型にするメリットとゴール

ブログ型とサイト型の違いをサクッと比較

まずは、よくあるブログ型トップページと、サイト型トップページの違いをざっくり比較してみます。

種類	特徴	向いている人
ブログ型トップページ	新着記事が時系列で縦に並ぶ、WordPressの初期設定状態	日記ブログ、更新頻度の高い雑記ブログ
サイト型トップページ	コンセプトやメニュー、サービス紹介などをまとめた案内板のようなトップ	収益化ブログ、サービス紹介サイト、ポートフォリオサイト

私もブログ型のままで運営していたころは、せっかく書いた「読んでほしい記事」に読者がたどり着きにくく、アクセス解析を見ても回遊してもらえていませんでした。
サイト型トップページに変えてからは、「どこに何があるか」が一目で伝わるようになり、プロフィールやサービスページにも自然とアクセスが増えました。

どんな人がCocoonサイト型トップページに向いているか

Cocoonでサイト型トップページを作ると、特に相性がいいのは次のようなタイプのサイトです。

• ブログから商品やサービスを知ってもらいたい人（レッスン、コンサル、制作など）
• 自分の実績やプロフィールをしっかり見せたいフリーランスや個人事業主
• 雑記ブログでも、カテゴリーごとに分かりやすく案内して読みやすくしたい人
• シンプルで落ち着いた、企業サイトのような印象に寄せたい人

一方で、その日の出来事を書き続けるだけの日記ブログや、身内向けのブログであれば、無理にサイト型にせずブログ型のままでも問題ありません。
大事なのは、「読者にどんな行動をしてもらいたいか」を考え、トップページで案内してあげることです。

 

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

1. 稼げる広告
2. 稼げるキーワード
3. 稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

 

Cocoonトップページの作り方を始める前の準備

トップページで伝えることを整理しよう

いきなりデザインから考え始めると、「あれも置きたい、これも載せたい」と詰め込みがちになります。
まずは、トップページで何を伝えたいのかを簡単に書き出してみましょう。

これらを整理すると、トップページに「何を置くか」「何は置かないか」が見えてきます。
イメージしやすいように、要素と役割を表にまとめてみます。

要素	内容の例	役割
キャッチコピー	「忙しいママ向けの時短レシピブログ」など	どんな人向けかを一瞬で伝える
コンセプト説明	2〜3行でサイトのテーマを説明	信頼感や世界観を出す
メニュー・カテゴリー	カテゴリーへのリンクやメニュー	読者が迷わず移動できる導線
おすすめ記事	収益記事や人気記事へのリンク	特に読んでほしい記事へ誘導
プロフィール	簡単な自己紹介と写真やアイコン	書き手の人柄を伝え、安心感を与える

紙のノートやメモアプリに箇条書きするだけでも構いません。
書き出してみると、自分の頭の中が整理されて、トップページに載せるべき情報がかなり絞り込めます。

ラフの書き方とレイアウトパターン3つ

次に、トップページ全体のラフ（ざっくりした設計図）を作ります。
難しく考えすぎず、ノートや紙に縦長の四角を描き、上から順にどんなブロックを置くかを書き込んでいくイメージです。

代表的なレイアウトパターンを3つ紹介します。

パターン	特徴	向いているサイト
シンプル1カラム型	キャッチコピー→おすすめ記事→カテゴリー案内の順で縦に配置	初心者のブログ、雑記ブログ、記事数がまだ少ないブログ
サービス紹介型	ヘッダーバナー→サービス3つ→実績→ブログ新着の順に紹介	フリーランス、教室、コンサルタントなどのサービスサイト
メディア型	コンセプト→カテゴリー一覧→特集記事→新着記事の構成	専門特化ブログ、情報メディア、レビューサイト

自分のサイトの目的に一番近いパターンをベースにしつつ、いらないセクションを減らしたり、必要なブロックを足したりして調整していくと、迷いづらくなります。
Cocoonでサイト型トップページをおしゃれに作るポイントは、「役割の違うセクションをはっきり分けること」と、「欲張りすぎて詰め込みすぎないこと」です。

 

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐ秘密を見る

 

実践編：Cocoonサイト型トップページの作り方ステップ

固定ページを作成してトップページに設定する手順

Cocoonのトップページをサイト型にする基本は、「固定ページをトップページとして表示させる」ことです。
大まかなステップは次の通りです。

ここまで設定できると、サイトのURLにアクセスしたときに、新しく作成した固定ページがトップページとして表示されるようになります。
この時点ではまだ真っ白に近い状態ですが、土台はできているので、次のステップでブロックを使って中身を作っていきます。

ブロックエディタでおしゃれな構成を組む方法

Cocoonは標準のブロックエディタ（Gutenberg）と相性がよく、ブロックを積み木のように組み合わせるだけで、かなり自由にレイアウトできます。
よく使うブロックと、どのセクションで使うかを表にまとめてみました。

セクション	使うブロック例	ポイント
ファーストビュー	カバーブロック＋見出し＋ボタン	キャッチコピーとメインの行動ボタンを置く
サイト説明	段落＋リスト	2〜3行でコンセプトを説明し、誰向けかをはっきりさせる
カテゴリー案内	カラム＋ボックス風のデザイン	代表的なカテゴリーを3〜4つ並べて、先が気になる見出しをつける
おすすめ記事	リスト＋内部リンク	特に読んでほしい記事だけに絞り、簡単な説明文も添える
プロフィール	メディアとテキスト	写真やアイコンと自己紹介文をセットにして信頼感を出す

私が実際に作ってみて感じたのは、「ブロックそのものよりも、セクション同士の余白や大きさのバランスが大事」ということです。
見出しのサイズを少し大きくしたり、セクションの間にスペーサーブロックを挟んだりするだけで、Cocoonのトップページがぐっとおしゃれに見えるようになります。

HTML・CSSが苦手でもできるシンプルな工夫

「コードを見ると頭が真っ白になる…」という方でも、Cocoonの機能をうまく使えば、十分整ったサイト型トップページを作れます。
まずは、次のような点から手をつけてみてください。

それでも物足りないと感じたら、信頼できるサイトで紹介されている簡単なCSSをコピペして、色や余白の数値だけ自分好みに変えてみるのも方法です。
ただし、最初から難しいカスタマイズに手を出しすぎると挫折しやすいので、まずはCocoon標準の機能を使い切るつもりで調整していくのがおすすめです。

 

★ちょっとだけ宣伝させてください★

「ブログで10万」と聞くと、

1. センスが必要
2. 文章力が要る

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

⇒ブログで10万稼ぐ勝ちパターンとは

 

Cocoon サイト型をおしゃれに見せる7つのコツ

配色・フォント・余白で一気にそれっぽくする

デザインの印象を大きく左右するのは、配色とフォント、そして余白の取り方です。
難しい理論は置いておいて、次のようなシンプルなルールを決めてしまうと、一気に整って見えるようになります。

• 色は「ベースカラー1色＋アクセントカラー1色＋グレー系1色」の3色に絞る
• 文字色は真っ黒ではなく、少し柔らかい濃いめのグレーにする
• 見出しと本文でフォントの種類を増やしすぎない
• セクションの上下にしっかり余白を取る（詰め込みすぎない）
• 1画面に情報を載せすぎず、スクロールしながら読み進められる量にする

自分のサイト用に、簡単なルール表を作っておくと迷いにくくなります。

項目	決める内容の例
ベースカラー	白に近い薄いグレー
アクセントカラー	ロゴやボタンに使う深めのブルー
文字色	濃いグレー（真っ黒は使わない）
見出しデザイン	太字＋下線、またはシンプルなボックススタイル
余白の目安	セクションの上下にスペーサーブロック1〜2個分

この表どおりに色や余白を決めていくだけでも、Cocoonのサイト型トップページがぐんと洗練された印象になります。

画像・アイキャッチのルールを決める

サイト型トップページにすると、サービス紹介のカードやカテゴリー紹介など、画像を使う場面が増えます。
ここで画像のテイストがバラバラだと、一気に雑然とした印象になってしまうので、あらかじめ次のようなルールを決めておくと安心です。

• 写真とイラストを混ぜすぎない（どちらかに寄せる）
• 同じ種類のカードには、同じテイストの画像を使う
• 人物の写真を使う場合は、明るくて表情が分かるものを選ぶ
• Canvaなどで、アイキャッチ画像のテンプレートを1〜2種類作って使い回す

迷ったときは、「この画像を見たとき、どんなサイトかなんとなく伝わるか？」という視点で選ぶと、外しにくくなります。

スマホ表示と表示速度のチェックも忘れずに

今はほとんどの読者がスマホからアクセスしてきます。
そのため、Cocoonのトップページをサイト型にしたら、必ずスマホでの見え方を確認しましょう。

• カラムブロックが縦並びになったとき、読みやすい並び順になっているか
• ボタンが小さすぎず、指で押しやすいサイズになっているか
• 文字サイズや行間が詰まりすぎていないか

また、画像をたくさん使うとどうしても読み込みに時間がかかるようになります。
画像のサイズを小さめにしたり、必要以上に枚数を増やしすぎないように意識するだけでも、体感のストレスはかなり変わってきます。

Cocoonトップページ おしゃれ事例から学ぶポイント

• ファーストビューで「誰に向けた何のサイトか」が一言で分かるか
• メニューやボタンの数が適度に絞られていて、迷わずクリックできるか
• カテゴリーカードやボックスのデザインに統一感があるか
• プロフィールの写真や文章から、書き手の人柄が伝わるか

気づいたことを、次のような表に書き出してみると、自分のサイトに持ち帰りやすくなります。

見本サイトの良い点	自分のサイトで真似できそうなこと
キャッチコピーが短く分かりやすい	トップの見出しを、もう少し短く言い換えてみる
カテゴリーカードのデザインが統一されている	アイコンと色をそろえたカードを用意する
プロフィールに顔写真とストーリーがある	自分のプロフィールを写真付きで少し長めに書いてみる

こうして分解してみると、「おしゃれなサイト」は特別なセンスだけで作られているわけではなく、小さなルールと一貫性の積み重ねでできていることが分かるはずです。

 

---

★ブログでは公開できない裏情報★

私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。

例えば、

1. 実際に10万稼いだキーワード
2. 今やるべきおススメ広告

などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。

⇒あっさり10万稼ぐためのメルマガ

---

 

よくある質問

Q1. Cocoonトップページの作り方で、最初に何から始めればいいですか？

A1. まずは「固定ページを作って、フロントページとして設定する」ところから始めるのがおすすめです。
そのうえで、「誰に何を伝えたいサイトなのか」と「読者にどんな行動をしてほしいか」を軽くメモに書き出してみてください。
そのメモを見ながら、ブロックエディタで必要なセクションを上から順に置いていくと、無理なくCocoonのトップページをサイト型に整えていけます。

Q2. サイト型にしておしゃれに見せたいのですが、CSSが分からなくても大丈夫ですか？

A2. 大丈夫です。Cocoonのスキンや、ブロックエディタのレイアウト調整だけでも、見やすくておしゃれな雰囲気に近づけます。
配色やフォント、余白、画像のテイストをそろえるだけでも印象は大きく変わるので、まずはこの記事で紹介した範囲の設定から試してみてください。
どうしても足りないと感じたときだけ、簡単なCSSに少しずつ挑戦するくらいの気持ちでOKです。

まとめ：今日からCocoonトップページをサイト型に変えてみよう

この記事の内容を簡単に振り返ります

今日からできる最初の一歩として、新しい固定ページを1つ作り、表示設定でトップページに指定してみてください。
そのうえで、この記事の表やチェックリストを見ながら、ブロックを足したり並び替えたりしていけば、Cocoonのトップページを自分らしいサイト型デザインに育てていけます。

 

---

★ちょっとブレイク★

「あと3ヶ月早くこの情報を知りたかった…」

そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。

無料で読めるうちに受け取っておいてください。

⇒あっさり10万稼ぐためのメルマガ

---