[{"data":1,"prerenderedAt":11},["ShallowReactive",2],{"guide:ja:blog\u002F1200x627-vs-1200x628-link-preview-image":-1,"article-ja-1200x627-vs-1200x628-link-preview-image":3},{"slug":4,"title":5,"description":6,"date":7,"keyword":8,"tool":9,"html":10},"1200x627-vs-1200x628-link-preview-image","1200 x 628 vs 1200 x 627: どのサイズが正しい？","Facebookは1200x630、LinkedInは1200x627、その他のガイドは1200x628と言っています。1.91:1の比率の意味と、すべてのプラットフォームで機能する1つの画像を作成する方法をご紹介します。","2026-10-05","1200 x 628","resize-image","\u003Cp>リンクプレビュー画像を作ったことがあれば、おそらくこれに遭遇したことがあるでしょう：あるガイドは1200 x 628と言い、別のガイドは1200 x 627と言い、Facebookの公式ドキュメントは1200 x 630と言い、あなたのデザインテンプレートは全く別の寸法になっています。4つすべてが同じに見えます。では、実際には、どれが正しいのでしょうか？\u003C\u002Fp>\n\u003Cp>短い答え：すべて問題ありません。それらはすべて同じアスペクト比の近似値であり、630ピクセルの背の高い画像でそれら間の違いはわずか3ピクセルです。これはおよそ0.5パーセント以下です。しかし、これらの数字がどこから来たのかを理解する価値があります。なぜなら、それを知ることで、同じバナーを5回も再エクスポートするのを避けることができるからです。\u003C\u002Fp>\n\u003Ch2>すべては1.91:1を目指している\u003C\u002Fh2>\n\u003Cp>Open Graphプロトコル（Facebook、LinkedIn、Slack、iMessage、およびその他のほとんどのプラットフォームがリンクプレビューを構築するために読む一連のメタタグ）は、\u003Cstrong>1.91:1\u003C\u002Fstrong>のアスペクト比を持つ画像を推奨しています。それだけです。1.91はすでに丸められた数字なので、異なる企業がそれを掛け出すと、わずかに異なる場所に到達します：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>1200 ÷ 1.91 = 628.27 → \u003Cstrong>1200 x 628\u003C\u002Fstrong>に四捨五入\u003C\u002Fli>\n\u003Cli>1200 x 630 = 正確に1.905:1 → Facebookの文書化された推奨事項\u003C\u002Fli>\n\u003Cli>1200 x 627 = 1.914:1 → LinkedInの長年にわたる公開サイズ\u003C\u002Fli>\n\u003Cli>1200 x 625 = 正確に1.92:1 → 古いテンプレートに表示される\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>これらのどれも「間違い」ではありません。それらは同じ仕様の四捨五入アーティファクトです。クローラーは画像が3ピクセルずれていることで拒否することはありません。ファイルが少なくとも200 x 200で、理想的には幅1200pxであれば、高密度スクリーンで鮮明にレンダリングされるだけで十分です。\u003C\u002Fp>\n\u003Ch2>3ピクセルの違いは重要ですか？\u003C\u002Fh2>\n\u003Cp>実際には、1つの状況でのみ：きつい切り取り。プラットフォームは、ネイティブサイズで画像を表示せず、その月に使用しているカードレイアウトに合わせます。エッジが切り取られます。見出しテキストがフレームの上部まで走っている場合、1.78:1カードに切り取られた1200 x 628の画像はそれをクリップします。1200 x 630も同じです。\u003C\u002Fp>\n\u003Cp>修正は「正しい」ピクセル数を選ぶことではありません。安全なマージンを残すことです：ロゴとテキストをキャンバスの中央~90%の内側に保つ、そして何も重要なものを任意のエッジから60px以内に配置しないでください。その場合、3つのサイズのどちらをエクスポートするかは本当に重要ではありません。\u003C\u002Fp>\n\u003Ch2>すべてのプラットフォームで機能する1つの画像を作成する方法\u003C\u002Fh2>\n\u003Cp>私の推奨：\u003Cstrong>1200 x 630\u003C\u002Fstrong>で構築してください。これはFacebookの文書化されたサイズ、1.91:1にほぼ同じ、そして偶数です。これは、一部のエディターで奇数の半ピクセルレンダリングを回避します。その後、同じファイルをLinkedIn、Slack、Discord、およびOpen Graphタグ全般で再利用してください。\u003C\u002Fp>\n\u003Cp>既に間違った寸法で画像がある場合、ここに何もインストールせずにすばやく修正する方法があります：\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Ca href=\"\u002Fja\u002Fcrop-image\">crop tool\u003C\u002Fa>を開き、最初にソース写真をおおよそ1.91:1の形にトリミングしてください。これはスキップする人が多いステップです。サイズ変更にまっすぐにジャンプすると、4:3の写真は圧縮され、顔が微妙に見えます。\u003C\u002Fli>\n\u003Cli>トリミングされたファイルを\u003Ca href=\"\u002Fja\u002Fresize-image\">resize tool\u003C\u002Fa>に取り込み、1200 x 630（または628、または627 — 1つ選んで先に進んでください）に設定してください。\u003C\u002Fli>\n\u003Cli>JPGとして写真をエクスポートし、鮮明なテキストが必要な場合やロゴの後ろに透明性が必要な場合はPNGのみです。\u003Ca href=\"\u002Fja\u002Fconvert-image\">image converter\u003C\u002Fa>は、ソースがPNG、WebPまたはHEICの場合、そのスイッチを処理します。\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>すべてはcutbgのブラウザ内で発生します。ファイルはコンピューターを離れません。アップロードキューもアカウントもありません。これは、リリースされていない製品ショットまたはまだ発表していないクライアント作業を持つ人にとって、人々が実現するより重要です。\u003C\u002Fp>\n\u003Ch2>ファイルサイズにも注意してください\u003C\u002Fh2>\n\u003Cp>プラットフォームにはアップロードとフェッチの制限があります。Facebookはオープングラフ画像を8MBでキャップします。クローラーの中には、ダウンロードが遅い場合、静かに諦める者もいます。1200 x 630のJPGは、100KBから300KB間で快適に着地するはずです。エクスポートが数メガバイトのPNGの場合、最初に\u003Ca href=\"\u002Fja\u002Fcompress-image\">compressor\u003C\u002Fa>を通してください。小さいファイルは、プレビューが実際に表示されることも意味します。クローラーがタイムアウトする間、空白のカードを表示する代わりに。\u003C\u002Fp>\n\u003Ch2>プレビューが古い画像をまだ表示している場合\u003C\u002Fh2>\n\u003Cp>これはほぼ決してサイズの問題ではありません。Facebook、LinkedIn、Twitterはスクレイプされたプレビューを積極的にキャッシュします。ファイルを置き換えた後、プラットフォーム独自のデバッガー（Facebookの共有デバッガー、LinkedInのポストインスペクター）を通じてURLを実行して、再スクレイプを強制してください。画像を1200 x 627から1200 x 628に変更しても、キャッシュされたプレビューは修正されません。キャッシュをクリアするだけで可能です。\u003C\u002Fp>\n\u003Cp>そのため：最後のピクセルにこだわるのをやめてください。1200 x 630を選び、テキストをエッジから遠ざけ、ファイルを数百KBの下に保ち、Open Graphタグを読むすべてのプラットフォームでカバーされます。\u003C\u002Fp>\n",1791831535286]