AIなら1時間でつくれる。でも、一ページに数日かかった。

※この記事は、私の下記サイト制作の過程の一つを記録しておくものです。
AIは下記の環境です。

• 実行環境：Codexデスクトップアプリ

• AI：GPT-5ベースのCodexエージェント

• 作業日：2026年7月22日

• 利用できる主な機能：文章作成、コード編集、画像生成・編集、Word・PDF・PowerPoint・Excel制作、Webサイト制作、ブラウザ操作など

• 外部サービス連携：現時点では、GitHub、Google Drive、Gmail、Slack、Notionなどの追加プラグインは未導入

今回の記事制作では、外部検索やファイル生成は行わず「Windows上のCodexアプリで動く、文章・制作支援エージェント」という状態です。

CUDIORA｜AI時代のWebディレクション

前回の記事では、AIがつくった80点の文章を、そのまま完成形にしないことについて書きました。意味が通り、きれいに整っていても、それが本当に自分の伝えたい言葉であるとは限らない。AIの提案に違和感を持ち、対話し、否定し、自分の言葉として編み直す。同じことは、サイトのビジュアルにも言えます。

CUDIORAのサイトは、最初のフレームだけなら10分ほどでできました。文章と画像を入れ、ひとまずサイトとして見られる状態にするだけなら、一時間もかからないかもしれません。しかし、そこから自分のサイトにしていくために、たった一ページの調整に数日かかりました。

どこまで細かく指示すればよいのか

AIにサイトをつくらせるとき、最初の指示をどこまで細かく書いておく必要があるのでしょうか。正直、私にもまだ分かりません。

画面の構成、使う色、文字の大きさ、余白、画像の位置、パソコンとスマートフォンでの見せ方、メニューの動き。考えられる条件を最初からすべて指定しておけば、一度で完成するのでしょうか。

おそらく、そうではありません。なぜなら、実際に画面になって初めて気づくことがあるからです。頭の中で想像していた余白と、画面で見た余白は違います。一枚のデザインとして見た印象と、スクロールしながら見た印象も違います。パソコンでは自然に見えたものが、スマートフォンでは成立しないこともあります。

まだ存在していない画面について、起こり得る問題をすべて予測し、最初のプロンプトに書いておくことはできません。

中央に置けば、事故は少ない

たとえば、トップページのヒーローエリアに写真を置くとします。写真の中央に人物やモチーフを配置し、その上に文字を重ねる。あるいは、画像と文字を上下に分ける。こうした中央を基準にしたデザインなら、比較的、事故は起きにくくなります。

画面が狭くなっても、中央を基準に画像を切り取り、文字を少し小さくし、必要なら折り返す。それだけでも、それなりに成立するからです。AIも、中央にそろえたデザインをよく提案します。単に平均的だからというだけではなく、さまざまな画面で破綻しにくい、合理的な形でもあるのでしょう。

しかし、私はその形にしたくありませんでした。

画像の左側に余白をつくり、その上に文字のエリアを重ねる。写真と文字を明確に分けるのではなく、少し位置をずらしながら、一つの画面として見せる。そんな、今のWebサイトでよく見かける、少しずらしたデザインにしたかったのです。

たったそれだけの違いです。ところが、中央に要素を置く安全なデザインをやめようと思った瞬間、レスポンシブ調整の沼に入りました。

これはAIを使わない時からも、面倒な問題でしたが、AIに予め指示しておけば、レスポンシブコードも書いてくれるので、以前よりもずっと簡単かもしれないと、タカをくくっていました。

しかし、実際には、何度も指示の出しなおしを余儀なくされたのです。

画面を狭くすると、関係が崩れる

パソコンでは、画像の左側につくった余白へ文字がきれいに収まります。
しかし、画面を少し狭くすると、文字が写真の主要な部分に重なります。
重ならないように文字を動かすと、今度は余白が不自然に広くなる。文字を小さくすると、読みやすくはなりますが、デザインとしての強さが失われる。画像を縮小すると、見せたかった部分まで小さくなる。画像を大きく表示すると、今度は必要な部分が画面の外へ切れてしまいます。

文字と写真を上下に分ければ、技術的には簡単に解決できます。しかし、それではパソコンでつくった「画像の余白と文字が一つの画面を構成する」という意図が失われます。

文字が読める。画像も見えている。画面から要素がはみ出しているわけでもない。それでも、最初につくりたかったものとは違います。

AIに「文字が写真に重ならないようにしてください」と伝えれば、重ならない位置へ直してくれます。「スマートフォンでも見やすくしてください」と伝えれば、安全な縦並びにしてくれるかもしれません。しかし、重ならなければ何でもよいわけではありません。見やすければ、どのような配置でもよいわけでもありません。

私が残したかったのは、画像や文字の位置そのものではなく、それらが少しずれて存在することで生まれる余白や緊張感でした。この感覚を、最初から数値や条件に置き換えてAIへ伝えるのは簡単ではありません。

