【Cocoon】ヘッダー・アイキャッチ・ロゴの適正サイズと決め方とは

ブログの見た目を整えようとして、Cocoonのヘッダー画像のサイズやアイキャッチ画像の大きさ、ヘッダーロゴのサイズで手が止まっていませんか。私も最初は「何pxで作ればいいの？」と悩みながら画像を作り直しては崩し、かなり遠回りをしました。

Cocoonのヘッダー画像やアイキャッチ・ロゴを整える前に押さえたいこと

Cocoonで使う画像の役割を整理しよう

まずは、Cocoonでよく使う画像の役割を整理しておきましょう。同じ画像でも、置き場所によって仕事が全然違います。

種類	主な表示場所	読者に与える印象	優先したいポイント
ヘッダー背景画像	画面最上部の大きな帯	サイト全体の雰囲気や世界観	デザイン性・世界観の統一
ヘッダーロゴ画像	サイトタイトル付近	サイト名の認知、信頼感	読みやすさ・シンプルさ
アイキャッチ画像	記事一覧・記事冒頭	記事のイメージ、クリックしたくなるか	テキストの見やすさ・統一感
OGP用画像	SNSシェア時のサムネイル	SNS上での目立ち方・クリック率	推奨比率を守ること
記事中の説明用画像	本文の途中	内容の補足、分かりやすさ	内容との一致・読みやすさ

「全部なんとなくオシャレにしたい」と考えると迷子になりやすいです。ヘッダー背景は世界観、ヘッダーロゴはサイト名、アイキャッチは記事の看板、と役割を分けて考えると、サイズの決め方もスッと整理できます。

Cocoonの画像周りのざっくりした仕様を知っておく

Cocoonは、WordPressが自動で作る複数サイズの画像（サムネイル・中・大など）をうまく使い分けてくれるテーマです。ただ、仕組みを知らないまま画像をアップすると「思っていたのと違う」と感じることも多いです。

最低限、次の点は押さえておきましょう。

つまり、「テーマ側の設定」と「元画像のサイズ」の両方を意識しておかないと、きれいに整いません。片方だけを頑張っても、どこかで無理が出てきます。

この記事で使う推奨サイズの全体像

ここから先は、Cocoonのヘッダー画像やアイキャッチ画像、ヘッダーロゴのサイズを具体的な数値で見ていきます。先に、この記事でよく出てくる「目安」としてのサイズを一覧にしておきます。

用途	比率の目安	おすすめサイズ例（px）	メモ
ヘッダー背景画像（PC）	おおよそ横長（約16:4〜16:5）	1600×300〜400前後	横長にしてフル幅表示を想定しやすくする
ヘッダー背景画像（スマホ）	PCより少し縦長	1200×400〜500前後	文字が入りすぎないように調整
ヘッダーロゴ画像	約4:1	800×200前後	表示はこれより小さくし、高解像度端末ではくっきり表示
アイキャッチ画像	16:9	1200×675 または 1280×720	記事一覧と記事内の両方で使いやすい比率
OGP用画像	16:9〜約1.91:1	1200×630前後	SNSのサムネイルを意識したサイズ

これらはあくまで「使いやすい目安」です。Cocoonではヘッダーの高さなどを後から調整できるので、ぴったり合わせなくても構いません。ただ、このあたりを基準にしておくと、表示崩れや極端なボケはかなり防ぎやすくなります。

Cocoonのヘッダー画像サイズの基本とおすすめの考え方

ヘッダー画像サイズの目安と比率

まずは、Cocoonで使いやすいヘッダー背景画像のサイズ感を表で整理します。厳密な正解というより「このあたりから始めて微調整しよう」というスタート地点だと考えてください。

想定する読者環境	比率のイメージ	おすすめサイズ例（px）	向いているサイトのタイプ
PC閲覧がやや多め	かなり横長	1600×300〜350	写真を大きく見せたいブログやサイト
PCとスマホが半々くらい	横長だが少しだけ縦に余裕	1400×350〜400	雑記ブログや情報サイト全般
スマホ閲覧が多い	PCより少し縦長	1200×400〜450	スマホ読者が中心の個人ブログ

個人的には、横幅は少なくとも1400pxくらいは欲しいと感じています。Cocoonは設定によってはヘッダーを画面幅いっぱいに近い形で表示するため、横幅が小さすぎると引き伸ばされてぼやっと見えることがあるからです。迷ったら「1600×300〜400前後」の横長から試してみると、大きな失敗はしにくいです。

ヘッダーの高さ設定とスマホ表示の考え方

Cocoonには、ヘッダーの高さを調整する項目があります。一般的な流れは次のようなイメージです。

