AIが作ったとは信じられない、驚くべきサイトの数々

ChatGPT、Gemini、Claudeといったチャットボットは、コンピュータープログラミングの知識がなくても、これまで以上に簡単にコーディングを行えるようにしてくれます。バイブコーディングと呼ばれるこのツールを使えば、ユーザーは数分でウェブサイトを構築したり、たった一つの指示だけで機能的なアプリを作成したりすることも可能です。

バイブコーディングを試していたのですが、最近、Claudeの無料サブスクリプションを使うと、1回のセッションで最大5つのウェブサイトを作成できることを発見しました。その後は、使用状況をリセットするか、Claude Proにアップグレードするには5時間待つ必要があります。

Claudeを試してみたところ、1時間以内に9つのユニークなウェブサイトを構築できました。結果はこちらです。

1. レトロアーケードのランディングページ

課題： 「ピクセルフォント、脈動する背景アニメーション、そして偽の「クラシックゲーム」にリンクする3つの大きな光るボタンを備えた、ネオンカラーをテーマにしたレトロなアーケードウェブサイトを構築してください。ボタンにマウスオーバーすると効果音が追加されます。」

ネオンカラーをテーマにしたレトロなアーケードウェブサイトは、80年代のゲームホールを彷彿とさせます。ピクセル調のフォントが楽しく、ボタンごとにインタラクティブなサウンドエフェクトが用意されています。角に光るアクセントや、さりげないグリッチエフェクトなど、まさに私が求めていたデザインです。レスポンシブ対応で、キーボード操作にも対応し、実際のゲームへのリンクも用意されています。全体的に見て、まるで昔懐かしいアーケードに迷い込んだかのような感覚を味わえます。

2. シンプルなレシピブログ

テーマ： 「シンプルなレシピブログのホームページを作成しましょう。背景は白で、エレガントなセリフフォントを使用し、3枚のレシピカードをグリッド状に配置します。各カードには、写真、レシピのタイトル、そして材料を表示するホバーエフェクトを含めてください。モバイルフレンドリーにしてください。」

このミニマルなレシピブログのホームページは、すっきりとエレガントです。モバイルフレンドリーなデザインは、クリックして材料を表示するなど、タッチ操作に適した操作性を備えており、モバイルに最適です。タイポグラフィとスペースは、あらゆる画面サイズで適切に機能します。

シンプルな機能と洗練されたタイポグラフィが絶妙なバランスで融合したデザインです。食材を交互に配置したアニメーションなど、ユニークなディテールがページ全体の統一感を生み、高級感と親しみやすさを両立させています。

3. SF風のスタートアップページ

課題：「架空の宇宙採掘スタートアップ企業のための、未来的な1ページサイトをデザインしてください。フルスクリーンの星空アニメーション、太字のメタリックテキストで書かれたミッションステートメント、そして画面をゆっくりと横切るアニメーションの宇宙船を含めてください。そして、「艦隊に加わろう」というCTAボタンを追加してください。」

4. 子供向けストーリーサイト

課題： 「子供向けの絵本のための、遊び心のあるカラフルなウェブサイトを作成してください。大きくて風変わりなフォント、動物のイラスト、そしてシンプルなアニメーションで3つの短編ストーリーの「ページ」をめくるボタンを使用してください。ページごとに色が変わる背景も含めます。」

クロードは、遊び心あふれる愛らしいウェブサイトを作成しました。物語は、キツネのフィリックス、クマのベニー、そして蝶のベラという3匹の動物たちが、インタラクティブな3つのページを舞台に繰り広げる色鮮やかな冒険を描いています。

サイトの各ページには、遊び心のある背景のグラデーション、弾む動物の絵文字、滑らかなフリップアニメーションが施されており、まるで本物のインタラクティブな本を読んでいるかのような感覚を味わえます。フォントは明瞭で明るく、アニメーションのディテールも魅力的で、全体的に見て、特にスクリーンタイムに慣れている若い読者にとって魅力的なサイトです。

5. インタラクティブなデータダッシュボード

課題： 「ダミーデータを使ったインタラクティブなチャートを備えた、モダンでダークテーマのデータダッシュボードを作成してください。サイドバーメニュー、上部のライブクロック、そして棒グラフ、折れ線グラフ、円グラフの3つのチャートを追加してください。ホバーアニメーションとセクション間のスムーズな遷移を追加してください。」

