最近、テキストを入れるだけでWebサイトが作れるAIツールが増えてきました。その代表格が Gamma。数分でそれっぽいサイトが公開までできてしまう手軽さで、人気があります。
先日、私も実際にGammaでサイトを1つ作ってみました。パステルカラーの「子供向けおもちゃ屋さん」のサイトです。ちなみにこのGammaのサイトは、以前に書いた「サービスが終了したDora AIの代替ツール比較」の記事で、代替ツールを実際に試すために作ったものでした。
よくできていて感心したのですが……、作り終わったあと、ふと思ったんです。
「これ、AIにコーディングさせたらどうなるんだろう？」
というわけで今回は、まったく同じお題を、Gamma（AIノーコード）とAIコーディング（Claudeにコードを書かせる）の2つの方法で作って、正直に比べてみました。結論を先に言うと、両者の得意分野は、きれいに真逆でした。
この記事でわかること
- Gammaで作ったサイトのリアルな仕上がり（良い点・物足りない点）
- 同じお題をAIにコーディングさせるとどうなるか
- ノーコードAIとAIコーディング、どっちをどう使い分けるべきか
まずはGammaで作ってみた
お題は「子供向けの可愛いおもちゃを販売するECサイト。パステルカラーで優しい雰囲気」。これをGammaに入力しました。
Gammaは最初から画面が完全に日本語で、出力言語も「日本語（です/ます体）」が選べます。いきなり作り始めるのではなく、まずアウトライン（構成案）を見せてくれて、そこから生成に進みます。そして数十秒後には、画像まで込みでサイトが完成しました。
↓実サイトはこちらから確認できます
さすがの手軽さです。文章もキャッチコピーも画像も、全部おまかせでこの完成度。「とりあえず形にする」なら、これ以上ないスピードでした。
ただ、実際に使ってみて、正直に感じた物足りなさもありました。
- デザインは整っているけれど、良くも悪くも「無難」。テンプレートの枠の中、という印象
- フッターに「Made with Gamma」のバッジが入る（無料プランでは消せません）
- 出来上がったHTMLは自分のものにならない。Gammaのサイト上で公開する形
- そして地味に気になったのが、「500+ 厳選アイテム」「98% 満足度」といった数字が勝手に入ること。もちろん実在しない数字なので、本物のお店なら使えません
無料枠は初回400クレジット（補充なし・約10回分）で、生成のたびに消費していきます。「まず試す」には十分ですが、作り込むには物足りない。ここが次の発想につながりました。
同じお題を、AIにコーディングさせてみた
そこで、まったく同じ「パステルのおもちゃ屋さん」を、今度はAI（Claude）にHTML/CSSで書いてもらいました。
出てきたのがこちらです。実際に触れます。
↓実サイトはこちらからも見れます（こちらの方が見やすいかもしれません）
ページ上部の積み木、つまんで動かせます。 持ち上げて離すと、ちゃんと落ちて、下の積み木の上に乗ります。「ぜんぶ崩す」を押すと、上からパラパラ降ってきます。ぜひ少し遊んでみてください。
子供向けおもちゃのWEBサイトなのに「見るだけ」のサイトって、なんだかつまらないかなと思い、動きのあるページにできる？と依頼したところ、このような積み木を「積んで、崩して、また積む」というギミックのあるサイト構成をAIの方から提案してくれました。これはGammaでは絶対に作れない部分です。テンプレートの枠を超えられないので。
デザイン面でも、いくつか意図的に変えてもらいました。
- Gammaが入れた「500+ / 98%」の架空の数字はやめて、代わりに「0〜1歳 → 1〜3歳 → 3〜5歳 → 5〜6歳」という本当に意味のある成長ステップを並べた
- 商品画像は1枚も使わず、積み木やボールをCSSの図形だけで表現（表示も軽い）
- 「柔らかな肌触り」の説明を、抽象的な褒め言葉から「角はすべて丸く削り、塗料は口に入れても安全なものだけ」と具体的な事実に書き換えた
そして当然ながら、HTMLファイルは丸ごと自分のもの。バッジもなく、どこにでも置けます。
正直な話：AIコーディングは一発では完璧ではなかった
とはいえ、AIコーディングも魔法ではありません。最初のバージョンでは、「ぜんぶ崩す」を押すと積み木が何個か空中に残ってしまうバグがありました。
そこを「空中に残ってしまう積み木があるよ」と伝えて、直してもらう。数回そういうやり取りをして、ようやく気持ちよく動くようになりました。AIコーディングは「一発で完成」ではなく、「対話で仕上げていく」もの。ここはGammaの「ボタンひとつで完成」とは違う、正直な現実です
比較表：どっちが何に向いている？
実際に両方作ってみて分かった違いを、表にまとめてみました。
| Gamma（AIノーコード） | AIコーディング | |
|---|---|---|
| 完成までの速さ | ◎ 数分で公開まで | △ 対話しながら仕上げる |
| 日本語 | ◎ UIも完全日本語 | ◎ 指示は日本語でOK |
| 文章・画像 | ◎ 全部おまかせ | △ 自分で用意or指示が必要 |
| デザインの自由度 | △ テンプレートの範囲 | ◎ 思いどおりに作れる |
| 動き・仕掛け | △ 基本は静的 | ◎ 触れる・動く体験も作れる |
| ファイルの所有 | ✕ 自分のものにならない | ◎ 丸ごと自分のもの |
| バッジ | 無料だと表示される | なし |
| 必要なもの | アイデアだけ | 指示を出す人（＝AIと対話） |
こうして並べると、冒頭の結論がはっきりします。
Gammaは、破綻なく・速く・おまかせで整えてくれる。AIコーディングは、このサイトにしかない体験を、思いどおりに仕込める。方向性がまるで違います。
結論：こう使い分けよう
- とにかく速く叩き台がほしい／中身もおまかせしたい → Gamma
- 世界観や体験を作り込みたい／ファイルを自分で持ちたい → AIコーディング
そして、これが個人的な最適解なのですが——両方組み合わせるのが一番強いです。まずGammaで構成やたたき台を数分で出して、それをベースにAIコーディングで仕上げる。「0→1はGamma、1→10はAIコーディング」という合わせ技ですね。
AIでサイトを作る、と一口に言っても、道具によって得意なことはこんなに違います。「どっちがいい」ではなく「今日の目的はどっち向きか」で選べると、ぐっとラクになりますよ。
comment