[{"data":1,"prerenderedAt":440},["ShallowReactive",2],{"blog-tag-ja-resize":3},[4,220],{"id":5,"title":6,"author":7,"body":8,"category":201,"coverImage":202,"description":203,"draft":204,"extension":205,"locale":206,"meta":207,"navigation":208,"noindex":204,"path":209,"publishedAt":210,"seo":211,"slug":212,"stem":213,"tags":214,"updatedAt":210,"__hash__":219},"blog\u002Fblog\u002Fogp-image-size-optimization.md","OGP画像のサイズ最適化ガイド｜SNSでキレイに表示される設定と作り方","Zerosend Editorial",{"type":9,"value":10,"toc":193},"minimark",[11,16,20,28,36,39,43,46,51,67,72,83,88,96,101,106,113,116,118,122,125,130,133,138,141,146,157,162,165,167,171,178,181,184,191],[12,13,15],"h2",{"id":14},"ogp画像が崩れる切れる原因はサイズ指定にある","OGP画像が「崩れる」「切れる」原因はサイズ指定にある",[17,18,19],"p",{},"SNSでURLをシェアしたとき、サムネイル画像が途中で切れていたり、極端に小さく表示されたりした経験はないでしょうか。あるいは、自分のサイトをX（旧Twitter）やFacebookに投稿したら、想定と全く違う画像が表示された、というケースもよく聞かれます。",[17,21,22,23,27],{},"こうした問題の多くは、OGP（Open Graph Protocol）画像のサイズが各プラットフォームの仕様と合っていないことが原因です。OGPはHTMLのmetaタグで設定するもので、",[24,25,26],"code",{},"og:image","に指定した画像がSNSカードのサムネイルとして使われます。しかし、画像サイズや縦横比が規定から外れていると、プラットフォーム側でトリミングされたり、表示をスキップされたりします。",[17,29,30,31,35],{},"さらに見落とされがちなのが、",[32,33,34],"strong",{},"ファイルサイズ（容量）の上限","です。画像の縦横ピクセル数が正しくても、ファイルが重すぎるとSNSのクローラーが取得に失敗し、画像なしのカードとして表示されることがあります。OGP画像の最適化は「ピクセル寸法」と「ファイル容量」の両方を意識する必要があります。",[37,38],"hr",{},[12,40,42],{"id":41},"各snsプラットフォームの推奨サイズ一覧","各SNS・プラットフォームの推奨サイズ一覧",[17,44,45],{},"OGP画像の最適なサイズはプラットフォームによって異なります。主要サービスの推奨値をまとめました。",[17,47,48],{},[32,49,50],{},"X（旧Twitter）",[52,53,54,58,61,64],"ul",{},[55,56,57],"li",{},"Summaryカード（小さいサムネイル）：144×144px以上、縦横比1:1",[55,59,60],{},"Summary Card with Large Image（横長サムネイル）：300×157px以上、縦横比2:1",[55,62,63],{},"推奨サイズ：1200×628px",[55,65,66],{},"ファイルサイズ上限：5MB（JPG\u002FPNG\u002FWebP）",[17,68,69],{},[32,70,71],{},"Facebook \u002F Meta",[52,73,74,77,80],{},[55,75,76],{},"最小サイズ：200×200px",[55,78,79],{},"推奨サイズ：1200×630px（縦横比1.91:1）",[55,81,82],{},"推奨ファイルサイズ：1MB以下",[17,84,85],{},[32,86,87],{},"LinkedIn",[52,89,90,93],{},[55,91,92],{},"推奨サイズ：1200×627px",[55,94,95],{},"ファイルサイズ上限：5MB",[17,97,98],{},[32,99,100],{},"Slack \u002F チャットツール",[52,102,103],{},[55,104,105],{},"og:imageを取得してプレビュー表示。1200×630px前後が無難",[17,107,108,109,112],{},"これらを横断的に見ると、",[32,110,111],{},"1200×630px（または1200×628px）"," という解像度がほぼすべてのサービスに対応できる事実上の標準サイズです。縦横比は約1.91:1を維持しつつ、JPEG品質を80〜85程度に抑えてファイルサイズを300KB以内に収めると、どの環境でも安定して表示されます。",[17,114,115],{},"ただし、既存の画像を流用する場合や、デザイン素材が別のアスペクト比で作られている場合は、リサイズ作業が必要になります。",[37,117],{},[12,119,121],{"id":120},"実践ogp画像を正しいサイズにリサイズする手順","実践：OGP画像を正しいサイズにリサイズする手順",[17,123,124],{},"OGP画像のリサイズ自体は難しい作業ではありませんが、いくつか気をつけたいポイントがあります。",[17,126,127],{},[32,128,129],{},"① 元画像の縦横比を確認する",[17,131,132],{},"元画像が正方形（1:1）や縦長の場合、単純にリサイズすると1200×630pxに収まらず、余白が生じたり主要な被写体が切り取られたりします。リサイズ前に、画像をどこを中心にトリミングするかを先に決めておくと作業がスムーズです。",[17,134,135],{},[32,136,137],{},"② 出力形式はJPEGかWebPを選ぶ",[17,139,140],{},"OGP画像には透過（アルファチャンネル）が不要なケースがほとんどです。PNGは品質が高い反面ファイルが重くなりやすいため、JPEGかWebPで書き出すのが現実的です。SNSのクローラーはWebPにも対応していますが、古いクローラーを考慮してJPEGを第一候補にするのが無難です。",[17,142,143],{},[32,144,145],{},"③ ツールを選ぶ：Photoshopがなくても問題ない",[17,147,148,149,156],{},"プロ向けの画像編集ソフトがなくても、ブラウザだけで完結するツールが充実しています。その一つとして ",[150,151,155],"a",{"href":152,"rel":153},"https:\u002F\u002Fzerosend.site\u002Ftools\u002Fimage-resize",[154],"nofollow","画像リサイズツール"," があります。このツールの特徴は、アップロードした画像がサーバーに送信されない点です。画像データはブラウザ内だけで処理されるため、社内資料や未公開のバナー画像を扱う場合でも、情報漏洩リスクを気にせず使えます。縦横のピクセル数を数値で直接指定できるので、1200×630pxに合わせる作業が直感的に行えます。",[17,158,159],{},[32,160,161],{},"④ リサイズ後にOGPキャッシュをクリアする",[17,163,164],{},"画像を差し替えても、SNS側のキャッシュが残っていると古い画像が表示され続けます。Xであれば「Card Validator」、Facebookであれば「Sharing Debugger」を使ってキャッシュを強制更新してください。ツールにURLを入力して「スクレイプ」または「デバッグ」を実行するだけで、新しい画像が反映されます。",[37,166],{},[12,168,170],{"id":169},"ogp画像の最適化がseoにも影響する理由","OGP画像の最適化がSEOにも影響する理由",[17,172,173,174,177],{},"OGPはSNS表示のための仕様であり、Googleの検索順位に直接影響するわけではありません。しかし、",[32,175,176],{},"間接的にSEOへのプラス効果","が期待できます。",[17,179,180],{},"SNSでシェアされたときに魅力的なサムネイルが表示されれば、クリック率が上がり、リンクが拡散されやすくなります。これがサイトへの流入増加につながり、滞在時間や被リンク獲得に好影響を与えます。また、画像ファイルのサイズを適切に絞ることはページの読み込み速度改善に直結し、Googleが重視するCore Web Vitalsの指標（特にLCPやFID）にも貢献します。",[17,182,183],{},"OGP画像を「SNS用の飾り」として後回しにしがちですが、サイトのパフォーマンスとブランド品質を底上げする実務的な施策として捉えると、優先度が変わってくるはずです。",[17,185,186,187,190],{},"まず手元にあるキービジュアルやアイキャッチ画像を1200×630px・300KB以内に整えるところから始めてみてください。専用ソフトが不要な環境であれば、前述した ",[150,188,155],{"href":152,"rel":189},[154]," のようなブラウザベースのツールを活用すると、余計な手間をかけずに作業を完結できます。",[37,192],{},{"title":194,"searchDepth":195,"depth":195,"links":196},"",2,[197,198,199,200],{"id":14,"depth":195,"text":15},{"id":41,"depth":195,"text":42},{"id":120,"depth":195,"text":121},{"id":169,"depth":195,"text":170},"tech",null,"OGP画像の推奨サイズや各SNSの仕様を解説。Twitterやog:imageが正しく表示されない原因と、ブラウザだけで完結する無料ツールを使った具体的な対処法を紹介します。",false,"md","ja",{},true,"\u002Fblog\u002Fogp-image-size-optimization","2026-05-12",{"title":6,"description":203},"ogp-image-size-optimization","blog\u002Fogp-image-size-optimization",[215,216,217,218],"画像","リサイズ","Web制作","SEO","mIit_bdGiULblUiC2FeigxS7qW8uxuS9f-pKvrNhJKM",{"id":221,"title":222,"author":7,"body":223,"category":201,"coverImage":202,"description":430,"draft":204,"extension":205,"locale":206,"meta":431,"navigation":208,"noindex":204,"path":432,"publishedAt":433,"seo":434,"slug":435,"stem":436,"tags":437,"updatedAt":433,"__hash__":439},"blog\u002Fblog\u002Fimage-resize-intro.md","画像リサイズをブラウザ内で — \u002Ftools\u002Fimage-resize の思想と使い方",{"type":9,"value":224,"toc":419},[225,228,235,238,245,252,255,277,281,319,322,329,357,360,363,366,369,375,381,387,393,396],[17,226,227],{},"SNS に投稿したい、社内 Wiki に貼りたい、EC サイトの商品画像に使いたい、メールに添付したい。用途ごとに必要な画像サイズは違います。スマホで撮った 4000×3000 ピクセルの写真をそのままアップすると、受け側サーバーで勝手に縮小されたり、表示が重くなったりします。",[17,229,230,234],{},[150,231,233],{"href":232},"\u002Ftools\u002Fimage-resize","Zerosend の画像リサイズツール"," は、この「用途に合う寸法に先に揃えておきたい」需要をブラウザ内で完結させます。",[12,236,237],{"id":237},"なぜブラウザ内でリサイズするのか",[17,239,240,241,244],{},"画像は、送信前に必要な解像度まで落としておくのが基本です。受け側サーバーの自動縮小に任せると、圧縮アルゴリズムを自分で選べず、結果も見えません。何より、",[32,242,243],{},"元の高解像度がサーバー側に残ります","。",[17,246,247,248,251],{},"顔写真、社員証、内装写真、診断書のスキャン。個人情報が含まれる画像を、ブラウザの「縮小してアップロード」機能付きサービスに投げることは、結果的に",[32,249,250],{},"原寸画像をそのままアップロードしている","のと同じです。Zerosend では、リサイズ処理そのものをあなたの端末で行うことで、アップロードする画像が本当に縮小済みであることを保証します。",[12,253,254],{"id":254},"使い方",[256,257,258,265,268,271,274],"ol",{},[55,259,260,264],{},[150,261,262],{"href":232},[24,263,232],{}," を開く",[55,266,267],{},"画像をドラッグ&ドロップ (複数ファイル対応)",[55,269,270],{},"目標サイズを指定 — 「幅」「高さ」「長辺」「短辺」のいずれかを固定",[55,272,273],{},"「リサイズを開始する」をクリック",[55,275,276],{},"結果を ZIP でまとめてダウンロード",[278,279,280],"h3",{"id":280},"用途別の推奨サイズ",[52,282,283,289,295,301,307,313],{},[55,284,285,288],{},[32,286,287],{},"X \u002F Twitter",": 長辺 1600px",[55,290,291,294],{},[32,292,293],{},"Instagram",": 正方形 1080px",[55,296,297,300],{},[32,298,299],{},"LinkedIn \u002F Facebook",": 長辺 1200px",[55,302,303,306],{},[32,304,305],{},"ブログ本文",": 幅 800〜1200px",[55,308,309,312],{},[32,310,311],{},"メールの添付",": 長辺 1024px 程度 (画質維持しつつ 500KB 以下に収まりやすい)",[55,314,315,318],{},[32,316,317],{},"ECサイトのサムネ",": 幅 400〜600px",[12,320,321],{"id":321},"仕組み",[17,323,324,325,328],{},"画像リサイズは、Canvas API の ",[24,326,327],{},"drawImage"," を使ったブラウザ標準のバイキュービック補間で行っています。外部ライブラリの呼び出しも、サーバーへの問い合わせもありません。",[52,330,331,338,345,351],{},[55,332,333,334,337],{},"画像を ",[24,335,336],{},"\u003Cimg>"," 要素として読み込む",[55,339,340,341,344],{},"目標サイズの ",[24,342,343],{},"\u003Ccanvas>"," を作成",[55,346,347,350],{},[24,348,349],{},"ctx.drawImage(img, 0, 0, targetW, targetH)"," で描画",[55,352,353,356],{},[24,354,355],{},"canvas.toBlob()"," で出力形式 (JPEG \u002F PNG \u002F WebP) を指定して Blob に",[17,358,359],{},"一括処理は Promise.all ではなく順次実行しているため、数十枚でもメモリを圧迫しません。",[12,361,362],{"id":362},"縦横比の維持について",[17,364,365],{},"リサイズで気をつけるべき最大のポイントは「アスペクト比の崩れ」です。幅だけを変えて高さはそのままにすると、人物が横に伸びたり商品が歪んだりします。本ツールでは既定で縦横比を維持するため、「幅を指定する」だけで高さは自動計算されます。強制的にトリミングするモードも選べるので、SNS の正方形サムネイルを作る際にも対応できます。",[12,367,368],{"id":368},"よくある質問",[17,370,371,374],{},[32,372,373],{},"Q. 縦横比は保持されますか？","\nA. 既定で保持されます。「幅を合わせる」を選べば高さは自動で計算されます。",[17,376,377,380],{},[32,378,379],{},"Q. EXIF (撮影情報) は？","\nA. リサイズ時に落ちます。プライバシー保護の観点ではむしろ利点です。",[17,382,383,386],{},[32,384,385],{},"Q. 拡大もできますか？","\nA. できますが推奨しません。拡大は情報を増やせないため、AI 超解像を使わない限り画質は改善しません。",[17,388,389,392],{},[32,390,391],{},"Q. 複数ファイルを一括処理できますか？","\nA. はい。ドラッグ&ドロップで複数ファイルを投入すると、同じ設定で一括リサイズして ZIP でまとめてダウンロードできます。",[12,394,395],{"id":395},"関連ツール",[52,397,398,405,412],{},[55,399,400,404],{},[150,401,403],{"href":402},"\u002Ftools\u002Fimage-compress","画像圧縮"," — リサイズ後にさらに軽くしたいときに",[55,406,407,411],{},[150,408,410],{"href":409},"\u002Ftools\u002Fimage-convert","画像形式変換"," — WebP \u002F JPEG \u002F PNG の変換",[55,413,414,418],{},[150,415,417],{"href":416},"\u002Ftools\u002Fimage-edit","画像編集"," — 切り抜き・回転・反転",{"title":194,"searchDepth":195,"depth":195,"links":420},[421,422,426,427,428,429],{"id":237,"depth":195,"text":237},{"id":254,"depth":195,"text":254,"children":423},[424],{"id":280,"depth":425,"text":280},3,{"id":321,"depth":195,"text":321},{"id":362,"depth":195,"text":362},{"id":368,"depth":195,"text":368},{"id":395,"depth":195,"text":395},"Zerosend の画像リサイズツールは、画像をサーバーに送らず端末内で寸法変更します。用途別の推奨サイズ、一括処理、品質を落とさないリサイズのコツを Zerosend 編集部が解説。",{},"\u002Fblog\u002Fimage-resize-intro","2026-04-20",{"title":222,"description":430},"image-resize-intro","blog\u002Fimage-resize-intro",[215,216,438],"ツール","_Uhop01N2UVvIiAaq5jlsmlRm_wNoZwYVJzFkekar6Y",1778757807501]