Cocoonのアイキャッチ画像設定方法とサイズ｜初心者向けに手順とおすすめ比率を解説
「アイキャッチ画像ってどこで設定するの？」「サイズは何pxにすればいいの？」
WordPressを始めたばかりのころ、私もこの2つで詰まった。
この記事では、Cocoonでのアイキャッチ画像の設定手順と、推奨サイズ・比率をまとめて解説する。画像を作るツールの選び方や、実際に私が使っているサイズも紹介するので、そのまま真似してもらえればすぐに使える状態になるはずだ。
📋 この記事でわかること
- アイキャッチ画像とは何か
- Cocoonでのアイキャッチ設定手順
- 推奨サイズと比率（結論：1280×670px）
- 無料で作れるツール2選
- Cocoon特有の表示設定の確認方法
アイキャッチ画像とは？30秒で確認
アイキャッチ画像とは、記事の「顔」になる画像のことだ。以下の場所に表示される。
- 記事の冒頭（タイトルの下）
- ブログのトップページや記事一覧
- XやLINEでURLをシェアしたときのOGP画像
設定していないと記事一覧で画像なしの状態になり、クリック率が下がりやすい。最初の記事から設定しておく習慣をつけておこう。
たとえばこれは私のブログで実際に使っているアイキャッチ画像だ。
【手順①】記事編集画面でアイキャッチを設定する
クラシックエディタを使っている場合の手順を説明する。
- WordPressの管理画面から記事の編集画面を開く
- 画面右側の「アイキャッチ画像」という欄を探す
- 「アイキャッチ画像を設定」をクリック
- メディアライブラリから画像を選ぶ（またはアップロードする）
- 「アイキャッチ画像を設定」ボタンをクリックして完了
⚠️ 「アイキャッチ画像」の欄が見当たらない場合：
編集画面右上の「表示オプション」をクリックして「アイキャッチ画像」にチェックを入れると表示される。
【手順②】Cocoonのアイキャッチ表示設定を確認する
Cocoonには、アイキャッチ画像の表示・非表示をコントロールする設定がある。設定していないと画像をアップしても表示されないケースがあるので確認しておこう。
確認場所
- WordPressの管理画面から「Cocoon設定」を開く
- 上部タブから「画像」をクリック
- 「アイキャッチの表示」という項目を探す
- 「本文上にアイキャッチを表示する」にチェックが入っているか確認
- 「変更をまとめて保存」をクリック
💡 記事ごとに非表示にすることもできる
各記事の編集画面の下部に「Cocoon設定」というブロックがある。そこで「アイキャッチを表示しない」を個別に設定できる。トップページ用の固定ページなど、特定のページだけ非表示にしたいときに使う。
Cocoonのアイキャッチ推奨サイズと比率
結論から言う。1280×670px（横16：縦8.375）が私のおすすめだ。理由は3つある。
①OGP画像として最適な比率に近い
XやFacebookでシェアされたときに表示されるOGP画像の推奨比率は1.91:1（横1200×縦630px）だ。1280×670pxはこれに近い比率なので、SNSシェア時に画像が見切れたり余白が出たりしにくい。
②Cocoonの記事一覧で綺麗に表示される
Cocoonのデフォルトレイアウトでは、記事一覧のサムネイルが横長に表示される。縦長や正方形の画像だと上下が切れてしまうことが多いが、横長比率であれば意図した見た目に近くなる。
Cocoon設定→画像タブの「全体画像設定」でもサムネイルの比率を変更できる。
③ファイルサイズが軽くなりやすい
必要以上に大きいサイズ（2000px以上など）で作ると、ファイルサイズが重くなりページ速度に影響する。1280pxはWeb表示に十分な解像度を保ちつつ、軽量化しやすいサイズだ。
📐 まとめ：推奨サイズ
| 用途 | サイズ |
|---|---|
| ブログ記事アイキャッチ（推奨） | 1280×670px |
| OGP画像（SNSシェア用） | 1200×630px |
| 最小サイズ（これ以下は避ける） | 600×315px |
アイキャッチ画像を無料で作るツール2選
①Canva（ブラウザ・スマホ対応）
デザイン初心者でも使いやすい無料ツール。テンプレートが豊富で、サイズ指定もできる。
- 「カスタムサイズ」で1280×670pxを指定して新規作成
- テンプレートを選ぶか、背景色・テキストを自由に配置
- 右上の「共有」→「ダウンロード」→PNG形式で保存
💡 私が使っているデザインのコツ
背景色を濃紺（#1a1a2e）にして白いテキストを置くだけでも、統一感が出て見栄えがよくなる。凝ったデザインより全記事で色味を統一することの方が、ブログ全体の印象が整いやすい。
②Googleスライド（Googleアカウントがあればすぐ使える）
Canvaよりシンプルだが、テキストと背景色だけで作るシンプルなアイキャッチなら十分に使える。
- Googleスライドを開いて「ファイル」→「ページ設定」→「カスタム」で1280×670pxを指定
- 背景色を設定してテキストを追加
- 「ファイル」→「ダウンロード」→「PNG画像」で保存
アップロード前に確認すること：ファイルサイズの圧縮
1280×670pxで作ったPNG画像はそのままだと1MB以上になることがある。WordPressにアップする前に圧縮してから使うのが基本だ。
おすすめの圧縮ツール：Squoosh（無料・ブラウザ完結）
画像をドラッグ＆ドロップするだけで使える。フォーマットを「MozJPEG」、Qualityを「75」前後に設定すると、画質を保ちながら大幅に軽量化できる。
目安として200KB以下に圧縮できればページ速度への影響が少なくなる。
まとめ：サイズは1280×670px、設定はCocoon設定で確認
この記事でやったことをまとめる。
- 記事編集画面の右側「アイキャッチ画像を設定」から画像をアップ
- Cocoon設定→画像タブで「本文上にアイキャッチを表示する」を確認
- 推奨サイズは1280×670px
- CanvaかGoogleスライドで無料で作れる
- アップ前にSquooshで200KB以下に圧縮
アイキャッチは記事の第一印象を決める。凝ったデザインでなくていいので、全記事で統一感を出すことを意識してみてほしい。色とフォントを揃えるだけで、ブログ全体がぐっと見やすくなる。
Cocoonのアイキャッチ画像の推奨サイズは何pxですか？
1280×670pxがおすすめです。OGP画像（SNSシェア時の表示）に近い比率で、Cocoonの記事一覧でも綺麗に表示されます。最低でも横600px以上を確保してください。
アイキャッチ画像を設定したのに表示されない場合は？
Cocoon設定→画像タブの「本文上にアイキャッチを表示する」にチェックが入っているか確認してください。また、各記事の編集画面下部にあるCocoon個別設定で「アイキャッチを表示しない」になっていないかも確認してみてください。
アイキャッチ画像はPNGとJPEGどちらがいいですか？
写真を使う場合はJPEG、テキストや図形が中心のデザインはPNGが向いています。どちらもSquooshで圧縮してから200KB以下でアップロードするのがおすすめです。
無料でアイキャッチ画像を作るにはどうすればいいですか？
CanvaかGoogleスライドが使いやすいです。Canvaはテンプレートが豊富で初心者向け、Googleスライドはシンプルなデザインをすばやく作るのに向いています。どちらもカスタムサイズで1280×670pxを指定して作成できます。
コメント