Cocoonは設定項目が多く、触ろうと思えばいくらでも手を入れられるテーマです。
一方で、最初の段階からすべてを調整しようとすると、どこまでやればよいのか分からなくなりがちです。
この記事では、Cocoonを使い始めたときに私が最初に触ったデザイン設定を、4つに絞ってまとめています。
最初から完成形を目指すのではなく、迷わず使い始めるための一つの考え方として読んでもらえればと思います。
Cocoonのデザイン設定は、最初に絞ったほうが楽になる
Cocoonはデザインに関する設定項目が多く、最初からすべてを触ろうとすると整理がつかなくなりがちです。
今回は、サイト全体の印象や導線に関わる設定だけを先に調整しました。
細かなデザインや装飾については、運用しながら必要に応じて見直す前提にしています。
この前提で、実際に最初に触ったデザイン設定を4つだけ紹介します。
ヘッダー画像
最初に設定したのは、ヘッダー画像です。
理由は、ここを変えるだけでサイト全体の印象が大きく変わるからです。Cocoonは初期状態でも十分に整ったテーマですが、ヘッダーが未設定のままだと、どうしても「仮の状態」に見えてしまいます。
一方で、ヘッダー画像は影響範囲が分かりやすく、やり直しもしやすい項目です。画像を差し替えるだけで印象を調整でき、他のレイアウトや記事構成に大きな影響を与えることもありません。
設定自体も複雑ではありません。
WordPress管理画面から「Cocoon設定」→「ヘッダー」へ進み、「ヘッダー背景画像」で画像を1枚指定するだけです。細かな表示調整やサイズ指定は、後からでも問題ありません。
今回は、凝ったデザインを作ることはせず、サイト全体の雰囲気が伝わるシンプルな画像を選びました。まずは「ちゃんと運用されているサイトに見える状態」を作ることを優先しています。
ヘッダーを決めたことで、サイト全体のトーンが定まり、その後の設定や記事作成の判断もしやすくなりました。
サイドバー
次に手を入れたのが、サイドバーです。
サイドバーは、記事本文を邪魔せずに補足情報を置ける場所でもあり、サイト全体の使い勝手に影響しやすい部分でもあります。項目を詰め込みすぎると読みにくくなり、逆に何もないと動線が弱くなります。
今回は「とりあえず全部置く」ことはせず、最低限の役割に絞って構成しました。基準にしたのは、「記事を読み終えたあと、次に何を見ればいいかが分かるかどうか」です。
具体的には、プロフィールやカテゴリー、よく読まれている記事など、サイト全体の構造が伝わる要素を中心に配置しました。一方で、メルマガ登録やサービス訴求のバナーなどは、この段階では入れていません。
理由は単純で、まだ訴求の軸が固まっていなかったからです。何を一番見てほしいのかが決まらないまま設置しても、後から外す可能性が高くなります。サイドバーは影響範囲が広いため、判断がつかないものは無理に置かないことにしました。
設定自体は、「外観」→「ウィジェット」からサイドバーに必要なブロックを追加するだけです。細かな順序や表示条件は、運用しながら調整すれば十分だと考えています。
サイドバーを最低限の構成にしたことで、記事本文とのバランスが取りやすくなり、全体の見通しも良くなりました。まずは「迷わせない配置」にすることを優先した形です。
グローバルメニュー
サイドバーの次に整えたのが、グローバルメニューです。
グローバルメニューは、サイトを訪れた人が最初に目にする導線のひとつです。記事を読み進める前でも、「このサイトには何があるのか」を大まかに伝える役割を持っています。
この段階で意識したのは、項目を増やしすぎないことでした。あれもこれも載せるより、「どんな内容のサイトか」が一目で分かる構成を優先しています。
今回は、カテゴリーページや固定ページのうち、サイトの軸になるものだけをメニューに入れました。将来的に増える可能性のある項目や、まだ運用方針が固まっていないページは含めていません。
グローバルメニューは後から変更しづらい印象を持たれがちですが、実際には並び替えや差し替えはそれほど手間ではありません。そのため、この時点では完成形を作ろうとせず、最低限の構成にとどめています。
設定は、WordPressの「外観」→「メニュー」から行います。あらかじめ作成しておいたカテゴリーや固定ページを選び、表示位置にグローバルメニューを指定するだけです。
まずは「迷わず移動できること」を最優先にし、シンプルな形で設置しました。
ピックアップコンテンツ
最後に設定したのが、ピックアップコンテンツです。
ピックアップコンテンツは、サイトの中で「今、見てほしい記事」をまとめて見せるための機能です。トップページなど目につきやすい位置に表示されるため、サイトの意図が伝わりやすくなります。
ただし、この機能は扱い方を間違えると逆効果にもなります。どの記事を推すのか決まっていない状態で使うと、ただ目立つだけの枠になってしまうからです。
今回は、完成形を作ることは意識せず、「置き場所を確保する」ことだけを目的に設定しました。仮の記事でも構わないので、ピックアップ枠を一度使ってみることで、表示位置やサイズ感を把握したかったためです。
Cocoonでは、ピックアップコンテンツはメニューとして管理します。WordPressの「外観」→「メニュー」で専用のメニューを作成してください。
それをCocoon設定の「おすすめカード」から指定するだけです。
どの記事を載せるかは、運用しながら差し替えていく前提にしています。無理に完成させようとせず、「後から入れ替えられる状態」を作っておくほうが、結果的に判断が楽になります。
ピックアップコンテンツを仮でも設置しておいたことで、今後どの記事を育てていくかを考える基準ができました。設定としては最後ですが、運用上はこれから何度も触る場所になるはずです。
この4つで十分だった理由
今回の設定で意識したのは、すべてを整えることではなく、運用を始めるための土台を作ることでした。
Cocoonには多くの設定項目がありますが、最初からすべてを触る必要はありません。影響範囲が分かりやすく、後から調整しやすい項目だけを選んで設定することで、迷いなく作業を進めることができます。
ヘッダー画像でサイトの印象を決め、サイドバーで構造を整理し、グローバルメニューで導線を作り、ピックアップコンテンツで「見せたい記事」を置く。この4つが揃えば、見た目と動線の両方が最低限整った状態になります。
細かな装飾や追加設定は、記事が増え、運用の方向性が見えてからでも遅くありません。実際に使いながら調整したほうが、無駄な手戻りも減らせます。
まずはこの4つだけ整えて、記事を書くことに集中する。そのための区切りとして、ちょうどよい設定量だったと感じています。
コメント