「そこ、そういう意味じゃなかった…」を、次の指示に変える。
構成の食い違い、スマホ表示の崩れ、画像の違和感から整理した、AIとの制作・修正の進め方。

はじめに｜「作って」で終わるつもりが、そこから修正の連続でした。

「もう少し整えて」と頼んだのに、まだしっくりこない。

でも、次に何と言えばいいのか分からない。

AIでサイトを作っていて、ここで手が止まること、ありませんか。

「違う」と分かるのに、どう直してほしいかを言葉にできない。

これ、地味にしんどいんですよね。

参考サイトも渡した。やりたいことも説明した。それなのに、出てきた画面を見ると「うーん……」となる。

僕も、CodexでSTUDIOの企業サイトとLPを編集したとき、一発で完成とはいきませんでした。

スマホでは人物の顔に文字が重なる。画像が見切れる。画面幅540px付近では、次のコンテンツとの間に隙間が残る。画面を見て、その都度修正をお願いしていました。

（そこ、そういう意味じゃなかったんよ…）

STUDIOの既存テンプレートを土台に、Codexに編集画面を操作してもらう方法です。画像のアップロードは僕が担当し、その後の配置をCodexに依頼。出来上がった画面を見て、また指示を出す。その繰り返しでした。

だからこの記事では、完全自動の成功談より、「意図と違う画面が出てきたあと、何を伝えるか」を扱います。

読みながら自分のページに当てはめて、変更する場所・残すもの・確認方法を含んだ修正依頼を1本書く。そこまでを目指す記事です。

STUDIOの基本操作や、同じブラウザー操作環境を整えるための設定は扱いません。また、すべての修正を検証できた記録ではないので、反映を確認できた結果と、修正依頼までの内容は分けて紹介します。

まずは、今「ここを直したい」と思っているページを1つだけ選んで、読み進めてみてください。

第1章｜最初に直したのは、デザインではなく「誰のサイト？」だった。

最初にお願いしたのは、転職支援サービスの公式Webサイト兼LPでした。

ところが、途中で構成から整理し直すことになります。

全体は企業サイト。その中に、転職支援サービスの紹介ページと、詳しく相談へつなげるLPがある。そういう形です。

整理し直したのは、この3ページの役割でした。

/ は、運営会社を知ってもらう企業サイト。
/service は、どんな事業かを簡潔に伝える紹介ページ。
/lp は、Greetを詳しく説明し、相談につなげる広告LP。

同じサービスを載せるとしても、3ページ全部に同じ量の説明が必要なわけではありません。

これは、見出しを数か所直せば済む話ではありませんでした。サイトの主役も、各ページに載せる情報量も変わる修正です。

今振り返ると、AIが理解してくれなかっただけではなく、僕自身も依頼の前提を整理し直していました。

「もっといい感じに」より前に、決めることがあったんですよね。

そこで、これから依頼文を書く人には、まずこの1行を埋めてみてほしいです。

このページは、【誰】に【何を伝え】、最後に【どんな行動】をしてもらうためのページ。

例えば、転職サービスのLPなら、

「転職に迷う人に、相談で何を整理できるかを伝え、LINE相談に進んでもらう」。

会社紹介なら、別の1行になりますよね。

色やフォントの話に入る前に、何のためのページかを言葉にする。
ここで書いた1行は、そのまま最初の依頼文に入れておきます。

第2章｜参考サイトを渡すなら、「情報を使う」と「見た目を使う」は分けておく。

一方で、最初から分けて渡していたものもあります。
それが、参考サイトです。

「このサイトを参考にしてください」

こう書いたとき、使ってほしいのは文章でしょうか。配色でしょうか。それとも、画像と見出しの並べ方でしょうか。

同じ「参考にして」でも、けっこう違う注文なんですよね。

今回の制作では、会社・サービス情報を参照するサイトと、レイアウト・余白・構成を参照するテンプレートを分けていました。

テンプレートに合わせて情報を作るのではなく、テンプレートの良さを残して、正しい情報を入れる。

この方針を、最初の指示に入れています。

さらに、公開しない、計測タグや外部連携は変更しない、といった条件も渡していました。「やってほしいこと」だけではなく、「触らないでほしいところ」までセットにする考え方です。

その考え方を、書き換えて使える指示例に整理しました。

対象：【ページ名／URL】

会社・サービス情報は【A】を参照してください。
レイアウトと余白は【B】を参考にしてください。
【B】の会社名・実績・数字は流用しないでください。

ボタンのリンク先・計測設定・公開状態は変更しないでください。
まず変更案だけを提示し、まだ編集しないでください。

これは当時の指示の原文ではなく、教材用にまとめた例です。

自分の参考URLを入れて、触ってほしくないものを3つ書く。
第1章の「ページの役割」と合わせれば、最初の依頼文ができます。

ただ、本当に迷ったのは、ここからでした。

目的を決める。参考サイトを分ける。変更禁止事項も書く。

そこまで準備しても、編集後の画面が思いどおりになるとは限りませんでした。

例えば、顔に文字が重なっていたら「文字をずらして」と言いたくなる。でも、それだけでは、どこまで動かしてよいのか、ほかの画面幅はどうするのかが残ります。

直したいのは、目の前の1か所。
でも、残したい見た目もある。

この2つを、どうやって同じ指示に入れるのか。

ここから先で扱うのは、その部分です。

中心になる第4章では、顔と文字の重なり、特定の幅でできる隙間を例に、修正依頼を6つの項目に分けます。「何か違う」を、どこに何を書くかが分かる指示文へ変えていきます。