• 管理画面の「Cocoon設定」から「ヘッダー」タブを開く
• 「ヘッダーの高さ（PC）」と「ヘッダーの高さ（モバイル）」を入力する
• 必要に応じて「背景画像の全てを表示」のチェックを切り替える

ここで失敗しやすいのが、「ヘッダー画像の縦サイズ」と「設定したヘッダー高さ」がかみ合っていないケースです。例えば、ヘッダー画像を縦400pxで作っているのに、ヘッダー高さを200px程度にしてしまうと、上下が大きくカットされます。逆に、高さを大きくしすぎると、スクロールするまで記事が見えず、少し重たい印象になります。

私の感覚としては、次のような調整から始めるとバランスを取りやすいです。

• ヘッダー画像の縦サイズより少し小さめにヘッダー高さを設定する
• PCは300px前後、スマホは200〜250px前後から微調整してみる
• ロゴや文字をヘッダー上に載せるときは、切れてほしくない部分がちゃんと収まっているか確認する

設定を変えたら、必ずPCとスマホの両方で実際に表示を確認してみてください。メニューと被っていないか、スクロール量が多すぎないかをチェックするだけでも、見え方がぐっと良くなります。

ヘッダー画像が切れる・余白が出るときの対処法

Cocoonのヘッダーまわりでよく聞く悩みは、このあたりです。

• 上下が切れて、見せたい部分が見えない
• 左右に変な余白が出る
• スマホで見ると大事な部分があまり見えない

それぞれの原因と対処の考え方をまとめると、次のようになります。

• 上下が切れる場合
  ヘッダーの高さ設定が画像の縦サイズに対して小さすぎることが多いです。ヘッダー高さを少し上げるか、縦に長すぎる画像を作り直してみてください。「背景画像の全てを表示」を有効にすることで、見え方が落ち着く場合もあります。
• 左右に余白が出る場合
  画像の横幅が小さすぎて、テーマのサイト幅と合っていないケースがあります。横幅を1400〜1600px程度にして作り直すと、余白が目立ちにくくなります。
• スマホとPCで印象が違う場合
  スマホは画面が縦長なので、PCでちょうどよくても見える範囲が変わります。スマホ側のヘッダー高さを少し低めに設定して、中央付近にロゴや文字がくるよう調整すると違和感が減ります。

ヘッダーは一度しっくりくる形を作ってしまえば、そう頻繁に触る部分ではありません。最初に少し時間をかけて、PCでもスマホでも落ち着いて見える形を探しておくと、その後のカスタマイズがぐっと楽になります。

Cocoonのヘッダーロゴサイズを決める3つの手順

ブログタイプ別のロゴサイズ目安

まずは、ブログタイプ別にCocoonで使いやすいヘッダーロゴのサイズ感を表にしてみます。

ブログタイプ	おすすめの比率	サイズ例（px）	雰囲気のイメージ
個人ブログ・雑記ブログ	約4:1	800×200	ロゴ＋短いサブタイトルを入れやすい
特化ブログ・メディア系	約5:1	1000×200	横長でスッキリ、文字メインのロゴ向き
写真・ポートフォリオ系	約3:1	720×240	ロゴマークを少し大きめに見せたいとき

ヘッダーロゴは、ヘッダー背景画像ほど大きくする必要はありません。どちらかというと「控えめだけど、きちんと読める」くらいを狙ったほうが、全体として上品にまとまりやすいです。

私がよく使うのは、「表示させたいサイズの2倍で画像を作る」というやり方です。例えば、画面上では400×100くらいで表示したいなら、800×200でロゴ画像を作ってアップロードし、Cocoon側の設定で少し小さめに表示させます。こうしておくと、高解像度のディスプレイでもロゴがにじみにくくなります。

レイアウト別（センターロゴ／トップメニュー）の注意点

Cocoonでは、ヘッダーのレイアウトをいくつかのパターンから選べます。代表的なのが、次の2つです。

• センターロゴ（ロゴが真ん中にドンと入るタイプ）
• トップメニュー型（左にロゴ、右にメニューが並ぶタイプ）

それぞれ、ロゴサイズの考え方が少し変わります。

• センターロゴの場合
  ロゴに視線が集まるので、少し大きめでも違和感はありません。ただし、縦方向に高すぎるとヘッダー全体が深くなり、記事が見えるまでの距離が長くなります。ロゴ画像の上下に入れる余白はほどほどにしておくと、バランスが取りやすいです。
• トップメニュー型の場合
  メニューと横並びになるため、ロゴが大きすぎるとメニューの文字が窮屈に見えます。目安としては、「ヘッダー高さの半分〜3分の2くらいの高さ」に収めると、メニューとのバランスが整いやすくなります。横に長すぎるロゴは、縮小されたときに文字が読みにくくなるので注意してください。

