Claude を使用して、9 時間以内に XNUMX つの Web サイトを構築しました。

私自身、「提案に基づいてコードを書く」という方法を試してみたところ、無料のクラウドプランでは1回のセッションで最大5つのウェブサイトを作成できることが最近分かりました。それ以降は、サービスを再利用するには5時間待つか、クラウドプロにアップグレードする必要があります。

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

1. 古いアーケードゲームのランディングページ

請求：昔ながらのアーケードゲームデザイン。ネオンカラーのピクセルフォント、脈動するアニメーションの背景、そして3つの大きな光るボタンが、まるで「クラシックアーケード」のような雰囲気を醸し出しています。ボタンにマウスオーバーすると効果音が鳴ります。

レトロなアーケードゲームにインスパイアされた、ネオンカラーをテーマにしたこのサイトは、80年代のアーケードゲームを彷彿とさせます。ピクセルアートは実に楽しく、ボタン一つ一つにインタラクティブなサウンドエフェクトが備わっています。角に光るアクセントと繊細なグリッチエフェクトが、まさに私が求めていたデザインです。レスポンシブでキーボード操作にも優れ、実際のゲームと組み合わせるのに最適です。全体的に見て、まるで昔懐かしいアーケードゲームの世界に入り込んだかのような感覚を味わえます。

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

依頼内容：「レシピブログのシンプルなホームページをデザインしてください。背景は真っ白で、上品なセリフ体フォントを使用し、3枚のレシピカードをグリッド状に配置してください。各カードには画像、レシピのタイトル、そして材料が表示されるスクロール効果を含めてください。モバイルフレンドリーなデザインにしてください。」

レシピブログのシンプルなホームページは、洗練されたクリーンなデザインです。モバイルフレンドリーなデザインで、タップで材料が表示されるなど、タッチ操作も容易で、モバイルでの使用に最適です。タイポグラフィとスペースの調整も、あらゆる画面サイズで違和感なく機能します。

このデザインは、シンプルな機能性と洗練されたタイポグラフィの完璧なバランスを実現しています。コンポーネントが重なり合うアニメーションといったユニークなディテールがページ全体の統一感を生み、高級感と親しみやすさを醸し出しています。

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

課題：「架空の宇宙採掘会社のための、未来的な1ページ構成のウェブサイトをデザインしてください。画面いっぱいに広がるアニメーションの星の背景、太字のメタリックな文字で書かれたミッションステートメント、そして画面をゆっくりと横切るアニメーションの宇宙船を含めてください。さらに、「艦隊に参加しよう」という行動喚起ボタンを追加してください。」

80年代のアーケードゲームからSF映画まで、このサイトでは、きらめく星、飛び交う彗星、漂う宇宙の粒子が画面いっぱいに広がる星空の背景と、キュートな宇宙船が画面を横切って飛び交う様子をお楽しみいただけます。大胆なメタリックプリント、光沢のあるテキスト、そして脈動するボタンが、冒険気分を盛り上げます。

マウス操作、キーボードナビゲーション、パララックススクロールといったインタラクティブな要素が、ユーザー体験を真に生き生きとしたものにしています。クロードは細部にまで素晴らしい仕事をしてくれました。

4. 童話サイト

依頼内容：「子供向け絵本のための、楽しくカラフルなウェブサイトをデザインしてください。大きくて個性的なフォント、動物のイラスト、そしてシンプルなアニメーションで3つの短い物語の「ページ」をめくるボタンを使用してください。各ページごとに色が変わる背景も加えてください。」

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

サイトの各ページには、遊び心のある背景色のグラデーション、鮮やかな動物の絵文字、そしてスムーズなページめくりアニメーションが採用されており、まるで本物のインタラクティブな本を読んでいるかのような感覚を味わえます。フォントは明瞭で明るく、アニメーションのディテールも魅力的で、全体的に見て、特に画面の前で過ごすことに慣れている若い読者に魅力的です。

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

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

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

ヘッダーのリアルタイムクロックがとても気に入りました。インタラクティブなグラフも素晴らしい追加機能です。クロードがダミーデータを追加してくれたおかげで、実際に表示を視覚化できたのもありがたいです。

6. 禅庭瞑想の場

