- スマホで見るとぼやけるのはなぜ？初心者が陥った画像の罠
- 迷いを断ち切る黄金ルール。「1200×630」と「400×400」の理由
- 未来の自分へ。迷わないための「型」を残す記録
【はじめに】画像の「正解」がわからなくて
管理人さん「ブログの画像サイズ、これで本当に合ってるのかな？」 「スマホで見ると、なんだかぼやけてる気がする……」
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部【技術編】で説明いたしますね。