はじめに：AIでWebサイトが作れる時代、実際に作ってみた
AIツールでWebサイトが作れる時代になりました。
コードが書けなくても、指示を出すだけでサイトができる。
「自分も作ってみよう」と思い、Claude Codeを使って実際に植物販売サイトを作ってみました。
完成したサイトを見た第一印象は「おお、すごい」。
でも、しばらく眺めていて気づいたんです。
「なんか……AIっぽい。」
デザインはきれい。ページ構成もちゃんとしてる。
でも、何かが足りない。
「誰かのサイト」じゃなくて「AIが作ったサイト」に見える。
この記事では、AIでサイトを作って気づいた”AI感の正体”と、どうすれば消えるのかを解説します。
この記事でわかること
- Claude Codeで作った植物サイトの全体像
- 完成直後の「いい感じ」が崩れた瞬間
- 「AI感」の正体を具体的に分析
- AI感を消すためにやろうとしていること
- AIツール全般に言える「型と体温」の話
- AIでサイトを作る人へのアドバイス
何を作ったのか
Claude Codeを使って、植物販売サイトを作りました。
「観葉植物を販売するお店のWebサイト」というコンセプトで、Claude Codeに指示を出しながら構築していきました。
サイトの構成
- トップページ： ヒーロー画像＋キャッチコピー＋特集セクション
- 植物一覧ページ： 商品カードが並ぶグリッドレイアウト
- ブログページ： 植物の育て方などの記事一覧
- お問い合わせページ： フォーム付き
デプロイ先はNetlify。GitHubにコードをプッシュするだけで公開できます。
プログラミング経験ほぼなしでもここまで作れた
正直に言うと、僕のプログラミング経験はほぼゼロです。HTML/CSSの基礎をなんとなく知っている程度。
それでも、Claude Codeに「植物販売サイトを作りたい。トップページ、商品一覧、ブログ、お問い合わせフォームのページが欲しい」と伝えるだけで、動くサイトが出来上がりました。
ページの追加も、デザインの変更も、自然言語で指示するだけ。
「指示の出し方が大事」というのは、まさにここで実感しました。
完成した瞬間は「いい感じ」だと思ってた
完成直後のテンションは高かったです。
「デザインきれい」
「ページ構成もちゃんとできてる」
「これ、自分で作ったの？って感じ」
しかもレスポンシブ対応も勝手にやってくれていて、スマホで開いてもレイアウトが崩れない。商品カードのホバーエフェクトまで付いてました。自分では一行もCSSを書いてないのに。
友達に見せたら「すごいじゃん」と言われました。正直、自分でもちょっと感動していました。
「AIがあれば、もうWebサイト制作って誰でもできるんじゃないか」とすら思いました。
でも——
その感動は、長くは続きませんでした。
「AI感」の正体に気づいた瞬間
完成から数日後、改めてサイトを見返したときに違和感の正体がわかりました。
一つずつ正直に書きます。
① 写真がUnsplashのストック素材そのまま
サイトに使われている植物の写真、すべてUnsplashのフリー素材でした。
きれいな写真ではあります。でも、植物が好きな人なら「あ、これストック素材だ」と一発でわかるんです。
背景がスタジオっぽい、ライティングがプロすぎる、見たことのある構図——「本当に植物を育てている人の写真」とは明らかに違います。
フリー素材は便利です。でも、「自分の商品を売るサイト」にフリー素材を使うと、信頼性が一気に下がるということに気づきました。
② キャッチコピーが綺麗すぎる
トップページのキャッチコピーはこうでした。
「生きたアートを、あなたの空間に。」
……かっこいい。かっこいいけど、誰の言葉でもない。
AIが生成する文章は、文法的には完璧で、響きもいい。でも、「この人が言いたいこと」が伝わってこない。
良い文章は「伝わる文章」であって「きれいな文章」ではありません。
「うちの植物は、窓際に置くだけで部屋の空気が変わります」みたいな素朴だけど実感のこもった言葉の方が、よっぽど信頼できる。
③ BASEのリンクがプレースホルダのまま
これは恥ずかしいミスです。
商品の「購入する」ボタンのリンク先が your-shop.base.shop のままでした。
Claude Codeが「ここにショップURLを入れてください」というテンプレートの仮URLを入れていたのを、自分で差し替えていなかった。
つまり、ボタンを押しても何も起きない。サイトとしての体を成していませんでした。
AIは「構造」は完璧に作ってくれます。でも、中身を埋めるのは自分の仕事です。
④ 「人」の気配がゼロ
自分が買う側だったらどうだろう、と考えてみました。
ネットで植物を買うって、けっこう勇気がいる。届くまで状態がわからないし、梱包が雑だったら枯れるかもしれない。だから「この人なら大丈夫そう」と思えるかどうかが全てなんです。
でも、自分のサイトにはその判断材料がゼロだった。店主の顔も名前も、育てている環境も、何も見えない。きれいなサイトの裏側に、誰もいないみたいでした。
どう直そうとしているか
気づいたからには直したい。まだ全部はできていませんが、やろうとしていることを正直に書きます。
リアルな写真に差し替える
Unsplashの素材を、自分のスマホで撮った実物の写真に差し替えます。
多少構図が雑でも、ピントが甘くても、「本物」であることが最強の説得力です。
自然光で撮った、少し影が入っている植物の写真の方が「あ、この人本当に育ててるんだな」と伝わります。
プロフィールページを作る
「誰がやっているのか」を見せるだけで、サイトの信頼感は全然違います。
- 自分の名前（ニックネームでもOK）
- なぜ植物を扱っているのか
- どこで育てているのか
完璧な経歴じゃなくていい。「この人がやってるんだ」と伝わるだけでいい。
コピーを自分の言葉で書き直す
「生きたアートを、あなたの空間に。」を自分の体験から出てきた言葉に変えます。
たとえば——
「朝、水をやるだけで一日の始まりがちょっと良くなる。そんな植物を届けたくて始めました。」
きれいじゃなくていい。「この人が本当に思っていること」が伝わればいい。
この記事で紹介した修正点を実際に反映したら、この記事もアップデートします。ビフォーアフターで比較できるようにする予定です。
AIは”型”は作れるけど”体温”は作れない
これが、今回一番感じたことです。
AIは「それっぽいサイト」を驚くほど速く作れます。デザイン、構成、コピー——「型」としては完璧に近いものが出てくる。
でも、読者や顧客が信頼するのは
「それっぽいもの」ではなく「その人っぽいもの」です。
これはサイト制作だけの話ではありません。ブログ記事でもSNS投稿でも同じことが言えます。
AIが出力した文章をそのまま使うと、どこかで見たような、誰のものでもない文章になる。
自分の体験を入れる。
自分の失敗を入れる。
自分の言葉で書き直す。
この「ひと手間」が、AIの出力を「自分のコンテンツ」に変える作業なんだと思います。
このブログ「ヒトブログ」のコンセプトは「今日の努力が、未来の自分をつくる」です。
AIは「詳しくなるための道具」としては最高です。でも、「自分」の部分は自分で埋めるしかない。
これからAIでサイトを作る人へ
最後に、これからAIでWebサイトを作ろうとしている人に伝えたいことをまとめます。
AIに作らせる「前」に用意すべきもの
AIにサイトを作ってもらう前に、自分で用意しておくべき素材があります。
| 素材 | 内容 |
|---|---|
| 写真 | 自分で撮った商品・サービスの写真 |
| 自己紹介 | 自分の言葉で書いたプロフィール |
| ショップURL | 実際の販売ページのリンク |
| ストーリー | なぜこれをやっているのか |
| 連絡先 | 実際に機能する問い合わせ手段 |
これらを先に用意してからAIに「組み立ててもらう」と、最初から「自分のサイト」になります。
逆に、これを用意せずにAIに丸投げすると、僕のように「きれいだけど誰のものでもないサイト」ができます。
AIは最高の”組み立て屋”
AIはコードを書いてくれる。デザインを提案してくれる。ページの構成を考えてくれる。
AIは最高の「組み立て屋」です。
でも、組み立てる素材——写真、言葉、ストーリー、人柄——これは自分で用意しないと、誰のものでもないサイトができる。
素材を自分で用意して、AIに組み立ててもらう。
この順番を守るだけで、「AI感」は驚くほど消えるはずです。
・関連記事
コメントを残す