{"id":457,"date":"2026-09-07T03:07:02","date_gmt":"2026-09-06T18:07:02","guid":{"rendered":"https:\/\/anc0.jp\/?page_id=457"},"modified":"2026-09-14T20:26:34","modified_gmt":"2026-09-14T11:26:34","slug":"remove-background","status":"publish","type":"page","link":"https:\/\/anc0.jp\/?page_id=457","title":{"rendered":"\u753b\u50cf\u80cc\u666f\u900f\u904e\u30c4\u30fc\u30eb"},"content":{"rendered":"<div class=\"anc0-bg-tool\">\n<style>.anc0-bg-tool{max-width:980px;margin:10px auto 48px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans JP',sans-serif;color:#2f2f33}.anc0-bg-tool *{box-sizing:border-box}.anc0-topback{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#f4f5f8;color:#444!important;text-decoration:none!important;font-weight:700;margin-bottom:12px}.anc0-hero{text-align:center}.anc0-touka{position:relative;display:inline-block}.anc0-touka img{width:min(360px,72vw);height:auto;display:block;margin:auto}.anc0-bubble{position:absolute;right:-10px;top:28%;background:#fff;border:2px solid #f19ab8;color:#4b3940;border-radius:999px;padding:10px 15px;font-weight:800;box-shadow:0 7px 20px rgba(0,0,0,.08)}.anc0-sub{font-size:18px;color:#888;margin:10px 0 30px}.anc0-card{border:2px dashed #d4d6dc;border-radius:22px;padding:56px 24px;background:linear-gradient(#fff,#fbfbfd);text-align:center}.anc0-dropzone{display:block;cursor:pointer}.anc0-icon{font-size:48px;opacity:.55}.anc0-drop-title{display:block;font-size:25px;font-weight:800;margin:12px 0}.anc0-drop-sub{display:block;color:#999;margin-bottom:20px}.anc0-file-button{display:inline-block;padding:14px 28px;border-radius:999px;background:#303238;color:#fff;font-size:18px;font-weight:800}.anc0-dropzone input{position:absolute;opacity:0;pointer-events:none}.anc0-card.is-drag{background:#f5f7fb;border-color:#9aa1ad}.anc0-status{text-align:center;margin:18px 0;color:#8b8e96}.anc0-status.is-error{color:#b42318}.anc0-status.is-done{color:#18794e}.anc0-result{margin-top:28px}.anc0-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}.anc0-preview h3{font-size:15px;margin:0 0 8px}.anc0-imagebox{height:330px;border-radius:14px;overflow:hidden;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;background:#eee}.anc0-imagebox.checker{background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.anc0-imagebox img{max-width:100%;max-height:100%;object-fit:contain}.anc0-controls{margin:20px 0 16px;padding:16px;border-radius:14px;background:#f6f7f9}.anc0-controls label{font-weight:700;display:flex;justify-content:space-between}.anc0-controls input{width:100%;margin-top:10px}.anc0-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.anc0-actions a,.anc0-actions button{border:0;border-radius:999px;padding:13px 24px;font-size:15px;font-weight:800;cursor:pointer;text-decoration:none}.anc0-download{background:#303238;color:#fff!important}.anc0-reset{background:#eee;color:#222}.anc0-restore{background:#f0a0b8;color:#fff}.anc0-restore-tools{margin:16px 0;padding:14px 16px;border:1px dashed #f0a0b8;border-radius:14px;background:#fff8fa;text-align:center;color:#74414f;font-size:14px}.anc0-restore-tools[hidden]{display:none!important}.anc0-restore-tools label{display:inline-flex;align-items:center;gap:8px;margin:10px 8px 0;font-weight:700}.anc0-restore-tools input{accent-color:#e781a1}.anc0-restore-tools button{border:0;border-radius:999px;padding:9px 16px;background:#fff;color:#b85675;font-weight:800;cursor:pointer}.anc0-bottom{margin-top:44px;padding-top:34px;border-top:1px solid #e8e8ec;text-align:center}.anc0-bottom-title{font-size:24px;color:#565863;margin-bottom:8px}.anc0-bottom-girl{display:inline-block;margin-bottom:4px}.anc0-bottom-girl img{display:block;width:min(235px,58vw);height:auto;margin:0 auto}.anc0-bottom a{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;background:#f4f5f8;color:#444!important;text-decoration:none!important;font-weight:800;font-size:18px}@media(max-width:700px){.anc0-compare{grid-template-columns:1fr}.anc0-imagebox{height:260px}.anc0-bubble{right:-2px;top:18%;font-size:12px;padding:7px 10px}.anc0-card{padding:40px 16px}.anc0-bottom-title{font-size:20px}.anc0-bottom-girl img{width:min(210px,62vw)}}<\/style>\n<p><a class=\"anc0-topback\" href=\"https:\/\/anc0.jp\/?page_id=459\">\u2190 \u3064\u30fc\u308b\u3044\u3061\u3089\u3093\u3002\u306b\u623b\u308b<\/a><\/p>\n<div class=\"anc0-hero\">\n<div class=\"anc0-touka\"><img decoding=\"async\" src=\"https:\/\/anc0.jp\/wp-content\/uploads\/2026\/09\/979e64be-1151-4bbe-9ede-575c9a966d44.png\" alt=\"\u3068\u3046\u304b\u3061\u3083\u3093\u3002\"><span class=\"anc0-bubble\">\u3068\u3046\u304b\u3061\u3083\u3093\u3002\u2661<\/span><\/div>\n<p class=\"anc0-sub\">\u753b\u50cf\u306e\u80cc\u666f\u3092\u900f\u660e\u306b\u3057\u3066PNG\u3067\u4fdd\u5b58\u3067\u304d\u307e\u3059\u3002<\/p>\n<\/div>\n<div class=\"anc0-card\"><label class=\"anc0-dropzone\"><span class=\"anc0-icon\">\u25a7<\/span><span class=\"anc0-drop-title\">\u3053\u3053\u306b\u753b\u50cf\u3092\u30c9\u30ed\u30c3\u30d7<\/span><span class=\"anc0-drop-sub\">\u307e\u305f\u306f<\/span><span class=\"anc0-file-button\">\u753b\u50cf\u3092\u9078\u629e<\/span><input id=\"anc0-bg-input\" type=\"file\" accept=\"image\/*\"><\/label><\/div>\n<p class=\"anc0-status\">\u753b\u50cf\u306f\u30b5\u30fc\u30d0\u30fc\u3078\u9001\u4fe1\u3055\u308c\u307e\u305b\u3093\u3002\u30d6\u30e9\u30a6\u30b6\u5185\u3067\u51e6\u7406\u3057\u307e\u3059\u3002<\/p>\n<div class=\"anc0-result\" hidden>\n<div class=\"anc0-compare\">\n<div class=\"anc0-preview\">\n<h3>\u5143\u306e\u753b\u50cf<\/h3>\n<div class=\"anc0-imagebox\"><img id=\"anc0-before\" alt=\"\"><\/div>\n<\/div>\n<div class=\"anc0-preview\">\n<h3>\u80cc\u666f\u900f\u904e\u5f8c<\/h3>\n<div class=\"anc0-imagebox checker\"><img id=\"anc0-after\" alt=\"\"><\/div>\n<\/div>\n<\/div>\n<div style=\"margin:20px 0 16px;padding:14px 16px;border-radius:14px;background:#f6f7f9;text-align:center;color:#666;font-size:14px;\">\u2728 AI\u81ea\u52d5\u900f\u904e\u30e2\u30fc\u30c9\uff08\u9ad8\u7cbe\u5ea6\uff09<br \/><span style=\"font-size:12px;color:#999;\">\u521d\u56de\u306e\u307fAI\u30e2\u30c7\u30eb\u306e\u8aad\u307f\u8fbc\u307f\u306b\u5c11\u3057\u6642\u9593\u304c\u304b\u304b\u308a\u307e\u3059\u3002<\/span><\/div>\n<div id=\"anc0-restore-tools\" class=\"anc0-restore-tools\" hidden>\u270e \u8896\u3084\u670d\u306a\u3069\u3001\u6d88\u3048\u3059\u304e\u305f\u90e8\u5206\u3092\u306a\u305e\u308b\u3068\u5143\u753b\u50cf\u306e\u8272\u3092\u623b\u305b\u307e\u3059\u3002<br \/><label>\u30d6\u30e9\u30b7\u306e\u592a\u3055 <input id=\"anc0-brush-size\" type=\"range\" min=\"12\" max=\"100\" value=\"42\"><\/label><button id=\"anc0-restore-done\" type=\"button\">\u88dc\u4fee\u3092\u5b8c\u4e86<\/button><\/div>\n<div class=\"anc0-actions\"><a id=\"anc0-download\" class=\"anc0-download\" href=\"#\">\u900f\u904ePNG\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/a><button id=\"anc0-restore\" class=\"anc0-restore\" type=\"button\">\u270e \u8896\u306a\u3069\u3092\u5fa9\u5143<\/button><button id=\"anc0-reset\" class=\"anc0-reset\" type=\"button\">\u5225\u306e\u753b\u50cf\u3092\u9078\u3076<\/button><\/div>\n<\/div>\n<div class=\"anc0-bottom\">\n<div class=\"anc0-bottom-title\">\uff3c \u3044\u308d\u3093\u306a\u30c4\u30fc\u30eb\u304c\u3042\u308b\u3088\uff01 \uff0f<\/div>\n<div class=\"anc0-bottom-girl\"><img decoding=\"async\" src=\"https:\/\/anc0.jp\/wp-content\/uploads\/2026\/09\/a1e458c2-d2bb-44d7-9dd5-401a617999ef.png\" alt=\"\u5bdd\u305d\u3079\u308a\u3068\u3046\u304b\u3061\u3083\u3093\u3002\"><\/div>\n<div><a href=\"https:\/\/anc0.jp\/?page_id=459\">\u25a6 \u3064\u30fc\u308b\u3044\u3061\u3089\u3093\u3002\u306b\u623b\u308b<\/a><\/div>\n<\/div>\n<p><script type=\"module\">const r=document.querySelector('.anc0-bg-tool'),i=r.querySelector('#anc0-bg-input'),card=r.querySelector('.anc0-card'),b=r.querySelector('#anc0-before'),a=r.querySelector('#anc0-after'),s=r.querySelector('.anc0-status'),res=r.querySelector('.anc0-result'),d=r.querySelector('#anc0-download'),reset=r.querySelector('#anc0-reset'),restore=r.querySelector('#anc0-restore'),restoreTools=r.querySelector('#anc0-restore-tools'),brush=r.querySelector('#anc0-brush-size'),restoreDone=r.querySelector('#anc0-restore-done');let f,out,beforeUrl,removeBg,editCanvas,sourceCanvas,patchCanvas,painting=false,lastPoint;const setStatus=(m,c='')=>{s.textContent=m;s.className='anc0-status '+c};async function getEngine(){if(removeBg)return removeBg;setStatus('AI\u30a8\u30f3\u30b8\u30f3\u3092\u8aad\u307f\u8fbc\u3093\u3067\u3044\u307e\u3059\u2026');const mod=await import('https:\/\/cdn.jsdelivr.net\/npm\/@imgly\/background-removal@1.7.0\/+esm');removeBg=mod.removeBackground||mod.default;if(typeof removeBg!=='function')throw new Error('AI\u30a8\u30f3\u30b8\u30f3\u3092\u8aad\u307f\u8fbc\u3081\u307e\u305b\u3093\u3067\u3057\u305f\u3002');return removeBg}function setDownloadFromCanvas(){return new Promise(resolve=>editCanvas.toBlob(blob=>{if(!blob){resolve();return}if(out)URL.revokeObjectURL(out);out=URL.createObjectURL(blob);d.href=out;const n=f.name.lastIndexOf('.');d.download=(n>0?f.name.slice(0,n):f.name)+'-transparent.png';resolve()},'image\/png'))}function point(event){const rect=editCanvas.getBoundingClientRect();return{x:(event.clientX-rect.left)*editCanvas.width\/rect.width,y:(event.clientY-rect.top)*editCanvas.height\/rect.height}}function restoreStroke(from,to){const ctx=editCanvas.getContext('2d'),patch=patchCanvas.getContext('2d'),radius=Number(brush.value)\/2;patch.clearRect(0,0,patchCanvas.width,patchCanvas.height);patch.globalCompositeOperation='source-over';patch.drawImage(sourceCanvas,0,0);patch.globalCompositeOperation='destination-in';patch.beginPath();patch.lineCap='round';patch.lineJoin='round';patch.lineWidth=radius*2;patch.strokeStyle='#fff';patch.moveTo(from.x,from.y);patch.lineTo(to.x,to.y);patch.stroke();patch.globalCompositeOperation='source-over';ctx.drawImage(patchCanvas,0,0)}async function startRestore(){try{if(!f||!a.naturalWidth)throw new Error('\u900f\u904e\u7d50\u679c\u3092\u5148\u306b\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002');if(a.decode)await a.decode();const original=new Image();original.src=beforeUrl;if(original.decode)await original.decode();editCanvas=document.createElement('canvas');editCanvas.width=a.naturalWidth;editCanvas.height=a.naturalHeight;editCanvas.style.cssText='max-width:100%;max-height:100%;width:auto;height:auto;touch-action:none;cursor:crosshair;display:block';sourceCanvas=document.createElement('canvas');sourceCanvas.width=editCanvas.width;sourceCanvas.height=editCanvas.height;patchCanvas=document.createElement('canvas');patchCanvas.width=editCanvas.width;patchCanvas.height=editCanvas.height;editCanvas.getContext('2d').drawImage(a,0,0);sourceCanvas.getContext('2d').drawImage(original,0,0,sourceCanvas.width,sourceCanvas.height);a.hidden=true;a.parentNode.appendChild(editCanvas);restore.hidden=true;restoreTools.hidden=false;setStatus('\u6d88\u3048\u3059\u304e\u305f\u8896\u3084\u670d\u3092\u3001\u6307\u3067\u306a\u305e\u3063\u3066\u623b\u3057\u3066\u304f\u3060\u3055\u3044\u3002','');editCanvas.addEventListener('pointerdown',event=>{painting=true;editCanvas.setPointerCapture(event.pointerId);lastPoint=point(event);restoreStroke(lastPoint,{x:lastPoint.x+.01,y:lastPoint.y+.01})});editCanvas.addEventListener('pointermove',event=>{if(!painting)return;const next=point(event);restoreStroke(lastPoint,next);lastPoint=next});const finishStroke=()=>{if(!painting)return;painting=false;setDownloadFromCanvas()};editCanvas.addEventListener('pointerup',finishStroke);editCanvas.addEventListener('pointercancel',finishStroke)}catch(error){console.error(error);setStatus('\u88dc\u4fee\u30e2\u30fc\u30c9\u3092\u958b\u59cb\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f\u3002\u3082\u3046\u4e00\u5ea6\u304a\u8a66\u3057\u304f\u3060\u3055\u3044\u3002','is-error')}}async function finishRestore(){if(!editCanvas)return;await setDownloadFromCanvas();a.src=out;a.hidden=false;editCanvas.remove();editCanvas=null;sourceCanvas=null;patchCanvas=null;restore.hidden=false;restoreTools.hidden=true;setStatus('\u624b\u52d5\u88dc\u4fee\u3092\u53cd\u6620\u3057\u307e\u3057\u305f\u3002\u900f\u904ePNG\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3067\u304d\u307e\u3059\u3002','is-done')}async function runAI(file){f=file;if(!f||!f.type.startsWith('image\/')){setStatus('\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002','is-error');return}if(f.size>20*1024*1024){setStatus('20MB\u4ee5\u4e0b\u306e\u753b\u50cf\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002','is-error');return}res.hidden=true;if(editCanvas){editCanvas.remove();editCanvas=null}restore.hidden=false;restoreTools.hidden=true;if(beforeUrl)URL.revokeObjectURL(beforeUrl);beforeUrl=URL.createObjectURL(f);b.src=beforeUrl;try{const fn=await getEngine();const progress=(key,current,total)=>{if(total>0){const pct=Math.max(0,Math.min(100,Math.round(current\/total*100)));setStatus('AI\u30e2\u30c7\u30eb\u3092\u8aad\u307f\u8fbc\u307f\u4e2d\u2026 '+pct+'%')}};setStatus('AI\u304c\u80cc\u666f\u3092\u5224\u5b9a\u3057\u3066\u3044\u307e\u3059\u2026');let blob;try{blob=await fn(f,{model:'medium',proxyToWorker:false,output:{format:'image\/png',quality:1},progress})}catch(firstErr){console.warn('medium model failed, retrying small model',firstErr);setStatus('\u7aef\u672b\u306b\u5408\u308f\u305b\u3066\u8efd\u91cfAI\u3067\u518d\u51e6\u7406\u3057\u3066\u3044\u307e\u3059\u2026');blob=await fn(f,{model:'small',proxyToWorker:false,output:{format:'image\/png',quality:1},progress})}if(out)URL.revokeObjectURL(out);out=URL.createObjectURL(blob);a.src=out;d.href=out;const n=f.name.lastIndexOf('.');d.download=(n>0?f.name.slice(0,n):f.name)+'-transparent.png';res.hidden=false;setStatus('AI\u80cc\u666f\u900f\u904e\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002','is-done')}catch(err){console.error(err);setStatus('AI\u51e6\u7406\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002\u901a\u4fe1\u74b0\u5883\u3092\u78ba\u8a8d\u3057\u3066\u3001\u3082\u3046\u4e00\u5ea6\u304a\u8a66\u3057\u304f\u3060\u3055\u3044\u3002','is-error')}}i.addEventListener('change',()=>runAI(i.files[0]));restore.addEventListener('click',startRestore);restoreDone.addEventListener('click',finishRestore);['dragenter','dragover'].forEach(ev=>card.addEventListener(ev,e=>{e.preventDefault();card.classList.add('is-drag')}));['dragleave','drop'].forEach(ev=>card.addEventListener(ev,e=>{e.preventDefault();card.classList.remove('is-drag')}));card.addEventListener('drop',e=>runAI(e.dataTransfer.files[0]));reset.addEventListener('click',()=>{i.value='';res.hidden=true;if(editCanvas){editCanvas.remove();editCanvas=null}restore.hidden=false;restoreTools.hidden=true;if(out){URL.revokeObjectURL(out);out=null}setStatus('\u753b\u50cf\u306f\u30b5\u30fc\u30d0\u30fc\u3078\u9001\u4fe1\u3055\u308c\u307e\u305b\u3093\u3002\u30d6\u30e9\u30a6\u30b6\u5185\u3067AI\u51e6\u7406\u3057\u307e\u3059\u3002')});<\/script><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u2190 \u3064\u30fc\u308b\u3044\u3061\u3089\u3093\u3002\u306b\u623b\u308b \u3068\u3046\u304b\u3061\u3083\u3093\u3002\u2661 \u753b\u50cf\u306e\u80cc\u666f\u3092\u900f\u660e\u306b\u3057\u3066PNG\u3067\u4fdd\u5b58\u3067\u304d\u307e\u3059\u3002 \u25a7\u3053\u3053\u306b\u753b\u50cf\u3092\u30c9\u30ed\u30c3\u30d7\u307e\u305f\u306f\u753b\u50cf\u3092\u9078\u629e \u753b\u50cf\u306f\u30b5\u30fc\u30d0\u30fc\u3078\u9001\u4fe1\u3055\u308c\u307e\u305b\u3093\u3002\u30d6\u30e9\u30a6\u30b6\u5185\u3067\u51e6\u7406\u3057\u307e\u3059\u3002 \u5143\u306e\u753b\u50cf \u80cc\u666f\u900f\u904e\u5f8c \u2728 AI [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-457","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/anc0.jp\/index.php?rest_route=\/wp\/v2\/pages\/457","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/anc0.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/anc0.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/anc0.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/anc0.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=457"}],"version-history":[{"count":29,"href":"https:\/\/anc0.jp\/index.php?rest_route=\/wp\/v2\/pages\/457\/revisions"}],"predecessor-version":[{"id":567,"href":"https:\/\/anc0.jp\/index.php?rest_route=\/wp\/v2\/pages\/457\/revisions\/567"}],"wp:attachment":[{"href":"https:\/\/anc0.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}