[{"data":1,"prerenderedAt":3853},["ShallowReactive",2],{"blog-tag-ja-web-design":3},[4,483,1016,1437,1775,2128,2289,2483,3052],{"id":5,"title":6,"author":7,"body":8,"category":464,"coverImage":465,"description":466,"draft":467,"extension":468,"locale":469,"meta":470,"navigation":471,"noindex":467,"path":472,"publishedAt":473,"seo":474,"slug":475,"stem":476,"tags":477,"updatedAt":473,"__hash__":482},"blog\u002Fblog\u002Fvideo-format-mp4-webm-mov.md","動画形式MP4・WebM・MOVの違いと変換方法を徹底解説","Zerosend Editorial",{"type":9,"value":10,"toc":448},"minimark",[11,15,20,23,28,31,35,51,55,58,62,181,184,187,190,197,213,219,225,227,231,234,339,342,344,348,355,360,379,382,389,391,394,400,406,412,414,417,445],[12,13,14],"p",{},"動画ファイルを扱っていると「MP4で送ってほしい」「WebMに変換できますか」「MOVが再生できない」といった場面に直面する。形式ごとに何が違うのか、どう使い分ければいいのかを整理しておくと、こうした問題の大半は事前に回避できる。",[16,17,19],"h2",{"id":18},"mp4webmmovの基本的な違い","MP4・WebM・MOVの基本的な違い",[12,21,22],{},"動画ファイルは「コンテナ形式」と「コーデック」の組み合わせで成り立っている。コンテナは映像・音声・字幕などのデータをまとめる入れ物であり、MP4・WebM・MOVはいずれもコンテナ形式の名称だ。",[24,25,27],"h3",{"id":26},"mp4mp4","MP4（.mp4）",[12,29,30],{},"正式名称はMPEG-4 Part 14。現在もっとも広く普及しているコンテナ形式で、Windows・macOS・iOS・Android・各種ブラウザのすべてで再生できる。映像コーデックにはH.264（AVC）またはH.265（HEVC）が使われることが多い。汎用性が最も高く、「迷ったらMP4」という判断が多くの場面で通用する。",[24,32,34],{"id":33},"webmwebm","WebM（.webm）",[12,36,37,38,42,43,50],{},"Googleが主導してオープンソースで開発したコンテナ形式。映像にVP8\u002FVP9\u002FAV1、音声にVorbis\u002FOpusを使用する。ライセンス料が不要なため、Web上の動画配信に向いている。HTML5の ",[39,40,41],"code",{},"\u003Cvideo>"," タグでの利用が典型的なユースケースであり、",[44,45,49],"a",{"href":46,"rel":47},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FMedia\u002FFormats\u002FContainers#webm",[48],"nofollow","MDNのWebM解説","に詳しい情報がある。ただし、QuickTimeやWindows Media Playerなどデスクトップアプリでは再生できないケースがある。",[24,52,54],{"id":53},"movmov","MOV（.mov）",[12,56,57],{},"AppleのQuickTimeが定めたコンテナ形式。macOSやiPhoneでの録画・編集には標準的に使われる。Final Cut ProやiMovieとの親和性が高く、プロの映像制作現場でも利用される。一方、Windowsの標準環境ではコーデックを別途インストールしないと再生できないことがあり、配布・共有には不向きな場合がある。",[24,59,61],{"id":60},"_3形式の比較表","3形式の比較表",[63,64,65,84],"table",{},[66,67,68],"thead",{},[69,70,71,75,78,81],"tr",{},[72,73,74],"th",{},"項目",[72,76,77],{},"MP4",[72,79,80],{},"WebM",[72,82,83],{},"MOV",[85,86,87,102,116,129,141,155,167],"tbody",{},[69,88,89,93,96,99],{},[90,91,92],"td",{},"主な用途",[90,94,95],{},"汎用・SNS・メール添付",[90,97,98],{},"Web配信・HTML5動画",[90,100,101],{},"Apple製品・映像編集",[69,103,104,107,110,113],{},[90,105,106],{},"ブラウザ再生",[90,108,109],{},"◎ 全主要ブラウザ対応",[90,111,112],{},"○ Chrome・Firefox等",[90,114,115],{},"△ Safari中心",[69,117,118,121,124,127],{},[90,119,120],{},"Windows再生",[90,122,123],{},"◎",[90,125,126],{},"△",[90,128,126],{},[69,130,131,134,136,139],{},[90,132,133],{},"macOS再生",[90,135,123],{},[90,137,138],{},"○",[90,140,123],{},[69,142,143,146,149,152],{},[90,144,145],{},"ファイルサイズ",[90,147,148],{},"中",[90,150,151],{},"小〜中",[90,153,154],{},"中〜大",[69,156,157,160,163,165],{},[90,158,159],{},"品質",[90,161,162],{},"高",[90,164,162],{},[90,166,162],{},[69,168,169,172,175,178],{},[90,170,171],{},"ライセンス",[90,173,174],{},"特許あり",[90,176,177],{},"完全オープン",[90,179,180],{},"Apple独自",[182,183],"hr",{},[16,185,186],{"id":186},"用途別の使い分け",[12,188,189],{},"用途に応じて形式を選ぶ判断基準を示す。",[12,191,192,196],{},[193,194,195],"strong",{},"SNSへの投稿・メール添付","：MP4一択。YouTube・Instagram・X（旧Twitter）はいずれもMP4を推奨しており、H.264コーデックとの組み合わせが最も互換性が高い。",[12,198,199,202,203,206,207,212],{},[193,200,201],{},"Webサイトへの埋め込み","：WebMを優先し、非対応ブラウザ向けのフォールバックとしてMP4も用意するのが定石。",[39,204,205],{},"\u003Csource>"," タグで複数形式を指定することで、ブラウザが対応形式を自動選択する。",[44,208,211],{"href":209,"rel":210},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml52\u002Fsemantics-embedded-content.html#the-source-element",[48],"W3Cのメディアタイプ仕様","も参考になる。",[12,214,215,218],{},[193,216,217],{},"Apple製品での編集・保存","：MOVのまま扱うのが効率的。ただし他者に共有する段階でMP4に変換するのが無難。",[12,220,221,224],{},[193,222,223],{},"長期保存・アーカイブ","：MP4（H.264）が最も再生環境を選ばない。H.265は圧縮率が高いが、再生できない古い機器もある点に注意。",[182,226],{},[16,228,230],{"id":229},"主要ツールの比較形式変換をどこで行うか","主要ツールの比較：形式変換をどこで行うか",[12,232,233],{},"動画の形式変換ツールはいくつかのカテゴリに分かれる。",[63,235,236,255],{},[66,237,238],{},[69,239,240,243,246,249,252],{},[72,241,242],{},"ツール",[72,244,245],{},"処理場所",[72,247,248],{},"費用",[72,250,251],{},"ファイルサイズ上限",[72,253,254],{},"プライバシー",[85,256,257,274,287,304,318],{},[69,258,259,262,265,268,271],{},[90,260,261],{},"Handbrake（デスクトップ）",[90,263,264],{},"ローカル",[90,266,267],{},"無料",[90,269,270],{},"制限なし",[90,272,273],{},"◎ サーバー送信なし",[69,275,276,279,281,283,285],{},[90,277,278],{},"ffmpeg（CLI）",[90,280,264],{},[90,282,267],{},[90,284,270],{},[90,286,273],{},[69,288,289,292,295,298,301],{},[90,290,291],{},"Cloudconvert",[90,293,294],{},"サーバー",[90,296,297],{},"無料枠あり",[90,299,300],{},"1GB（無料枠）",[90,302,303],{},"△ サーバー処理",[69,305,306,309,311,313,316],{},[90,307,308],{},"Convertio",[90,310,294],{},[90,312,297],{},[90,314,315],{},"100MB（無料枠）",[90,317,303],{},[69,319,320,328,331,334,337],{},[90,321,322,327],{},[44,323,326],{"href":324,"rel":325},"https:\u002F\u002Fzerosend.site\u002Ftools\u002Fvideo-convert",[48],"動画形式変換ツール","（zerosend）",[90,329,330],{},"ブラウザ内",[90,332,333],{},"完全無料",[90,335,336],{},"ブラウザ依存",[90,338,273],{},[12,340,341],{},"Cloudconvertや同種のオンラインサービスは手軽だが、ファイルがサーバーにアップロードされる。社内資料・個人情報が含まれる動画を扱う場合、このリスクは無視できない。",[182,343],{},[16,345,347],{"id":346},"ブラウザだけで変換する方法zerosendの使い方","ブラウザだけで変換する方法：zerosendの使い方",[12,349,350,351,354],{},"zerosendの",[44,352,326],{"href":324,"rel":353},[48],"は、ffmpeg.wasmをブラウザ内で実行することでサーバーへのファイル送信を行わずに変換処理を完結させている。DevToolsのNetworkタブを開いた状態で変換を実行しても、動画ファイルがサーバーに送信されないことを自分で確認できる。",[12,356,357],{},[193,358,359],{},"操作手順",[361,362,363,370,373,376],"ol",{},[364,365,366,369],"li",{},[44,367,326],{"href":324,"rel":368},[48],"をブラウザで開く",[364,371,372],{},"変換したいファイル（MP4・MOV・WebM・AVI等）をドラッグ＆ドロップ、またはクリックして選択する",[364,374,375],{},"出力形式（MP4・WebM・MOV等）を選択する",[364,377,378],{},"「変換」ボタンをクリックし、処理完了後にファイルをダウンロードする",[12,380,381],{},"初回はffmpeg.wasmの読み込みに数秒かかるが、以降はService Workerによってキャッシュされるため、オフライン環境でも動作する。アカウント登録・インストール不要で即座に使い始められる。",[12,383,384],{},[385,386],"img",{"alt":387,"src":388},"スクショ: zerosendの動画変換画面（ファイル選択後、形式選択ドロップダウンが表示されている状態）","TODO-screenshot",[182,390],{},[16,392,393],{"id":393},"変換時によくある失敗と対処法",[12,395,396,399],{},[193,397,398],{},"音声が消える","：出力形式とコーデックの組み合わせが不適切な場合に起きる。特にWebM変換時はVorbisまたはOpusが対応コーデックであり、AACはそのままでは使えない。ツール側で自動変換される場合も多いが、無音になった場合は別の変換オプションを試す。",[12,401,402,405],{},[193,403,404],{},"ファイルサイズが想定より大きい","：MOV→MP4変換では、コーデック変換（トランスコード）が伴う場合とコンテナの切り替えだけで済む場合（ストリームコピー）がある。品質設定が高すぎると元ファイルより大きくなることがある。CRF値や品質スライダーを調整する。",[12,407,408,411],{},[193,409,410],{},"変換が遅い","：ブラウザ内処理はCPUに依存する。長尺・高解像度の動画は数分かかることがある。タブをアクティブのまま待機するとJavaScriptのスロットリングを避けられる。",[182,413],{},[16,415,416],{"id":416},"まとめ",[418,419,420,425,430,435,438],"ul",{},[364,421,422,424],{},[193,423,77],{},"は最も汎用性が高く、用途が不明な場合の第一選択肢",[364,426,427,429],{},[193,428,80],{},"はWeb配信・HTML5動画向けで、ライセンスフリーのオープン形式",[364,431,432,434],{},[193,433,83],{},"はAppleエコシステムでの編集に最適だが、配布にはMP4変換を検討する",[364,436,437],{},"機密性の高いファイルを変換する場合は、サーバーへのアップロードが発生しないローカル処理ツールを選ぶ",[364,439,440,441,444],{},"ブラウザ完結で手軽にすませるなら",[44,442,326],{"href":324,"rel":443},[48],"が選択肢の一つになる",[12,446,447],{},"形式の特性を理解した上で目的に合ったツールを選べば、変換ミスや互換性の問題を大幅に減らせる。",{"title":449,"searchDepth":450,"depth":450,"links":451},"",2,[452,459,460,461,462,463],{"id":18,"depth":450,"text":19,"children":453},[454,456,457,458],{"id":26,"depth":455,"text":27},3,{"id":33,"depth":455,"text":34},{"id":53,"depth":455,"text":54},{"id":60,"depth":455,"text":61},{"id":186,"depth":450,"text":186},{"id":229,"depth":450,"text":230},{"id":346,"depth":450,"text":347},{"id":393,"depth":450,"text":393},{"id":416,"depth":450,"text":416},"tech",null,"MP4・WebM・MOVの違いを比較し、用途別の使い分けと変換方法を解説。ブラウザだけで完結する無料ツールの使い方も紹介します。",false,"md","ja",{},true,"\u002Fblog\u002Fvideo-format-mp4-webm-mov","2026-06-03",{"title":6,"description":466},"video-format-mp4-webm-mov","blog\u002Fvideo-format-mp4-webm-mov",[478,479,480,481],"動画","変換","Web制作","技術解説","BfecnFS13XEDyo2krdlJn1iEtf63oJ9nOasylNIyNUU",{"id":484,"title":485,"author":7,"body":486,"category":464,"coverImage":465,"description":1005,"draft":467,"extension":468,"locale":469,"meta":1006,"navigation":471,"noindex":467,"path":1007,"publishedAt":1008,"seo":1009,"slug":1010,"stem":1011,"tags":1012,"updatedAt":1008,"__hash__":1015},"blog\u002Fblog\u002Ffavicon-svg-png-ico-guide.md","ファビコンのSVG・PNG・ICO違いと正しい設定方法を徹底解説",{"type":9,"value":487,"toc":989},[488,492,495,502,504,508,512,518,532,536,539,577,587,591,608,615,622,624,627,630,816,831,838,843,845,848,852,855,859,870,879,884,888,898,901,903,906,912,925,934,944,946,948,955,975,985],[16,489,491],{"id":490},"ファビコンとは何かなぜ形式選びが重要なのか","ファビコンとは何か、なぜ形式選びが重要なのか",[12,493,494],{},"ファビコン（favicon）はブラウザのタブ、ブックマーク一覧、スマートフォンのホーム画面ショートカットなど、あらゆる場面でサイトを識別するための小さなアイコンだ。見た目上は小さな要素だが、形式の選び方を誤るとブラウザによって表示が崩れたり、高解像度ディスプレイでぼやけたりする。",[12,496,497,498,501],{},"ファビコンに使われる主な形式は ",[193,499,500],{},"ICO・PNG・SVG"," の3種類で、それぞれ特性がまったく異なる。どれか一つだけを置けば済む、という状況は現代のWebでは通用しない。",[182,503],{},[16,505,507],{"id":506},"icopngsvg-それぞれの違い","ICO・PNG・SVG それぞれの違い",[24,509,511],{"id":510},"ico形式後方互換性のための保険","ICO形式：後方互換性のための「保険」",[12,513,514,517],{},[39,515,516],{},".ico"," はもともとWindowsのアイコン用形式で、1ファイルに複数の解像度（16×16, 32×32, 48×48など）を格納できる。Internet ExplorerはICOしか認識しなかった歴史的経緯から、長らくファビコンのデファクト標準だった。",[12,519,520,521,524,525,531],{},"現在のChromeやFirefox、Safariも ",[39,522,523],{},"favicon.ico"," をルートディレクトリに置けば認識するため、",[193,526,527,528,530],{},"「",[39,529,523],{}," をとりあえず置く」という慣習が今も続いている","。ただしベクター化できないため、拡大時に劣化する。",[24,533,535],{"id":534},"png形式現在の主流","PNG形式：現在の主流",[12,537,538],{},"PNGはアルファチャンネル（透明）をサポートし、色再現性も高い。モダンブラウザはすべてPNGのファビコンに対応しており、以下のサイズが実務上の標準とされている。",[63,540,541,551],{},[66,542,543],{},[69,544,545,548],{},[72,546,547],{},"用途",[72,549,550],{},"サイズ",[85,552,553,561,569],{},[69,554,555,558],{},[90,556,557],{},"ブラウザタブ（汎用）",[90,559,560],{},"32×32 px",[69,562,563,566],{},[90,564,565],{},"Apple Touch Icon（iOSホーム画面）",[90,567,568],{},"180×180 px",[69,570,571,574],{},[90,572,573],{},"Android \u002F PWAアイコン",[90,575,576],{},"192×192 px, 512×512 px",[12,578,579,582,583,586],{},[39,580,581],{},"\u003Clink rel=\"icon\" type=\"image\u002Fpng\" sizes=\"32x32\" href=\"\u002Ffavicon-32x32.png\">"," のように ",[39,584,585],{},"sizes"," 属性を明示することで、ブラウザが適切な解像度を選択できる。",[24,588,590],{"id":589},"svg形式将来に向けたスケーラブルな選択","SVG形式：将来に向けた「スケーラブル」な選択",[12,592,593,594,597,598,601,602,607],{},"SVGはXMLベースのベクター形式で、どんな解像度でも劣化しない。ChromeやFirefox、Edgeはすでに ",[39,595,596],{},"rel=\"icon\""," でのSVGを正式サポートしており、",[39,599,600],{},"\u003Clink rel=\"icon\" type=\"image\u002Fsvg+xml\" href=\"\u002Ffavicon.svg\">"," と記述するだけで有効化できる（",[44,603,606],{"href":604,"rel":605},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FHTML\u002FAttributes\u002Frel#icon",[48],"MDN: rel=icon","）。",[12,609,610,611,614],{},"ただし",[193,612,613],{},"SafariはSVGファビコンに対応していない","（2025年時点）。そのため現時点でSVGだけに依存するのはリスクがあり、ICOやPNGとの併用が推奨される。",[12,616,617,618,621],{},"また、SVGにはダークモード対応という強みもある。CSSの ",[39,619,620],{},"prefers-color-scheme"," メディアクエリをSVG内に埋め込むことで、OSのダークモード設定に応じてアイコンの色を自動切替できる。",[182,623],{},[16,625,626],{"id":626},"推奨される現実的な設定パターン",[12,628,629],{},"形式ごとの特性を踏まえると、現代のWebサイトに最低限必要なファビコン構成は以下のとおりだ。",[631,632,636],"pre",{"className":633,"code":634,"language":635,"meta":449,"style":449},"language-html shiki shiki-themes github-light github-dark","\u003C!-- ICO：後方互換（ルートに置くだけでブラウザが自動検出） -->\n\u003C!-- favicon.ico は \u003Clink> 不要でルートに置くと自動認識 -->\n\n\u003C!-- PNG：モダンブラウザ・各種デバイス向け -->\n\u003Clink rel=\"icon\" type=\"image\u002Fpng\" sizes=\"32x32\" href=\"\u002Ffavicon-32x32.png\">\n\u003Clink rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"\u002Fapple-touch-icon.png\">\n\n\u003C!-- SVG：Chrome \u002F Firefox \u002F Edge 向け（将来性） -->\n\u003Clink rel=\"icon\" type=\"image\u002Fsvg+xml\" href=\"\u002Ffavicon.svg\">\n\n\u003C!-- PWA \u002F Android向け -->\n\u003Clink rel=\"manifest\" href=\"\u002Fsite.webmanifest\">\n","html",[39,637,638,647,652,657,663,712,742,747,753,782,787,793],{"__ignoreMap":449},[639,640,643],"span",{"class":641,"line":642},"line",1,[639,644,646],{"class":645},"sJ8bj","\u003C!-- ICO：後方互換（ルートに置くだけでブラウザが自動検出） -->\n",[639,648,649],{"class":641,"line":450},[639,650,651],{"class":645},"\u003C!-- favicon.ico は \u003Clink> 不要でルートに置くと自動認識 -->\n",[639,653,654],{"class":641,"line":455},[639,655,656],{"emptyLinePlaceholder":471},"\n",[639,658,660],{"class":641,"line":659},4,[639,661,662],{"class":645},"\u003C!-- PNG：モダンブラウザ・各種デバイス向け -->\n",[639,664,666,670,674,678,681,685,688,690,693,696,698,701,704,706,709],{"class":641,"line":665},5,[639,667,669],{"class":668},"sVt8B","\u003C",[639,671,673],{"class":672},"s9eBZ","link",[639,675,677],{"class":676},"sScJk"," rel",[639,679,680],{"class":668},"=",[639,682,684],{"class":683},"sZZnC","\"icon\"",[639,686,687],{"class":676}," type",[639,689,680],{"class":668},[639,691,692],{"class":683},"\"image\u002Fpng\"",[639,694,695],{"class":676}," sizes",[639,697,680],{"class":668},[639,699,700],{"class":683},"\"32x32\"",[639,702,703],{"class":676}," href",[639,705,680],{"class":668},[639,707,708],{"class":683},"\"\u002Ffavicon-32x32.png\"",[639,710,711],{"class":668},">\n",[639,713,715,717,719,721,723,726,728,730,733,735,737,740],{"class":641,"line":714},6,[639,716,669],{"class":668},[639,718,673],{"class":672},[639,720,677],{"class":676},[639,722,680],{"class":668},[639,724,725],{"class":683},"\"apple-touch-icon\"",[639,727,695],{"class":676},[639,729,680],{"class":668},[639,731,732],{"class":683},"\"180x180\"",[639,734,703],{"class":676},[639,736,680],{"class":668},[639,738,739],{"class":683},"\"\u002Fapple-touch-icon.png\"",[639,741,711],{"class":668},[639,743,745],{"class":641,"line":744},7,[639,746,656],{"emptyLinePlaceholder":471},[639,748,750],{"class":641,"line":749},8,[639,751,752],{"class":645},"\u003C!-- SVG：Chrome \u002F Firefox \u002F Edge 向け（将来性） -->\n",[639,754,756,758,760,762,764,766,768,770,773,775,777,780],{"class":641,"line":755},9,[639,757,669],{"class":668},[639,759,673],{"class":672},[639,761,677],{"class":676},[639,763,680],{"class":668},[639,765,684],{"class":683},[639,767,687],{"class":676},[639,769,680],{"class":668},[639,771,772],{"class":683},"\"image\u002Fsvg+xml\"",[639,774,703],{"class":676},[639,776,680],{"class":668},[639,778,779],{"class":683},"\"\u002Ffavicon.svg\"",[639,781,711],{"class":668},[639,783,785],{"class":641,"line":784},10,[639,786,656],{"emptyLinePlaceholder":471},[639,788,790],{"class":641,"line":789},11,[639,791,792],{"class":645},"\u003C!-- PWA \u002F Android向け -->\n",[639,794,796,798,800,802,804,807,809,811,814],{"class":641,"line":795},12,[639,797,669],{"class":668},[639,799,673],{"class":672},[639,801,677],{"class":676},[639,803,680],{"class":668},[639,805,806],{"class":683},"\"manifest\"",[639,808,703],{"class":676},[639,810,680],{"class":668},[639,812,813],{"class":683},"\"\u002Fsite.webmanifest\"",[639,815,711],{"class":668},[12,817,818,821,822,825,826,607],{},[39,819,820],{},"site.webmanifest"," の ",[39,823,824],{},"icons"," 配列に192×192と512×512のPNGを登録しておくと、Androidホーム画面への追加やPWAインストール時に適切なアイコンが表示される（",[44,827,830],{"href":828,"rel":829},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fappmanifest\u002F#icons-member",[48],"Web App Manifest仕様 - W3C",[12,832,833,834,837],{},"ポイントは「SVGを優先しつつICOとPNGを保険として残す」構成にすることだ。ブラウザは ",[39,835,836],{},"\u003Clink>"," タグを上から評価し、サポートしている形式を自動で選ぶため、複数形式を並べても問題ない。",[12,839,840],{},[385,841],{"alt":842,"src":388},"スクショ: ブラウザのタブにファビコンが表示されているようす",[182,844],{},[16,846,847],{"id":847},"実際にファビコンを用意する方法",[24,849,851],{"id":850},"手順1元画像を用意する","手順1：元画像を用意する",[12,853,854],{},"最低でも512×512px以上の正方形画像（PNGまたはSVG）を用意する。これを元に各サイズへリサイズ・変換する。ロゴや既存のアイコン素材をそのまま使うことが多い。",[24,856,858],{"id":857},"手順2必要なサイズ形式に変換する","手順2：必要なサイズ・形式に変換する",[12,860,861,862,865,866,869],{},"複数サイズのICO、各種PNG、SVGを手作業で揃えるのは手間がかかる。オンラインツールを使うのが現実的で、代表的なものに ",[193,863,864],{},"RealFaviconGenerator"," や ",[193,867,868],{},"Favicon.io"," がある。どちらも無料で使えるが、アップロードした画像がサーバーに送信・保存される点は留意が必要だ。",[12,871,872,873,878],{},"プライバシーを重視する場合、または社内ロゴや非公開素材を扱う場合は、ファイルがサーバーへ送信されないツールが安心だ。",[44,874,877],{"href":875,"rel":876},"https:\u002F\u002Fzerosend.site\u002Ftools\u002Ffavicon-generator",[48],"ファビコン生成ツール"," はブラウザ内だけで処理が完結し、アップロードした画像が外部サーバーに送信されない設計になっている。ICO・PNG・SVGの各形式を一括で出力できるため、上記の推奨構成を一度に揃えられる。",[12,880,881],{},[385,882],{"alt":883,"src":388},"スクショ: ファビコン生成ツールの操作画面",[24,885,887],{"id":886},"手順3ファイルを配置してhtmlに記述する","手順3：ファイルを配置してHTMLに記述する",[12,889,890,891,893,894,897],{},"生成したファイルをWebサーバーのルートディレクトリ（または任意のパス）に配置し、前節で示した ",[39,892,836],{}," タグを ",[39,895,896],{},"\u003Chead>"," 内に記述すれば完了だ。",[12,899,900],{},"配置後は複数のブラウザとデバイスで表示を確認する。Chromeの開発者ツール（DevTools）のApplicationタブにある「Manifest」セクションでPWA用アイコンの認識状況も確認できる。",[182,902],{},[16,904,905],{"id":905},"よくある失敗と注意点",[12,907,908,911],{},[193,909,910],{},"キャッシュが残って更新されない","：ファビコンはブラウザに強くキャッシュされる。変更後に反映されない場合は、ファイル名にバージョン番号やクエリパラメータを付与するか、スーパーリロード（Ctrl+Shift+R）で確認する。",[12,913,914,917,918,920,921,924],{},[193,915,916],{},"サイズ指定を省略する","：",[39,919,585],{}," 属性を省略すると、ブラウザが適切なファビコンを選択できず、低解像度のアイコンが拡大表示される場合がある。必ず ",[39,922,923],{},"sizes=\"32x32\""," のように明示する。",[12,926,927,930,931,933],{},[193,928,929],{},"ICOファイルを省略する","：古いブラウザや一部のRSSリーダー、ブックマーク管理ツールはICOしか認識しない。",[39,932,523],{}," をルートに置くことで余計なトラブルを防げる。",[12,935,936,939,940,943],{},[193,937,938],{},"apple-touch-icon を忘れる","：iOSでホーム画面に追加した際に使われるアイコンは ",[39,941,942],{},"apple-touch-icon"," で指定する。これを省略すると、iOSがサイトのスクリーンショットをアイコン代わりに使うため、見栄えが悪くなる。",[182,945],{},[16,947,416],{"id":416},[12,949,950,951,954],{},"ファビコンの形式選びは「どれか一つを選ぶ」問題ではなく、",[193,952,953],{},"それぞれの形式の役割を理解して組み合わせる","ことがポイントだ。",[418,956,957,963,969],{},[364,958,959,962],{},[193,960,961],{},"ICO","：後方互換のためルートに置く",[364,964,965,968],{},[193,966,967],{},"PNG","：現在の主力。32×32、180×180、192×192、512×512を用意",[364,970,971,974],{},[193,972,973],{},"SVG","：ダークモード対応と将来の主流候補。現時点はPNG・ICOと併用",[12,976,977,978,981,982,984],{},"各形式を手動で揃えるのが面倒な場合は、ブラウザ内で完結する ",[44,979,877],{"href":875,"rel":980},[48]," のようなツールを活用して一括生成するのが効率的だ。形式の組み合わせと ",[39,983,836],{}," タグの記述を正しく設定すれば、あらゆるデバイス・ブラウザで意図通りのファビコンが表示される。",[986,987,988],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":449,"searchDepth":450,"depth":450,"links":990},[991,992,997,998,1003,1004],{"id":490,"depth":450,"text":491},{"id":506,"depth":450,"text":507,"children":993},[994,995,996],{"id":510,"depth":455,"text":511},{"id":534,"depth":455,"text":535},{"id":589,"depth":455,"text":590},{"id":626,"depth":450,"text":626},{"id":847,"depth":450,"text":847,"children":999},[1000,1001,1002],{"id":850,"depth":455,"text":851},{"id":857,"depth":455,"text":858},{"id":886,"depth":455,"text":887},{"id":905,"depth":450,"text":905},{"id":416,"depth":450,"text":416},"ファビコンの形式（SVG・PNG・ICO）ごとの違いと、ブラウザ対応・設定方法をWeb担当者向けに解説。ブラウザ内完結の無料ツールも紹介。",{},"\u002Fblog\u002Ffavicon-svg-png-ico-guide","2026-05-28",{"title":485,"description":1005},"favicon-svg-png-ico-guide","blog\u002Ffavicon-svg-png-ico-guide",[1013,480,1014,481],"ファビコン","SEO","ah6-GegUDt51_pojAOyzLzrF3LNnhaO7JPdUWvu8L9M",{"id":1017,"title":1018,"author":7,"body":1019,"category":464,"coverImage":465,"description":1428,"draft":467,"extension":468,"locale":469,"meta":1429,"navigation":471,"noindex":467,"path":1430,"publishedAt":1431,"seo":1432,"slug":1433,"stem":1434,"tags":1435,"updatedAt":1431,"__hash__":1436},"blog\u002Fblog\u002Fgif-vs-video-web-usage.md","GIFと動画の違いとウェブでの使い分け完全ガイド",{"type":9,"value":1020,"toc":1411},[1021,1024,1027,1029,1033,1037,1044,1047,1064,1068,1075,1084,1113,1115,1119,1123,1146,1150,1170,1173,1300,1302,1306,1309,1312,1315,1318,1326,1329,1343,1346,1348,1351,1357,1373,1379,1385,1387,1389,1392,1408],[12,1022,1023],{},"Webサイトの制作や運用をしていると、「この動きのある素材、GIFで使うべきか、動画で使うべきか」と迷う場面がある。どちらも「動く」という点では同じに見えるが、仕組みもファイルサイズも、ブラウザでの扱われ方も大きく異なる。選択を誤ると、ページの読み込みが遅くなったり、逆に意図した表示ができなかったりする。",[12,1025,1026],{},"この記事では、GIFと動画の技術的な差異を整理したうえで、ウェブ制作・ビジネス用途でどちらを選ぶべきかの判断基準を具体的に示す。",[182,1028],{},[16,1030,1032],{"id":1031},"gifと動画mp4webmの技術的な違い","GIFと動画（MP4\u002FWebM）の技術的な違い",[24,1034,1036],{"id":1035},"gifとは何か","GIFとは何か",[12,1038,1039,1040,1043],{},"GIF（Graphics Interchange Format）は1987年にCompServeが策定した画像フォーマットで、最大256色までの静止画または複数フレームのアニメーションを1ファイルに格納できる。仕様上、動画コーデックではなく",[193,1041,1042],{},"画像フォーマット","として定義されており、音声トラックを持てない。",[12,1045,1046],{},"ファイルの特性として以下が挙げられる。",[418,1048,1049,1052,1055,1061],{},[364,1050,1051],{},"色深度が8ビット（最大256色）に制限される",[364,1053,1054],{},"フレームを並べる構造のため、圧縮効率が低い",[364,1056,1057,1060],{},[39,1058,1059],{},"\u003Cimg>"," タグで直接埋め込める（JavaScriptや追加APIが不要）",[364,1062,1063],{},"自動再生・ループが多くのメール・チャットツールで標準対応している",[24,1065,1067],{"id":1066},"動画フォーマットmp4webmとの差異","動画フォーマット（MP4・WebM）との差異",[12,1069,1070,1071,1074],{},"MP4（H.264\u002FH.265コーデック）やWebM（VP8\u002FVP9\u002FAV1コーデック）は、映像を時間軸で圧縮する",[193,1072,1073],{},"動画フォーマット","だ。フレーム間の差分だけを記録する手法（インターフレーム圧縮）により、GIFと比べて圧倒的に高い圧縮効率を持つ。",[12,1076,1077,1078,1083],{},"Googleの公式ドキュメント（",[44,1079,1082],{"href":1080,"rel":1081},"https:\u002F\u002Fweb.dev\u002Farticles\u002Freplace-gifs-with-videos",[48],"web.dev: Replace animated GIFs with video","）は、「アニメーションGIFをMP4に置き換えるだけでファイルサイズを最大80%削減できる」と明記している。",[12,1085,1086,1087,1095,1096,1098,1099,1102,1103,1102,1106,1102,1109,1112],{},"また、",[44,1088,1091,1092,1094],{"href":1089,"rel":1090},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FElements\u002Fvideo",[48],"MDN Web Docs の ",[39,1093,41],{}," 要素の解説","でも確認できるとおり、",[39,1097,41],{}," タグは ",[39,1100,1101],{},"autoplay","・",[39,1104,1105],{},"loop",[39,1107,1108],{},"muted",[39,1110,1111],{},"playsinline"," 属性を組み合わせることで、GIFと視覚的に同等の「自動ループ再生」を実現できる。",[182,1114],{},[16,1116,1118],{"id":1117},"ウェブでの使い分けどちらを選ぶべきか","ウェブでの使い分け：どちらを選ぶべきか",[24,1120,1122],{"id":1121},"gifが適しているケース","GIFが適しているケース",[361,1124,1125,1134,1140],{},[364,1126,1127,1130,1131,1133],{},[193,1128,1129],{},"メール本文・チャットツール（Slack・Teams等）への埋め込み","　多くのメールクライアントや業務チャットは ",[39,1132,41],{}," タグを解釈しないため、GIFが唯一の「動くコンテンツ」になる。",[364,1135,1136,1139],{},[193,1137,1138],{},"SNS投稿（Twitter\u002FX・LINEなど）","　プラットフォーム側が内部的にGIFをMP4に変換して配信するケースもあるが、ユーザーがGIFをドラッグ&ドロップしやすい文化が根付いている。",[364,1141,1142,1145],{},[193,1143,1144],{},"短い・シンプルなアニメーション（ローディングスピナーなど）","　色数が少なく2〜3秒以内のループアニメーションは、GIFでもファイルサイズを抑えられる。",[24,1147,1149],{"id":1148},"動画mp4webmが適しているケース","動画（MP4\u002FWebM）が適しているケース",[361,1151,1152,1158,1164],{},[364,1153,1154,1157],{},[193,1155,1156],{},"ウェブページへの埋め込み","　ページ速度（Core Web Vitals の LCP や TBT）に影響するため、大きなアニメーション素材は必ず動画形式を選ぶ。",[364,1159,1160,1163],{},[193,1161,1162],{},"色数が多い・リアルな映像素材","　写真やスクリーンキャプチャを含む動きのある素材は、GIFの256色制限で品質が著しく劣化する。",[364,1165,1166,1169],{},[193,1167,1168],{},"音声付きコンテンツ","　GIFは音声を持てないため、ナレーションやBGMが必要な場合は動画一択。",[24,1171,1172],{"id":1172},"比較表",[63,1174,1175,1190],{},[66,1176,1177],{},[69,1178,1179,1181,1184,1187],{},[72,1180,74],{},[72,1182,1183],{},"GIF",[72,1185,1186],{},"MP4（H.264）",[72,1188,1189],{},"WebM（VP9）",[85,1191,1192,1205,1218,1231,1245,1256,1274,1288],{},[69,1193,1194,1197,1200,1203],{},[90,1195,1196],{},"色深度",[90,1198,1199],{},"8bit（256色）",[90,1201,1202],{},"フルカラー",[90,1204,1202],{},[69,1206,1207,1210,1213,1216],{},[90,1208,1209],{},"音声",[90,1211,1212],{},"非対応",[90,1214,1215],{},"対応",[90,1217,1215],{},[69,1219,1220,1223,1226,1229],{},[90,1221,1222],{},"圧縮効率",[90,1224,1225],{},"低い",[90,1227,1228],{},"高い",[90,1230,1228],{},[69,1232,1233,1238,1240,1243],{},[90,1234,1235,1237],{},[39,1236,1059],{}," タグ対応",[90,1239,138],{},[90,1241,1242],{},"✗",[90,1244,1242],{},[69,1246,1247,1250,1252,1254],{},[90,1248,1249],{},"メール埋め込み",[90,1251,138],{},[90,1253,1242],{},[90,1255,1242],{},[69,1257,1258,1261,1264,1270],{},[90,1259,1260],{},"ブラウザ自動再生",[90,1262,1263],{},"自動",[90,1265,1266,1269],{},[39,1267,1268],{},"autoplay muted"," で可",[90,1271,1272,1269],{},[39,1273,1268],{},[69,1275,1276,1279,1282,1285],{},[90,1277,1278],{},"典型的なファイルサイズ（5秒）",[90,1280,1281],{},"3〜15MB",[90,1283,1284],{},"0.3〜2MB",[90,1286,1287],{},"0.2〜1.5MB",[69,1289,1290,1293,1296,1298],{},[90,1291,1292],{},"送信先サーバー（外部ツール利用時）",[90,1294,1295],{},"ツール依存",[90,1297,1295],{},[90,1299,1295],{},[182,1301],{},[16,1303,1305],{"id":1304},"gifへの変換が必要なときの具体的な手順","GIFへの変換が必要なときの具体的な手順",[12,1307,1308],{},"「動画素材はあるが、メールやSlack用にGIFにしたい」というケースは業務でも頻繁に発生する。以下に一般的な方法と、プライバシーを重視する場合の方法を示す。",[24,1310,1311],{"id":1311},"一般的なオンラインツールを使う場合の注意点",[12,1313,1314],{},"Smallpdf・EZGIF・CloudConvertなどのオンラインツールは手軽だが、ファイルをサーバーにアップロードして処理する。機密性のある操作画面のキャプチャや社内資料の動画を変換する際には、サーバー側でのデータ保持期間やプライバシーポリシーの確認が必要になる。",[24,1316,1317],{"id":1317},"ブラウザ内だけで完結させる方法",[12,1319,1320,1321,1325],{},"サーバーにファイルを送りたくない場合、",[44,1322,1324],{"href":1323},"\u002Ftools\u002Fvideo-to-gif","動画 → GIF 変換ツール","を利用する選択肢がある。ffmpeg.wasm をブラウザ上で動かす仕組みで、アップロードは発生せず変換処理がすべてローカルで完結する。DevTools の Network タブを開いて確認すれば、動画ファイルの外部送信が行われていないことを自分で検証できる。",[12,1327,1328],{},"操作手順は単純だ。",[361,1330,1331,1334,1337,1340],{},[364,1332,1333],{},"ページを開き、変換したい動画ファイルをドラッグ&ドロップする",[364,1335,1336],{},"開始時間・終了時間・フレームレート・幅を指定する",[364,1338,1339],{},"「変換」ボタンを押してブラウザ内で処理を待つ",[364,1341,1342],{},"生成されたGIFをダウンロードする",[12,1344,1345],{},"初回アクセス時に ffmpeg.wasm のロードで数秒かかるが、以降はオフライン環境でも動作する。",[182,1347],{},[16,1349,1350],{"id":1350},"よくある質問",[12,1352,1353,1356],{},[193,1354,1355],{},"Q. GIFのファイルサイズを小さくするにはどうすればよいですか？","\nフレームレートを下げる（24fps → 10fps）・幅を縮小する・再生時間を短くする、の3つが最も効果的。色数が少ない素材を選ぶことも重要。",[12,1358,1359,1366,1367,1369,1370,1372],{},[193,1360,1361,1362,1365],{},"Q. ",[39,1363,1364],{},"\u003Cvideo autoplay muted loop playsinline>"," でGIF代替をする際の注意点は？","\niOS Safariでは ",[39,1368,1111],{}," がないとフルスクリーン再生になるため必須。また、",[39,1371,1108],{}," がないと多くのブラウザで自動再生がブロックされる。",[12,1374,1375,1378],{},[193,1376,1377],{},"Q. SNSに投稿するならGIFとMP4のどちらが良いですか？","\nTwitter\u002FX はGIFをアップロードすると内部的にMP4に変換して配信するため、品質面ではMP4で直接投稿する方が有利。ただし投稿インターフェースの使いやすさからGIFが使われる場面も多い。",[12,1380,1381,1384],{},[193,1382,1383],{},"Q. アニメーションにWebPやAVIFは使えますか？","\nアニメーションWebP・アニメーションAVIFはいずれもGIFの代替として仕様上サポートされているが、ブラウザ対応状況やツールのサポートがGIF・動画と比べてまだ限定的。2025年時点では本番環境での採用には慎重な動作確認が必要。",[182,1386],{},[16,1388,416],{"id":416},[12,1390,1391],{},"GIFと動画の使い分けは「どこで再生されるか」で決まる。",[418,1393,1394,1403],{},[364,1395,1396,1402],{},[193,1397,1398,1399,1401],{},"ウェブページへの埋め込み → MP4\u002FWebMを ",[39,1400,41],{}," タグで使う","（ページ速度・画質の両面で優位）",[364,1404,1405],{},[193,1406,1407],{},"メール・チャット・SNS → GIFが現実的な選択肢",[12,1409,1410],{},"動画からGIFへの変換が必要な場面では、ファイルをサーバーに送信するかどうかを意識して、用途に合ったツールを選ぶと良い。変換の品質やプライバシーの要件が厳しい場合は、ブラウザ内完結のツールを検討する価値がある。",{"title":449,"searchDepth":450,"depth":450,"links":1412},[1413,1417,1422,1426,1427],{"id":1031,"depth":450,"text":1032,"children":1414},[1415,1416],{"id":1035,"depth":455,"text":1036},{"id":1066,"depth":455,"text":1067},{"id":1117,"depth":450,"text":1118,"children":1418},[1419,1420,1421],{"id":1121,"depth":455,"text":1122},{"id":1148,"depth":455,"text":1149},{"id":1172,"depth":455,"text":1172},{"id":1304,"depth":450,"text":1305,"children":1423},[1424,1425],{"id":1311,"depth":455,"text":1311},{"id":1317,"depth":455,"text":1317},{"id":1350,"depth":450,"text":1350},{"id":416,"depth":450,"text":416},"GIFと動画（MP4など）の技術的な違いを整理し、ウェブサイトやSNSでの最適な使い分け方を解説。変換方法やパフォーマンスへの影響も紹介。",{},"\u002Fblog\u002Fgif-vs-video-web-usage","2026-05-22",{"title":1018,"description":1428},"gif-vs-video-web-usage","blog\u002Fgif-vs-video-web-usage",[478,479,480,481],"UbKHJfcawtABaxZwwp31q7ki7cWZEAIgI3xeRV83dlc",{"id":1438,"title":1439,"author":7,"body":1440,"category":464,"coverImage":465,"description":1764,"draft":467,"extension":468,"locale":469,"meta":1765,"navigation":471,"noindex":467,"path":1766,"publishedAt":1767,"seo":1768,"slug":1769,"stem":1770,"tags":1771,"updatedAt":1767,"__hash__":1774},"blog\u002Fblog\u002Fimage-compress-no-quality-loss.md","画像圧縮で画質を落とさない方法と主要ツール徹底比較",{"type":9,"value":1441,"toc":1752},[1442,1446,1457,1460,1474,1477,1484,1486,1490,1493,1602,1609,1612,1623,1625,1629,1632,1636,1639,1650,1654,1663,1667,1670,1674,1677,1679,1683,1690,1704,1707,1715,1717,1719,1722,1740,1749],[16,1443,1445],{"id":1444},"圧縮したら画質が落ちたは設定の問題","「圧縮したら画質が落ちた」は設定の問題",[12,1447,1448,1449,1452,1453,1456],{},"画像を圧縮したあと、ぼやけた・色が飛んだ、という経験は珍しくない。原因のほとんどは",[193,1450,1451],{},"圧縮方式の選択ミス","か",[193,1454,1455],{},"品質パラメータの設定ミス","にある。",[12,1458,1459],{},"画像圧縮には大きく2種類がある。",[418,1461,1462,1468],{},[364,1463,1464,1467],{},[193,1465,1466],{},"可逆圧縮（ロスレス）",": データを完全に復元できる。PNG や WebP のロスレスモードが該当。ファイルサイズの削減幅は小さいが画質は一切変化しない。",[364,1469,1470,1473],{},[193,1471,1472],{},"非可逆圧縮（ロッシー）",": 人間の目に気づかれにくい情報を間引いてサイズを大幅に削減する。JPEG や WebP のロッシーモードが該当。品質値（Quality）の設定が仕上がりを左右する。",[12,1475,1476],{},"写真のような色数が多い画像には JPEG や WebP ロッシー（品質値 75〜85 程度）が向いている。ロゴ・アイコン・スクリーンショットのような図形・文字主体の画像は PNG ロスレスか WebP ロスレスを選ぶと画質劣化を避けられる。",[12,1478,1479,1480,1483],{},"フォーマット選択を間違えると、どれだけ品質値を上げても不要なアーティファクト（圧縮ノイズ）が乗ることがある。まず",[193,1481,1482],{},"用途に合ったフォーマットを選ぶ","のが画質維持の第一歩だ。",[182,1485],{},[16,1487,1489],{"id":1488},"主要ツールの比較画質プライバシーコスト","主要ツールの比較：画質・プライバシー・コスト",[12,1491,1492],{},"市場にはさまざまな圧縮ツールがある。以下の表は代表的なサービスの特徴をまとめたものだ。",[63,1494,1495,1515],{},[66,1496,1497],{},[69,1498,1499,1501,1503,1506,1509,1512],{},[72,1500,242],{},[72,1502,245],{},[72,1504,1505],{},"送信先サーバー",[72,1507,1508],{},"無料枠",[72,1510,1511],{},"ロスレス対応",[72,1513,1514],{},"WebP 出力",[85,1516,1517,1536,1553,1570,1587],{},[69,1518,1519,1522,1525,1528,1531,1534],{},[90,1520,1521],{},"TinyPNG",[90,1523,1524],{},"クラウド",[90,1526,1527],{},"TinyPNG社サーバー",[90,1529,1530],{},"月500枚まで",[90,1532,1533],{},"✗（ロッシーのみ）",[90,1535,1242],{},[69,1537,1538,1541,1543,1546,1548,1551],{},[90,1539,1540],{},"Squoosh（Google）",[90,1542,330],{},[90,1544,1545],{},"なし",[90,1547,333],{},[90,1549,1550],{},"✓",[90,1552,1550],{},[69,1554,1555,1558,1560,1563,1566,1568],{},[90,1556,1557],{},"iLovePDF \u002F iLoveIMG",[90,1559,1524],{},[90,1561,1562],{},"iLove社サーバー",[90,1564,1565],{},"制限あり",[90,1567,1242],{},[90,1569,1242],{},[69,1571,1572,1575,1577,1580,1583,1585],{},[90,1573,1574],{},"Compressor.io",[90,1576,1524],{},[90,1578,1579],{},"Compressor社サーバー",[90,1581,1582],{},"1ファイル10MBまで",[90,1584,1550],{},[90,1586,1242],{},[69,1588,1589,1592,1594,1596,1598,1600],{},[90,1590,1591],{},"zerosend 画像圧縮ツール",[90,1593,330],{},[90,1595,1545],{},[90,1597,333],{},[90,1599,1550],{},[90,1601,1550],{},[12,1603,1604,1605,1608],{},"「送信先サーバーなし」の行が重要だ。TinyPNG や iLoveIMG はファイルを外部サーバーにアップロードして処理する。利便性は高いが、",[193,1606,1607],{},"社内資料・個人情報が含まれる画像・NDA対象のデザイン素材","をそのままアップロードするのはリスクがある。",[12,1610,1611],{},"ブラウザ内処理のツール（Squoosh・zerosend）は、ファイルが端末から外に出ない。DevTools の Network タブを開いて確認すれば、アップロード通信が発生していないことを実際に検証できる。",[12,1613,1614,1615,1618,1619,1622],{},"外部送信の可否を気にしない用途なら TinyPNG のような手軽なクラウドツールで十分だが、",[193,1616,1617],{},"機密性が求められるファイル","や",[193,1620,1621],{},"オフライン環境","ではブラウザ内処理一択になる。",[182,1624],{},[16,1626,1628],{"id":1627},"画質を落とさず圧縮する実践的な手順","画質を落とさず圧縮する：実践的な手順",[12,1630,1631],{},"ここでは汎用的な手順を示す。どのツールを使う場合も考え方は共通だ。",[24,1633,1635],{"id":1634},"_1-画像の種類を確認する","1. 画像の種類を確認する",[12,1637,1638],{},"まずファイルを目視確認する。",[418,1640,1641,1644,1647],{},[364,1642,1643],{},"写真・グラデーション → JPEG か WebP ロッシー",[364,1645,1646],{},"ロゴ・アイコン・図・スクリーンショット → PNG か WebP ロスレス",[364,1648,1649],{},"アニメーション → WebP アニメ か GIF",[24,1651,1653],{"id":1652},"_2-品質値qualityを-7585-から始める","2. 品質値（Quality）を 75〜85 から始める",[12,1655,1656,1657,1662],{},"JPEG・WebP ロッシーの場合、品質値 100 は「ほぼ無圧縮」に近い。75〜85 の範囲では人間の目でほぼ判別できない程度の差しか生じないことが多い。",[44,1658,1661],{"href":1659,"rel":1660},"https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Fwebp\u002Fdocs\u002Fcompression",[48],"Google の WebP ドキュメント","でも、品質値 80 前後が画質とサイズのバランスの目安として示されている。",[24,1664,1666],{"id":1665},"_3-出力を元ファイルと並べて比較する","3. 出力を元ファイルと並べて比較する",[12,1668,1669],{},"ツールのプレビュー機能やブラウザの別タブを使い、元画像と圧縮後を 100% 表示で比較する。目立つ劣化がなければその設定で確定する。劣化があれば品質値を 5〜10 上げて再試行する。",[24,1671,1673],{"id":1672},"_4-ファイルサイズの削減率を確認する","4. ファイルサイズの削減率を確認する",[12,1675,1676],{},"目安として、品質 80 前後の JPEG 圧縮では元ファイルの 40〜70% 削減が期待できる。削減率が 10% 未満の場合は、すでに圧縮済みのファイルを再圧縮している可能性が高い。その場合は元の非圧縮ソースから変換し直したほうが効果が出る。",[182,1678],{},[16,1680,1682],{"id":1681},"zerosend-の画像圧縮ツールを使う場合","zerosend の画像圧縮ツールを使う場合",[12,1684,1685,1689],{},[44,1686,1688],{"href":1687},"\u002Ftools\u002Fimage-compress","画像圧縮ツール"," はブラウザ上で完結するため、ファイルをサーバーに送信しない。手順は次の通りだ。",[361,1691,1692,1695,1698,1701],{},[364,1693,1694],{},"ページを開き、画像ファイルをドラッグ&ドロップ（または「ファイルを選択」）",[364,1696,1697],{},"圧縮品質のスライダーで Quality 値を設定（デフォルトは 80）",[364,1699,1700],{},"出力フォーマットを選択（JPEG \u002F PNG \u002F WebP）",[364,1702,1703],{},"「圧縮する」ボタンを押してダウンロード",[12,1705,1706],{},"操作は4ステップで終わる。初回ロード後は Service Worker がリソースをキャッシュするため、次回以降はオフライン環境でも動作する。",[12,1708,1709,1710,1714],{},"なお、画像の縦横サイズを変更したい場合は別途リサイズ操作が必要になる。zerosend には",[44,1711,1713],{"href":1712},"\u002Ftools\u002Fimage-convert","画像変換・リサイズツール","も用意されているため、フォーマット変換と合わせて使うと作業をまとめられる。",[182,1716],{},[16,1718,416],{"id":416},[12,1720,1721],{},"画質を落とさない画像圧縮のポイントは3点に集約される。",[361,1723,1724,1730,1735],{},[364,1725,1726,1729],{},[193,1727,1728],{},"フォーマットを用途に合わせて選ぶ","（写真は JPEG\u002FWebP ロッシー、図形は PNG\u002FWebP ロスレス）",[364,1731,1732],{},[193,1733,1734],{},"品質値は 75〜85 を起点に調整する",[364,1736,1737],{},[193,1738,1739],{},"出力を元画像と並べて目視確認してから確定する",[12,1741,1742,1743,1748],{},"ツール選びでは、ファイルの機密性に応じて「クラウド処理か・ブラウザ内処理か」を判断軸にするとよい。業務上の機密ファイルや個人情報を含む画像を扱う場合は、",[44,1744,1747],{"href":1745,"rel":1746},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FSecurity\u002FSame-origin_policy",[48],"MDN の Same-origin policy"," が示すように、データをどこに送るかを意識することが基本のセキュリティ習慣だ。",[12,1750,1751],{},"クラウド送信を避けたい場面では Squoosh か zerosend のようなブラウザ内処理ツールが現実的な選択肢になる。どちらも無料で使えるため、用途と状況に合わせて使い分けるのが合理的だ。",{"title":449,"searchDepth":450,"depth":450,"links":1753},[1754,1755,1756,1762,1763],{"id":1444,"depth":450,"text":1445},{"id":1488,"depth":450,"text":1489},{"id":1627,"depth":450,"text":1628,"children":1757},[1758,1759,1760,1761],{"id":1634,"depth":455,"text":1635},{"id":1652,"depth":455,"text":1653},{"id":1665,"depth":455,"text":1666},{"id":1672,"depth":455,"text":1673},{"id":1681,"depth":450,"text":1682},{"id":416,"depth":450,"text":416},"画質を維持したまま画像を圧縮する方法を解説。TinyPNG・Squoosh・zerosenの比較表つき。ブラウザだけで完結する無料ツールの使い方も紹介。",{},"\u002Fblog\u002Fimage-compress-no-quality-loss","2026-05-20",{"title":1439,"description":1764},"image-compress-no-quality-loss","blog\u002Fimage-compress-no-quality-loss",[1772,1773,254,480],"圧縮","比較","pk18n9a2D8WNh5OnONKHkKjSLlJ65Fn-8M2XXUJxXpc",{"id":1776,"title":1777,"author":7,"body":1778,"category":464,"coverImage":465,"description":2118,"draft":467,"extension":468,"locale":469,"meta":2119,"navigation":471,"noindex":467,"path":2120,"publishedAt":2121,"seo":2122,"slug":2123,"stem":2124,"tags":2125,"updatedAt":2121,"__hash__":2127},"blog\u002Fblog\u002Fjpeg-png-webp-difference.md","JPEG・PNG・WebP の違いと使い分け完全ガイド｜どれを選ぶべきか",{"type":9,"value":1779,"toc":2098},[1780,1783,1785,1789,1793,1804,1808,1819,1823,1842,1844,1848,1851,1886,1888,1981,1987,1989,1992,1995,1998,2001,2007,2010,2029,2032,2037,2039,2042,2046,2049,2053,2056,2060,2063,2065,2067,2095],[12,1781,1782],{},"Webサイトに画像を掲載するとき、「JPEG でいいか、PNG の方がきれいか、最近よく聞く WebP はどう使うのか」と迷う場面は多い。形式を間違えると、ページの読み込みが遅くなったり、透過が消えて背景が白く塗りつぶされたりと、見た目や Core Web Vitals に直接影響する。本記事では三つの形式の仕組みから実際の選び方、変換の手順までを実践的に整理する。",[182,1784],{},[16,1786,1788],{"id":1787},"jpegpngwebpそれぞれ何が違うのか","JPEG・PNG・WebP、それぞれ何が違うのか",[24,1790,1792],{"id":1791},"jpegjpg","JPEG（.jpg）",[12,1794,1795,1796,1799,1800,1803],{},"JPEG は ",[193,1797,1798],{},"非可逆圧縮"," を採用した形式で、人間の目が感知しにくい色差情報を間引いてファイルサイズを小さくする。写真や複雑なグラデーションとの相性が良く、品質 75〜85 程度に設定すれば視覚的な劣化をほぼ感じさせずに大幅な軽量化が可能だ。ただし ",[193,1801,1802],{},"透過（アルファチャンネル）は非対応"," で、保存を繰り返すたびに画質が劣化する点に注意が必要。",[24,1805,1807],{"id":1806},"pngpng","PNG（.png）",[12,1809,1810,1811,1814,1815,1818],{},"PNG は ",[193,1812,1813],{},"可逆圧縮"," を採用しており、圧縮・解凍を繰り返しても元のピクセル情報が完全に保持される。ロゴ・アイコン・スクリーンショットなど、エッジが鋭くテキストを含む画像で威力を発揮する。",[193,1816,1817],{},"透過に対応"," しているため、背景を透明にしたロゴをWebサイトに配置する用途では事実上の標準。その分、写真のような複雑な色変化を含む画像ではファイルサイズが JPEG より大きくなりやすい。",[24,1820,1822],{"id":1821},"webpwebp","WebP（.webp）",[12,1824,1825,1826,1829,1830,1835,1836,1841],{},"WebP は Google が開発した形式で、",[193,1827,1828],{},"可逆・非可逆の両モードと透過","をすべてサポートする。",[44,1831,1834],{"href":1832,"rel":1833},"https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Fwebp",[48],"Google の公式データ"," によると、非可逆 WebP は同等画質の JPEG に比べて約 25〜34% 小さく、可逆 WebP は同等の PNG より約 26% 小さい。",[44,1837,1840],{"href":1838,"rel":1839},"https:\u002F\u002Fcaniuse.com\u002Fwebp",[48],"Can I use のデータ"," では 2024 年時点で主要ブラウザのサポート率は 97% を超えており、実用上の互換性問題はほぼ解消されている。",[182,1843],{},[16,1845,1847],{"id":1846},"どれを使うべきか用途別の判断基準","どれを使うべきか：用途別の判断基準",[12,1849,1850],{},"迷ったときは次の三つの問いで絞り込める。",[361,1852,1853,1866,1876],{},[364,1854,1855,1858],{},[193,1856,1857],{},"写真か、テキスト・ロゴか？",[418,1859,1860,1863],{},[364,1861,1862],{},"写真 → WebP（次点で JPEG）",[364,1864,1865],{},"テキスト・ロゴ・イラスト → WebP（次点で PNG）",[364,1867,1868,1871],{},[193,1869,1870],{},"透過が必要か？",[418,1872,1873],{},[364,1874,1875],{},"必要 → WebP または PNG（JPEG は不可）",[364,1877,1878,1881],{},[193,1879,1880],{},"古いシステムや特定の印刷環境など WebP 非対応の環境か？",[418,1882,1883],{},[364,1884,1885],{},"該当する → JPEG（写真）または PNG（ロゴ等）にフォールバック",[24,1887,1172],{"id":1172},[63,1889,1890,1904],{},[66,1891,1892],{},[69,1893,1894,1896,1899,1901],{},[72,1895,74],{},[72,1897,1898],{},"JPEG",[72,1900,967],{},[72,1902,1903],{},"WebP",[85,1905,1906,1920,1931,1944,1955,1968],{},[69,1907,1908,1911,1914,1917],{},[90,1909,1910],{},"圧縮方式",[90,1912,1913],{},"非可逆",[90,1915,1916],{},"可逆",[90,1918,1919],{},"可逆・非可逆両対応",[69,1921,1922,1925,1927,1929],{},[90,1923,1924],{},"透過（アルファ）",[90,1926,1212],{},[90,1928,1215],{},[90,1930,1215],{},[69,1932,1933,1936,1938,1941],{},[90,1934,1935],{},"ファイルサイズ（写真）",[90,1937,148],{},[90,1939,1940],{},"大",[90,1942,1943],{},"小",[69,1945,1946,1949,1951,1953],{},[90,1947,1948],{},"ファイルサイズ（ロゴ等）",[90,1950,154],{},[90,1952,151],{},[90,1954,1943],{},[69,1956,1957,1960,1963,1965],{},[90,1958,1959],{},"ブラウザ対応",[90,1961,1962],{},"ほぼ全て",[90,1964,1962],{},[90,1966,1967],{},"97%超（2024年）",[69,1969,1970,1972,1975,1978],{},[90,1971,92],{},[90,1973,1974],{},"写真・バナー",[90,1976,1977],{},"ロゴ・スクショ",[90,1979,1980],{},"Web全般",[12,1982,1983,1986],{},[193,1984,1985],{},"結論として、新規 Web 制作で特別な制約がなければ WebP を第一候補にする","のが現時点での合理的な選択だ。既存の JPEG・PNG 資産がある場合は、それらを WebP に変換することでページ速度の改善が見込める。",[182,1988],{},[16,1990,1991],{"id":1991},"実際に形式を変換する方法",[24,1993,1994],{"id":1994},"オンラインツールを使う場合の注意点",[12,1996,1997],{},"Smallpdf や TinyPNG、Adobe Express といった有名なオンラインツールは手軽だが、ファイルをいったんサーバーにアップロードして処理する仕組みをとっている。社外秘のスライドキャプチャや顧客データを含む画像を変換する際は、利用規約とプライバシーポリシーの確認が必要になる。",[24,1999,2000],{"id":2000},"ブラウザ内で処理する方法",[12,2002,1320,2003,2006],{},[44,2004,2005],{"href":1712},"画像形式変換ツール"," を使うとブラウザ内だけで変換が完結する。WebAssembly ベースで動作するため、ファイルは外部に送信されない。DevTools の Network タブを開いた状態で変換を実行しても、画像データの通信が発生しないことを自分で確認できる。",[12,2008,2009],{},"操作手順は次のとおりだ。",[361,2011,2012,2017,2020,2023,2026],{},[364,2013,2014,2016],{},[44,2015,2005],{"href":1712}," をブラウザで開く",[364,2018,2019],{},"変換したいファイルをドラッグ＆ドロップ、または「ファイルを選択」からアップロード",[364,2021,2022],{},"出力形式（JPEG \u002F PNG \u002F WebP）を選択する",[364,2024,2025],{},"必要に応じて品質を調整し、「変換」を実行",[364,2027,2028],{},"変換後のファイルをダウンロードする",[12,2030,2031],{},"初回ロード後は Service Worker によってキャッシュされるため、オフライン環境でも動作する。",[12,2033,2034],{},[385,2035],{"alt":2036,"src":388},"スクショ: 画像形式変換ツールのファイル選択画面",[182,2038],{},[16,2040,2041],{"id":2041},"よくある誤解と落とし穴",[24,2043,2045],{"id":2044},"png-は常に高画質は正確ではない","「PNG は常に高画質」は正確ではない",[12,2047,2048],{},"PNG は可逆圧縮なので情報の欠落はないが、ファイルサイズが大きくなりやすく、ページ速度に悪影響を与えることがある。写真を PNG で保存しても画質は上がらず、サイズだけが増える。写真は WebP か JPEG を使う方が現実的だ。",[24,2050,2052],{"id":2051},"webp-は古いブラウザで使えないは今や過去の話","「WebP は古いブラウザで使えない」は今や過去の話",[12,2054,2055],{},"Internet Explorer の終了（2022 年 6 月）以降、主要なビジネス環境で WebP が表示できないケースは大幅に減った。社内システムが特定の旧ブラウザを強制している場合を除き、WebP の採用を躊躇う理由は薄い。",[24,2057,2059],{"id":2058},"jpeg-の再保存劣化は累積する","JPEG の再保存劣化は累積する",[12,2061,2062],{},"JPEG を編集・保存するたびに非可逆圧縮が適用され、画質が段階的に落ちる。マスターデータは PNG や WebP（可逆モード）で保管し、配布・公開用に JPEG や非可逆 WebP を都度書き出す運用が望ましい。",[182,2064],{},[16,2066,416],{"id":416},[418,2068,2069,2074,2080,2086],{},[364,2070,2071,2073],{},[193,2072,1974],{}," → WebP（互換性が問題なければ）、次点で JPEG",[364,2075,2076,2079],{},[193,2077,2078],{},"ロゴ・アイコン・透過が必要な画像"," → WebP または PNG",[364,2081,2082,2085],{},[193,2083,2084],{},"新規 Web 制作全般"," → WebP を基本とし、フォールバックが必要な場合のみ JPEG\u002FPNG を使う",[364,2087,2088,2091,2092,2094],{},[193,2089,2090],{},"変換時にファイルをサーバーに送りたくない場合"," → ブラウザ完結型の ",[44,2093,2005],{"href":1712}," が選択肢になる",[12,2096,2097],{},"形式の選択一つで LCP（Largest Contentful Paint）や CLS（Cumulative Layout Shift）といった Core Web Vitals 指標に影響が出る。小さな意思決定の積み重ねがページ全体のパフォーマンスと SEO に効いてくる。",{"title":449,"searchDepth":450,"depth":450,"links":2099},[2100,2105,2108,2112,2117],{"id":1787,"depth":450,"text":1788,"children":2101},[2102,2103,2104],{"id":1791,"depth":455,"text":1792},{"id":1806,"depth":455,"text":1807},{"id":1821,"depth":455,"text":1822},{"id":1846,"depth":450,"text":1847,"children":2106},[2107],{"id":1172,"depth":455,"text":1172},{"id":1991,"depth":450,"text":1991,"children":2109},[2110,2111],{"id":1994,"depth":455,"text":1994},{"id":2000,"depth":455,"text":2000},{"id":2041,"depth":450,"text":2041,"children":2113},[2114,2115,2116],{"id":2044,"depth":455,"text":2045},{"id":2051,"depth":455,"text":2052},{"id":2058,"depth":455,"text":2059},{"id":416,"depth":450,"text":416},"JPEG・PNG・WebP の違いを画質・ファイルサイズ・透過・対応ブラウザの観点で比較。Web担当者やビジネスパーソンが迷わず形式を選べるよう実践的に解説します。",{},"\u002Fblog\u002Fjpeg-png-webp-difference","2026-05-19",{"title":1777,"description":2118},"jpeg-png-webp-difference","blog\u002Fjpeg-png-webp-difference",[2126,479,480,1014],"画像","9dQaLCdyLgXuv_IQveNVOMwTHUIQLW9xfGj_d9pT4nI",{"id":2129,"title":2130,"author":7,"body":2131,"category":464,"coverImage":465,"description":2279,"draft":467,"extension":468,"locale":469,"meta":2280,"navigation":471,"noindex":467,"path":2281,"publishedAt":2282,"seo":2283,"slug":2284,"stem":2285,"tags":2286,"updatedAt":2282,"__hash__":2288},"blog\u002Fblog\u002Fqr-code-business-card.md","QRコード付き名刺を無料で作成する方法｜初心者でも5分で完成",{"type":9,"value":2132,"toc":2271},[2133,2137,2140,2143,2146,2148,2152,2155,2161,2167,2173,2179,2181,2184,2193,2200,2203,2235,2237,2241,2244,2250,2256,2262,2264],[16,2134,2136],{"id":2135},"qrコード付き名刺が今どき求められる理由","QRコード付き名刺が今どき求められる理由",[12,2138,2139],{},"名刺交換の場面で「URLが長くて打ち込むのが大変」「SNSのプロフィールを伝えたいけど口頭では難しい」と感じたことはないでしょうか。QRコードを名刺に載せておくと、スマートフォンをかざすだけでWebサイト・ポートフォリオ・SNSページへ誘導できます。相手の手間が大幅に減るため、展示会や商談、フリーランスの営業活動など幅広いシーンで活用が広がっています。",[12,2141,2142],{},"また、QRコードを使うメリットはアクセスのしやすさだけではありません。URLを後から変更したい場合でも、QRコードが指すリンク先（自分のプロフィールページなど）を更新すれば対応できるため、名刺を刷り直す手間を減らせることも見逃せないポイントです。",[12,2144,2145],{},"一方で「QRコードってどうやって作るの？」「無料でちゃんとしたものが作れるの？」という疑問を持つ方も多いでしょう。結論から言えば、専用ソフトを購入したりデザイン会社に依頼したりしなくても、無料のオンラインツールで十分なクオリティのQRコードが作れます。",[182,2147],{},[16,2149,2151],{"id":2150},"qrコードを無料で作成するときに気をつけたいこと","QRコードを無料で作成するときに気をつけたいこと",[12,2153,2154],{},"無料ツールは数多く存在しますが、選ぶ際に注意したい点がいくつかあります。",[12,2156,2157,2160],{},[193,2158,2159],{},"画質・サイズの問題","\n名刺に印刷するQRコードは、画面表示とは異なり一定以上の解像度が必要です。低解像度のPNGしか出力できないツールだと、印刷時にぼやけて読み取りエラーが起きることがあります。SVG形式（拡大しても劣化しないベクター形式）で出力できるツールを選ぶと安心です。",[12,2162,2163,2166],{},[193,2164,2165],{},"個人情報の取り扱い","\n名刺に載せるURLには、自分のWebサイトや連絡先ページなど、ある程度個人に紐づいた情報が含まれます。ツールによっては入力した文字列をサーバーに送信・ログとして記録しているケースもあるため、プライバシーの観点から確認が必要です。",[12,2168,2169,2172],{},[193,2170,2171],{},"登録不要かどうか","\nメールアドレス登録やアカウント作成が必須のツールは、手軽さという面でハードルが上がります。すぐに試せる登録不要のツールを選ぶと、作業効率が上がります。",[12,2174,2175,2178],{},[193,2176,2177],{},"有料機能への誘導","\n「無料で使えると思ったら、ダウンロードだけ有料だった」というパターンも珍しくありません。出力まで完全無料かどうかを事前に確認しましょう。",[182,2180],{},[16,2182,2183],{"id":2183},"ブラウザだけで完結する無料ツールを使った作成手順",[12,2185,2186,2187,2192],{},"上記の注意点をまとめると、「高解像度出力・プライバシー配慮・登録不要・完全無料」の4条件を満たすツールが理想的です。そのひとつとして紹介したいのが、",[44,2188,2191],{"href":2189,"rel":2190},"https:\u002F\u002Fzerosend.site\u002Ftools\u002Fqr-create",[48],"QR コード生成ツール","です。",[12,2194,2195,2196,2199],{},"このツールの大きな特徴は、",[193,2197,2198],{},"入力したテキストやURLをサーバーに送信しない","点です。QRコードの生成処理がすべてブラウザ内で完結するため、入力した情報が外部に漏れる心配がありません。名刺に載せるURLや連絡先情報を扱う場合、この「ローカル処理」という仕組みは安心感につながります。",[24,2201,2202],{"id":2202},"実際の操作手順",[361,2204,2205,2211,2217,2223,2229],{},[364,2206,2207,2210],{},[193,2208,2209],{},"ツールページを開く","\nブラウザでツールにアクセスします。アカウント登録やインストールは不要です。",[364,2212,2213,2216],{},[193,2214,2215],{},"テキスト・URLを入力する","\n名刺に載せたいURL（自社サイト、ポートフォリオ、SNSプロフィールなど）を入力欄に貼り付けます。vCard形式のテキストを入力すれば、連絡先情報をまとめてQRコードに埋め込むこともできます。",[364,2218,2219,2222],{},[193,2220,2221],{},"プレビューを確認する","\n入力と同時にQRコードのプレビューが表示されます。スマートフォンのカメラで試し読みして、正しくリンク先に飛べるか確認しましょう。",[364,2224,2225,2228],{},[193,2226,2227],{},"ダウンロードする","\n問題がなければダウンロードボタンからQRコード画像を保存します。PNG・SVGなど用途に合わせて形式を選べます。名刺印刷用にはSVGを選ぶと、印刷会社に入稿する際に拡大・縮小しても画質が落ちません。",[364,2230,2231,2234],{},[193,2232,2233],{},"名刺デザインに配置する","\nダウンロードした画像をIllustratorやCanva、Word、PowerPointなど使い慣れたソフトの名刺テンプレートに貼り付ければ完成です。QRコードのサイズは名刺上で最低でも1.5cm角を確保すると読み取りやすくなります。",[182,2236],{},[16,2238,2240],{"id":2239},"名刺qrコードをより効果的に使うための3つのコツ","名刺QRコードをより効果的に使うための3つのコツ",[12,2242,2243],{},"QRコードを名刺に入れるだけで満足せず、もう一歩工夫すると効果が高まります。",[12,2245,2246,2249],{},[193,2247,2248],{},"① リンク先をスマートフォン対応ページにする","\nQRコードを読み取るのはスマートフォンがほとんどです。リンク先のページがモバイル非対応だと、せっかくアクセスしてもらっても離脱されてしまいます。リンク前にスマートフォンで表示確認をしておきましょう。",[12,2251,2252,2255],{},[193,2253,2254],{},"② QRコードの近くに一言添える","\n「詳細はこちらから」「ポートフォリオを見る」など、QRコードの下に小さくテキストを入れると、読み取る動機づけになります。特に年配の方や普段QRコードを使い慣れていない方への配慮として有効です。",[12,2257,2258,2261],{},[193,2259,2260],{},"③ 定期的にリンク先をチェックする","\nURLが変わった、ページを削除したなどの理由でQRコードが無効になるケースがあります。名刺を大量に印刷する前に、そして印刷後も定期的にリンク先が有効かどうか確認する習慣をつけましょう。",[182,2263],{},[12,2265,2266,2267,2270],{},"QRコード付き名刺は、紙の名刺とデジタル情報をつなぐシンプルながら強力な手段です。無料ツールを使えば費用をかけずに導入できるので、まだ試していない方はぜひ一度作成してみてください。プライバシーを気にする方には、ブラウザ内処理で安全に使える",[44,2268,2191],{"href":2189,"rel":2269},[48],"が選択肢のひとつになるはずです。",{"title":449,"searchDepth":450,"depth":450,"links":2272},[2273,2274,2275,2278],{"id":2135,"depth":450,"text":2136},{"id":2150,"depth":450,"text":2151},{"id":2183,"depth":450,"text":2183,"children":2276},[2277],{"id":2202,"depth":455,"text":2202},{"id":2239,"depth":450,"text":2240},"QRコード付き名刺を無料で作る手順を分かりやすく解説。ブラウザだけで完結するツールを使えば、個人情報をサーバーに送らず安全に作成できます。",{},"\u002Fblog\u002Fqr-code-business-card","2026-05-14",{"title":2130,"description":2279},"qr-code-business-card","blog\u002Fqr-code-business-card",[2287,254,242,480],"業務","hrm-tYjDGxrWDI7oF94te57zkkMH6fyHYcsGGqLe9PM",{"id":2290,"title":2291,"author":7,"body":2292,"category":464,"coverImage":465,"description":2473,"draft":467,"extension":468,"locale":469,"meta":2474,"navigation":471,"noindex":467,"path":2475,"publishedAt":2476,"seo":2477,"slug":2478,"stem":2479,"tags":2480,"updatedAt":2476,"__hash__":2482},"blog\u002Fblog\u002Fogp-image-size-optimization.md","OGP画像のサイズ最適化ガイド｜SNSでキレイに表示される設定と作り方",{"type":9,"value":2293,"toc":2467},[2294,2298,2301,2308,2315,2317,2321,2324,2329,2343,2348,2359,2364,2372,2377,2382,2389,2392,2394,2398,2401,2406,2409,2414,2417,2422,2431,2436,2439,2441,2445,2452,2455,2458,2465],[16,2295,2297],{"id":2296},"ogp画像が崩れる切れる原因はサイズ指定にある","OGP画像が「崩れる」「切れる」原因はサイズ指定にある",[12,2299,2300],{},"SNSでURLをシェアしたとき、サムネイル画像が途中で切れていたり、極端に小さく表示されたりした経験はないでしょうか。あるいは、自分のサイトをX（旧Twitter）やFacebookに投稿したら、想定と全く違う画像が表示された、というケースもよく聞かれます。",[12,2302,2303,2304,2307],{},"こうした問題の多くは、OGP（Open Graph Protocol）画像のサイズが各プラットフォームの仕様と合っていないことが原因です。OGPはHTMLのmetaタグで設定するもので、",[39,2305,2306],{},"og:image","に指定した画像がSNSカードのサムネイルとして使われます。しかし、画像サイズや縦横比が規定から外れていると、プラットフォーム側でトリミングされたり、表示をスキップされたりします。",[12,2309,2310,2311,2314],{},"さらに見落とされがちなのが、",[193,2312,2313],{},"ファイルサイズ（容量）の上限","です。画像の縦横ピクセル数が正しくても、ファイルが重すぎるとSNSのクローラーが取得に失敗し、画像なしのカードとして表示されることがあります。OGP画像の最適化は「ピクセル寸法」と「ファイル容量」の両方を意識する必要があります。",[182,2316],{},[16,2318,2320],{"id":2319},"各snsプラットフォームの推奨サイズ一覧","各SNS・プラットフォームの推奨サイズ一覧",[12,2322,2323],{},"OGP画像の最適なサイズはプラットフォームによって異なります。主要サービスの推奨値をまとめました。",[12,2325,2326],{},[193,2327,2328],{},"X（旧Twitter）",[418,2330,2331,2334,2337,2340],{},[364,2332,2333],{},"Summaryカード（小さいサムネイル）：144×144px以上、縦横比1:1",[364,2335,2336],{},"Summary Card with Large Image（横長サムネイル）：300×157px以上、縦横比2:1",[364,2338,2339],{},"推奨サイズ：1200×628px",[364,2341,2342],{},"ファイルサイズ上限：5MB（JPG\u002FPNG\u002FWebP）",[12,2344,2345],{},[193,2346,2347],{},"Facebook \u002F Meta",[418,2349,2350,2353,2356],{},[364,2351,2352],{},"最小サイズ：200×200px",[364,2354,2355],{},"推奨サイズ：1200×630px（縦横比1.91:1）",[364,2357,2358],{},"推奨ファイルサイズ：1MB以下",[12,2360,2361],{},[193,2362,2363],{},"LinkedIn",[418,2365,2366,2369],{},[364,2367,2368],{},"推奨サイズ：1200×627px",[364,2370,2371],{},"ファイルサイズ上限：5MB",[12,2373,2374],{},[193,2375,2376],{},"Slack \u002F チャットツール",[418,2378,2379],{},[364,2380,2381],{},"og:imageを取得してプレビュー表示。1200×630px前後が無難",[12,2383,2384,2385,2388],{},"これらを横断的に見ると、",[193,2386,2387],{},"1200×630px（または1200×628px）"," という解像度がほぼすべてのサービスに対応できる事実上の標準サイズです。縦横比は約1.91:1を維持しつつ、JPEG品質を80〜85程度に抑えてファイルサイズを300KB以内に収めると、どの環境でも安定して表示されます。",[12,2390,2391],{},"ただし、既存の画像を流用する場合や、デザイン素材が別のアスペクト比で作られている場合は、リサイズ作業が必要になります。",[182,2393],{},[16,2395,2397],{"id":2396},"実践ogp画像を正しいサイズにリサイズする手順","実践：OGP画像を正しいサイズにリサイズする手順",[12,2399,2400],{},"OGP画像のリサイズ自体は難しい作業ではありませんが、いくつか気をつけたいポイントがあります。",[12,2402,2403],{},[193,2404,2405],{},"① 元画像の縦横比を確認する",[12,2407,2408],{},"元画像が正方形（1:1）や縦長の場合、単純にリサイズすると1200×630pxに収まらず、余白が生じたり主要な被写体が切り取られたりします。リサイズ前に、画像をどこを中心にトリミングするかを先に決めておくと作業がスムーズです。",[12,2410,2411],{},[193,2412,2413],{},"② 出力形式はJPEGかWebPを選ぶ",[12,2415,2416],{},"OGP画像には透過（アルファチャンネル）が不要なケースがほとんどです。PNGは品質が高い反面ファイルが重くなりやすいため、JPEGかWebPで書き出すのが現実的です。SNSのクローラーはWebPにも対応していますが、古いクローラーを考慮してJPEGを第一候補にするのが無難です。",[12,2418,2419],{},[193,2420,2421],{},"③ ツールを選ぶ：Photoshopがなくても問題ない",[12,2423,2424,2425,2430],{},"プロ向けの画像編集ソフトがなくても、ブラウザだけで完結するツールが充実しています。その一つとして ",[44,2426,2429],{"href":2427,"rel":2428},"https:\u002F\u002Fzerosend.site\u002Ftools\u002Fimage-resize",[48],"画像リサイズツール"," があります。このツールの特徴は、アップロードした画像がサーバーに送信されない点です。画像データはブラウザ内だけで処理されるため、社内資料や未公開のバナー画像を扱う場合でも、情報漏洩リスクを気にせず使えます。縦横のピクセル数を数値で直接指定できるので、1200×630pxに合わせる作業が直感的に行えます。",[12,2432,2433],{},[193,2434,2435],{},"④ リサイズ後にOGPキャッシュをクリアする",[12,2437,2438],{},"画像を差し替えても、SNS側のキャッシュが残っていると古い画像が表示され続けます。Xであれば「Card Validator」、Facebookであれば「Sharing Debugger」を使ってキャッシュを強制更新してください。ツールにURLを入力して「スクレイプ」または「デバッグ」を実行するだけで、新しい画像が反映されます。",[182,2440],{},[16,2442,2444],{"id":2443},"ogp画像の最適化がseoにも影響する理由","OGP画像の最適化がSEOにも影響する理由",[12,2446,2447,2448,2451],{},"OGPはSNS表示のための仕様であり、Googleの検索順位に直接影響するわけではありません。しかし、",[193,2449,2450],{},"間接的にSEOへのプラス効果","が期待できます。",[12,2453,2454],{},"SNSでシェアされたときに魅力的なサムネイルが表示されれば、クリック率が上がり、リンクが拡散されやすくなります。これがサイトへの流入増加につながり、滞在時間や被リンク獲得に好影響を与えます。また、画像ファイルのサイズを適切に絞ることはページの読み込み速度改善に直結し、Googleが重視するCore Web Vitalsの指標（特にLCPやFID）にも貢献します。",[12,2456,2457],{},"OGP画像を「SNS用の飾り」として後回しにしがちですが、サイトのパフォーマンスとブランド品質を底上げする実務的な施策として捉えると、優先度が変わってくるはずです。",[12,2459,2460,2461,2464],{},"まず手元にあるキービジュアルやアイキャッチ画像を1200×630px・300KB以内に整えるところから始めてみてください。専用ソフトが不要な環境であれば、前述した ",[44,2462,2429],{"href":2427,"rel":2463},[48]," のようなブラウザベースのツールを活用すると、余計な手間をかけずに作業を完結できます。",[182,2466],{},{"title":449,"searchDepth":450,"depth":450,"links":2468},[2469,2470,2471,2472],{"id":2296,"depth":450,"text":2297},{"id":2319,"depth":450,"text":2320},{"id":2396,"depth":450,"text":2397},{"id":2443,"depth":450,"text":2444},"OGP画像の推奨サイズや各SNSの仕様を解説。Twitterやog:imageが正しく表示されない原因と、ブラウザだけで完結する無料ツールを使った具体的な対処法を紹介します。",{},"\u002Fblog\u002Fogp-image-size-optimization","2026-05-12",{"title":2291,"description":2473},"ogp-image-size-optimization","blog\u002Fogp-image-size-optimization",[2126,2481,480,1014],"リサイズ","mIit_bdGiULblUiC2FeigxS7qW8uxuS9f-pKvrNhJKM",{"id":2484,"title":2485,"author":7,"body":2486,"category":464,"coverImage":465,"description":3041,"draft":467,"extension":468,"locale":469,"meta":3042,"navigation":471,"noindex":467,"path":3043,"publishedAt":3044,"seo":3045,"slug":3046,"stem":3047,"tags":3048,"updatedAt":3050,"__hash__":3051},"blog\u002Fblog\u002Fwebp-convert-seo.md","WebP変換でSEOを改善する完全ガイド｜Core Web Vitals改善と安全な変換手順",{"type":9,"value":2487,"toc":3014},[2488,2492,2499,2506,2509,2511,2515,2519,2522,2534,2537,2540,2543,2547,2550,2552,2556,2559,2566,2583,2655,2657,2661,2664,2671,2674,2678,2798,2801,2803,2807,2827,2829,2849,2852,2855,2876,2879,2882,2885,2887,2891,2894,2897,2903,2906,2909,2912,2915,2917,2920,2924,2929,2932,2937,2940,2945,2948,2953,2959,2964,2967,2970,2990,2992,2996,2999,3002,3008,3011],[16,2489,2491],{"id":2490},"webp変換とseoの関係なぜ今これが重要なのか","WebP変換とSEOの関係——なぜ今これが重要なのか",[12,2493,2494,2495,2498],{},"PageSpeed InsightsやGoogle Search Consoleでサイトを計測すると、「次世代フォーマットで画像を配信してください」という指摘が出てくることが多い。この「次世代フォーマット」の筆頭が ",[193,2496,2497],{},"WebP（ウェブピー）"," だ。",[12,2500,2501,2502,2505],{},"Googleが2021年以降、Core Web Vitals（CWV）を検索順位の評価要素に組み込んだことで、画像の最適化はSEOと直結する問題になった。JPEGやPNGをWebPに変換するだけで、同等の画質を保ちながらファイルサイズを ",[193,2503,2504],{},"平均25〜35%削減"," できる。この数字は、画像を多く使うECサイト・ブログ・ポートフォリオサイトにとって、ページ速度の体感差として現れる水準だ。",[12,2507,2508],{},"本記事では、WebP変換がSEOに与える具体的な効果、安全な変換方法の選び方、競合ツールとの比較、そして実際の運用への組み込み方を順を追って解説する。",[182,2510],{},[16,2512,2514],{"id":2513},"webp変換がseoに与える具体的な3つの効果","WebP変換がSEOに与える具体的な3つの効果",[24,2516,2518],{"id":2517},"lcplargest-contentful-paintの改善","LCP（Largest Contentful Paint）の改善",[12,2520,2521],{},"Core Web Vitalsの中でも特に注目度の高いLCPは、ページ内で最大の可視要素が描画されるまでの時間を測る指標だ。多くのページでLCPの対象はメインビジュアルや商品画像など、ファイルサイズの大きい画像要素になる。",[12,2523,2524,2529,2530,2533],{},[44,2525,2528],{"href":2526,"rel":2527},"https:\u002F\u002Fweb.dev\u002Farticles\u002Flcp",[48],"Googleのウェブ・パフォーマンスに関するドキュメント","によれば、LCPの目標値は ",[193,2531,2532],{},"2.5秒以内"," とされている。WebPへの変換でネットワーク転送量が減れば、ダウンロード時間が短縮されLCPが改善する。2MBのJPEGが1.4MB程度のWebPに変わるだけで、モバイル回線では0.5秒前後の短縮につながるケースもある。",[24,2535,2536],{"id":2536},"ページ速度とユーザー行動シグナルの改善",[12,2538,2539],{},"ページの表示速度が速くなると、直帰率が下がりセッション時間が延びる傾向がある。Googleはこうしたユーザー行動のシグナルも評価の参考にしていると考えられており、間接的なSEO効果として機能する。",[12,2541,2542],{},"特にモバイル環境では、Wi-Fiより通信が不安定な4G\u002F5G回線でアクセスするユーザーが多い。軽量なWebPはこの差が体感しやすく、モバイルファーストインデックスへの対応としても有効だ。",[24,2544,2546],{"id":2545},"pagespeed-insightsスコアの向上","PageSpeed Insightsスコアの向上",[12,2548,2549],{},"PageSpeed Insightsの「次世代フォーマットで画像を配信してください」という指摘は、JPEGやPNGを使い続けている限り消えない。WebPへの変換はこの指摘を直接解消し、PerformanceスコアとSEO関連スコアの両方に好影響をもたらす。",[182,2551],{},[16,2553,2555],{"id":2554},"webpの仕様と主要ブラウザの対応状況","WebPの仕様と主要ブラウザの対応状況",[12,2557,2558],{},"WebPはGoogleが開発し、2010年に公開した画像フォーマットだ。非可逆圧縮と可逆圧縮の両方をサポートし、アルファチャンネル（透過）やアニメーションにも対応している。",[12,2560,2561,2565],{},[44,2562,2564],{"href":1832,"rel":2563},[48],"WebPの公式仕様（developers.google.com）","によると、可逆圧縮ではPNGより平均26%、非可逆圧縮ではJPEGより平均25〜34%小さいファイルを生成できる。",[12,2567,2568,2569,2574,2575,2578,2579,2582],{},"ブラウザ対応については、",[44,2570,2573],{"href":2571,"rel":2572},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FMedia\u002FGuides\u002FFormats\u002FImage_types#webp",[48],"MDN Web Docs の WebP ページ","が参考になる。Chrome・Firefox・Safari・Edge の主要4ブラウザはいずれも対応済みで、2024年時点のグローバルシェアでは ",[193,2576,2577],{},"97%以上のブラウザがWebPを表示可能"," だ。古いIEや旧Safari向けのフォールバックが必要な場面では、以下のような",[39,2580,2581],{},"\u003Cpicture>","タグを使う方法が安全だ。",[631,2584,2586],{"className":633,"code":2585,"language":635,"meta":449,"style":449},"\u003Cpicture>\n  \u003Csource srcset=\"image.webp\" type=\"image\u002Fwebp\">\n  \u003Cimg src=\"image.jpg\" alt=\"代替テキスト\">\n\u003C\u002Fpicture>\n",[39,2587,2588,2597,2622,2646],{"__ignoreMap":449},[639,2589,2590,2592,2595],{"class":641,"line":642},[639,2591,669],{"class":668},[639,2593,2594],{"class":672},"picture",[639,2596,711],{"class":668},[639,2598,2599,2602,2605,2608,2610,2613,2615,2617,2620],{"class":641,"line":450},[639,2600,2601],{"class":668},"  \u003C",[639,2603,2604],{"class":672},"source",[639,2606,2607],{"class":676}," srcset",[639,2609,680],{"class":668},[639,2611,2612],{"class":683},"\"image.webp\"",[639,2614,687],{"class":676},[639,2616,680],{"class":668},[639,2618,2619],{"class":683},"\"image\u002Fwebp\"",[639,2621,711],{"class":668},[639,2623,2624,2626,2628,2631,2633,2636,2639,2641,2644],{"class":641,"line":455},[639,2625,2601],{"class":668},[639,2627,385],{"class":672},[639,2629,2630],{"class":676}," src",[639,2632,680],{"class":668},[639,2634,2635],{"class":683},"\"image.jpg\"",[639,2637,2638],{"class":676}," alt",[639,2640,680],{"class":668},[639,2642,2643],{"class":683},"\"代替テキスト\"",[639,2645,711],{"class":668},[639,2647,2648,2651,2653],{"class":641,"line":659},[639,2649,2650],{"class":668},"\u003C\u002F",[639,2652,2594],{"class":672},[639,2654,711],{"class":668},[182,2656],{},[16,2658,2660],{"id":2659},"変換ツールの選び方どこで処理されるかが重要な理由","変換ツールの選び方——「どこで処理されるか」が重要な理由",[12,2662,2663],{},"WebPへの変換方法は複数ある。サーバーサイドでImageMagickやlibwebpを使うバッチ処理、WordPressプラグイン（Imagify、ShortPixel等）、そしてブラウザ上で動作するオンラインツールだ。",[12,2665,2666,2667,2670],{},"選択する際に見落とされやすい観点が ",[193,2668,2669],{},"「ファイルがどこで処理されるか」"," だ。一般的なオンラインサービスは、ファイルを一度サーバーにアップロードして処理し、変換後のファイルをダウンロードさせる仕組みになっている。業務で扱う画像には、公開前の商品写真・社内資料のスクリーンショット・個人情報を含む書類画像など、外部に送信したくないものが含まれるケースも多い。",[12,2672,2673],{},"その点でブラウザ内処理（クライアントサイド処理）のツールは、ファイルが自分のデバイスの外に出ない。これはプライバシーポリシーや社内セキュリティ規定への適合という観点でも重要な差だ。",[24,2675,2677],{"id":2676},"主要webp変換ツール比較表","主要WebP変換ツール比較表",[63,2679,2680,2698],{},[66,2681,2682],{},[69,2683,2684,2686,2689,2692,2695],{},[72,2685,242],{},[72,2687,2688],{},"処理場所（送信先サーバー）",[72,2690,2691],{},"無料制限",[72,2693,2694],{},"オフライン動作",[72,2696,2697],{},"登録",[85,2699,2700,2727,2740,2755,2769,2783],{},[69,2701,2702,2708,2713,2717,2722],{},[90,2703,2704,2707],{},[193,2705,2706],{},"zerosend","（画像変換）",[90,2709,2710],{},[193,2711,2712],{},"なし（ブラウザ内完結）",[90,2714,2715],{},[193,2716,1545],{},[90,2718,2719],{},[193,2720,2721],{},"可（SW キャッシュ後）",[90,2723,2724],{},[193,2725,2726],{},"不要",[69,2728,2729,2731,2733,2735,2738],{},[90,2730,1540],{},[90,2732,2712],{},[90,2734,1545],{},[90,2736,2737],{},"可",[90,2739,2726],{},[69,2741,2742,2744,2747,2750,2753],{},[90,2743,1521],{},[90,2745,2746],{},"あり（サーバー処理）",[90,2748,2749],{},"月20ファイルまで",[90,2751,2752],{},"不可",[90,2754,2726],{},[69,2756,2757,2760,2762,2765,2767],{},[90,2758,2759],{},"Smallpdf",[90,2761,2746],{},[90,2763,2764],{},"1日2タスクまで",[90,2766,2752],{},[90,2768,2726],{},[69,2770,2771,2774,2776,2779,2781],{},[90,2772,2773],{},"iLovePDF",[90,2775,2746],{},[90,2777,2778],{},"ファイルサイズ制限あり",[90,2780,2752],{},[90,2782,2726],{},[69,2784,2785,2788,2790,2793,2795],{},[90,2786,2787],{},"Adobe Express",[90,2789,2746],{},[90,2791,2792],{},"機能制限あり",[90,2794,2752],{},[90,2796,2797],{},"要Adobe ID",[12,2799,2800],{},"TinyPNG・Smallpdf・iLovePDFといったサービスは利便性が高く広く使われているが、いずれもファイルをサーバーに送信する構造だ。Google製のSquooshもブラウザ内処理だが、2023年以降アクティブな開発が止まっており、一部の機能に不具合が報告されている。",[182,2802],{},[16,2804,2806],{"id":2805},"zerosend-でブラウザ内webp変換を行う手順","zerosend でブラウザ内WebP変換を行う手順",[12,2808,2809,2814,2815,2818,2819,2822,2823,2826],{},[44,2810,2813],{"href":2811,"rel":2812},"https:\u002F\u002Fzerosend.site\u002Ftools\u002Fimage-convert",[48],"zerosendの画像形式変換ツール","は、",[193,2816,2817],{},"browser-image-compression"," ライブラリと ",[193,2820,2821],{},"Canvas API"," をベースに構築されており、変換処理はすべてブラウザのメインスレッドではなく ",[193,2824,2825],{},"Web Worker"," 上で実行される。これにより、大容量ファイルの変換中もUIがフリーズしない設計になっている。",[24,2828,359],{"id":359},[361,2830,2831,2837,2840,2843,2846],{},[364,2832,2833,2836],{},[44,2834,2811],{"href":2811,"rel":2835},[48]," にアクセスする",[364,2838,2839],{},"変換したい画像ファイル（JPEG・PNG・GIF・AVIF等）をドラッグ＆ドロップ、または「ファイルを選択」で指定する",[364,2841,2842],{},"出力フォーマットとして「WebP」を選択する",[364,2844,2845],{},"品質スライダーで圧縮率を調整する（デフォルト値は多くの用途で適切）",[364,2847,2848],{},"「変換」ボタンをクリックし、完了後にダウンロードする",[24,2850,2851],{"id":2851},"ネットワーク通信ゼロを自分で確認する方法",[12,2853,2854],{},"本当にファイルがサーバーに送られていないかは、ブラウザのDevToolsで確認できる。",[361,2856,2857,2860,2870,2873],{},[364,2858,2859],{},"Chrome または Edge で変換ページを開く",[364,2861,2862,2865,2866,2869],{},[39,2863,2864],{},"F12","（または ",[39,2867,2868],{},"Cmd+Option+I","）でDevToolsを開き、「Network」タブを選択",[364,2871,2872],{},"ファイルをドラッグ＆ドロップして変換を実行する",[364,2874,2875],{},"NetworkタブにPOSTリクエストや外部ドメインへの通信が発生していないことを確認する",[12,2877,2878],{},"変換実行後も外部への通信が一切記録されないことが、クライアントサイド処理の証拠だ。",[24,2880,2881],{"id":2881},"オフライン動作について",[12,2883,2884],{},"zerosendはService Workerによるリソースキャッシュを実装している。初回アクセス後は、インターネット接続がない環境でも変換ツールが動作する。これはオフライン環境での業務や、通信制限を気にせず使いたい場面で実用的な特徴だ。",[182,2886],{},[16,2888,2890],{"id":2889},"webp変換を継続的な運用フローに組み込む方法","WebP変換を継続的な運用フローに組み込む方法",[24,2892,2893],{"id":2893},"既存コンテンツへの対応",[12,2895,2896],{},"まず既存のページ・記事・商品ページで使われている画像を洗い出し、PageSpeed Insightsで「次世代フォーマット」として指摘を受けているものを優先リストに入れる。ファイルサイズが500KB以上のJPEGやPNGは特に優先度が高い。",[12,2898,2899,2900,2902],{},"変換後は元のファイルをバックアップとして残しておき、",[39,2901,2581],{},"タグを使ってWebPとJPEGの両方を配信する構成にすると安全だ。",[24,2904,2905],{"id":2905},"新規コンテンツへのルール化",[12,2907,2908],{},"画像をアップロードする前にWebP変換を行うことを、コンテンツ制作フローのチェックリストに加える。「記事公開前にゼロsendで変換してからCMSにアップロードする」という一手順を加えるだけで、新規コンテンツの最適化を継続できる。",[24,2910,2911],{"id":2911},"変換前後の効果測定",[12,2913,2914],{},"PageSpeed InsightsとGoogle Search Consoleの「ページエクスペリエンス」レポートを使い、変換前後のLCPスコアを比較する。特にモバイルスコアの変化に注目すると、改善効果が数値として把握しやすい。",[182,2916],{},[16,2918,2919],{"id":2919},"よくある疑問と落とし穴",[24,2921,2923],{"id":2922},"faq","FAQ",[12,2925,2926],{},[193,2927,2928],{},"Q1. WebPに変換すると画質は落ちるのか？",[12,2930,2931],{},"非可逆圧縮（品質設定80〜85程度）であれば、通常のWeb表示ではJPEGと視覚的な差がほぼわからない。画質が重要な場面では品質を90以上に設定するか、可逆圧縮を使うことで元の品質を維持できる。",[12,2933,2934],{},[193,2935,2936],{},"Q2. PNG（透過画像）もWebPに変換できるか？",[12,2938,2939],{},"WebPはアルファチャンネルをサポートしているため、透過PNGをそのままWebPに変換できる。透過を保ちたい場合は可逆圧縮モードを選ぶか、品質設定を高めにすると良い。",[12,2941,2942],{},[193,2943,2944],{},"Q3. WordPressサイトの場合、プラグインとブラウザツールのどちらを使うべきか？",[12,2946,2947],{},"大量の画像を一括変換・自動最適化したい場合はShortPixelやImageifyなどのプラグインが効率的だ。一方、非公開の画像や機密性の高いファイルを変換したい場合は、ブラウザ内処理のツールの方がセキュリティ面で安心できる。用途によって使い分けが合理的だ。",[12,2949,2950],{},[193,2951,2952],{},"Q4. AVIFとWebPどちらを選ぶべきか？",[12,2954,2955,2956,2958],{},"AVIFはWebPよりさらに圧縮率が高いフォーマットだが、2024年時点ではブラウザ対応がWebPより若干低く（特に旧バージョンのSafari）、エンコード処理が遅い。汎用性の高さでは現時点でWebPが安定した選択肢だ。",[39,2957,2581],{},"タグでAVIF→WebP→JPEGの順でフォールバックを指定する方法も有効だ。",[12,2960,2961],{},[193,2962,2963],{},"Q5. ファイルサイズが逆に大きくなることはあるか？",[12,2965,2966],{},"ある。既にJPEGで強く圧縮されている画像や、小さなサイズの画像をWebPに変換すると、わずかにサイズが増えるケースがある。変換後は必ず元ファイルと比較し、小さくなっているものだけを採用するのが確実だ。",[24,2968,2969],{"id":2969},"実運用での落とし穴",[418,2971,2972,2978,2984],{},[364,2973,2974,2977],{},[193,2975,2976],{},"SNS投稿用画像への使用","：TwitterやInstagramなど一部のSNSプラットフォームはWebPのアップロードを受け付けないか、自動的に変換する。SNS向け画像はJPEGのままにしておくか、個別に確認が必要だ。",[364,2979,2980,2983],{},[193,2981,2982],{},"メールに添付する画像","：メールクライアントはWebPに対応していないものが多い。メール添付用途にはJPEGまたはPNGを維持する。",[364,2985,2986,2989],{},[193,2987,2988],{},"印刷データへの転用","：WebPはRGB色空間のみでCMYKには対応していない。印刷データとしては使用できない。",[182,2991],{},[16,2993,2995],{"id":2994},"まとめwebp変換が持つ実際のインパクト","まとめ——WebP変換が持つ実際のインパクト",[12,2997,2998],{},"WebP変換は、特別な開発環境や有料ツールを使わなくても取り組めるSEO改善施策だ。ファイルサイズの削減がLCPを改善し、ページ速度が上がり、ユーザー体験が向上し、それがSEOシグナルとして積み重なる。この一連の効果は、1枚の画像変換から始まる。",[12,3000,3001],{},"変換方法の選択では、「ファイルがサーバーに送信されるかどうか」が実務上の重要な判断軸になる。TinyPNGやSmallpdfのようなサービスは利便性が高い一方、業務上の機密画像を扱う場合はブラウザ内処理が適切だ。",[12,3003,3004,3007],{},[44,3005,2813],{"href":2811,"rel":3006},[48],"はbrowser-image-compressionとCanvas APIを使ったクライアントサイド処理で動作し、初回アクセス後はオフラインでも使用できる。DevToolsのNetworkタブで通信が発生していないことを自分で確認できるという透明性も、他の多くのオンラインツールにはない特徴だ。",[12,3009,3010],{},"まず手元の重い画像を一枚変換し、PageSpeed InsightsでLCPスコアの変化を確認する。そこから得られる数値が、次のアクションの判断根拠になる。",[986,3012,3013],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":449,"searchDepth":450,"depth":450,"links":3015},[3016,3017,3022,3023,3026,3031,3036,3040],{"id":2490,"depth":450,"text":2491},{"id":2513,"depth":450,"text":2514,"children":3018},[3019,3020,3021],{"id":2517,"depth":455,"text":2518},{"id":2536,"depth":455,"text":2536},{"id":2545,"depth":455,"text":2546},{"id":2554,"depth":450,"text":2555},{"id":2659,"depth":450,"text":2660,"children":3024},[3025],{"id":2676,"depth":455,"text":2677},{"id":2805,"depth":450,"text":2806,"children":3027},[3028,3029,3030],{"id":359,"depth":455,"text":359},{"id":2851,"depth":455,"text":2851},{"id":2881,"depth":455,"text":2881},{"id":2889,"depth":450,"text":2890,"children":3032},[3033,3034,3035],{"id":2893,"depth":455,"text":2893},{"id":2905,"depth":455,"text":2905},{"id":2911,"depth":455,"text":2911},{"id":2919,"depth":450,"text":2919,"children":3037},[3038,3039],{"id":2922,"depth":455,"text":2923},{"id":2969,"depth":455,"text":2969},{"id":2994,"depth":450,"text":2995},"WebP変換がLCP・ページ速度・SEOに与える効果を数値で解説。ブラウザ内完結の無料ツールと競合サービスを比較し、実践的な導入手順まで網羅。",{},"\u002Fblog\u002Fwebp-convert-seo","2026-05-07",{"title":2485,"description":3041},"webp-convert-seo","blog\u002Fwebp-convert-seo",[1014,479,3049,480],"Core Web Vitals","2026-05-15","-Eu7pPexS28YvfGAGQBghTT8cKqNen8fJjREmiLVn5w",{"id":3053,"title":3054,"author":7,"body":3055,"category":464,"coverImage":465,"description":3844,"draft":467,"extension":468,"locale":469,"meta":3845,"navigation":471,"noindex":467,"path":3846,"publishedAt":3847,"seo":3848,"slug":3849,"stem":3850,"tags":3851,"updatedAt":2282,"__hash__":3852},"blog\u002Fblog\u002Ffavicon-complete-guide-2026.md","ファビコン 完全ガイド 2026 — サイズ・形式・HTML 設置まで全部入り",{"type":9,"value":3056,"toc":3802},[3057,3064,3068,3074,3095,3099,3102,3106,3110,3132,3139,3146,3149,3163,3167,3170,3177,3249,3253,3260,3263,3273,3277,3280,3286,3444,3448,3454,3458,3463,3593,3600,3608,3612,3616,3619,3623,3626,3629,3639,3643,3649,3653,3656,3689,3692,3695,3699,3702,3706,3715,3721,3727,3730,3733,3772,3776,3783,3785,3792,3799],[12,3058,3059,3060,3063],{},"ファビコン (favicon) は地味なアセットですが、種類・サイズ・形式の選択肢が多く、毎回「結局どれが必要なんだっけ?」となる人も多いはずです。本記事では 2026 年時点で本当に必要なアイコン一式と、HTML への組み込み、Zerosend の ",[44,3061,877],{"href":3062},"\u002Ftools\u002Ffavicon-generator"," の活用法を整理します。",[16,3065,3067],{"id":3066},"ファビコンとは何か-1-分で復習","ファビコンとは何か (1 分で復習)",[24,3069,3071,3073],{"id":3070},"link-タグで参照される機能の総称",[39,3072,836],{}," タグで参照される機能の総称",[12,3075,3076,3077,3080,3081,3083,3084,3087,3088,3087,3091,3094],{},"ファビコンはブラウザのタブ表示に使われるアイコン、だけではなく",[193,3078,3079],{},"タブ \u002F ブックマーク \u002F PWA ホーム画面 \u002F 検索結果","など複数の文脈で使われる画像の総称です。",[39,3082,896],{}," 内の ",[39,3085,3086],{},"\u003Clink rel=\"icon\">"," \u002F ",[39,3089,3090],{},"\u003Clink rel=\"apple-touch-icon\">",[39,3092,3093],{},"\u003Clink rel=\"manifest\">"," で参照されるアセット群です。",[24,3096,3098],{"id":3097},"表示場所によって最適なサイズ形式が違う","表示場所によって最適なサイズ・形式が違う",[12,3100,3101],{},"タブ用には 16×16 \u002F 32×32 の小さいアイコンが必要ですが、iPhone のホーム画面には 180×180 の PNG、Android の PWA には 192×192 と 512×512 の PNG が必要です。場所ごとに要件が違います。",[16,3103,3105],{"id":3104},"_2026-年時点で本当に必要なアイコン","2026 年時点で本当に必要なアイコン",[24,3107,3109],{"id":3108},"必須-3-つ","必須 3 つ",[418,3111,3112,3117,3123],{},[364,3113,3114,3116],{},[39,3115,523],{}," — デスクトップブラウザのタブ \u002F ブックマーク (16\u002F32\u002F48px のマルチサイズ)",[364,3118,3119,3122],{},[39,3120,3121],{},"apple-touch-icon.png"," (180×180) — iOS のホーム画面",[364,3124,3125,3087,3128,3131],{},[39,3126,3127],{},"icon-192.png",[39,3129,3130],{},"icon-512.png"," — Android \u002F PWA 対応",[24,3133,3135,3136],{"id":3134},"推奨-faviconsvg","推奨: ",[39,3137,3138],{},"favicon.svg",[12,3140,3141,3142,3145],{},"モダンブラウザ (Chrome \u002F Firefox \u002F Safari の最新版) は SVG ファビコンに対応済みです。ベクターなのでどのサイズでもシャープに表示されます。ダークモード切替にも対応できるので、2026 年は ",[193,3143,3144],{},"SVG を第一選択","にして ICO をフォールバックにする運用がおすすめです。",[24,3147,3148],{"id":3148},"不要になったもの",[418,3150,3151,3157],{},[364,3152,3153,3156],{},[39,3154,3155],{},"browserconfig.xml"," (Windows 8\u002F10 タイル用) — IE 系と一緒に役目を終えています",[364,3158,3159,3162],{},[39,3160,3161],{},"*.png"," の 70×70 \u002F 150×150 \u002F 310×310 (IE\u002FEdge Legacy 向け)",[16,3164,3166],{"id":3165},"svg-ファビコンのメリットと対応ブラウザ","SVG ファビコンのメリットと対応ブラウザ",[24,3168,3169],{"id":3169},"ダークモード自動切替",[12,3171,3172,3173,3176],{},"SVG 内に ",[39,3174,3175],{},"@media (prefers-color-scheme: dark)"," のスタイルを書くだけで、OS のダークモードに合わせて色を切り替えられます。Chrome \u002F Firefox の最新版は対応済みです。",[631,3178,3180],{"className":633,"code":3179,"language":635,"meta":449,"style":449},"\u003Csvg>\n  \u003Cstyle>\n    @media (prefers-color-scheme: dark) {\n      .logo { fill: #fff; }\n    }\n  \u003C\u002Fstyle>\n  \u003Crect class=\"logo\" \u002F>\n\u003C\u002Fsvg>\n",[39,3181,3182,3191,3199,3204,3209,3214,3223,3241],{"__ignoreMap":449},[639,3183,3184,3186,3189],{"class":641,"line":642},[639,3185,669],{"class":668},[639,3187,3188],{"class":672},"svg",[639,3190,711],{"class":668},[639,3192,3193,3195,3197],{"class":641,"line":450},[639,3194,2601],{"class":668},[639,3196,986],{"class":672},[639,3198,711],{"class":668},[639,3200,3201],{"class":641,"line":455},[639,3202,3203],{"class":668},"    @media (prefers-color-scheme: dark) {\n",[639,3205,3206],{"class":641,"line":659},[639,3207,3208],{"class":668},"      .logo { fill: #fff; }\n",[639,3210,3211],{"class":641,"line":665},[639,3212,3213],{"class":668},"    }\n",[639,3215,3216,3219,3221],{"class":641,"line":714},[639,3217,3218],{"class":668},"  \u003C\u002F",[639,3220,986],{"class":672},[639,3222,711],{"class":668},[639,3224,3225,3227,3230,3233,3235,3238],{"class":641,"line":744},[639,3226,2601],{"class":668},[639,3228,3229],{"class":672},"rect",[639,3231,3232],{"class":676}," class",[639,3234,680],{"class":668},[639,3236,3237],{"class":683},"\"logo\"",[639,3239,3240],{"class":668}," \u002F>\n",[639,3242,3243,3245,3247],{"class":641,"line":749},[639,3244,2650],{"class":668},[639,3246,3188],{"class":672},[639,3248,711],{"class":668},[24,3250,3252],{"id":3251},"アニメーション-限定的","アニメーション (限定的)",[12,3254,3255,3256,3259],{},"SMIL \u002F CSS アニメーションは技術的には可能ですが、ブラウザが",[193,3257,3258],{},"アイドル時には動かさない","等の最適化を入れるケースが多く、過信は禁物です。原則は静止画として設計しましょう。",[24,3261,3262],{"id":3262},"非対応ブラウザへのフォールバック",[12,3264,3265,3268,3269,3272],{},[39,3266,3267],{},"\u003Clink rel=\"icon\" type=\"image\u002Fsvg+xml\">"," と ",[39,3270,3271],{},"\u003Clink rel=\"alternate icon\" type=\"image\u002Fx-icon\">"," を並べておけば、対応ブラウザは SVG、非対応は ICO を使います。",[16,3274,3276],{"id":3275},"sitewebmanifest-と-pwa","site.webmanifest と PWA",[24,3278,3279],{"id":3279},"必須プロパティ",[12,3281,3282,3283,3285],{},"PWA 対応を見据えると ",[39,3284,820],{}," を用意します。最低限の中身はこうなります。",[631,3287,3291],{"className":3288,"code":3289,"language":3290,"meta":449,"style":449},"language-json shiki shiki-themes github-light github-dark","{\n  \"name\": \"My Site\",\n  \"short_name\": \"MySite\",\n  \"icons\": [\n    { \"src\": \"\u002Ficon-192.png\", \"sizes\": \"192x192\", \"type\": \"image\u002Fpng\" },\n    { \"src\": \"\u002Ficon-512.png\", \"sizes\": \"512x512\", \"type\": \"image\u002Fpng\" }\n  ],\n  \"theme_color\": \"#0a0a0a\",\n  \"background_color\": \"#ffffff\",\n  \"display\": \"standalone\"\n}\n","json",[39,3292,3293,3298,3313,3325,3333,3369,3400,3405,3417,3429,3439],{"__ignoreMap":449},[639,3294,3295],{"class":641,"line":642},[639,3296,3297],{"class":668},"{\n",[639,3299,3300,3304,3307,3310],{"class":641,"line":450},[639,3301,3303],{"class":3302},"sj4cs","  \"name\"",[639,3305,3306],{"class":668},": ",[639,3308,3309],{"class":683},"\"My Site\"",[639,3311,3312],{"class":668},",\n",[639,3314,3315,3318,3320,3323],{"class":641,"line":455},[639,3316,3317],{"class":3302},"  \"short_name\"",[639,3319,3306],{"class":668},[639,3321,3322],{"class":683},"\"MySite\"",[639,3324,3312],{"class":668},[639,3326,3327,3330],{"class":641,"line":659},[639,3328,3329],{"class":3302},"  \"icons\"",[639,3331,3332],{"class":668},": [\n",[639,3334,3335,3338,3341,3343,3346,3349,3352,3354,3357,3359,3362,3364,3366],{"class":641,"line":665},[639,3336,3337],{"class":668},"    { ",[639,3339,3340],{"class":3302},"\"src\"",[639,3342,3306],{"class":668},[639,3344,3345],{"class":683},"\"\u002Ficon-192.png\"",[639,3347,3348],{"class":668},", ",[639,3350,3351],{"class":3302},"\"sizes\"",[639,3353,3306],{"class":668},[639,3355,3356],{"class":683},"\"192x192\"",[639,3358,3348],{"class":668},[639,3360,3361],{"class":3302},"\"type\"",[639,3363,3306],{"class":668},[639,3365,692],{"class":683},[639,3367,3368],{"class":668}," },\n",[639,3370,3371,3373,3375,3377,3380,3382,3384,3386,3389,3391,3393,3395,3397],{"class":641,"line":714},[639,3372,3337],{"class":668},[639,3374,3340],{"class":3302},[639,3376,3306],{"class":668},[639,3378,3379],{"class":683},"\"\u002Ficon-512.png\"",[639,3381,3348],{"class":668},[639,3383,3351],{"class":3302},[639,3385,3306],{"class":668},[639,3387,3388],{"class":683},"\"512x512\"",[639,3390,3348],{"class":668},[639,3392,3361],{"class":3302},[639,3394,3306],{"class":668},[639,3396,692],{"class":683},[639,3398,3399],{"class":668}," }\n",[639,3401,3402],{"class":641,"line":744},[639,3403,3404],{"class":668},"  ],\n",[639,3406,3407,3410,3412,3415],{"class":641,"line":749},[639,3408,3409],{"class":3302},"  \"theme_color\"",[639,3411,3306],{"class":668},[639,3413,3414],{"class":683},"\"#0a0a0a\"",[639,3416,3312],{"class":668},[639,3418,3419,3422,3424,3427],{"class":641,"line":755},[639,3420,3421],{"class":3302},"  \"background_color\"",[639,3423,3306],{"class":668},[639,3425,3426],{"class":683},"\"#ffffff\"",[639,3428,3312],{"class":668},[639,3430,3431,3434,3436],{"class":641,"line":784},[639,3432,3433],{"class":3302},"  \"display\"",[639,3435,3306],{"class":668},[639,3437,3438],{"class":683},"\"standalone\"\n",[639,3440,3441],{"class":641,"line":789},[639,3442,3443],{"class":668},"}\n",[24,3445,3447],{"id":3446},"ios-の癖","iOS の癖",[12,3449,3450,3451,3453],{},"iOS は ",[39,3452,3121],{}," を優先するため、webmanifest 側に icon を書いても iOS ホーム画面には適用されません。Android と iOS で別々のファイルを用意する前提で運用しましょう。",[16,3455,3457],{"id":3456},"html-に設置する正しい書き方","HTML に設置する正しい書き方",[12,3459,3460,3462],{},[39,3461,896],{}," に並べる順序のお手本:",[631,3464,3466],{"className":633,"code":3465,"language":635,"meta":449,"style":449},"\u003Clink rel=\"icon\" type=\"image\u002Fsvg+xml\" href=\"\u002Ffavicon.svg\">\n\u003Clink rel=\"alternate icon\" type=\"image\u002Fx-icon\" href=\"\u002Ffavicon.ico\">\n\u003Clink rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"\u002Fapple-touch-icon.png\">\n\u003Clink rel=\"manifest\" href=\"\u002Fsite.webmanifest\">\n\u003Cmeta name=\"theme-color\" content=\"#0a0a0a\">\n",[39,3467,3468,3494,3523,3549,3569],{"__ignoreMap":449},[639,3469,3470,3472,3474,3476,3478,3480,3482,3484,3486,3488,3490,3492],{"class":641,"line":642},[639,3471,669],{"class":668},[639,3473,673],{"class":672},[639,3475,677],{"class":676},[639,3477,680],{"class":668},[639,3479,684],{"class":683},[639,3481,687],{"class":676},[639,3483,680],{"class":668},[639,3485,772],{"class":683},[639,3487,703],{"class":676},[639,3489,680],{"class":668},[639,3491,779],{"class":683},[639,3493,711],{"class":668},[639,3495,3496,3498,3500,3502,3504,3507,3509,3511,3514,3516,3518,3521],{"class":641,"line":450},[639,3497,669],{"class":668},[639,3499,673],{"class":672},[639,3501,677],{"class":676},[639,3503,680],{"class":668},[639,3505,3506],{"class":683},"\"alternate icon\"",[639,3508,687],{"class":676},[639,3510,680],{"class":668},[639,3512,3513],{"class":683},"\"image\u002Fx-icon\"",[639,3515,703],{"class":676},[639,3517,680],{"class":668},[639,3519,3520],{"class":683},"\"\u002Ffavicon.ico\"",[639,3522,711],{"class":668},[639,3524,3525,3527,3529,3531,3533,3535,3537,3539,3541,3543,3545,3547],{"class":641,"line":455},[639,3526,669],{"class":668},[639,3528,673],{"class":672},[639,3530,677],{"class":676},[639,3532,680],{"class":668},[639,3534,725],{"class":683},[639,3536,695],{"class":676},[639,3538,680],{"class":668},[639,3540,732],{"class":683},[639,3542,703],{"class":676},[639,3544,680],{"class":668},[639,3546,739],{"class":683},[639,3548,711],{"class":668},[639,3550,3551,3553,3555,3557,3559,3561,3563,3565,3567],{"class":641,"line":659},[639,3552,669],{"class":668},[639,3554,673],{"class":672},[639,3556,677],{"class":676},[639,3558,680],{"class":668},[639,3560,806],{"class":683},[639,3562,703],{"class":676},[639,3564,680],{"class":668},[639,3566,813],{"class":683},[639,3568,711],{"class":668},[639,3570,3571,3573,3576,3579,3581,3584,3587,3589,3591],{"class":641,"line":665},[639,3572,669],{"class":668},[639,3574,3575],{"class":672},"meta",[639,3577,3578],{"class":676}," name",[639,3580,680],{"class":668},[639,3582,3583],{"class":683},"\"theme-color\"",[639,3585,3586],{"class":676}," content",[639,3588,680],{"class":668},[639,3590,3414],{"class":683},[639,3592,711],{"class":668},[24,3594,3596,3599],{"id":3595},"sizesany-の罠",[39,3597,3598],{},"sizes=\"any\""," の罠",[12,3601,3602,3604,3605,2192],{},[39,3603,3598],{}," を SVG に付けると、ブラウザが SVG を ICO より優先するようになります。基本的に意図通りですが、古い iOS で誤解される例があったため、2026 年時点では",[193,3606,3607],{},"書かないのが無難",[16,3609,3611],{"id":3610},"ファビコン生成アプローチの-3-類型と向き不向き","ファビコン生成アプローチの 3 類型と向き不向き",[24,3613,3615],{"id":3614},"アップロード型のオンライン-saas","アップロード型のオンライン SaaS",[12,3617,3618],{},"高機能で一発生成。ただしロゴ画像を一度サーバーに送ります。公開済みのロゴなら気にならないケースが多いです。",[24,3620,3622],{"id":3621},"デスクトップ-ローカルアプリ","デスクトップ \u002F ローカルアプリ",[12,3624,3625],{},"ImageMagick \u002F Sketch \u002F Figma 等。CLI や GUI で手元だけで生成できますが、セットアップが必要です。",[24,3627,3628],{"id":3628},"ブラウザ内完結型",[12,3630,3631,3632,3634,3635,3638],{},"Zerosend の ",[44,3633,877],{"href":3062}," がこの型。",[193,3636,3637],{},"インストール不要 + 手元完結","で、NDA 下の未公開ロゴでも気兼ねなく使えます。",[24,3640,3642],{"id":3641},"nda-下未公開ブランド社内案件での選び方","NDA 下・未公開ブランド・社内案件での選び方",[12,3644,3645,3646,3648],{},"受託案件や新規ブランドの立ち上げでは、ロゴ画像の取り扱いに神経を使います。この場合は",[193,3647,3628],{},"を選ぶか、デスクトップアプリで手元処理するのが安心です。",[16,3650,3652],{"id":3651},"zerosend-でブラウザ内完結で作る手順","Zerosend でブラウザ内完結で作る手順",[12,3654,3655],{},"1 枚の PNG または SVG から、必要なファイル一式 (ICO \u002F PNG 複数サイズ \u002F apple-touch-icon \u002F site.webmanifest \u002F HTML スニペット) を ZIP で一気に生成できます。",[361,3657,3658,3663,3666,3669,3672,3675],{},[364,3659,3660,3662],{},[44,3661,3062],{"href":3062}," にアクセス",[364,3664,3665],{},"ロゴ画像をドラッグ&ドロップ (推奨: 512×512 以上の正方形)",[364,3667,3668],{},"アプリ名 \u002F theme_color \u002F background_color を入力",[364,3670,3671],{},"「ファビコン一式を生成する」",[364,3673,3674],{},"生成されたプレビューを確認し、ZIP をダウンロード",[364,3676,3677,3678,3681,3682,3684,3685,3688],{},"ZIP に同梱の ",[39,3679,3680],{},"snippet.html"," の内容を ",[39,3683,896],{}," に貼り付け、各ファイルをサイトのルート (",[39,3686,3687],{},"\u002F",") に配置",[12,3690,3691],{},"ブラウザ内完結なので、ロゴ画像が外部に送られることはありません。",[16,3693,3694],{"id":3694},"よくある失敗",[24,3696,3698],{"id":3697},"retina-で滲む","Retina で滲む",[12,3700,3701],{},"タブで綺麗に見せるには 32×32 や 48×48 も用意する必要があります。Zerosend は 16\u002F32\u002F48 のマルチサイズ ICO を自動で作ります。",[24,3703,3705],{"id":3704},"ios-ホーム画面で余白が出る","iOS ホーム画面で余白が出る",[12,3707,3708,3710,3711,3714],{},[39,3709,3121],{}," は",[193,3712,3713],{},"背景透過に対応していません","。透過 PNG を渡すと iOS が黒背景で埋めてしまうので、背景色を明示的に塗った PNG を用意しましょう。",[24,3716,3718,3720],{"id":3717},"faviconico-だけしか指定していない",[39,3719,523],{}," だけしか指定していない",[12,3722,3723,3724,3726],{},"モダンブラウザで SVG を使うメリットを取りこぼします。少なくとも ",[39,3725,3138],{}," は併用するのが 2026 年の標準です。",[24,3728,3729],{"id":3729},"ブラウザキャッシュが残って古いアイコンが表示される",[12,3731,3732],{},"ブラウザはファビコンを積極的にキャッシュします。差し替え後に古いアイコンのままになる時は次を試します。",[418,3734,3735,3748,3754,3765],{},[364,3736,3737,3740,3741,3087,3744,3747],{},[193,3738,3739],{},"強制リロード"," (",[39,3742,3743],{},"Ctrl+Shift+R",[39,3745,3746],{},"Cmd+Shift+R",") で再取得",[364,3749,3750,3753],{},[193,3751,3752],{},"プライベート \u002F シークレットウィンドウ"," で確認 (キャッシュを噛まない)",[364,3755,3756,3757,3760,3761,3764],{},"本番では ",[39,3758,3759],{},"\u003Clink rel=\"icon\" href=\"\u002Ffavicon.ico?v=2\">"," のように",[193,3762,3763],{},"バージョンクエリ","を付けて即時反映を促す",[364,3766,3767,3768,3771],{},"Chrome は ",[39,3769,3770],{},"chrome:\u002F\u002Ffavicon\u002Fhttps:\u002F\u002Fyour-site.com\u002F"," でブラウザが認識しているファビコンを直接確認できる",[24,3773,3775],{"id":3774},"google-検索結果にファビコンが出ない","Google 検索結果にファビコンが出ない",[12,3777,3778,3779,3782],{},"Google モバイル SERP に表示されるには ",[193,3780,3781],{},"48×48 以上のアイコンがクロール可能","であること、かつ「サイト全体を代表するアイコン」というガイドラインに沿っていることが求められます。Zerosend のファビコン生成ツールは 16\u002F32\u002F48 のマルチサイズ ICO を自動で書き出すため、この要件は満たせます。サブドメインごとに別のファビコンを設定することも可能です。",[16,3784,416],{"id":416},[12,3786,3787,3788,3791],{},"2026 年のファビコン運用は「SVG を第一選択 + ICO \u002F apple-touch-icon \u002F PWA アイコン + webmanifest」の組み合わせで完成します。1 枚の画像から一式を生成するなら、ブラウザ内で完結する ",[44,3789,3790],{"href":3062},"Zerosend のファビコン生成ツール"," が手早くておすすめです。",[12,3793,3794,3795],{},"関連: ",[44,3796,3798],{"href":3797},"\u002Fblog\u002Ffavicon-generator-intro","ファビコン生成ツールの舞台裏",[986,3800,3801],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":449,"searchDepth":450,"depth":450,"links":3803},[3804,3809,3815,3820,3824,3828,3834,3835,3843],{"id":3066,"depth":450,"text":3067,"children":3805},[3806,3808],{"id":3070,"depth":455,"text":3807},"\u003Clink> タグで参照される機能の総称",{"id":3097,"depth":455,"text":3098},{"id":3104,"depth":450,"text":3105,"children":3810},[3811,3812,3814],{"id":3108,"depth":455,"text":3109},{"id":3134,"depth":455,"text":3813},"推奨: favicon.svg",{"id":3148,"depth":455,"text":3148},{"id":3165,"depth":450,"text":3166,"children":3816},[3817,3818,3819],{"id":3169,"depth":455,"text":3169},{"id":3251,"depth":455,"text":3252},{"id":3262,"depth":455,"text":3262},{"id":3275,"depth":450,"text":3276,"children":3821},[3822,3823],{"id":3279,"depth":455,"text":3279},{"id":3446,"depth":455,"text":3447},{"id":3456,"depth":450,"text":3457,"children":3825},[3826],{"id":3595,"depth":455,"text":3827},"sizes=\"any\" の罠",{"id":3610,"depth":450,"text":3611,"children":3829},[3830,3831,3832,3833],{"id":3614,"depth":455,"text":3615},{"id":3621,"depth":455,"text":3622},{"id":3628,"depth":455,"text":3628},{"id":3641,"depth":455,"text":3642},{"id":3651,"depth":450,"text":3652},{"id":3694,"depth":450,"text":3694,"children":3836},[3837,3838,3839,3841,3842],{"id":3697,"depth":455,"text":3698},{"id":3704,"depth":455,"text":3705},{"id":3717,"depth":455,"text":3840},"favicon.ico だけしか指定していない",{"id":3729,"depth":455,"text":3729},{"id":3774,"depth":455,"text":3775},{"id":416,"depth":450,"text":416},"ファビコンのサイズは結局どれが必要? ICO と SVG の使い分けは? 2026 年時点で本当に必要なアイコンセットと、1 枚の画像からブラウザ内で一式生成できる方法を解説します。",{},"\u002Fblog\u002Ffavicon-complete-guide-2026","2026-04-19",{"title":3054,"description":3844},"favicon-complete-guide-2026","blog\u002Ffavicon-complete-guide-2026",[1013,480,973],"rGRV7aRcqetLpG7f7z1cHwfvIdswbm-q-bojGTxqaWs",1781827532188]