AIにコーディングさせても上手くいかない人へ——足りないのは「構造の指示」

「AIに任せれば、コードなんて書けなくても作れる」

そう聞いて、実際にやってみた。
でも、思ったものが出てこない。

直してもらうほど、おかしくなる。
気づけば、最初より複雑になっている。

——もし、こんな経験があるなら。
あなたのせいではありません。
足りなかったのは、たった一つ。「構造の指示」です。

なぜAIは「いい感じ」に作ってくれないのか

AIは、言われたものを作ります。
でも、言われていないものは、想像で埋めます。

「ボタンを作って」と言えば、ボタンは作る。
でも「そのボタンが、どこに、どういう並びで入るか」は、こちらが言わないとAIが勝手に決める。

その”勝手に決めた部分”が、あとから効いてくる。
パーツは合っているのに、全体が噛み合わない。
これが「直すほどおかしくなる」の正体です。

プロは「見た目」より「順番」で考えている

実は、これはAIだけの話ではありません。
プロの制作現場でも、同じことが起きます。

経験の浅い人は、いきなり「見た目」を作り始める。
プロは、その前に「構造」を決める。

• このページは、何が親で、何が子か
• どこが一つのまとまりで、どこで区切るか
• 上から下に、どういう順番で積むか

この”設計図”を先に持っているかどうか。
ここで、出来上がりがまるで変わります。

AIに任せるときも、まったく同じ

AIは、優秀な作業者です。
でも、設計図は描いてくれません。正確には「描けるけど、こちらが頼まないと自己流で済ませる」。

だから、こう指示が変わるだけで、結果が変わります。

❌「ログイン画面を作って」
⭕「ログイン画面を作って。上にロゴ、その下にメール入力、パスワード入力、いちばん下にログインボタン。全体を中央に寄せて」

後者は、構造を指示しています。
AIは”想像で埋める”必要がなくなる。
だから、一発で近いものが出てくる。

教室でも、これが「効いた」瞬間がありました

私の教室で、ある生徒さんとレッスンをしていたときのこと。

Figmaで作ったデザインのデータが、ぐちゃぐちゃになっていました。
部品があちこちに散らばって、どれがどのまとまりか分からない状態。

そこで一緒に「整理」をしました。
やったことはシンプルです。

• いらない部品を消す
• 関係する部品を「ひとつのまとまり」にする
• それぞれに「これは何か」という名前をつける

すると、その生徒さんが言いました。
「あ、これってHTMLの入れ子と同じなんですね」

——その通りなんです。
Figmaの「まとまり」も、HTMLの「構造」も、考え方は同じ。
“まとまりで捉える”という一点が、AIへの指示にもそのまま効いてきます。

整理ができた人は、コードに落とすときも、AIに頼むときも、迷いが消える。
これを目の前で見たとき、「土台って、こういうことか」と改めて思いました。

「構造で考える」は、誰でも身につく

ここで朗報です。
構造で考える力は、センスではありません。慣れです。

難しいプログラミングを覚える必要はない。
「これは何のまとまりか」「上から順にどう積むか」——
それを言葉にできれば、AIへの指示は一気に的確になります。

AIに任せる時代だからこそ、この”土台”が効いてくる。
丸投げが、うまい任せ方に変わる瞬間です。

もっとやさしく、土台から学べる場所をつくりました

「構造で考える」「AIの動きを読む」——
こういう”土台のきほん”を、初心者の目線でひとつずつ解説したノートを公開しています。

専門用語はできるだけ使いません。
「むかし自分も分からなかった」目線で書いています。

▼ AIのきほん 学習ノート
https://casio-pgs.com/lesson/

AIを”こわい”から”たよれる”に変えたい方は、のぞいてみてください。

（※note投稿用。見出しはnoteの「大見出し/小見出し」に置き換え。サムネ文字は句読点なしで作成）