[{"data":1,"prerenderedAt":588},["ShallowReactive",2],{"blog-tag-ja-edit":3},[4,262],{"id":5,"title":6,"author":7,"body":8,"category":244,"coverImage":245,"description":246,"draft":247,"extension":248,"locale":249,"meta":250,"navigation":251,"noindex":251,"path":252,"publishedAt":253,"seo":254,"slug":255,"stem":256,"tags":257,"updatedAt":253,"__hash__":261},"blog\u002Fblog\u002Fimage-edit-intro.md","画像の切り抜き・回転・反転をブラウザ内で — \u002Ftools\u002Fimage-edit の思想と使い方","Zerosend Editorial",{"type":9,"value":10,"toc":234},"minimark",[11,15,23,27,68,71,74,81,84,87,127,130,167,170,173,179,190,196,202,208,211],[12,13,14],"p",{},"SNS アイコンの正方形切り出し、履歴書の証明写真の比率合わせ、商品画像の回転、スキャン画像の左右反転。Photoshop を開くほどでもないのに地味に面倒な作業ですよね。",[12,16,17,22],{},[18,19,21],"a",{"href":20},"\u002Ftools\u002Fimage-edit","Zerosend の画像編集ツール"," は、この 3 操作を 1 画面に集約してブラウザ内で完結させます。",[24,25,26],"h2",{"id":26},"こんな場面で使える",[28,29,30,38,44,50,56,62],"ul",{},[31,32,33,37],"li",{},[34,35,36],"strong",{},"SNS アイコン・プロフィール画像",": Instagram や Twitter は正方形が基本。1:1 プリセットでワンクリック切り抜き",[31,39,40,43],{},[34,41,42],{},"証明写真のトリミング",": 就活・パスポート申請用に 3:4 比率で切り抜き。顔が含まれるデータをサーバーに送りたくないときに特に有効",[31,45,46,49],{},[34,47,48],{},"スキャン画像の向き修正",": スキャナが横向きで読み込んだ場合、90° 回転で即座に修正",[31,51,52,55],{},[34,53,54],{},"商品画像の整形",": EC サイト用に余白をカットして正方形化",[31,57,58,61],{},[34,59,60],{},"鏡像反転",": 文字が逆に写り込んだ画像を水平反転で修正",[31,63,64,67],{},[34,65,66],{},"ブログ・資料のサムネイル",": 16:9 プリセットで統一感のある横長画像を作成",[24,69,70],{"id":70},"なぜブラウザ内で編集するのか",[12,72,73],{},"トリミングは個人情報と密接です。証明写真を切り出すなら顔、名刺をスキャンするなら氏名・連絡先、社内資料の一部を切り出すなら機密情報が含まれます。",[12,75,76,77,80],{},"これらを「画像を切り抜くだけ」のオンラインツールにアップロードすると、切り抜き前の原版が相手のサーバーに残る可能性があります。オンラインツールはビジネスモデル上、アップロード済みのファイルをログ・解析・AI 学習に回しても契約上問題にならないケースが多く、",[34,78,79],{},"利用者側からはその境界が見えません","。",[12,82,83],{},"Zerosend は編集処理そのものをローカルで行うことで、この不透明性を取り除きます。",[24,85,86],{"id":86},"使い方",[88,89,90,98,101,124],"ol",{},[31,91,92,97],{},[18,93,94],{"href":20},[95,96,20],"code",{}," を開く",[31,99,100],{},"画像をドラッグ&ドロップ",[31,102,103,104],{},"3 つの操作から選ぶ:\n",[28,105,106,112,118],{},[31,107,108,111],{},[34,109,110],{},"切り抜き",": 矩形を選択範囲として指定",[31,113,114,117],{},[34,115,116],{},"回転",": 90° \u002F 180° \u002F 270° の 3 ステップ",[31,119,120,123],{},[34,121,122],{},"反転",": 水平 \u002F 垂直",[31,125,126],{},"プレビューで結果を確認してダウンロード",[24,128,129],{"id":129},"仕組み",[28,131,132,145,154],{},[31,133,134,136,137,140,141,144],{},[34,135,110],{},": 選択した矩形の寸法の ",[95,138,139],{},"\u003Ccanvas>"," を作り、",[95,142,143],{},"drawImage"," で元画像の該当領域を切り出し",[31,146,147,149,150,153],{},[34,148,116],{},": 回転行列を ",[95,151,152],{},"ctx.transform"," で適用してから描画",[31,155,156,158,159,162,163,166],{},[34,157,122],{},": ",[95,160,161],{},"ctx.scale(-1, 1)"," で水平、",[95,164,165],{},"ctx.scale(1, -1)"," で垂直",[12,168,169],{},"いずれも Canvas API の基本操作の組み合わせで、追加ライブラリは使っていません。処理は数十ミリ秒で完了します。",[24,171,172],{"id":172},"よくある質問",[12,174,175,178],{},[34,176,177],{},"Q. 元の画像ファイルは変更されますか？","\nA. いいえ。処理はブラウザのメモリ上で行われ、ダウンロードするまで何も書き変わりません。元ファイルはそのまま手元に残ります。",[12,180,181,184,185,189],{},[34,182,183],{},"Q. 対応している画像形式は？","\nA. JPEG・PNG・WebP・GIF (静止画) に対応しています。HEIC 形式の場合は先に ",[18,186,188],{"href":187},"\u002Ftools\u002Fheic-to-jpg","HEIC → JPG 変換"," を使ってから編集してください。",[12,191,192,195],{},[34,193,194],{},"Q. 比率指定 (1:1, 4:3, 16:9) で切り抜けますか？","\nA. はい。プリセットボタンで一発切り替えできます。SNS アイコンは 1:1、YouTube サムネは 16:9 など。",[12,197,198,201],{},[34,199,200],{},"Q. 複数画像をまとめて同じ比率で切り抜けますか？","\nA. 現状は 1 枚ずつです。バッチ処理は要望を見ながら検討します。",[12,203,204,207],{},[34,205,206],{},"Q. 編集後に再度編集したい場合は？","\nA. ダウンロードしたファイルを再度ドロップすれば、何度でも編集できます。",[24,209,210],{"id":210},"関連ツール",[28,212,213,220,227],{},[31,214,215,219],{},[18,216,218],{"href":217},"\u002Ftools\u002Fimage-resize","画像リサイズ"," — 切り抜き後に寸法を揃えたいとき",[31,221,222,226],{},[18,223,225],{"href":224},"\u002Ftools\u002Fimage-compress","画像圧縮"," — 編集後の軽量化",[31,228,229,233],{},[18,230,232],{"href":231},"\u002Ftools\u002Fimage-merge","画像結合"," — 複数画像を 1 枚にまとめたいとき",{"title":235,"searchDepth":236,"depth":236,"links":237},"",2,[238,239,240,241,242,243],{"id":26,"depth":236,"text":26},{"id":70,"depth":236,"text":70},{"id":86,"depth":236,"text":86},{"id":129,"depth":236,"text":129},{"id":172,"depth":236,"text":172},{"id":210,"depth":236,"text":210},"tech",null,"Zerosend の画像編集ツールは、切り抜き・回転・反転をサーバーに送らず端末内で処理します。証明写真・SNS アイコン・商品画像のトリミングで使える基本操作を Zerosend 編集部が解説。",false,"md","ja",{},true,"\u002Fblog\u002Fimage-edit-intro","2026-04-20",{"title":6,"description":246},"image-edit-intro","blog\u002Fimage-edit-intro",[258,259,260],"画像","編集","ツール","0hG7liiv-RC6UszRMXKm0Pu_JTdGZnwSKP8_nwe7UfA",{"id":263,"title":264,"author":7,"body":265,"category":244,"coverImage":245,"description":579,"draft":247,"extension":248,"locale":249,"meta":580,"navigation":251,"noindex":251,"path":581,"publishedAt":253,"seo":582,"slug":583,"stem":584,"tags":585,"updatedAt":253,"__hash__":587},"blog\u002Fblog\u002Fpdf-edit-intro.md","PDF のページを並べ替え・削除・回転 — \u002Ftools\u002Fpdf-edit の思想と使い方",{"type":9,"value":266,"toc":569},[267,270,277,290,292,330,332,338,351,353,392,396,403,410,412,442,451,453,459,465,471,477,483,485,502,506,509,561],[12,268,269],{},"スキャンしたら逆向きになっていた、最終ページが白紙だから削除したい、契約書の章を入れ替えたい。PDF 編集の 9 割は「ページの並べ替え・削除・回転」で済みます。",[12,271,272,276],{},[18,273,275],{"href":274},"\u002Ftools\u002Fpdf-edit","Zerosend の PDF ページ編集ツール"," は、この基本 3 操作をブラウザ内で完結させます。アップロード不要・無料・登録不要で、機密文書もそのまま投入できます。",[12,278,279,280,284,285,289],{},"編集後にサイズを軽くしたいなら ",[18,281,283],{"href":282},"\u002Ftools\u002Fpdf-compress","PDF 圧縮","、ページを画像として書き出したいなら ",[18,286,288],{"href":287},"\u002Ftools\u002Fpdf-to-image","PDF → 画像変換"," との組み合わせが便利です。",[24,291,26],{"id":26},[28,293,294,300,306,312,318,324],{},[31,295,296,299],{},[34,297,298],{},"スキャン結果の向き修正",": スキャナが横向きで読み込んだページを 90° 回転して正しい向きに",[31,301,302,305],{},[34,303,304],{},"白紙ページの削除",": スキャン時に混入した白紙ページや意図しない空白ページをまとめて削除",[31,307,308,311],{},[34,309,310],{},"報告書の章順修正",": 後から追加した付録を適切な位置に移動。ドラッグ操作でページを並べ直す",[31,313,314,317],{},[34,315,316],{},"配布用 PDF の整形",": 社内向けの全ページを含む PDF から、共有しても問題ないページだけを残す",[31,319,320,323],{},[34,321,322],{},"製本・印刷準備",": 両面印刷や製本に合わせてページ順を並べ替える",[31,325,326,329],{},[34,327,328],{},"プレゼン資料の調整",": 不要なスライドを削除して提出用スリム版を作成",[24,331,70],{"id":70},[12,333,334,335,80],{},"PDF 編集の対象は、ほぼ例外なく機密文書です。業務委託契約、秘密保持契約、顧客カルテ、社内規程、給与明細。これらを「ページを入れ替えるだけ」のオンラインサービスに預けると、",[34,336,337],{},"元の全ページが相手のサーバーに渡ります",[12,339,340,341,345,346,350],{},"「処理後にすぐ削除」と書かれていても、保存の痕跡や解析ログをユーザーが検証する手段はありません。Zerosend ではページ編集もローカル処理のため、この透明性の問題を構造的に回避できます。複数 PDF を 1 つにまとめてから編集したい場合は ",[18,342,344],{"href":343},"\u002Ftools\u002Fpdf-merge","PDF 結合","、編集後にページを抜き出したい場合は ",[18,347,349],{"href":348},"\u002Ftools\u002Fpdf-split","PDF 分割"," も同じ方式で動きます。",[24,352,86],{"id":86},[88,354,355,361,364,367,389],{},[31,356,357,97],{},[18,358,359],{"href":274},[95,360,274],{},[31,362,363],{},"PDF をドラッグ&ドロップ",[31,365,366],{},"ページサムネイル一覧が表示される",[31,368,369,370],{},"操作:\n",[28,371,372,378,384],{},[31,373,374,377],{},[34,375,376],{},"並べ替え",": ドラッグでページを入れ替え",[31,379,380,383],{},[34,381,382],{},"削除",": 不要なページのゴミ箱アイコンをクリック",[31,385,386,388],{},[34,387,116],{},": 各ページの回転アイコンで 90° 単位回転",[31,390,391],{},"「編集を完了する」をクリックして新しい PDF を出力",[24,393,395],{"id":394},"pdf-lib-によるブラウザ内-pdf-処理","pdf-lib によるブラウザ内 PDF 処理",[12,397,398,399,402],{},"Zerosend の PDF ページ編集は ",[34,400,401],{},"pdf-lib"," というオープンソースライブラリで実装しています。pdf-lib はブラウザ上で PDF の読み込み・書き出しができる純粋な JavaScript ライブラリで、サーバーサイドの処理は一切不要です。",[12,404,405,406,409],{},"サムネイル表示には ",[34,407,408],{},"pdfjs-dist"," (PDF.js) を使い、各ページを Canvas に描画。並べ替え・削除・回転の操作を UI 上で決めてから、最後に pdf-lib で新しい PDF として書き出します。契約書や機密文書も、データが端末から出ることなく安全に編集できます。",[24,411,129],{"id":129},[28,413,414,420,423,429,436],{},[31,415,416,417,419],{},"PDF を ",[95,418,408],{}," でレンダリングしてサムネイル一覧を表示",[31,421,422],{},"ページの並び・削除・回転情報を UI 上で管理",[31,424,425,426,428],{},"「完了」操作時に ",[95,427,401],{}," を呼び出し、元 PDF から必要なページを順にコピー",[31,430,431,432,435],{},"回転は ",[95,433,434],{},"page.setRotation()"," で書き込み",[31,437,438,439],{},"最終 PDF として ",[95,440,441],{},".save()",[12,443,444,445,447,448,450],{},"サムネ描画 (",[95,446,408],{},") と PDF 組み立て (",[95,449,401],{},") の 2 ライブラリで役割分担しています。",[24,452,172],{"id":172},[12,454,455,458],{},[34,456,457],{},"Q. テキストの編集はできますか？","\nA. 本ツールはページ単位の操作 (並べ替え・削除・回転) に特化しています。文章の書き換えや署名追加、注釈入力には対応していません。",[12,460,461,464],{},[34,462,463],{},"Q. パスワード付き PDF は使えますか？","\nA. パスワードで保護された PDF の編集には対応していません。事前にパスワードを解除してください。",[12,466,467,470],{},[34,468,469],{},"Q. 編集履歴は残りますか？","\nA. 新しい PDF として書き出すため、元ファイルは変更されません。必要なら元ファイルを別途保存しておいてください。",[12,472,473,476],{},[34,474,475],{},"Q. ページを複製 (同じページを 2 回入れる) できますか？","\nA. 現状は非対応です。需要があれば追加します。",[12,478,479,482],{},[34,480,481],{},"Q. 回転の粒度は？","\nA. 90° 単位のみです。PDF の仕様上、自由角度回転は本来のページ情報を損ねる可能性があるため非対応です。",[24,484,210],{"id":210},[28,486,487,492,497],{},[31,488,489,491],{},[18,490,349],{"href":348}," — 編集ではなく切り分けたいとき",[31,493,494,496],{},[18,495,344],{"href":343}," — 複数 PDF を結合",[31,498,499,501],{},[18,500,283],{"href":282}," — 編集後のサイズ削減",[24,503,505],{"id":504},"pdf-系ツール一覧","PDF 系ツール一覧",[12,507,508],{},"PDF をブラウザだけで処理する Zerosend のツール群です。すべてアップロード不要・無料で使えます。",[28,510,511,520,528,536,544,552],{},[31,512,513,519],{},[18,514,515,516,518],{"href":343},"PDF 結合 (",[95,517,343],{},")"," — 複数の PDF を 1 ファイルにまとめる",[31,521,522,527],{},[18,523,524,525,518],{"href":348},"PDF 分割 (",[95,526,348],{}," — ページ範囲指定で分割",[31,529,530,535],{},[18,531,532,533,518],{"href":282},"PDF 圧縮 (",[95,534,282],{}," — ページをラスタライズしてサイズ削減",[31,537,538,543],{},[18,539,540,541,518],{"href":274},"PDF ページ編集 (",[95,542,274],{}," — 本記事のツール",[31,545,546,551],{},[18,547,548,549,518],{"href":287},"PDF → 画像 (",[95,550,287],{}," — PDF を PNG \u002F JPG 画像として書き出す",[31,553,554,560],{},[18,555,557,558,518],{"href":556},"\u002Ftools\u002Fimage-to-pdf","画像 → PDF (",[95,559,556],{}," — 複数画像を PDF にまとめる",[12,562,563,564,568],{},"PDF 関連の他の記事は ",[18,565,567],{"href":566},"\u002Fblog\u002Ftag\u002Fpdf","タグ: PDF"," からまとめて見られます。",{"title":235,"searchDepth":236,"depth":236,"links":570},[571,572,573,574,575,576,577,578],{"id":26,"depth":236,"text":26},{"id":70,"depth":236,"text":70},{"id":86,"depth":236,"text":86},{"id":394,"depth":236,"text":395},{"id":129,"depth":236,"text":129},{"id":172,"depth":236,"text":172},{"id":210,"depth":236,"text":210},{"id":504,"depth":236,"text":505},"Zerosend の PDF ページ編集ツールは、PDF のページ順序変更・削除・回転をサーバーに送らず端末内で行います。スキャン時の向きミス修正や不要ページ削除に。Zerosend 編集部が解説。",{},"\u002Fblog\u002Fpdf-edit-intro",{"title":264,"description":579},"pdf-edit-intro","blog\u002Fpdf-edit-intro",[586,259,260],"PDF","McRq6NYTMv81LiqIPeiqIgJ_4bPen-vd-WRH3bESikc",1782000330391]