どの画面幅で文字を何行にするのか。画像のどこまでを見せるのか。どこから配置を切り替えるのか。横幅だけでなく、画面の高さが変わったときにどうするのか。仮に数値まで細かく指定できたとしても、その数値で本当に心地よく見えるかどうかは、実際の画面を見るまで分かりません。

こうなることが予めわかっていたら、もっと的確な指示を与えて、最初からできていたのだろうとは思います。

それに、もしかすると、数ケ月後には、これも本当に自動で、最適なレスポンシブ調整コードを書いてくれるように進化するかもしれません。

スマートフォンでロゴが消えた

画像を選んだ後にも、別の問題が起きました。パソコンでは問題なく見えていたのに、スマートフォンで表示すると、ヘッダーにある黒いロゴと、画像の黒い部分が重なったのです。

ロゴは、そこにあります。コードにも問題はありません。それでも、画面上ではロゴが消えたように見えます。

解決する方法はいくつもあります。画像を明るくする、画像の表示位置を変える、ロゴを白くする、ロゴの後ろに背景を置く、画像の上にグラデーションを重ねる。いずれの方法でも、ロゴを見えるようにはできます。

しかし、これは単に「黒と黒が重なったので、見えるように直す」というだけの問題ではありませんでした。画像を明るくすれば、その写真を選んだ理由や、画面全体の空気が変わります。ロゴを白くすれば、今度は画像の白い部分と重なるかもしれません。ロゴの後ろに背景を置けば読みやすくなりますが、画像とロゴの一体感が失われます。グラデーションを加えれば安全にはなりますが、画像本来の色が変わってしまいます。

つまり、どの方法を選ぶかによって、サイトの印象そのものが変わるのです。

今回は、画像を変えた

今回は、ロゴを黒のまま残し、スマートフォン専用の画像を用意することで対処しました。ロゴと重なる部分が白くなるように、画像そのものを調整したのです。

これが、技術的に唯一の正解だったわけではありません。
ロゴを白くするほうが簡単だったかもしれません。一つの画像をパソコンとスマートフォンで共用するほうが、管理もしやすかったはずです。
それでも今回は、ロゴの見え方を変えるのではなく、スマートフォンで使用する画像を変える方法を選びました。
このサイトでは、そちらのほうがよいと判断したからです。
これは従来のやり方と同じで、手作業を伴う修正です。

問題が起きたとき、AIは解決方法を提案してくれます。
けれど、どの解決方法を選ぶかは、技術だけでは決まりません。
修正するのは画像か、ロゴか、そもそも画像を変えるか、パソコンとスマートフォンで同じ見せ方をすることを優先するのか。
何を残し、何を変えてよいのかを決めなければ、修正方法も選べません。

画像選びも、レスポンシブの一部になる

最初は、選んだ画像を画面に置き、その上に文字やロゴを配置するつもりでした。しかし、実際には画像を選んだ時点で終わりではありません。

パソコンでは画像のどこが見えるのか。スマートフォンでは、どこが切り取られるのか。文字と重なる部分に何色があるのか。ロゴを置いたとき、十分なコントラストがあるのか。横長の画面と縦長の画面で、同じ画像が成立するのか。そうしたことまで含めて考える必要があります。

画像を選び、画面に置き、文字やロゴを重ね、スマートフォンで確認する。成立しなければ位置や色を調整し、それでも難しければ別の画像を用意する。一見すると別々の作業ですが、実際にはすべてつながっています。

サイトの細部を整える作業は、画像の選択も含めて、こうした細かい細部まで拘った判断の繰り返しです。

どこまでをAIに任せるのか

AIに「スマートフォンでもロゴが見えるようにしてください」と頼めば、何らかの方法で見えるようにはしてくれます。しかし、それがこのサイトにふさわしい方法かどうかは、別の話です。

AIは、問題を解消することができます。けれど、何を問題と考えるかは、人によって違います。ロゴが読めないことだけを問題とするなら、ロゴの後ろに白い帯を置けば解決するかもしれません。しかし、その白い帯によって画像の印象が壊れるなら、私にとっては新しい問題が生まれたことになります。

このとき必要なのは、AIにもっと長い指示を書くことだけではありません。自分が何を気にしているのかを知ることです。

なぜ、この画像を選んだのか。なぜ、文字を中央に置きたくないのか。なぜ、ロゴを黒いまま残したいのか。何が変わると、このサイトではなくなってしまうのか。それらを考えながら、AIが出した修正を選び直していきます。

一時間でできるサイトと、数日かかる一ページ

何もこだわらず、AIが出したものをそのまま「これでよし」とすれば、サイトは一時間ほどで完成するかもしれません。
文章を入れ、画像を入れ、レイアウトを整え、スマートフォンでも大きく崩れないようにする。そこまでなら、AIは驚くほど短い時間で進めてくれます。