依頼内容：「柔らかなグラデーションの背景、画面下部に流れる水のアニメーション、そして桜の木がゆっくりと花びらを散らせる様子を描いた、シンプルな1ページ構成の瞑想ウェブサイトを作成してください。リラックスできるアンビエントミュージックが流れ、インスピレーションを与える名言とともにフェードアウトする大きな「瞑想を開始」ボタンを含めてください。」

このサイトの出来栄えには非常に満足しています。ピーチ、ピンク、コーラル、パープルといった色調の柔らかなグラデーションの背景が際立ち、落ち着きとマインドフルネスを促してくれます。このサイトは、瞑想に最適な、真に穏やかな雰囲気を醸し出しています。

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

依頼内容：「ネオンサイバーパンクの世界観にインスパイアされた、未来的なストリートマーケットをフィーチャーしたウェブサイトを作成してください。マウスカーソルを重ねた際にグリッチエフェクト、点滅するネオンサイン、アニメーション付きのホログラム風メニューを使用してください。各商品カードは、マウスカーソルを重ねると点灯し、短いシンセウェーブ効果音を再生するようにしてください。また、繰り返し雨が降るアニメーションを追加して、刺激的な雰囲気を演出してください。」

このサイトの目玉は、その雰囲気です。繰り返し流れる雨のアニメーションや点滅するネオンサイン、そしてアニメーション化されたグリッド背景など、視覚的に魅力的なサイトです。

3種類のシンセサウンドとインタラクティブなボタンのおかげで、このサイトはユーザーフレンドリーで魅力的なものになっています。クロードが全ての作業をしてくれたおかげで、私一人ではこれらの機能をプログラミングすることができませんでした。滑らかなアニメーション、本格的なシンセウェーブサウンド、そして没入感のある視覚効果によって、サイバーパンクのストリートマーケットの生々しくネオンに照らされた雰囲気を完璧に捉えています。

8. ファンタジーミッションダイアリー

依頼内容：「古代写本にインスパイアされたファンタジーアドベンチャーのウェブサイトをデザインしてください。羽根ペンのポインターは光り、動かすとキラキラと輝くようにし、サイドナビゲーションバーは中世の魔法書のようなデザインにしてください。また、ユーザーがアイコンをクリックして3つの魔法アイテムを「収集」できるページを作成し、アイコンをクリックするとアイテムが動くようにしてください。」

この例は、Claudeが魅力的で独創的なデザインを容易に実現できることを示しています。サイト内を探索すると、光る羽根ペン型のポインターがキラキラと輝く軌跡を残し、ナビゲーションメニューは革装丁の中世の魔法書のように展開し、アニメーションによる浮遊効果も楽しめます。

メインコンテンツは、古代の碑文と中世の華麗なタイポグラフィがデザインされたパピルスの巻物に基づいており、サイトに本物の古代世界の魅力を与えています。レスポンシブデザイン、インタラクティブな輝き、そしてインタラクティブな達成感により、クリックするたびに古代の魔法のようなインタラクションが満ち溢れます。

9. 漫画のペットを飼う

依頼内容：「訪問者が漫画風のペット（猫、犬、ドラゴン）を『養子』にできる、楽しくインタラクティブなウェブサイトを作成してください。各ペットは待機時にアニメーションが表示され、クリックすると反応（ゴロゴロ喉を鳴らす、尻尾を振る、火を吹くなど）し、食べ物のアイコンをドラッグして『餌を与える』ことができるようにしてください。明るいBGMを追加し、ミュート機能も付けてください。」

彼女は、楽しくて魅力的なインタラクティブなペット里親募集ウェブサイトを作成した。それぞれのペットには、個性豊かな漫画キャラクターが用意されている。クロードのおかげで、食べ物をドラッグ＆ドロップするだけで簡単にペットに餌をあげることができ、ペットの幸福度メーターが上昇する様子を見守り、ゴロゴロ喉を鳴らす音から火を噴くような咆哮まで、様々な楽しい反応を引き出すことができる。

気分を盛り上げるアップビートな曲も繰り返し流れています。このサイトはレスポンシブでタッチ操作にも対応しており、楽しく、感情豊かで、インタラクティブな体験を提供することを明確に意図して設計されています。