AI活用は「指示の工夫」から「環境づくり」へ

─ ウェブサイト運営代行の現場から。画像50点の“下ごしらえ”を自作ツールに置き換えました─

はじめに

ライフエスコートでは、ECサイトやウェブサイトの運営を代行しています。商品ページの更新やバナーの差し替えだけではありません。お預かりした原稿を記事ページとして制作し、公開する業務も行っています。ブログ、特集ページ、導入事例、スタッフによる商品紹介 —— 呼び方はさまざまですが、いずれも同じ工程を通ります。

ご契約の内容によっては、この業務が含まれていない場合もあります。「そんなことまで頼めるのか」と思われた方は、ぜひこの機会にご相談ください。今回はその現場の話です。

「原稿ができました。画像もお送りします」

このご連絡をいただいた時点で、記事はまだ半分も出来上がっていません。原稿と一緒に届く画像や動画は、1本の記事で50点に達することも珍しくありません。そしてそのファイル群は、そのままウェブサイトに載せられる状態にはなっていないのが通常です。

これは支給いただく側の問題ではありません。撮影する機材も撮影者も違うのですから、揃っていないのは当たり前のことです。揃えるのは、公開を請け負う私たちの仕事です。

今回のLE通信は、その「下ごしらえ」の工程をすべて開示します。そして、この作業のために弊社が専用のツールを自作した話をお届けします。これから繁忙期に向けて制作物が増えていくこの時期に、素材のやり取りをより速くするためのご提案も最後に添えました。

これまでのライフエスコート通信で、ChatGPTやClaudeなど、AIチャットの使い分けについてお伝えしてきました。今回は、その先の話になります。

AIの使い方は、指示から環境へと広がってきました

本題に入る前に、WEB事業部がAIとの付き合い方をどう変えてきたかを、少しだけお話しさせてください。今回のツールは、その延長線上で生まれたものだからです。

最初に取り組んだのは「プロンプトエンジニアリング」でした。AIへの指示の書き方を工夫する段階です。役割を与え、出力の形式を指定し、良い例を添える。同じことを尋ねても、頼み方を変えるだけで返ってくる答えの質が変わる。私たちはここから始めました。

次が「コンテキストエンジニアリング」です。AIは、こちらが渡した情報の範囲でしか考えられません。ですから指示の文面を磨くだけでは足りず、何を、どの順番で、どこまで渡すかの設計が必要になります。過去のやり取り、商品データ、社内の運用ルール。渡す情報を整えるほうが、指示を磨くより効果が大きい場面は少なくありませんでした。

そして現在、弊社のWEB事業部が取り組んでいるのは次の2つです。

1つが「ハーネスエンジニアリング」です。ハーネス（harness）とは馬具を指す言葉で、AIを働かせるための装具一式を意味します。AIが触るフォルダの構成、扱わせるツール、作業の記録の残し方、失敗したときにどう止まるか。AIに何を言うかではなく、AIが動く環境そのものを整える段階です。

もう1つが「ループエンジニアリング」です。AIに一度指示を出して終わりにせず、やらせて、結果を確かめて、直させる。この往復をAI自身が回せるようにする設計です。何をもって「できた」と判定するか、失敗をどう伝え返すか、どこで止めて人が引き取るか。この3点を先に決めておく必要があります。人が毎回結果を確認して指示を出し直していては、AIを使っても人の手は空きません。この往復が自動で回りはじめたところから、作業は本当に減っていきます。

この2つには順番があります。「できた」を判定する手段が環境に組み込まれていなければ、ループは回りません。ですから弊社はまず環境（ハーネス）を整え、そのうえで回し方（ループ）に取り組んでいます。

なお「ハーネスエンジニアリング」「ループエンジニアリング」は、それぞれ「環境づくり」「自走と検証の回し方」と読み替えていただいて差し支えありません。またこれらは順に乗り換えてきたものではなく、今も指示の書き方は磨き、渡す情報の設計も続けています。対象が、言葉から情報へ、情報から環境へと広がってきたという積み上げです。AIを業務に取り入れる際、指示の工夫の次に来るのは環境の整備だと考えています。

