- SNSでシェアされても画像が切れないアイキャッチの黄金比「1200×630」
- スマホで見るとぼやける罠。ふきだしアイコンを「400×400」で作る明確な理由
- 軽さのJPGと線のPNG。用途に合わせて得意分野を任せるファイル形式の使い分け
【はじめに】画像の正解がわからなくて
管理人さんブログの画像サイズ、これで本当に合ってるのかな？スマホで見ると、なんだかぼやけてる気がする…
WordPressを始めたばかりの頃、私は記事を書くこと以上に、この「画像」という壁にぶつかっていました。ネットで調べても「ケースバイケースです」なんて書かれていて、
管理人さんそのケースが知りたいんだよなぁ〜
と頭を抱えたことも一度や二度ではありません。
でも、30年慣れ親しんだ環境から飛び出し、試行錯誤を繰り返した今なら、自信を持って言えます。「迷ったら、このルールに従えば大丈夫」
この記事は、かつての私のように迷える初心者さん、そして自身の参考書として残す、画像作成の『型』の記録です。どうぞ、肩の力を抜いて読んでみてくださいね。
当サイトの情報は個人の体験や検証に基づくものであり、特定の成果や正確性を保証するものではありません
アイキャッチ画像のサイズ
結論からお伝えします。ブログの顔となる「アイキャッチ画像」のサイズは、「1200 × 630px」この一択で始めてみてください。
「SNSでの見え方」が一番キレイ
皆さんが書いた記事は、X（旧Twitter）やFacebookでシェアされることがありますよね。その時、一番美しく、トリミング（切り取り）されずに表示される国際的な標準ルール（OGPといいます）が、この「1.91 : 1」という比率、つまり「1200 × 630px」なんです。
「YouTubeサイズ」との兼ね合い
ここで、Canvaなどを使っているとふと気づくことがあります。
初心者さんあれ？YouTubeのサムネイル（1200 × 675）の方が少し大きくない？YouTubeサイズで作くれば両方使えるんじゃない？
管理人さんその気持ち、痛いほど分かります！私も最初はそう思っていました。でも、ここには「落とし穴」があるんです。
もし「1200 × 675」の画像をそのままブログのアイキャッチに使うと、X（旧Twitter）でシェアされた時に、画像の上下（約22pxずつ）が勝手に切り取られてしまうんです。せっかく心を込めて入れた文字が、上下でプツンと切れて読めなくなってしまったら……とても悲しいですよね。
※ 最近のX（Twitter）では16 : 9（1200×675）も綺麗に表示されますが、他のSNSや将来的な互換性を考えると、やはり1.91 : 1（1200×630）で作っておくのが一番安全な黄金ルールなんです。
【私の結論】優しさの「余白」を持つ
ですので、私は迷わず「最初から切られないサイズ（1200 × 630）」で作ることに決めました。
もし、「どうしてもYouTubeと兼用したい！」という場合は、一つだけ自分に優しくルールを課してあげてください。
- 「上下の端っこ（約25pxずつ）には、文字を入れない」
この余白への配慮があれば、どんな場所でも、あなたの想いがしっかり伝わる画像になります。
ふきだしアイコンの「サイズ」の秘密
私はWordPressのテーマ「SWELL」を愛用していますが、会話風の「ふきだしアイコン」を作る時、あえて「400 × 400px」という少し大きめのサイズで作っています。
初心者さんえっ？画面上では80pxくらいで小さく表示されるのに、なんでそんなに大きく作るの？
と思いますよね。それには、「ギュッと締めて、高画質にする」という狙いがあるんです。
理由①スマホの画面は超高精細（Retina対策）
最近のスマホ（iPhoneなど）は、画面がとてもきれいです。実は、画面上で「100px」の大きさで見えている画像でも、裏側では2倍 〜 3倍（200px 〜 300px）の情報量がないと、ぼやけて表示されてしまうんです。
理由②ダウンサンプリング効果
大きな画像を、あえて小さな枠にギュッと縮小して表示させることで、画像の密度が高まり、輪郭が滑らかになる効果（ダウンサンプリング）があります。 これにより、アイコンの表情や線が崩れず、プロっぽい「パキッ」とした仕上がりになります。
大きすぎてもサイトが重くなってしまいますが、400px程度なら容量も軽く、画質とのバランスが一番良い「黄金比」のサイズだと感じています。
形式はどっち？JPGとPNGの使い分け
画像を作って保存する時、「JPG（ジェイペグ）」にするか「PNG（ピング）」にするか、迷いませんか？これも、用途に合わせて「得意分野」を任せてあげるのが正解です。
☑ JPG（ジェイペグ）を選ぶとき
- 用途： 記事内の写真、色数の多いアイキャッチ
- 理由： 「軽さ」のエキスパートです。色やグラデーションがたくさんあっても、ファイルサイズを小さく抑えてくれます。
☑ PNG（ピング）を選ぶとき
- 用途： ふきだし用アイコン、ロゴ、背景を透明にしたい時
- 理由：「線」をくっきり見せるのが得意です。JPGのようなノイズ（モヤモヤ）が出ないので、イラストや文字だけの画像に最適です。
注意点： 写真やスクショをPNGにすると、容量がドカンと重くなるので注意してくださいね。
☑ GIF（ジフ）を選ぶとき
- 用途： アイコンを「パチパチ」と瞬きさせたい時など
- 理由：パラパラ漫画のようなアニメーションが作れます。私は2コマ程度の動きをつけて、サイトに可愛らしさをプラスしています。
【まとめ】型が決まると創作はもっと楽しい
- アイキャッチは1200 × 630pxで作る
- アイコンは400 × 400pxで、あえて大きく作る
- 写真はJPG、イラストはPNGを選ぶ
まずはこの3つだけ覚えておけば、もう画像作成で立ち止まることは無くなるかと思います。「型」が決まると、迷う時間が減り、その分だけ「何を伝えようかな？」というワクワクする時間に使うことができます。
キレイな画像が作れたら、次はいよいよブログへのアップロードです。でも、ここで「そのままアップロード」には注意が必要です。未来のサイトを守るための、「画質と速度を両立する魔法のテクニック」があるんです。
次回の第 2部【技術編】で説明いたしますね。