このサイトはビジネスケースの例として作成することにしました。ダークテーマのダッシュボードには、スムーズなアニメーションを備えた洗練されたサイドバーメニューなど、私がプロンプトでリクエストしたすべての機能が含まれています。レスポンシブデザインはデスクトップとモバイルに対応し、スムーズなトランジションを備えた4つのメインセクションで構成されています。

ヘッダーのリアルタイムクロックが気に入っています。インタラクティブなチャートもクールなボーナスです。Claudeさんがダミーデータを追加してくれたおかげで、表示を実際に視覚化できました。

6. 禅庭の瞑想場所

課題：「柔らかなグラデーションの背景に、アニメーションで波打つ水面、そして画面をゆっくりと舞い落ちる桜の木を配置した、心を落ち着かせる1ページの瞑想ウェブサイトを作成してください。大きな「瞑想を開始」ボタンを配置すると、リラックスできるアンビエントミュージックが流れ、インスピレーションあふれる名言がフェードインします。」

このサイトの出来栄えには本当に満足しています。ピーチ、ピンク、コーラル、パープルといった色を使った柔らかなグラデーションの背景が、静けさとマインドフルネスを促してくれます。ウェブサイトは、瞑想に最適な、真に穏やかな雰囲気を醸し出しています。

7. サイバーパンクナイトマーケット

課題：「未来的なストリートマーケットを舞台にした、ネオンサイバーパンクをテーマにしたウェブサイトを作成してください。グリッチ効果のあるホバーエフェクト、点滅するネオンサイン、そしてホログラム風のアニメーションメニューを使用してください。各商品カードは、ホバーすると点灯し、短いシンセウェーブ効果音も追加してください。雰囲気を演出するために、ループする雨のアニメーションを追加してください。」

このウェブサイトの際立った特徴は、その雰囲気です。ループする雨のアニメーション、明滅するネオンサイン、アニメーション化されたグリッド背景など、視覚的に魅力的なサイトです。

3種類のシンセサウンドとインタラクティブなボタンが、このサイトをユーザーフレンドリーで魅力的なものにしています。Claudeの尽力なしには、これらの機能を私一人でコーディングすることは到底不可能でした。このウェブサイトは、滑らかなアニメーション、本物のシンセウェーブサウンド、そして没入感のある視覚効果によって、あの荒々しくネオンに照らされたサイバーパンクのストリートマーケットの雰囲気を完璧に再現しています。

8. ファンタジークエストジャーナル

課題： 「古い羊皮紙の巻物のような、ファンタジーをテーマにした冒険ログウェブサイトをデザインしてください。動くとキラキラと光る羽根ペンカーソル、中世の魔法書のようなナビゲーションサイドバー、そして、見つけるとアニメーションするアイコンをクリックすることで3つの魔法のアイテムを「集める」ことができるページを追加してください。」

このプロンプトは、クロードが魔法のようなファンタジーデザインを難なくこなせることを証明しています。光る羽根ペンカーソルは、サイト内を探索するにつれてきらめく軌跡を残し、ナビゲーションは革装丁の中世の魔法書のように展開され、アニメーション化されたホバーエフェクトが加わります。

メインコンテンツは、古びた質感と華やかな中世のタイポグラフィで装飾された羊皮紙の巻物に描かれており、サイトに本物の古き良き時代の魅力を与えています。レスポンシブデザイン、ホバーライト、インタラクティブな実績により、クリックするたびに古代の魔法のようなインタラクティブ性が溢れます。

課題：「訪問者が漫画のペット（猫、犬、またはドラゴン）を『飼う』ことができる、遊び心のあるインタラクティブなウェブサイトを構築してください。それぞれのペットにはアイドルアニメーションがあり、クリックすると反応します（喉を鳴らしたり、尻尾を振ったり、火を吐いたり）。また、食べ物のアイコンをドラッグして『餌』を与えることもできます。ミュート機能付きの、楽しいBGMを追加してください。」

最後に

Tom's Guideのその他の記事

• ChatGPT-5を使って1時間以内に5つのウェブサイトを構築しました — これがその方法です
• ChatGPT vs Gemini vs Claude の履歴書作成を依頼しました — 最もうまくいったのはこれです
• 9つのバイブコーディングプロンプトはまさに天才的。しかも使い方も簡単。