今回お届けするのは、このうちハーネスエンジニアリング —— 環境づくりの話です。どこを整えたことが環境づくりに当たるのかは、記事の後半で改めてお話しします。

記事1本の裏側で動いている「下ごしらえ」

クライアントからお預かりした原稿を記事ページとして公開するまでに、弊社では次の11の工程を踏んでいます。全体は下の図の通りです。まず届いたファイルを1点ずつ確認する棚卸しから始まり、画像の横幅を揃えるリサイズ、見た目を整えるクロップ、倒れた画像の天地補正。動画があれば形式変換とポスター画像の書き出し。そしてファイルサイズの圧縮とリネーム。ここまで済んでようやく、原稿の指定箇所への配置と、実機での表示確認に入れます。

この工程を省略できないのは、見た目の問題だけではないからです。Googleは、ページの主要コンテンツが表示されるまでの時間（LCP）を2.5秒以内に収めることを「良好」の目安としています。そしてウェブページの転送量で最も大きな比率を占めるのが画像で、ページ全体の4割前後に達するとされています。画像の下ごしらえは、記事の読みやすさと検索評価、そして購入率に直結します。

※出典：Google「Core Web Vitals」、HTTP Archive「Web Almanac」

※工程は必要に応じて行うものであり、全てを順番に行うものではありません

手が止まる3つのポイント

11工程のうち、特に時間を要するのは次の3点です。

1つ目は、サイズと縦横比のばらつきです。支給いただく画像は、大きいものは4000ピクセル超、小さいものは800ピクセル程度と幅があり、そのまま並べることはできません。やや意外に思われるかもしれませんが、難しいのは横幅を揃えることではなく、縦横比を揃えることです。横4対縦3の写真と、縦長のスマートフォン写真が記事の中で交互に現れると、読者の視線が上下に大きく振られ、読みづらさにつながります。それ以上に問題なのは、そうした記事が「作りが粗い」という印象を与えてしまうことです。ですから、比率の合わない画像は1点ずつ、被写体のどこを残すかを判断しながら切り抜いていきます。ここは自動化しきれない、人の目が必要な工程です。

2つ目は、天地の向きです。画像ファイルには「この画像は右に90度回して表示してください」という回転情報（Exif Orientation）が埋め込まれています。撮影機器はこの情報を使って正しい向きで表示しているのですが、この情報はチャットツールやクラウドストレージを経由する過程で失われることがあります。すると、パソコンでは正しく見えていた画像が、ウェブサイト上では倒れて表示される、という現象が起きます。これは撮影の仕方の問題ではなく、ファイル形式の仕様上どうしても起きる現象です。そのため、届いたファイルは1点ずつ目視で確認しています。

3つ目は、動画の形式です。お預かりする動画はMOV形式が多くを占めます。これは撮影機器や編集ソフトが標準的に扱う形式であり、素材としては何も問題がありません。ただしウェブ配信では、再生できる環境が最も広いMP4（H.264）への変換が必要です。加えて、再生ボタンを押す前に表示される静止画（ポスター画像）を、動画の中から1コマ選んで書き出す作業も必要になります。この1コマ選びを機械的に行うと、被写体がぶれた瞬間や、暗転している瞬間が選ばれてしまいます。

外部のオンラインサービスに預けないという判断

こうした加工は、オンラインサービスを使えば手軽に処理できます。しかし弊社はこの方法を採用していません。お預かりする素材には、発売前の新商品、公開前の価格、告知前のキャンペーン情報が含まれていることがあります。公開の瞬間まで外部に出てはならない情報を、加工のためであっても社外のサーバーへ送信することは、ライフエスコートの情報管理方針として選択肢にありません。

そこで従来は、Adobe Photoshop、Premiere Pro、Media Encoder といった手元のソフトウェアで、1点ずつ処理していました。安全は確保できます。ただし、50点分の作業時間は避けられません。