そして、直してもらったあとの確認まで。

「修正しました」と返ってきたとき、何を見れば作業を終えてよいのか。
ここまでセットにしないと、また同じ画面の前で迷ってしまうので。

この先で扱うこと｜有料パートの目次

第3章｜「AI感が強い…」で方針変更。画像を増やす前に、残すものを決める。

テキスト、カード、余白。どこを残して、どこだけ変える？
全部作り直す前に使いたい、「残す・変える・別途作る」の整理シート。

第4章｜顔に文字が重なる。540pxだけ隙間がある。「直して」を、どう具体的にする？

違和感を6つの項目に分解して、変更する場所・触らない場所・確認条件まで伝える。
自分のスクリーンショットを使い、次に送る修正依頼を1本完成させる章です。

第5章｜画像は置けた。でも、それで完成？ 390pxで確認した「配置の次」。

JOBSの画像カード2枚を例に、切り抜きの回避、重複本文の整理、スマホ幅での表示と開閉まで。「入った」と「確認できた」の間で行った作業をたどります。

第6章｜LINEボタンを目立たせる前に。「ここで相談する理由」は伝わっている？

「寄り添います」を、何をしてくれるのかが分かる言葉に。
FV・中間・最後で伝える内容を分け、ボタンの手前の説明文を書き直します。

第7章｜その「確認しました」、何を見た？未確認を見逃さない報告の頼み方。

画面を目で見たのか、寸法を調べたのか。実際に両者を分けて報告する必要があったケースから、確認方法と未確認事項が分かる書式を作ります。

第8章｜突然、編集が止まった。続きを「また最初から」にしない引き継ぎ方。

変更済み、依頼しただけ、まだ未確認。混ざりがちな作業状況を分けて残す。
別の会話へ移っても「次に何をするか」が分かる、引き継ぎテンプレート。

まとめ｜次に直すのは、サイト全体ではなく「気になる1か所」でいい。

対象を選ぶ。指示を書く。変更案を確認する。編集後の結果を確かめる。
読みながら作った依頼文と確認シートを使い、最初の1か所に取りかかります。

購入特典｜「で、次に何て頼めばいい？」で止まらないためのテンプレートセット。

記事を読んで、直し方の考え方は分かった。
でも、自分のページを開くと、また指示を書くところで手が止まる。

それだと、ちょっともったいないんですよね。

なので今回は、本文の内容を自分の制作に当てはめられるように、編集前の整理から、修正依頼、確認、引き継ぎまで使える4セットを付けました。

どれも、空欄のテンプレートだけではありません。
記入例と、コピーして書き換えられる指示文も入れています。

（白紙のシートだけ渡されても、最初の1行で迷うので…）

① 編集前の設計シート

「何を変えて、何を残す？」を、編集前に整理する。

ページの目的、情報の参照先、デザインの参考、変更してはいけない設定を、ひとつのシートにまとめます。

「このサイトを参考に、いい感じにして」ではなく、どの情報を使い、どこまで編集してよいかが伝わる依頼文を作るためのものです。

最初に使う指示文だけでなく、提案を確認したあとに送る「編集を承認する文面」も収録しています。

② 場面別の修正指示カード

「ここ、何か違う」を、次に送る指示へ変える。

FV・画像・カード・ナビ・CTA・画面幅・開閉・コピー。8つの場面に合わせた指示カードを用意しました。

顔に文字が重なる。画像が切れる。スマホだけ配置がおかしい。

そんなときに、近い場面のカードを選んで、対象のページや残したい部分を書き換えます。

「どこを直すか」だけでなく、「触らない場所」と「修正後の確認」まで入れた依頼文を作れます。

③ 表示・動作の確認シート

「修正しました」のあと、何を見ればいいかが分かる。

画像は入った。でも、スマホで文字は読める？
ボタンは押せる？開閉したあとも崩れていない？

確認候補15項目と、結果を残す書式を収録しています。

目で見て確認したこと、寸法だけ調べたこと、まだ確認できていないことを分けて記録できるので、「何をもって完了とするか」を整理するために使ってください。

④ 作業再開・引き継ぎテンプレート

別のチャットで、また最初から説明しないために。

変更済みの内容、まだ反映していない依頼、試したけれどうまくいかなかった操作、次に行う作業をまとめます。

「続きをお願い」と送る前に、どこまで終わっていて、何が残っているかを渡すためのテンプレートです。

前の会話で引き継ぎをまとめる指示文と、新しい会話で現在の画面を照合する指示文も入れています。

PDFで確認して、テキストをコピー。自分のページに合わせて使えます。

使い方ガイドを合わせて、全30ページ。

最初から全部使う必要はありません。

まずは気になる画面を1枚用意して、②の修正指示カードを1つ選ぶ。
【】を埋めたら、③の確認シートで「直したあとに見ること」を決める。

次に送る修正依頼を1本作るところから、使ってもらえたらと思っています。

本文では「なぜ、その指示にするのか」を解説し、特典では「自分のページなら、どう書くか」を整理する。この2つをセットにしました。

特典の受け取り方法
レビュー投稿後、公式LINEを友だち追加してください。
友だち追加後、トーク画面で 「スタジオ」 と送信すると、購入者限定PDF「studio修正テンプレートセット」をお受け取りいただけます

※特典受け取りのため、公式LINEへの友だち追加が必要です。

では、ここから実際の修正ケースに入ります。

最初は、画像を作り足す前に立ち止まった話です。
「もっとよくして」と頼む前に、何を残すと決めればよかったのか。 そこから整理していきます。