実際にCocoonのヘッダーレイアウトを切り替えながら、ロゴを差し替えてみると、印象の違いが分かりやすいです。気に入ったレイアウトに合わせて、ロゴ画像の比率や大きさを微調整していくイメージで試してみてください。

ロゴ画像をくっきり見せるための作り方のコツ

ヘッダーロゴは、画像サイズだけでなく「作り方」もとても大事です。サイズは合っているのに、なぜかぼんやりして見えることもあります。私がロゴを作るときに意識しているポイントは次の通りです。

ロゴのデザインを凝るのも楽しいのですが、「スマホで見たときに読めるか」を意識しておくと失敗しにくくなります。Cocoonのヘッダーロゴサイズを決めるときは、pxの数字だけでなく、文字の視認性も一緒にチェックしてみてください。

Cocoonで使いやすいアイキャッチ画像サイズとOGPの考え方

アイキャッチ画像サイズのおすすめパターン

まず、Cocoonで使いやすいアイキャッチ画像のサイズを、用途別に表でまとめてみます。

パターン	比率	サイズ例（px）	向いている使い方
ベーシック	16:9	1200×675	一覧・記事内・OGPをひとまとめにしたいとき
スタンダード	16:9	1280×720	テキストを多めに載せたい情報系ブログ
OGP寄せ	約1.91:1	1200×630	SNSでの見え方を特に重視したいとき

いろいろ試した結果、まずは「16:9の横長」で統一しておくのが扱いやすいと感じています。Cocoonのサムネイル設定で16:9を選んでおけば、記事一覧も自然とそろいやすくなります。アイキャッチの比率がバラバラだと、一覧でトリミングされて不格好になりやすいので、最初に「比率を決める」のがおすすめです。

サムネイルの縦横比と一覧デザインをそろえるコツ

Cocoonには「サムネイル画像の縦横比」を選べる設定があります。ここをアイキャッチと同じ比率にしておくと、記事一覧の見え方がかなり整います。

ポイントをまとめると、次のようなイメージです。

逆に、縦長だったり正方形に近かったりと、比率が混在していると、一覧で上下がカットされてしまい、「タイトルだけで内容が分かるように作ったアイキャッチなのに、肝心の文字が切れている」ということも起こります。Cocoonのアイキャッチ画像のサイズは、「全記事で同じ比率にする」と決めるだけでも、かなり印象が良くなります。

アイキャッチを量産するためのテンプレ作り

記事数が増えてくると、アイキャッチを毎回ゼロから作るのは正直かなりしんどいです。私が楽をするためにやっているのが、「テンプレートを1つ作ってしまう」方法です。

こうしておくと、Cocoonで記事を書くたびに「アイキャッチどうしよう…」と悩まずに済みます。テンプレが決まると、ブログ全体の統一感も自然と出てくるので、最初に少し時間をかけておく価値は大きいです。

画像サイズと表示速度・デザインのバランスを取る

画像の容量を減らす基本テクニック

画像サイズを考えるときは、「px」と「ファイル容量」の両方をセットで見る必要があります。イメージをつかみやすいように、対応前と対応後の例を表にしてみます。

対応前の状態	対応後の状態	行ったこと
ヘッダー画像 1600×600 / 約900KB	1600×350 / 約300KB	縦サイズを見直してから圧縮
アイキャッチ 2000×1125 / 約700KB	1200×675 / 約200KB	実際に必要なpxまで縮小して圧縮
ロゴ画像 1600×400 / 約500KB	800×200 / 約100KB	2倍表示を想定しつつ、余計な余白を調整

私が画像を軽くするときに意識しているのは、次のようなポイントです。

• フル幅で見せたい画像でも、縦サイズは必要以上に大きくしない
• アイキャッチは横幅1200px前後あれば、たいていの場面で困らない
• ロゴ画像は図形と文字だけなので、容量はかなり小さくできる
• 圧縮ツールで画質を落としてみて、ぱっと見で気にならなければOKと割り切る

Cocoon自体は軽いテーマなので、画像の側で極端なことをしなければ、十分に高速なブログに仕上がります。画像サイズと容量を「適度」に抑える意識を持っておくと安心です。

WebP変換や圧縮プラグインを使うときの注意点

画像の最適化と相性が良いのが、圧縮プラグインやWebP変換です。ただ、設定をよく分からないまま進めると、思わぬところで画質が荒くなったり、Cocoonの表示と噛み合わなかったりすることがあります。

私が気をつけているのは、次のような点です。