この2つ —— 安全性と作業時間 —— を同時に満たすには、弊社の工程に合わせたツールを自分たちで作るしかありませんでした。そうして生まれたのが、ローカルPCで動作する「MediaPipeline」というデスクトップツールです。
市販のソフトを買ったのではなく、Claude Codeや Cursorといったエージェント型のコーディング支援・開発ツールを使用して、記事ページ制作に特化した「画像・動画加工ツール」を制作しました。

できることは1つだけです。先ほどの11工程のうち機械にできる部分を、1つのウィンドウの中で片付ける。左側のメニューから機能を選び、処理したいファイルを画面にまとめてドラッグ＆ドロップし、横幅や品質などの数値を入れて「実行」を押す。覚えることはこの3ステップだけです。起動のときにターミナルで1行だけ入力しますが、そのあとの操作にコマンドは一切登場しません。処理の進み具合は画面下部の進捗バーとログに随時表示され、終わると「実行完了」の区切り線が入るので、どこまで終わったかが一目で分かります。失敗があった場合は「完了（失敗あり）」と色を変えて表示されるため、見落としも起きません。

設計で重視したのは、誰が操作しても同じ結果になることでした。加工の条件を数値で指定させ、処理の記録をすべてログに残す作りにしているのは、そのためです。加工の良し悪しが操作する人の手加減で変わってしまうようでは、業務に組み込めません。

10の機能でカバーしている範囲

このうち、実務上とりわけ効いているものが2つあります。

03 画像クロップは、切り抜き専用の画面が開き、入力フォルダの画像が1枚ずつ表示されます。16:9／4:3／3:2／1:1／9:16／2:3／3:4 の7種類から比率を選び、枠を合わせて保存すると次の画像へ進みます。切り抜かない画像はスキップできます。比率の選択は数字キーでも切り替えられるため、マウスとキーボードだけで大量の画像を流れ作業で処理できます。人の判断が必要な工程を、判断だけに集中させる作りです。

05 動画ポスター画像生成には、この機能だけプレビュー画面が付いています。シークバーを動かすと、その瞬間のコマが実際に書き出されるものと同じ画質で表示され、サイズ・容量・動画の長さ・フレームレートも同時に確認できます。1フレーム単位の微調整も可能です。「書き出してみたら画面が暗転していた」「被写体がぶれていた」という手戻りが構造的に起きません。

どう作ったか ── 壁打ちはCursor、実装はClaude Code

このツールは、すべて社内で作りました。

必要な機能を最もよく分かっているのは、毎回50点ものファイルを扱っている現場です。ただ、それを形にするには、従来であれば要件をまとめて外部へ委託し、費用と納期を確保して進める必要がありました。今回はその工程をAIで置き換えています。

まず設計の壁打ちに、「Cursor」というAIを搭載したコードエディタを使いました。このツールの特徴は、複数のAIモデルを切り替えて同じ相談を投げられることです。1つのモデルの答えを鵜呑みにせず、別のモデルに同じ設計を批評させる。すると、フォルダ構成の抜け、処理を途中で中断したときの挙動、上書き事故が起こり得る箇所といった弱点が、それぞれ違う角度から指摘されます。設計段階でこれをやっておくと、作ってからの手戻りが大きく減ります。

設計が固まった段階で、実装は「Cursor」からターミナル経由で「Claude Code」に引き継ぎました。Anthropic社のコーディングエージェントで、指示を受けて自分でファイルを読み、書き、実際に動かして確認するところまで進めます。人が書いたのは仕様と判断で、コードそのものはエージェントが書いています。

ここで、冒頭のハーネスの話が効いてきます。エージェントに任せる前に、フォルダの役割と守るべきルールを文書にして先に置いておく。そうしなければ、こちらの意図を毎回説明し直すことになります。環境を整える手間を先に払っておくと、あとの作業が速くなる。これは、AIに任せる場合でも、人に引き継ぐ場合でも同じでした。次にご紹介する仕様は、その環境づくりの中身でもあります。

元のファイルを絶対に失わない設計

作業時間の短縮より優先した設計方針があります。お預かりしたファイルを失わないことです。

