[{"data":1,"prerenderedAt":503},["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":247,"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],"画像","編集","ツール","RrpC6EauzaWkAgWFfR06-Hve3OSQ4XqwZn5wmKjcYTw",{"id":263,"title":264,"author":7,"body":265,"category":244,"coverImage":245,"description":494,"draft":247,"extension":248,"locale":249,"meta":495,"navigation":251,"noindex":247,"path":496,"publishedAt":253,"seo":497,"slug":498,"stem":499,"tags":500,"updatedAt":253,"__hash__":502},"blog\u002Fblog\u002Fpdf-edit-intro.md","PDF のページを並べ替え・削除・回転 — \u002Ftools\u002Fpdf-edit の思想と使い方",{"type":9,"value":266,"toc":485},[267,270,277,279,317,319,325,328,330,369,373,380,387,389,419,428,430,436,442,448,454,460,462],[12,268,269],{},"スキャンしたら逆向きになっていた、最終ページが白紙だから削除したい、契約書の章を入れ替えたい。PDF 編集の 9 割は「ページの並べ替え・削除・回転」で済みます。",[12,271,272,276],{},[18,273,275],{"href":274},"\u002Ftools\u002Fpdf-edit","Zerosend の PDF ページ編集ツール"," は、この基本 3 操作をブラウザ内で完結させます。",[24,278,26],{"id":26},[28,280,281,287,293,299,305,311],{},[31,282,283,286],{},[34,284,285],{},"スキャン結果の向き修正",": スキャナが横向きで読み込んだページを 90° 回転して正しい向きに",[31,288,289,292],{},[34,290,291],{},"白紙ページの削除",": スキャン時に混入した白紙ページや意図しない空白ページをまとめて削除",[31,294,295,298],{},[34,296,297],{},"報告書の章順修正",": 後から追加した付録を適切な位置に移動。ドラッグ操作でページを並べ直す",[31,300,301,304],{},[34,302,303],{},"配布用 PDF の整形",": 社内向けの全ページを含む PDF から、共有しても問題ないページだけを残す",[31,306,307,310],{},[34,308,309],{},"製本・印刷準備",": 両面印刷や製本に合わせてページ順を並べ替える",[31,312,313,316],{},[34,314,315],{},"プレゼン資料の調整",": 不要なスライドを削除して提出用スリム版を作成",[24,318,70],{"id":70},[12,320,321,322,80],{},"PDF 編集の対象は、ほぼ例外なく機密文書です。業務委託契約、秘密保持契約、顧客カルテ、社内規程、給与明細。これらを「ページを入れ替えるだけ」のオンラインサービスに預けると、",[34,323,324],{},"元の全ページが相手のサーバーに渡ります",[12,326,327],{},"「処理後にすぐ削除」と書かれていても、保存の痕跡や解析ログをユーザーが検証する手段はありません。Zerosend ではページ編集もローカル処理のため、この透明性の問題を構造的に回避できます。",[24,329,86],{"id":86},[88,331,332,338,341,344,366],{},[31,333,334,97],{},[18,335,336],{"href":274},[95,337,274],{},[31,339,340],{},"PDF をドラッグ&ドロップ",[31,342,343],{},"ページサムネイル一覧が表示される",[31,345,346,347],{},"操作:\n",[28,348,349,355,361],{},[31,350,351,354],{},[34,352,353],{},"並べ替え",": ドラッグでページを入れ替え",[31,356,357,360],{},[34,358,359],{},"削除",": 不要なページのゴミ箱アイコンをクリック",[31,362,363,365],{},[34,364,116],{},": 各ページの回転アイコンで 90° 単位回転",[31,367,368],{},"「編集を完了する」をクリックして新しい PDF を出力",[24,370,372],{"id":371},"pdf-lib-によるブラウザ内-pdf-処理","pdf-lib によるブラウザ内 PDF 処理",[12,374,375,376,379],{},"Zerosend の PDF ページ編集は ",[34,377,378],{},"pdf-lib"," というオープンソースライブラリで実装しています。pdf-lib はブラウザ上で PDF の読み込み・書き出しができる純粋な JavaScript ライブラリで、サーバーサイドの処理は一切不要です。",[12,381,382,383,386],{},"サムネイル表示には ",[34,384,385],{},"pdfjs-dist"," (PDF.js) を使い、各ページを Canvas に描画。並べ替え・削除・回転の操作を UI 上で決めてから、最後に pdf-lib で新しい PDF として書き出します。契約書や機密文書も、データが端末から出ることなく安全に編集できます。",[24,388,129],{"id":129},[28,390,391,397,400,406,413],{},[31,392,393,394,396],{},"PDF を ",[95,395,385],{}," でレンダリングしてサムネイル一覧を表示",[31,398,399],{},"ページの並び・削除・回転情報を UI 上で管理",[31,401,402,403,405],{},"「完了」操作時に ",[95,404,378],{}," を呼び出し、元 PDF から必要なページを順にコピー",[31,407,408,409,412],{},"回転は ",[95,410,411],{},"page.setRotation()"," で書き込み",[31,414,415,416],{},"最終 PDF として ",[95,417,418],{},".save()",[12,420,421,422,424,425,427],{},"サムネ描画 (",[95,423,385],{},") と PDF 組み立て (",[95,426,378],{},") の 2 ライブラリで役割分担しています。",[24,429,172],{"id":172},[12,431,432,435],{},[34,433,434],{},"Q. テキストの編集はできますか？","\nA. 本ツールはページ単位の操作 (並べ替え・削除・回転) に特化しています。文章の書き換えや署名追加、注釈入力には対応していません。",[12,437,438,441],{},[34,439,440],{},"Q. パスワード付き PDF は使えますか？","\nA. パスワードで保護された PDF の編集には対応していません。事前にパスワードを解除してください。",[12,443,444,447],{},[34,445,446],{},"Q. 編集履歴は残りますか？","\nA. 新しい PDF として書き出すため、元ファイルは変更されません。必要なら元ファイルを別途保存しておいてください。",[12,449,450,453],{},[34,451,452],{},"Q. ページを複製 (同じページを 2 回入れる) できますか？","\nA. 現状は非対応です。需要があれば追加します。",[12,455,456,459],{},[34,457,458],{},"Q. 回転の粒度は？","\nA. 90° 単位のみです。PDF の仕様上、自由角度回転は本来のページ情報を損ねる可能性があるため非対応です。",[24,461,210],{"id":210},[28,463,464,471,478],{},[31,465,466,470],{},[18,467,469],{"href":468},"\u002Ftools\u002Fpdf-split","PDF 分割"," — 編集ではなく切り分けたいとき",[31,472,473,477],{},[18,474,476],{"href":475},"\u002Ftools\u002Fpdf-merge","PDF 結合"," — 複数 PDF を結合",[31,479,480,484],{},[18,481,483],{"href":482},"\u002Ftools\u002Fpdf-compress","PDF 圧縮"," — 編集後のサイズ削減",{"title":235,"searchDepth":236,"depth":236,"links":486},[487,488,489,490,491,492,493],{"id":26,"depth":236,"text":26},{"id":70,"depth":236,"text":70},{"id":86,"depth":236,"text":86},{"id":371,"depth":236,"text":372},{"id":129,"depth":236,"text":129},{"id":172,"depth":236,"text":172},{"id":210,"depth":236,"text":210},"Zerosend の PDF ページ編集ツールは、PDF のページ順序変更・削除・回転をサーバーに送らず端末内で行います。スキャン時の向きミス修正や不要ページ削除に。Zerosend 編集部が解説。",{},"\u002Fblog\u002Fpdf-edit-intro",{"title":264,"description":494},"pdf-edit-intro","blog\u002Fpdf-edit-intro",[501,259,260],"PDF","Yze0vH4wa57jdSYGGpMOWoCe3g9kWI080CC7vD4rqMI",1777617518573]