• 元画像をあまりに小さくしすぎると、WebPにしてもぼやけた印象は消えない
• まずはヘッダーやアイキャッチのpxを整えてから、圧縮や変換を行う
• プラグインの一括変換を使う前に、バックアップを取っておく
• 画質設定をいきなり一番下にせず、「中〜やや高め」あたりから試す

Cocoonのヘッダー画像サイズやアイキャッチ画像サイズを、この記事で紹介したような目安にそろえておけば、WebP変換などと組み合わせても大きなトラブルは起きにくいです。テーマと画像の両方を意識しておくことが、後から困らない一番のコツだと思います。

画像サイズを見直すときのチェックリスト

「ヘッダーやアイキャッチをそろそろ作り直したいな」と感じたとき、私がざっと確認しているチェックポイントをまとめます。

• ヘッダー背景画像
  • 横幅は1400〜1600px程度あるか
  • 縦幅は、設定しているヘッダー高さより少し大きい程度か
  • PCとスマホの両方で、見せたい部分がちゃんと表示されているか
• ヘッダーロゴ
  • ロゴの比率は3:1〜5:1くらいの範囲か
  • スマホで見てもロゴの文字が読めるか
  • 背景と文字の色が近すぎて、読みにくくなっていないか
• アイキャッチ
  • 16:9など、比率が全記事で統一されているか
  • Cocoonのサムネイル設定の比率と一致しているか
  • 文字入りの場合、スマホで見てもタイトルが読める大きさか

このチェックリストに沿って見直していくと、「どこから手をつければいいか分からない」という状態から抜け出しやすくなります。一度に全部直さなくても、気になるところから少しずつ整えていけば大丈夫です。

よくある質問（Cocoonのヘッダー画像サイズなど）

Q1.Cocoonのヘッダー背景画像は、大きいサイズで作らないといけませんか？

A. そこまで神経質になる必要はありませんが、ある程度の大きさはあったほうが安心です。

Cocoonのヘッダー背景画像は、ブラウザ幅に合わせて表示されることが多いので、横幅が小さすぎると引き伸ばされたときにぼやけて見えることがあります。目安として、横幅1400px前後以上にしておけば、一般的な環境では大きな違和感は出にくいです。

とはいえ、厳密に「何px以上でないとダメ」という決まりがあるわけではありません。まずは、今使っている画像のサイズを確認し、あまりに小さい場合は少し大きめで作り直す、というくらいの感覚で大丈夫です。

Q2.Cocoonのアイキャッチ画像とOGP用の画像は、サイズを分けたほうがいいですか？

A. ブログ運営を楽にしたいなら、まずは同じ画像で兼用するのがおすすめです。

多くのサイトでは、Cocoonのアイキャッチ画像をそのままOGP画像としても使っています。16:9の1200×675や1280×720で作っておけば、SNSでも問題なく表示されるケースがほとんどです。

一方で、SNSからの流入を特に重視する場合は、OGP用に1200×630前後の画像を別で用意する人もいます。まずはアイキャッチとOGPの画像を同じにして運用を軽くし、余裕が出てきたら必要な記事だけOGP専用画像を用意する、という段階的な方法もありだと思います。

Q3.Cocoonのヘッダーロゴは、必ず横長の画像にしたほうがいいですか？

A. 絶対ではありませんが、Cocoonとの相性を考えると、ある程度横長にしておいたほうが扱いやすいです。

正方形に近いロゴをそのままヘッダーロゴに登録すると、ヘッダー全体が縦に長くなりすぎたり、メニューとのバランスが取りにくくなったりします。どうしても正方形ロゴを生かしたい場合は、横長のカンバスの中央にロゴを配置して、左右に余白を加えた「横長のロゴ画像」として保存すると、Cocoonのヘッダーロゴとしても使いやすくなります。

まとめ｜Cocoonのヘッダー画像・アイキャッチ・ロゴサイズのポイント

ここまでの要点を整理しておきます

今日からできる最初の一歩としては、次の流れをおすすめします。

• まずはアイキャッチの比率とサイズを、16:9の1200×675などに統一する
• Cocoon設定で、サムネイルの縦横比をアイキャッチと同じ16:9に変更する
• そのうえで、ヘッダー背景画像とヘッダーロゴのサイズをこの記事の表を参考に1案決めて、PCとスマホで表示を確認しながら微調整する

一度、Cocoonのヘッダー画像サイズやアイキャッチ、ヘッダーロゴのルールが決まってしまえば、その後は画像作りに迷う時間がぐっと減ります。この記事をきっかけに、ご自身のブログに合ったサイズを見つけて、デザインの不安を片付けてしまいましょう。そうすれば、より気持ちよく記事作成に集中できるようになるはずです。