加工後のファイルは「出力」フォルダへ、加工前のファイルは「保管」または「バックアップ」フォルダへ自動で振り分けられます。元のファイルに上書きすることはありません。同名のファイルが既にある場合は連番が付くため、取り込みの段階でも既存ファイルは消えません。作業フォルダを空にする初期化機能も、対象の件数と容量を表示して確認を求めたうえで、完全削除ではなくゴミ箱への移動にとどめています。誤って実行しても復元できます。

もう1点、情報管理の面で申し添えておきたい仕様があります。当ツールは、GPSの位置情報や撮影日時などのExif情報を既定で削除します。撮影場所の座標が埋め込まれたままの画像を公開してしまう事故は、実際に世の中で起きています。撮影地が公開情報でない場合、これは看過できないリスクです。保持するかどうかは機能ごとに選択できますが、初期状態は削除に設定しています。

ここまでの仕様は、うっかりミスを防ぐための工夫として読まれたと思います。実はもう1つ意味があります。フォルダの役割が決まっていて、処理の記録が残り、失敗しても何も壊れない。 この3つが揃うと、同じ作業を人が行ってもAIに任せても、結果が変わりません。冒頭と前節でお話しした「ハーネスエンジニアリング」とは、つまりこの土台を用意することです。弊社がこのツールで整えたのは、加工の手順だけではなく、AIに安心して任せられる作業場でもありました。

• 何が、どれだけ変わったか

画像50点・動画5本という、弊社の一般的な案件を想定した工数の比較が下表です。

※弊社の一般的な案件（画像50点・動画5本）を想定した社内推定値です。素材の内容・点数・動画の尺により変動します。

注目いただきたいのは、クロップの行です。ここだけは半分にしか減っていません。どこを残すかは人が判断するしかないからです。ツールで削ったのは、判断以外のすべての時間です。このような圧倒的な効率化で、急な大量案件にもスピーディーな対応が可能になりました。 

繁忙期を前に、いま決めておきたいこと

本号がお手元に届くこの時期は、制作物が増えはじめる直前にあたります。秋から冬にかけてはセールや催事が立て続けに実施され、バナー・商品画像・記事コンテンツの制作量は、平常月から大幅にアップします。弊社にとっても、皆さまにとっても、いちばん慌ただしい時期です。

そこで、記事ページなどの素材をお送りいただく際の推奨仕様をご提案します。画像は加工せず、撮影したままの最大サイズでお送りください。リサイズ済みの画像をいただくと、必要な解像度が足りず再送をお願いすることになります。形式はJPEGまたはPNG、動画はMOVのままでも構いません。弊社側で変換します。ファイル名に固有の番号が入っていれば、原稿との突き合わせがさらに速くなります。

つまり、下ごしらえは何もしていただかなくて構いません。素材はそのまま、いちばん大きいものをお送りください。あとは弊社で整えます。

今回のまとめ

今回は、普段お見せしていない工程の話をいたしました。記事1本の裏側には、11の工程と、点数分だけくり返される確認作業があります。弊社はそれを、外部サービスに素材を預けることなく、専用ツールで短縮しました。

省力化の目的は、作業を減らすことではありません。人の時間を、機械にできない判断に使うことです。どこを切り抜くか、どのコマを選ぶか、どう並べれば伝わるか。そこに時間を使えるようにする。そのための自動化ツール作成にはAIの活用と環境の構築が必要でした。
指示の書き方から、渡す情報の設計へ。そして作業環境そのものの設計へ。次は、その環境の上でAIが自分で確かめて直す往復を回す段階 —— ループエンジニアリングです。形になり次第、改めてご報告します。

ライフエスコートは、記事ページの制作・公開を含むウェブサイトの運営代行から、商品撮影・動画撮影、動画制作・編集、メディアの構築・運用まで、一括してお引き受けできます。現在のご契約に記事制作が含まれていない場合も、追加でご依頼いただけます。

繁忙期に向けた制作物のご相談も、素材の受け渡し方法のご相談も、担当までお気軽にお申し付けください。

現場で役立つプレゼント付き!最新ECノウハウで実践力が身につく！ ECハウツー7日間 無料メルマガ講座に登録する