[{"data":1,"prerenderedAt":2372},["ShallowReactive",2],{"blog-tag-ja-tech":3},[4,483,1016,1419,1838,2144],{"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":1409,"draft":467,"extension":468,"locale":469,"meta":1410,"navigation":471,"noindex":467,"path":1411,"publishedAt":1412,"seo":1413,"slug":1414,"stem":1415,"tags":1416,"updatedAt":1412,"__hash__":1418},"blog\u002Fblog\u002Fheic-what-is-how-to-open.md","HEICファイルとは？iPhoneで撮った写真が開けない原因と変換方法",{"type":9,"value":1020,"toc":1397},[1021,1028,1031,1034,1036,1040,1053,1056,1135,1138,1140,1144,1148,1155,1169,1172,1176,1184,1188,1191,1193,1197,1204,1207,1214,1216,1220,1223,1291,1294,1301,1314,1317,1319,1322,1337,1345,1353,1361,1363,1365,1368,1394],[12,1022,1023,1024,1027],{},"iPhoneで撮った写真をWindowsのPCやウェブフォームに送ろうとしたとき、「このファイルは開けません」と表示された経験はないだろうか。原因のほとんどは、ファイルの拡張子が ",[39,1025,1026],{},".heic"," になっていることだ。",[12,1029,1030],{},"HEICはAppleがiOS 11から採用した画像形式で、JPEGと比較して同等の画質をおよそ半分のファイルサイズで保存できる。ストレージ節約には優秀だが、Windows標準環境や古いソフトウェア、各種ウェブサービスのアップロードフォームでは未対応のケースが多く、ビジネスの現場でたびたびつまずきの原因になる。",[12,1032,1033],{},"この記事では、HEICの仕組みをひととおり説明したうえで、WindowsとMacそれぞれでの開き方、そしてJPGへの変換方法を実践的にまとめる。",[182,1035],{},[16,1037,1039],{"id":1038},"heicとは何かjpegとの違いを押さえる","HEICとは何か――JPEGとの違いを押さえる",[12,1041,1042,1043,1046,1047,1052],{},"HEICは ",[193,1044,1045],{},"High Efficiency Image Container"," の略で、映像圧縮規格HEVC（H.265）をベースにした静止画フォーマットだ。",[44,1048,1051],{"href":1049,"rel":1050},"https:\u002F\u002Fmpeg.chiariglione.org\u002Fstandards\u002Fmpeg-h\u002Fimage-file-format",[48],"MPEG公式の仕様書","では、単一フレームだけでなく画像シーケンスやバースト撮影のデータも1ファイルに格納できると定義されている。",[12,1054,1055],{},"JPEGと並べた場合の主な特徴は以下のとおり。",[63,1057,1058,1070],{},[66,1059,1060],{},[69,1061,1062,1064,1067],{},[72,1063,74],{},[72,1065,1066],{},"HEIC",[72,1068,1069],{},"JPEG",[85,1071,1072,1083,1094,1105,1115,1125],{},[69,1073,1074,1077,1080],{},[90,1075,1076],{},"圧縮アルゴリズム",[90,1078,1079],{},"HEVC (H.265)",[90,1081,1082],{},"DCT",[69,1084,1085,1088,1091],{},[90,1086,1087],{},"同画質でのファイルサイズ",[90,1089,1090],{},"約50%小さい",[90,1092,1093],{},"基準",[69,1095,1096,1099,1102],{},[90,1097,1098],{},"透過（アルファチャンネル）",[90,1100,1101],{},"対応",[90,1103,1104],{},"非対応",[69,1106,1107,1110,1112],{},[90,1108,1109],{},"HDR \u002F 広色域",[90,1111,1101],{},[90,1113,1114],{},"限定的",[69,1116,1117,1120,1123],{},[90,1118,1119],{},"Windows標準での表示",[90,1121,1122],{},"要拡張機能",[90,1124,1101],{},[69,1126,1127,1130,1132],{},[90,1128,1129],{},"ブラウザの対応状況",[90,1131,1114],{},[90,1133,1134],{},"広く対応",[12,1136,1137],{},"Webへのアップロード、印刷所への入稿、社内の共有フォルダへの保存――どれもJPEGを前提にしているサービスや環境がまだ多い。HEICのままでは使えないシーンが多いのはそのためだ。",[182,1139],{},[16,1141,1143],{"id":1142},"windowsでheicを開く3つの方法","WindowsでHEICを開く3つの方法",[24,1145,1147],{"id":1146},"方法1microsoft-storeから拡張機能を追加する","方法1：Microsoft Storeから拡張機能を追加する",[12,1149,1150,1151,1154],{},"Windows 10 \u002F 11では、Microsoft Storeで ",[193,1152,1153],{},"「HEIF Image Extensions」","（無料）をインストールすると、エクスプローラーやフォトアプリでHEICファイルをそのまま開けるようになる。",[361,1156,1157,1160,1163,1166],{},[364,1158,1159],{},"スタートメニューから「Microsoft Store」を開く",[364,1161,1162],{},"検索欄に「HEIF Image Extensions」と入力",[364,1164,1165],{},"「入手」をクリックしてインストール",[364,1167,1168],{},"フォトアプリでHEICファイルをダブルクリック",[12,1170,1171],{},"インストール後は再起動不要ですぐに反映される。閲覧だけが目的であればこれで十分だ。",[24,1173,1175],{"id":1174},"方法2irfanviewなど無料ビューアを使う","方法2：IrfanViewなど無料ビューアを使う",[12,1177,1178,1183],{},[44,1179,1182],{"href":1180,"rel":1181},"https:\u002F\u002Fwww.irfanview.com\u002F",[48],"IrfanView","はプラグイン「HEIF\u002FHEIC」を追加することでHEICの表示と変換に対応する。バッチ変換機能もあるため、大量ファイルを一括でJPEGに変換する用途に向いている。",[24,1185,1187],{"id":1186},"方法3jpgに変換してしまう","方法3：JPGに変換してしまう",[12,1189,1190],{},"開くだけでなく、他者への送付や入稿を考えているなら、最初からJPGへ変換してしまうのが一番手間がかからない。変換方法は後のセクションで詳しく説明する。",[182,1192],{},[16,1194,1196],{"id":1195},"macでheicを開く方法","MacでHEICを開く方法",[12,1198,1199,1200,1203],{},"MacはmacOS High Sierra以降でHEICをネイティブサポートしているため、",[193,1201,1202],{},"プレビュー.appでそのまま開ける","。追加インストールは不要だ。",[12,1205,1206],{},"ただし、Macで開いた写真をWindowsユーザーに送るときは注意が必要で、メールに添付したHEICファイルを受け取った相手が開けないという問題は依然として起きやすい。",[12,1208,1209,1210,1213],{},"iPhoneの設定で転送フォーマットをJPEGに変えておく方法もある。「設定」→「写真」→「MACまたはPCに転送」を「自動」から「元のフォーマットのまま」ではなく ",[193,1211,1212],{},"「互換性優先」"," にするだけでよい。ただしこれは転送時のみの変換で、iPhone本体に保存される形式はHEICのままとなる。",[182,1215],{},[16,1217,1219],{"id":1218},"heicをjpgに変換する方法ブラウザだけで完結する選択肢","HEICをJPGに変換する方法――ブラウザだけで完結する選択肢",[12,1221,1222],{},"変換方法はいくつかあるが、整理すると大きく3種類になる。",[63,1224,1225,1241],{},[66,1226,1227],{},[69,1228,1229,1232,1235,1238],{},[72,1230,1231],{},"方法",[72,1233,1234],{},"ファイルの送信先",[72,1236,1237],{},"コスト",[72,1239,1240],{},"インストール",[85,1242,1243,1257,1271],{},[69,1244,1245,1248,1251,1254],{},[90,1246,1247],{},"Smallpdf \u002F iLovePDF などオンラインツール",[90,1249,1250],{},"サーバーにアップロード",[90,1252,1253],{},"無料〜有料",[90,1255,1256],{},"不要",[69,1258,1259,1262,1265,1268],{},[90,1260,1261],{},"Photoshop \u002F Lightroom",[90,1263,1264],{},"ローカル処理",[90,1266,1267],{},"有料サブスク",[90,1269,1270],{},"必要",[69,1272,1273,1278,1283,1287],{},[90,1274,1275],{},[193,1276,1277],{},"zerosend（ブラウザ内処理）",[90,1279,1280],{},[193,1281,1282],{},"送信なし・ブラウザ内のみ",[90,1284,1285],{},[193,1286,267],{},[90,1288,1289],{},[193,1290,1256],{},[12,1292,1293],{},"SmallpdfやiLovePDFのようなオンラインサービスは手軽だが、ファイルを一度サーバーにアップロードする仕組みになっている。個人の写真や業務上の書類を扱う場合、この点は確認しておきたい。",[12,1295,1296,1300],{},[44,1297,1299],{"href":1298},"\u002Ftools\u002Fheic-to-jpg","HEIC → JPG 変換ツール"," は、ファイルをサーバーに送信せずブラウザ内だけで変換処理を行う。処理にはWebAssemblyを使用しており、DevToolsのNetworkタブを確認すれば画像データが外部へ送信されていないことを確認できる。操作手順は次のとおり。",[361,1302,1303,1308,1311],{},[364,1304,1305,1307],{},[44,1306,1299],{"href":1298}," をブラウザで開く",[364,1309,1310],{},"HEICファイルをドロップ、またはファイル選択ボタンで指定する",[364,1312,1313],{},"変換が完了したらダウンロードボタンを押す",[12,1315,1316],{},"アカウント登録は不要で、複数ファイルの一括変換にも対応している。オフライン環境でも、初回ロード後であれば動作する。",[182,1318],{},[16,1320,1321],{"id":1321},"よくある疑問",[12,1323,1324,1327,1330,1331,1336],{},[193,1325,1326],{},"Q. HEICとHEIFは同じものですか？",[1328,1329],"br",{},"\n厳密には異なる。HEIFはコンテナ形式の名称（High Efficiency Image File Format）で、HEICはそのなかでHEVC圧縮を使った静止画のファイル拡張子だ。Appleの端末で生成されるのは主にHEIC。",[44,1332,1335],{"href":1333,"rel":1334},"https:\u002F\u002Fsupport.apple.com\u002Fja-jp\u002F101994",[48],"Appleの公式ドキュメント","でも両者の関係が説明されている。",[12,1338,1339,1342,1344],{},[193,1340,1341],{},"Q. 変換するとき画質は落ちますか？",[1328,1343],{},"\nJPGへの変換は不可逆圧縮の再エンコードになるため、品質設定によっては多少の劣化が生じる。品質を90〜95%程度に設定できるツールを選ぶと劣化を最小限に抑えられる。",[12,1346,1347,1350,1352],{},[193,1348,1349],{},"Q. iPhoneの写真をそもそもJPEGで保存できますか？",[1328,1351],{},"\nできる。「設定」→「カメラ」→「フォーマット」を「高互換性」に変更するとJPEGで保存されるようになる。ただしファイルサイズは増える。",[12,1354,1355,1358,1360],{},[193,1356,1357],{},"Q. 大量のHEICファイルを一括変換したい場合は？",[1328,1359],{},"\n前述のIrfanView（バッチ変換機能あり）か、zerosendのブラウザツールで複数ファイルをまとめてドロップする方法が手軽だ。",[182,1362],{},[16,1364,416],{"id":416},[12,1366,1367],{},"HEICはAppleが選んだ効率的な画像フォーマットだが、Windows環境やウェブサービスとの互換性問題は現在も残っている。対処法は用途によって使い分けるとよい。",[418,1369,1370,1376,1382,1388],{},[364,1371,1372,1375],{},[193,1373,1374],{},"開くだけでよい（Windows）"," → HEIF Image Extensions をインストール",[364,1377,1378,1381],{},[193,1379,1380],{},"Macなら"," → プレビュー.appでそのまま開ける",[364,1383,1384,1387],{},[193,1385,1386],{},"共有・入稿・アップロード用に変換したい"," → JPG変換ツールを使う",[364,1389,1390,1393],{},[193,1391,1392],{},"プライバシーが気になる"," → ブラウザ内処理のツールを選ぶ",[12,1395,1396],{},"ファイルを外部サーバーに送りたくない場面では、ブラウザだけで完結する変換手段を選ぶことで、データの外部流出リスクを排除できる。",{"title":449,"searchDepth":450,"depth":450,"links":1398},[1399,1400,1405,1406,1407,1408],{"id":1038,"depth":450,"text":1039},{"id":1142,"depth":450,"text":1143,"children":1401},[1402,1403,1404],{"id":1146,"depth":455,"text":1147},{"id":1174,"depth":455,"text":1175},{"id":1186,"depth":455,"text":1187},{"id":1195,"depth":450,"text":1196},{"id":1218,"depth":450,"text":1219},{"id":1321,"depth":450,"text":1321},{"id":416,"depth":450,"text":416},"iPhoneで撮影したHEICファイルが開けない理由と、Windows・Macでの対処法を解説。ブラウザだけで完結するJPG変換方法も紹介します。",{},"\u002Fblog\u002Fheic-what-is-how-to-open","2026-05-23",{"title":1018,"description":1409},"heic-what-is-how-to-open","blog\u002Fheic-what-is-how-to-open",[1417,479,254,481],"画像","foHjvamEBQw9X-LkgQY5WNYFiWN_-Dk12nJq9kD8NGs",{"id":1420,"title":1421,"author":7,"body":1422,"category":464,"coverImage":465,"description":1829,"draft":467,"extension":468,"locale":469,"meta":1830,"navigation":471,"noindex":467,"path":1831,"publishedAt":1832,"seo":1833,"slug":1834,"stem":1835,"tags":1836,"updatedAt":1832,"__hash__":1837},"blog\u002Fblog\u002Fgif-vs-video-web-usage.md","GIFと動画の違いとウェブでの使い分け完全ガイド",{"type":9,"value":1423,"toc":1812},[1424,1427,1430,1432,1436,1440,1447,1450,1467,1471,1478,1487,1516,1518,1522,1526,1549,1553,1573,1576,1701,1703,1707,1710,1713,1716,1719,1727,1730,1744,1747,1749,1752,1758,1774,1780,1786,1788,1790,1793,1809],[12,1425,1426],{},"Webサイトの制作や運用をしていると、「この動きのある素材、GIFで使うべきか、動画で使うべきか」と迷う場面がある。どちらも「動く」という点では同じに見えるが、仕組みもファイルサイズも、ブラウザでの扱われ方も大きく異なる。選択を誤ると、ページの読み込みが遅くなったり、逆に意図した表示ができなかったりする。",[12,1428,1429],{},"この記事では、GIFと動画の技術的な差異を整理したうえで、ウェブ制作・ビジネス用途でどちらを選ぶべきかの判断基準を具体的に示す。",[182,1431],{},[16,1433,1435],{"id":1434},"gifと動画mp4webmの技術的な違い","GIFと動画（MP4\u002FWebM）の技術的な違い",[24,1437,1439],{"id":1438},"gifとは何か","GIFとは何か",[12,1441,1442,1443,1446],{},"GIF（Graphics Interchange Format）は1987年にCompServeが策定した画像フォーマットで、最大256色までの静止画または複数フレームのアニメーションを1ファイルに格納できる。仕様上、動画コーデックではなく",[193,1444,1445],{},"画像フォーマット","として定義されており、音声トラックを持てない。",[12,1448,1449],{},"ファイルの特性として以下が挙げられる。",[418,1451,1452,1455,1458,1464],{},[364,1453,1454],{},"色深度が8ビット（最大256色）に制限される",[364,1456,1457],{},"フレームを並べる構造のため、圧縮効率が低い",[364,1459,1460,1463],{},[39,1461,1462],{},"\u003Cimg>"," タグで直接埋め込める（JavaScriptや追加APIが不要）",[364,1465,1466],{},"自動再生・ループが多くのメール・チャットツールで標準対応している",[24,1468,1470],{"id":1469},"動画フォーマットmp4webmとの差異","動画フォーマット（MP4・WebM）との差異",[12,1472,1473,1474,1477],{},"MP4（H.264\u002FH.265コーデック）やWebM（VP8\u002FVP9\u002FAV1コーデック）は、映像を時間軸で圧縮する",[193,1475,1476],{},"動画フォーマット","だ。フレーム間の差分だけを記録する手法（インターフレーム圧縮）により、GIFと比べて圧倒的に高い圧縮効率を持つ。",[12,1479,1480,1481,1486],{},"Googleの公式ドキュメント（",[44,1482,1485],{"href":1483,"rel":1484},"https:\u002F\u002Fweb.dev\u002Farticles\u002Freplace-gifs-with-videos",[48],"web.dev: Replace animated GIFs with video","）は、「アニメーションGIFをMP4に置き換えるだけでファイルサイズを最大80%削減できる」と明記している。",[12,1488,1489,1490,1498,1499,1501,1502,1505,1506,1505,1509,1505,1512,1515],{},"また、",[44,1491,1494,1495,1497],{"href":1492,"rel":1493},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FElements\u002Fvideo",[48],"MDN Web Docs の ",[39,1496,41],{}," 要素の解説","でも確認できるとおり、",[39,1500,41],{}," タグは ",[39,1503,1504],{},"autoplay","・",[39,1507,1508],{},"loop",[39,1510,1511],{},"muted",[39,1513,1514],{},"playsinline"," 属性を組み合わせることで、GIFと視覚的に同等の「自動ループ再生」を実現できる。",[182,1517],{},[16,1519,1521],{"id":1520},"ウェブでの使い分けどちらを選ぶべきか","ウェブでの使い分け：どちらを選ぶべきか",[24,1523,1525],{"id":1524},"gifが適しているケース","GIFが適しているケース",[361,1527,1528,1537,1543],{},[364,1529,1530,1533,1534,1536],{},[193,1531,1532],{},"メール本文・チャットツール（Slack・Teams等）への埋め込み","　多くのメールクライアントや業務チャットは ",[39,1535,41],{}," タグを解釈しないため、GIFが唯一の「動くコンテンツ」になる。",[364,1538,1539,1542],{},[193,1540,1541],{},"SNS投稿（Twitter\u002FX・LINEなど）","　プラットフォーム側が内部的にGIFをMP4に変換して配信するケースもあるが、ユーザーがGIFをドラッグ&ドロップしやすい文化が根付いている。",[364,1544,1545,1548],{},[193,1546,1547],{},"短い・シンプルなアニメーション（ローディングスピナーなど）","　色数が少なく2〜3秒以内のループアニメーションは、GIFでもファイルサイズを抑えられる。",[24,1550,1552],{"id":1551},"動画mp4webmが適しているケース","動画（MP4\u002FWebM）が適しているケース",[361,1554,1555,1561,1567],{},[364,1556,1557,1560],{},[193,1558,1559],{},"ウェブページへの埋め込み","　ページ速度（Core Web Vitals の LCP や TBT）に影響するため、大きなアニメーション素材は必ず動画形式を選ぶ。",[364,1562,1563,1566],{},[193,1564,1565],{},"色数が多い・リアルな映像素材","　写真やスクリーンキャプチャを含む動きのある素材は、GIFの256色制限で品質が著しく劣化する。",[364,1568,1569,1572],{},[193,1570,1571],{},"音声付きコンテンツ","　GIFは音声を持てないため、ナレーションやBGMが必要な場合は動画一択。",[24,1574,1575],{"id":1575},"比較表",[63,1577,1578,1593],{},[66,1579,1580],{},[69,1581,1582,1584,1587,1590],{},[72,1583,74],{},[72,1585,1586],{},"GIF",[72,1588,1589],{},"MP4（H.264）",[72,1591,1592],{},"WebM（VP9）",[85,1594,1595,1608,1619,1632,1646,1657,1675,1689],{},[69,1596,1597,1600,1603,1606],{},[90,1598,1599],{},"色深度",[90,1601,1602],{},"8bit（256色）",[90,1604,1605],{},"フルカラー",[90,1607,1605],{},[69,1609,1610,1613,1615,1617],{},[90,1611,1612],{},"音声",[90,1614,1104],{},[90,1616,1101],{},[90,1618,1101],{},[69,1620,1621,1624,1627,1630],{},[90,1622,1623],{},"圧縮効率",[90,1625,1626],{},"低い",[90,1628,1629],{},"高い",[90,1631,1629],{},[69,1633,1634,1639,1641,1644],{},[90,1635,1636,1638],{},[39,1637,1462],{}," タグ対応",[90,1640,138],{},[90,1642,1643],{},"✗",[90,1645,1643],{},[69,1647,1648,1651,1653,1655],{},[90,1649,1650],{},"メール埋め込み",[90,1652,138],{},[90,1654,1643],{},[90,1656,1643],{},[69,1658,1659,1662,1665,1671],{},[90,1660,1661],{},"ブラウザ自動再生",[90,1663,1664],{},"自動",[90,1666,1667,1670],{},[39,1668,1669],{},"autoplay muted"," で可",[90,1672,1673,1670],{},[39,1674,1669],{},[69,1676,1677,1680,1683,1686],{},[90,1678,1679],{},"典型的なファイルサイズ（5秒）",[90,1681,1682],{},"3〜15MB",[90,1684,1685],{},"0.3〜2MB",[90,1687,1688],{},"0.2〜1.5MB",[69,1690,1691,1694,1697,1699],{},[90,1692,1693],{},"送信先サーバー（外部ツール利用時）",[90,1695,1696],{},"ツール依存",[90,1698,1696],{},[90,1700,1696],{},[182,1702],{},[16,1704,1706],{"id":1705},"gifへの変換が必要なときの具体的な手順","GIFへの変換が必要なときの具体的な手順",[12,1708,1709],{},"「動画素材はあるが、メールやSlack用にGIFにしたい」というケースは業務でも頻繁に発生する。以下に一般的な方法と、プライバシーを重視する場合の方法を示す。",[24,1711,1712],{"id":1712},"一般的なオンラインツールを使う場合の注意点",[12,1714,1715],{},"Smallpdf・EZGIF・CloudConvertなどのオンラインツールは手軽だが、ファイルをサーバーにアップロードして処理する。機密性のある操作画面のキャプチャや社内資料の動画を変換する際には、サーバー側でのデータ保持期間やプライバシーポリシーの確認が必要になる。",[24,1717,1718],{"id":1718},"ブラウザ内だけで完結させる方法",[12,1720,1721,1722,1726],{},"サーバーにファイルを送りたくない場合、",[44,1723,1725],{"href":1724},"\u002Ftools\u002Fvideo-to-gif","動画 → GIF 変換ツール","を利用する選択肢がある。ffmpeg.wasm をブラウザ上で動かす仕組みで、アップロードは発生せず変換処理がすべてローカルで完結する。DevTools の Network タブを開いて確認すれば、動画ファイルの外部送信が行われていないことを自分で検証できる。",[12,1728,1729],{},"操作手順は単純だ。",[361,1731,1732,1735,1738,1741],{},[364,1733,1734],{},"ページを開き、変換したい動画ファイルをドラッグ&ドロップする",[364,1736,1737],{},"開始時間・終了時間・フレームレート・幅を指定する",[364,1739,1740],{},"「変換」ボタンを押してブラウザ内で処理を待つ",[364,1742,1743],{},"生成されたGIFをダウンロードする",[12,1745,1746],{},"初回アクセス時に ffmpeg.wasm のロードで数秒かかるが、以降はオフライン環境でも動作する。",[182,1748],{},[16,1750,1751],{"id":1751},"よくある質問",[12,1753,1754,1757],{},[193,1755,1756],{},"Q. GIFのファイルサイズを小さくするにはどうすればよいですか？","\nフレームレートを下げる（24fps → 10fps）・幅を縮小する・再生時間を短くする、の3つが最も効果的。色数が少ない素材を選ぶことも重要。",[12,1759,1760,1767,1768,1770,1771,1773],{},[193,1761,1762,1763,1766],{},"Q. ",[39,1764,1765],{},"\u003Cvideo autoplay muted loop playsinline>"," でGIF代替をする際の注意点は？","\niOS Safariでは ",[39,1769,1514],{}," がないとフルスクリーン再生になるため必須。また、",[39,1772,1511],{}," がないと多くのブラウザで自動再生がブロックされる。",[12,1775,1776,1779],{},[193,1777,1778],{},"Q. SNSに投稿するならGIFとMP4のどちらが良いですか？","\nTwitter\u002FX はGIFをアップロードすると内部的にMP4に変換して配信するため、品質面ではMP4で直接投稿する方が有利。ただし投稿インターフェースの使いやすさからGIFが使われる場面も多い。",[12,1781,1782,1785],{},[193,1783,1784],{},"Q. アニメーションにWebPやAVIFは使えますか？","\nアニメーションWebP・アニメーションAVIFはいずれもGIFの代替として仕様上サポートされているが、ブラウザ対応状況やツールのサポートがGIF・動画と比べてまだ限定的。2025年時点では本番環境での採用には慎重な動作確認が必要。",[182,1787],{},[16,1789,416],{"id":416},[12,1791,1792],{},"GIFと動画の使い分けは「どこで再生されるか」で決まる。",[418,1794,1795,1804],{},[364,1796,1797,1803],{},[193,1798,1799,1800,1802],{},"ウェブページへの埋め込み → MP4\u002FWebMを ",[39,1801,41],{}," タグで使う","（ページ速度・画質の両面で優位）",[364,1805,1806],{},[193,1807,1808],{},"メール・チャット・SNS → GIFが現実的な選択肢",[12,1810,1811],{},"動画からGIFへの変換が必要な場面では、ファイルをサーバーに送信するかどうかを意識して、用途に合ったツールを選ぶと良い。変換の品質やプライバシーの要件が厳しい場合は、ブラウザ内完結のツールを検討する価値がある。",{"title":449,"searchDepth":450,"depth":450,"links":1813},[1814,1818,1823,1827,1828],{"id":1434,"depth":450,"text":1435,"children":1815},[1816,1817],{"id":1438,"depth":455,"text":1439},{"id":1469,"depth":455,"text":1470},{"id":1520,"depth":450,"text":1521,"children":1819},[1820,1821,1822],{"id":1524,"depth":455,"text":1525},{"id":1551,"depth":455,"text":1552},{"id":1575,"depth":455,"text":1575},{"id":1705,"depth":450,"text":1706,"children":1824},[1825,1826],{"id":1712,"depth":455,"text":1712},{"id":1718,"depth":455,"text":1718},{"id":1751,"depth":450,"text":1751},{"id":416,"depth":450,"text":416},"GIFと動画（MP4など）の技術的な違いを整理し、ウェブサイトやSNSでの最適な使い分け方を解説。変換方法やパフォーマンスへの影響も紹介。",{},"\u002Fblog\u002Fgif-vs-video-web-usage","2026-05-22",{"title":1421,"description":1829},"gif-vs-video-web-usage","blog\u002Fgif-vs-video-web-usage",[478,479,480,481],"UbKHJfcawtABaxZwwp31q7ki7cWZEAIgI3xeRV83dlc",{"id":1839,"title":1840,"author":7,"body":1841,"category":464,"coverImage":465,"description":2133,"draft":467,"extension":468,"locale":469,"meta":2134,"navigation":471,"noindex":467,"path":2135,"publishedAt":2136,"seo":2137,"slug":2138,"stem":2139,"tags":2140,"updatedAt":2136,"__hash__":2143},"blog\u002Fblog\u002Fbrowser-only-limits.md","ブラウザ内でファイル処理は「どこまで」できるか — 2026 年の現在地",{"type":9,"value":1842,"toc":2102},[1843,1846,1850,1854,1865,1868,1871,1874,1878,1889,1893,1900,1904,1915,1919,1938,1941,1945,1948,1952,1958,1962,1965,1969,1973,1980,1984,1991,1995,1998,2002,2006,2016,2020,2027,2031,2042,2050,2053,2057,2071,2074,2076,2083,2091],[12,1844,1845],{},"「ファイルをサーバーに送らずに処理する」は、2026 年のブラウザでかなりの範囲が実現可能です。ただし万能ではありません。Zerosend が採用している技術と、その限界を正直に整理します。",[16,1847,1849],{"id":1848},"なぜブラウザだけで処理する選択を採るのか","なぜ「ブラウザだけで処理する」選択を採るのか",[24,1851,1853],{"id":1852},"送らないので漏れないという直球の設計","送らないので漏れない、という直球の設計",[12,1855,1856,1857,1860,1861,1864],{},"サーバー送信を伴わない構造そのものが、",[193,1858,1859],{},"個人情報漏洩・誤操作・第三者共有"," のリスクを原理的にゼロにします。「漏れない仕組み」を語るより、",[193,1862,1863],{},"漏れる場所をなくす","ほうが検証しやすい設計です。",[24,1866,1867],{"id":1867},"設定や権限に依存しない単純さ",[12,1869,1870],{},"サーバー側で暗号化キーを守る \u002F ログを消す \u002F バックアップから除外する、という細かい運用は継続的な手間がかかります。ブラウザ内で完結するなら、そもそもその運用自体が発生しません。",[16,1872,1873],{"id":1873},"使っている技術スタック",[24,1875,1877],{"id":1876},"canvas-api-画像の基礎処理","Canvas API — 画像の基礎処理",[12,1879,1880,1881,1884,1885,1888],{},"2D 描画と画像ピクセル操作の標準 API。Zerosend の画像圧縮・リサイズ・形式変換はすべて Canvas 経由です。",[39,1882,1883],{},"drawImage()"," で任意の描画、",[39,1886,1887],{},"toBlob()"," で指定フォーマットに書き出せます。",[24,1890,1892],{"id":1891},"web-worker-メインスレッドを止めない","Web Worker — メインスレッドを止めない",[12,1894,1895,1896,1899],{},"重い処理をメインスレッドで回すと UI がフリーズします。Web Worker で別スレッドに逃がすことでスムーズな UX を維持します。",[39,1897,1898],{},"browser-image-compression"," のように Worker を内包しているライブラリは、そのまま使うだけでメインスレッドを解放してくれます。",[24,1901,1903],{"id":1902},"webassembly-ffmpeg-pdf-系ライブラリの移植","WebAssembly — ffmpeg \u002F pdf 系ライブラリの移植",[12,1905,1906,1907,1910,1911,1914],{},"C \u002F C++ で書かれたネイティブライブラリを WASM 化することで、ブラウザで直接実行できます。Zerosend では ",[193,1908,1909],{},"ffmpeg.wasm"," (動画・音声) と ",[193,1912,1913],{},"pdfjs-dist"," (PDF レンダリング) が WASM ベースです。",[24,1916,1918],{"id":1917},"file-system-access-api-blob-入出力","File System Access API \u002F Blob — 入出力",[12,1920,1921,1922,1925,1926,1929,1930,1933,1934,1937],{},"モダンブラウザは ",[39,1923,1924],{},"showOpenFilePicker()"," \u002F ",[39,1927,1928],{},"showSaveFilePicker()"," で OS のファイル選択ダイアログを呼べます。非対応の環境でも ",[39,1931,1932],{},"\u003Cinput type=\"file\">"," + ",[39,1935,1936],{},"Blob + URL.createObjectURL"," でダウンロードできるため、互換性の最低ラインは広いです。",[16,1939,1940],{"id":1940},"できること",[24,1942,1944],{"id":1943},"数-mb-数十-mb-のファイル処理","数 MB 〜数十 MB のファイル処理",[12,1946,1947],{},"現代のブラウザは 100MB 級のファイルでも (メモリ次第で) 安定して扱えます。JPG\u002FPNG 画像の圧縮・リサイズ・一括 ZIP 生成は問題なく動作します。",[24,1949,1951],{"id":1950},"バッチ処理-zip-生成を含む","バッチ処理 (ZIP 生成を含む)",[12,1953,1954,1957],{},[39,1955,1956],{},"jszip"," を使えば複数ファイルの圧縮まとめもブラウザ内で完結します。100 ファイル程度の一括処理は実用範囲です。",[24,1959,1961],{"id":1960},"逆圧縮形式変換","逆圧縮・形式変換",[12,1963,1964],{},"JPG → WebP、HEIC → JPG、PDF → PNG、MP4 → GIF などの変換は、すべてブラウザ内で実行できます。",[16,1966,1968],{"id":1967},"苦手なことできないこと","苦手なこと・できないこと",[24,1970,1972],{"id":1971},"数-gb-級の動画処理はメモリが持たない","数 GB 級の動画処理はメモリが持たない",[12,1974,1975,1976,1979],{},"ブラウザのプロセスメモリ上限はだいたい 2〜4 GB 程度。それ以上の動画をまるごと処理するのは困難です。",[193,1977,1978],{},"1 GB を超える動画はデスクトップツール"," (ffmpeg CLI 等) のほうが安定します。",[24,1981,1983],{"id":1982},"機械学習推論は遅い-onnx-runtime-web-は軽量モデル限定","機械学習推論は遅い (ONNX Runtime Web は軽量モデル限定)",[12,1985,1986,1987,1990],{},"ONNX Runtime Web や TensorFlow.js で推論は可能ですが、",[193,1988,1989],{},"数 GB 級のモデル","はブラウザで回すとかなり遅く、UX が実用的ではありません。軽量モデル (数百 MB) に限定するか、サーバー推論と割り切るのが現実的です。",[24,1992,1994],{"id":1993},"os-ネイティブ機能への直接アクセス","OS ネイティブ機能への直接アクセス",[12,1996,1997],{},"ブラウザはサンドボックス内で動くので、OS のファイルシステム全体を書き換えるような処理・プロセス起動はできません。セキュリティの観点からも妥当な制約です。",[16,1999,2001],{"id":2000},"zerosend-での実装のコツ-開発者向け","Zerosend での実装のコツ (開発者向け)",[24,2003,2005],{"id":2004},"ドメイン層を-ui-から分離する","ドメイン層を UI から分離する",[12,2007,2008,2011,2012,2015],{},[39,2009,2010],{},"domain\u002Fprocessors\u002F"," 配下に",[193,2013,2014],{},"純粋関数","を置き、Vue \u002F DOM API に依存させない設計にしています。テストが書きやすく、将来的に CLI 化・API 化もしやすくなります。",[24,2017,2019],{"id":2018},"web-worker-に重い処理を分離する判断基準","Web Worker に重い処理を分離する判断基準",[12,2021,2022,2023,2026],{},"目安は ",[193,2024,2025],{},"100 ms を超える処理はすべて Worker","。メインスレッドがそれ以上ブロックすると、ユーザー操作への応答 (クリック・スクロール) が目に見えて遅延します。",[24,2028,2030],{"id":2029},"csp-を破らずに-wasm-を読み込む","CSP を破らずに WASM を読み込む",[12,2032,2033,2034,2037,2038,2041],{},"CSP (Content Security Policy) に ",[39,2035,2036],{},"wasm-unsafe-eval"," を追加する必要があります。Zerosend では meta と ",[39,2039,2040],{},"_headers"," の両方に設定し、本番でも正しく動作することを確認しています。",[631,2043,2048],{"className":2044,"code":2046,"language":2047},[2045],"language-text","Content-Security-Policy: script-src 'self' 'wasm-unsafe-eval'\n","text",[39,2049,2046],{"__ignoreMap":449},[16,2051,2052],{"id":2052},"今後の展望",[24,2054,2056],{"id":2055},"webgpu-opfs-の成熟","WebGPU \u002F OPFS の成熟",[418,2058,2059,2065],{},[364,2060,2061,2064],{},[193,2062,2063],{},"WebGPU",": GPU を直接使える API。機械学習推論や 3D レンダリングで大きく速度改善が見込まれます",[364,2066,2067,2070],{},[193,2068,2069],{},"OPFS (Origin Private File System)",": Origin ごとにブラウザが管理する高速ファイル領域。大容量ファイル処理時の中間ストレージに使えます",[12,2072,2073],{},"これらが広く使える前提になれば、現状「苦手」としている領域の多くがブラウザだけで片付くようになります。",[16,2075,416],{"id":416},[12,2077,2078,2079,2082],{},"ブラウザ内ファイル処理は ",[193,2080,2081],{},"Canvas \u002F Web Worker \u002F WebAssembly \u002F File System Access API"," の組み合わせで、日常的な軽作業のほぼ全域をカバーできます。GB 級や重い ML 推論は依然として苦手ですが、Zerosend が対象とする画像・PDF・音声・短い動画の範囲では実用レベルです。",[12,2084,2085,2086,2090],{},"この設計の結果、",[44,2087,2089],{"href":2088},"\u002F#tools","Zerosend のツール群"," はサーバーに何も送らずに動作し、DevTools で自ら検証できる透明性を持っています。",[12,2092,2093,2094,1925,2098],{},"関連: ",[44,2095,2097],{"href":2096},"\u002Fblog\u002Fwhy-browser-only","なぜ Zerosend はブラウザ内処理にこだわるのか",[44,2099,2101],{"href":2100},"\u002Fguide\u002Fprivacy-online-tools","ピラー記事",{"title":449,"searchDepth":450,"depth":450,"links":2103},[2104,2108,2114,2119,2124,2129,2132],{"id":1848,"depth":450,"text":1849,"children":2105},[2106,2107],{"id":1852,"depth":455,"text":1853},{"id":1867,"depth":455,"text":1867},{"id":1873,"depth":450,"text":1873,"children":2109},[2110,2111,2112,2113],{"id":1876,"depth":455,"text":1877},{"id":1891,"depth":455,"text":1892},{"id":1902,"depth":455,"text":1903},{"id":1917,"depth":455,"text":1918},{"id":1940,"depth":450,"text":1940,"children":2115},[2116,2117,2118],{"id":1943,"depth":455,"text":1944},{"id":1950,"depth":455,"text":1951},{"id":1960,"depth":455,"text":1961},{"id":1967,"depth":450,"text":1968,"children":2120},[2121,2122,2123],{"id":1971,"depth":455,"text":1972},{"id":1982,"depth":455,"text":1983},{"id":1993,"depth":455,"text":1994},{"id":2000,"depth":450,"text":2001,"children":2125},[2126,2127,2128],{"id":2004,"depth":455,"text":2005},{"id":2018,"depth":455,"text":2019},{"id":2029,"depth":455,"text":2030},{"id":2052,"depth":450,"text":2052,"children":2130},[2131],{"id":2055,"depth":455,"text":2056},{"id":416,"depth":450,"text":416},"ブラウザだけで画像・PDF・動画を扱うには、どんな技術を使いどこまでできるのか。Canvas \u002F Web Worker \u002F WebAssembly \u002F File System Access API の採用ポイントと、率直な限界を整理します。",{},"\u002Fblog\u002Fbrowser-only-limits","2026-04-19",{"title":1840,"description":2133},"browser-only-limits","blog\u002Fbrowser-only-limits",[2141,2142,481],"WebAssembly","ブラウザ","DVMRpha441VjgXVwUg-Ky9ljmdcZEo-shW86ze3x7Uo",{"id":2145,"title":2146,"author":7,"body":2147,"category":465,"coverImage":465,"description":2364,"draft":467,"extension":468,"locale":469,"meta":2365,"navigation":471,"noindex":471,"path":2366,"publishedAt":2136,"seo":2367,"slug":2368,"stem":2369,"tags":2370,"updatedAt":2136,"__hash__":2371},"blog\u002Fblog\u002Ffavicon-generator-intro.md","ブラウザだけで作るファビコン一式 — \u002Ftools\u002Ffavicon-generator の舞台裏",{"type":9,"value":2148,"toc":2353},[2149,2152,2155,2158,2161,2168,2171,2174,2220,2223,2258,2262,2269,2272,2292,2299,2301,2313,2319,2322,2325,2328,2344,2346],[16,2150,2151],{"id":2151},"ファビコンが必要な理由",[12,2153,2154],{},"ファビコンは、ブラウザのタブやブックマーク一覧でサイトを識別する小さなアイコンです。スマートフォンのホーム画面に「追加」したときに表示されるアイコン (apple-touch-icon \u002F PWA アイコン) も、ファビコン一式の一部です。「ファビコンがない」「サイズが揃っていない」といった状態は、ユーザーの信頼感を下げ、PWA 対応の妨げにもなります。",[16,2156,2157],{"id":2157},"背景",[12,2159,2160],{},"サイトのファビコンを更新する作業は、新規サイトでも既存サイトのリブランディングでも発生します。ロゴ画像 1 枚から必要なアイコンセットを揃えるのは地味に手間のかかる工程です。",[12,2162,2163,2167],{},[44,2164,2166],{"href":2165},"\u002Ftools\u002Ffavicon-generator","Zerosend のファビコン生成ツール"," は、この工程をブラウザ内で完結させます。ロゴ画像を外部に送らずに一式を作成できるので、NDA 下の受託案件や未公開のブランディング作業でも安心して使えます。",[16,2169,2170],{"id":2170},"何が出力されるか",[12,2172,2173],{},"1 枚の画像 (PNG \u002F JPG \u002F WebP \u002F SVG) から次の 9 ファイルを生成し、ZIP で配布します。",[418,2175,2176,2181,2192,2198,2207,2211],{},[364,2177,2178,2180],{},[39,2179,523],{}," — 16 \u002F 32 \u002F 48px のマルチサイズ ICO",[364,2182,2183,1925,2186,1925,2189],{},[39,2184,2185],{},"favicon-16.png",[39,2187,2188],{},"favicon-32.png",[39,2190,2191],{},"favicon-48.png",[364,2193,2194,2197],{},[39,2195,2196],{},"apple-touch-icon.png"," (180×180)",[364,2199,2200,1925,2203,2206],{},[39,2201,2202],{},"icon-192.png",[39,2204,2205],{},"icon-512.png"," (PWA)",[364,2208,2209],{},[39,2210,820],{},[364,2212,2213,2216,2217,2219],{},[39,2214,2215],{},"snippet.html"," — ",[39,2218,896],{}," に貼り付ける link タグ",[16,2221,2222],{"id":2222},"使い方ステップ",[361,2224,2225,2231,2241,2247],{},[364,2226,2227,2230],{},[193,2228,2229],{},"画像を準備する"," — 正方形の PNG \u002F JPG \u002F WebP \u002F SVG を用意。最低でも 512×512px 推奨",[364,2232,2233,2216,2236,2240],{},[193,2234,2235],{},"ドロップする",[44,2237,2238],{"href":2165},[39,2239,2165],{}," を開いてドラッグ&ドロップ",[364,2242,2243,2246],{},[193,2244,2245],{},"ZIP をダウンロードする"," — ボタンを押すと 9 ファイルが入った ZIP が生成される",[364,2248,2249,2216,2252,2254,2255,2257],{},[193,2250,2251],{},"HTML に貼り付ける",[39,2253,2215],{}," の内容をサイトの ",[39,2256,896],{}," にコピーして完了",[16,2259,2261],{"id":2260},"ico-を自前で書き出す","ICO を自前で書き出す",[12,2263,2264,2265,2268],{},"PNG は Canvas API で簡単に書き出せますが、ICO は少し工夫が必要です。とはいえ、Windows Vista 以降の ICO は ",[193,2266,2267],{},"PNG バイト列をそのまま埋め込める"," ため、意外と単純です。",[12,2270,2271],{},"構造:",[418,2273,2274,2280,2286],{},[364,2275,2276,2279],{},[193,2277,2278],{},"ICONDIR"," (6 バイト): reserved \u002F type \u002F image count",[364,2281,2282,2285],{},[193,2283,2284],{},"ICONDIRENTRY"," (16 バイト × 画像数): 幅 \u002F 高さ \u002F bpp \u002F サイズ \u002F オフセット",[364,2287,2288,2291],{},[193,2289,2290],{},"画像データ",": PNG のバイト列を順に連結",[12,2293,2294,2295,2298],{},"依存ゼロで 30 行程度に収まります。",[39,2296,2297],{},"domain\u002Fprocessors\u002FfaviconGenerator.ts"," で実装を公開しています。",[16,2300,1751],{"id":1751},[12,2302,2303,2306,2307,2309,2310,2312],{},[193,2304,2305],{},"Q. どのサイズが必要ですか？","\nA. 最低限は ",[39,2308,523],{}," (16\u002F32px) と ",[39,2311,2196],{}," (180px) です。PWA 対応するなら 192px と 512px も必要です。本ツールはこれらをすべて一括生成します。",[12,2314,2315,2318],{},[193,2316,2317],{},"Q. SVG のロゴから生成できますか？","\nA. はい。SVG を入力するとブラウザ側で各サイズにラスタライズしてから ICO \u002F PNG を生成します。",[16,2320,2321],{"id":2321},"検証の楽しさ",[12,2323,2324],{},"作ったあとは DevTools の Network タブで確認できます。画像選択 → 生成 → ダウンロードの全てで、あなたのロゴが外に出ないことを自分で検証できます。",[16,2326,2327],{"id":2327},"関連ツール",[418,2329,2330,2337],{},[364,2331,2332,2336],{},[44,2333,2335],{"href":2334},"\u002Ftools\u002Fimage-compress","画像圧縮"," — 入力画像が大きすぎる場合、事前に軽量化",[364,2338,2339,2343],{},[44,2340,2342],{"href":2341},"\u002Ftools\u002Fimage-resize","画像リサイズ"," — 正方形にトリミングしてからファビコン生成すると精度が上がる",[16,2345,416],{"id":416},[12,2347,2348,2349,2352],{},"1 枚の画像から ICO \u002F PNG \u002F apple-touch-icon \u002F manifest \u002F HTML スニペットを、あなたの端末だけで生成できます。",[44,2350,2351],{"href":2165},"試してみてください","。",{"title":449,"searchDepth":450,"depth":450,"links":2354},[2355,2356,2357,2358,2359,2360,2361,2362,2363],{"id":2151,"depth":450,"text":2151},{"id":2157,"depth":450,"text":2157},{"id":2170,"depth":450,"text":2170},{"id":2222,"depth":450,"text":2222},{"id":2260,"depth":450,"text":2261},{"id":1751,"depth":450,"text":1751},{"id":2321,"depth":450,"text":2321},{"id":2327,"depth":450,"text":2327},{"id":416,"depth":450,"text":416},"1 枚の画像から ICO \u002F PNG \u002F apple-touch-icon \u002F site.webmanifest を生成するファビコン生成ツールを公開しました。ICO フォーマットを自前で書き出す実装のポイントを紹介します。",{},"\u002Fblog\u002Ffavicon-generator-intro",{"title":2146,"description":2364},"favicon-generator-intro","blog\u002Ffavicon-generator-intro",[242,481],"PwA1cCB1rqTh-H5ofDX9xQc_YXj3c52dsMB3F9lj1XQ",1781827531769]