しかし、そこから、本当にこの画像でよいのか、文字は中央でよいのか、この余白は必要なのか、スマートフォンでも同じ画像でよいのか、ロゴは見えているだけでよいのか、この調整によって最初につくりたかった印象が失われていないか、と一つずつ考え始めると、今でも、たった一ページに数日かかります。

これは、AIが役に立たないという話ではありません。
AIがいなければ形にすることが難しかったものを、自分で試し、比べ、修正できるようになりました。

ただ、AIによってなくなったのは、制作そのものではありません。
ゼロから最初の形をつくるまでの時間が、劇的に短くなったのです。

その先にある、見ること、違和感を持つこと、比べること、選ぶこと、修正すること、もう一度確かめること、そして、どこまでを完成とするか決めること。その時間は今も残っています。

むしろ、AIがすぐに形を出してくれるからこそ、以前より多くの選択肢を試せるようになりました。試せるから比較できる。比較できるから違いが見える。違いが見えるから、さらに細部が気になる。

効率化されたはずなのに、こだわり始めると、制作時間は簡単には短くなりません。少し矛盾しているようですが、それはAIによって作業が遅くなったのではなく、これまで諦めていたところまで、自分で考えられるようになったからなのだと思います。

AIがつくるのは、完成形ではなく最初の形

AIなら、一時間でサイトをつくれる。それは間違いではありません。

ただし、その一時間でできるのは、完成形ではなく、完成について考え始めるための最初の形です。

中央に置けば、きれいに収まる。一つの画像を使えば、管理しやすい。ロゴの後ろに背景を置けば、確実に読める。そうした安全な方法を選べば、サイトは早く完成します。

しかし、そこで感じた違和感を見逃さず、少しだけ位置をずらしたいと思う。画像の空気を残したいと思う。ロゴの見え方を守りたいと思う。その瞬間から、制作は再び人間のものになります。

どの方法を選び、何を捨て、どこまで細部にこだわるのか。最終的にかかる時間を決めるのは、AIの性能だけではありません。つくる人が、どこまでを「自分のサイト」として引き受けるかです。

AIの出した画面を、そのまま完成形にしない。画面の中にある小さな違和感に耳を澄まし、見る人の体験を想像し、もう一度、斜めから見つめ直す。そして最後に、何を残し、何を変えるのかを人間が決める。

制作にかかった手間は、発注者には見えない

こうした調整を実際の仕事として請け負った場合、よほど大きな見積もりの変更が必要にならない限り、制作者が発注者に「ここには、これだけの手間がかかりました」と逐一説明することはありません。

プロの制作者は、レスポンシブ対応や細部の調整に時間がかかることを、あらかじめ分かったうえで見積もりを出しています。過去の制作を通じて蓄積したコードや、よくある問題に対応するためのテンプレートも持っています。よほど特殊なことをしない限り、その一つひとつを発注者へ伝える必要はありません。

そのため発注する側にとって、サイトのどこに、どれだけの手間がかかっているのかは、ほとんどブラックボックスです。追加作業ごとの見積もりでも出ない限り、中央に置かれたロゴが見えるようになるまでに、どのような検討や調整があったのかを知る機会はありません。

そして今後は、「AIを使えば、言葉で指示するだけでサイトまでつくれる」という認識が、さらに広がっていくでしょう。

ただ、そのことを知った経営者や発注担当者が、実際に自分でサイトをつくり、パソコンとスマートフォンで確認し、画像や文字の位置を何度も調整するところまで経験するかというと、おそらく、かなりの少数派です。

AIで最初の形をつくれることは知っている。しかし、そこから完成までに何が行われているのかは見えない。

その結果、発注者には「AIなら、もっと早く、安くできるのではないか」という疑問が生まれます。一方、制作者には「AIを使っても、判断や調整の仕事までなくなったわけではない」という感覚があります。

この二つの認識の差は、これから、発注者と制作者の間に新しい誤解を生むのかもしれません。

AIによって、コードを書く時間は短くなります。最初のデザインを出す時間も短くなります。しかし、何をつくるのかを考え、出てきたものを見て、違和感を見つけ、何を残すかを決める仕事までなくなるわけではありません。

むしろ、AIが「つくる」部分を引き受けるほど、その前後にある人間の判断が、制作の価値として残っていくのだと思います。

ビジュアルを調整する過程にも、CUDIORAが考えるAI時代のディレクションが、そのまま表れています。

発注者と制作者の間で、その見えにくい仕事がどのように受け取られていくのか。自分自身でサイトをつくりながら感じたことの記録として、この記事を残しておきます。

【追記】

実は、こうしたビジュアルの調整だけでなく、今回はWordPressのテンプレートまでAIで自作しました。

専門的に学んだことのない私でも、何度も修正を繰り返しながら、最終的にはつくれてしまいました。

では、AIがコードまで書く時代に、サイト制作をプロへ依頼する価値はどこに残るのでしょうか。

次回は、AIによって変わる制作の価値と、これからの見積もりについて考えます。