制作会社が変わって、サイトの画像の元データが手元にありません。画像の中の文字を1つ変えたいだけなのに、作り直しを頼むしかないと思っている方が多いのではないでしょうか。実は、公開されている画像そのものが元データになります。しかも、直す作業そのものはAIがやります。
ただし、AIに画面のスクリーンショットを渡すと、返ってくるのは加工されたスクリーンショットです。サイトに載っている画像は、画面で見えているものの2倍の大きさで作られていることが多く、スクリーンショットはその半分しかありません。それを差し替えると粗くなります。
決めることは3つです。何を渡すか、何を指示するか、何を確かめるか。ここでは、私がClaude Opus 5に実際に直させたときの3つを並べたあと、AIに任せずオンラインのツールを使ってよい場合も書きます。
AIにスクリーンショットを渡さない。実物のURLと実寸を渡す
1つ目は、渡すものです。渡すのは実物の画像のURLと、その実寸の2つです。
実物のURLは、ブラウザでそのページを開き、直したい画像を右クリックして、新しいタブで開くと分かります。開いたタブのURLが、その画像の実物の場所です。
実寸は、そのURLを渡して「この画像の実寸を調べて」と先に言えば、AIが調べて返します。自分で確かめたいときは、元のページの開発者ツールを開いて測ります。WindowsならF12、MacならCommand+Option+Iで開き、コンソールに次の1行を打つと、そのページの画像が全部並びます。naturalWidthが実物の幅で、widthが画面に出ている幅です。
document.querySelectorAll(‘img’).forEach(e => console.log(e.src, e.naturalWidth, e.naturalHeight, e.width, e.height))
私が渡した文は、次の2行です。
https://（実物の画像のURL）
実寸 1006×542px（表示は503×271pxの2倍）
実寸をわざわざ書くのは、AIがページの画面から画像を取ると、画面に出ているほうの大きさになるからです。私の図の場合、それは横503ピクセルで、実物の半分でした。半分の大きさで直したものを差し替えると粗くなり、制作会社に渡してもそのままでは使えません。
指示は1行でいい。フォント名も大きさも書かない
URLと実寸を渡したら、2つ目は指示です。変えたい文字と、変えたあとの文字を書くだけで終わります。
私が書いたのは、次の1行です。
2024のところを2025に変更して
フォント名も、大きさも、色も書きませんでした。書かなくてよい理由は、そのどれもが元の画像とサイトに残っているからです。
フォントは、そのサイトのCSSに書いてあります。AIはそのページからフォント名と太さを読んで、そのまま使います。文字の色は、元の画像そのものから拾います。大きさと位置は、元の画像といちばん近くなるところまで、少しずつずらして合わせます。
ここまでが数分で終わりました。
返ってきたファイルが使えるかは、1つ数えれば分かる
ファイルが返ってきたら、3つ目は確かめです。見た目で判断せず、数えさせます。
私が出した指示は、次の1行です。
変えていない文字が元と同じ列に入っているか、ピクセルで数えて報告して
私が受け取った報告では、変えていない文字は元が横500から511までで、書き換えたあとも横500から511まででした。1ピクセルも動いていません。この数字が1つでも違っていたら、フォントか、大きさか、位置が合っていないので、もう一度やり直させます。
形式とファイル名も確かめます。元がwebpならwebpで、pngならpngです。形式を変えると、サーバーの設定やページの記述と食い違います。ファイル名も元と同じにします。名前を変えると、ページの記述まで直すことになり、1文字を直すためにページの更新が発生します。
Fotorに上げて済む画像と、済まない画像
ここまでが3つです。ただし、Fotorのようなオンラインのツールに上げたほうが速い場合があります。FotorやPicsartに画像をアップロードすると、AIが元の文字を消して、新しい文字を書いてくれます。数秒で終わります。
違いは2つです。
1つ目は、フォントが推定だということです。Fotorの説明には、1,000種以上のフォントが用意されているので、元の画像にぴったりのフォントを簡単に見つけることができる、と書いてあります。探して当てるので、元と同じフォントになる保証はありません。1枚だけを見れば分かりませんが、同じページに並ぶ他の画像と見比べると、太さや形の違いが出ます。この記事のやり方では、そのサイトが使っているフォント名をCSSから読んで、そのまま指定します。探しません。
2つ目は、画像を外部のサービスにアップロードすることです。まだ公開していない数字や名前が入った画像だと、公開前にその情報が外に出ます。外部サービスへのアップロードについて社内に規定があるなら、その規定を先に確かめてください。
逆に言えば、この2つが問題にならない画像なら、ツールのほうが速く終わります。SNSの宣伝画像や、社外に出さない資料の図であれば、数秒で済む方法を選んでよいはずです。
お手元の画像が、外に出せるものかどうか。実物のURLと実寸を調べるところから、始めてみてはいかがでしょうか。
