GPT-5に画像1枚渡したら、5分でカフェのLPが完成した話｜非エンジニアの実例

「サイトを1から作るって、結局デザインもコードも分からないと無理ですよね……？」

これは私が就労支援事業所のIT講習でよく聞かれる質問です。少し前までは、私自身も同じことを思っていました。デザインソフトの使い方、HTML/CSS、JavaScript、画像素材の準備——どれか一つでも欠けると、サイトは完成しないと信じ込んでいたんです。

でも先日、ChatGPT（GPT-5）にカフェの写真を1枚渡しただけで、たった5分で動くカフェのランディングページが完成しました。デザインも、画像も、コーディングも、全部AIが一度にやってくれました。

今日はその体験を、感じたままに書いていきます。「サイトなんて自分には作れない」と思い込んでいる方に、ぜひ読んでほしい話です。

「デザインもコードも、AI任せ」が現実になってきた

ホームページを自分で作ろうとしたとき、誰もが一度はこう思うのではないでしょうか。

私もまったく同じでした。工学部を出てはいるものの、実務エンジニアとしての経験はゼロ。プログラミングは少しわかるけれど、それを仕事にしてきたわけではありません。「サイトを作る」と聞くと、無意識に身構えてしまう側の人間でした。

それなのに今回の体験では、私が用意したのは カフェで撮った1枚の写真だけ。プロンプトもたった一行。それだけで、デザインも画像も実装コードも、ぜんぶAIが揃えてくれました。

ちなみに私はHTML・CSS・JavaScript・PHPに少しは触ったことがあります。だから出てきたコードを読んで「あ、これね」と理解はできます。でも 「ゼロから動的なLPを実装してください」と言われたら、たぶん何時間もかかる——それが正直なところでした。

「コードを全部自分で書けないことが、もうサイトを作れない理由にはなりません」——これが今回いちばん強く感じたことです。

サイトを「自分で作れない」と感じる3つの理由

非エンジニアがサイト制作を諦めてしまう理由は、突き詰めると次の3つに集約されると私は思っています。

理由1: デザインセンスが無いと感じている

「自分にはおしゃれなレイアウトのセンスが無い」と思っている人は多いはずです。実際、参考サイトを見て真似しようとしても、配色や余白の取り方、フォント選びでつまずいてしまう。デザインは正解が見えづらい領域だからこそ、最初の一歩が出にくいんです。

理由2: コーディングを「自分で書き切る」のが大変

HTMLが少し読めても、CSSで全体のレイアウトを破綻なく組んだり、JavaScriptで動的な動きを実装するのは、また別の難しさがあります。私自身、HTMLとCSSは多少書けますが、「LP1ページを丸ごとゼロから実装する」となると、調べながら何時間もかかるレベルでした。「動くサイト」を作ろうとすると、急に作業量の山に飲み込まれる感覚——これは私が講師として現場で何度も見てきた光景でもあります。

理由3: 素材集めが地味に大変

意外と見落とされがちなのが「画像素材」です。フリー素材サイトを延々と探したり、自分で撮影したり加工したり——サイト本体を作る前に、ここで体力を使い切ってしまう人がとても多いのが現状でした。

こちらはNanobanana 2で作成しました
今度記事にします

画像1枚を渡したら、5分で動くLPが出来上がった

ここからが本題です。実際にやったことを順を追って書きます。

やったこと

たったこれだけです。所要時間は 5分 でした。

渡した画像

私が渡したのは、木の温もりがあるテーブルの上に、チーズケーキとハンドドリップコーヒー、それに小さなクッキーが並んでいる写真でした。雰囲気はちょっと隠れ家っぽい喫茶店のイメージです。

何も特別な写真ではありません。スマホで普通に撮った1枚。ただ、雰囲気がはっきりしていたのが良かったのかもしれません。

入力したプロンプト

私が打ち込んだプロンプトは、本当にシンプルでした。

これだけです。「ヘッダーに大きな画像を」とか「メニューはこういう構成で」とか、細かい指示は一切していません。「雰囲気をもとに」という一言を入れたのがポイントだったかなと感じています。

出てきたもの

驚いたのは、出てきた成果物の完成度でした。

• ヘッダー画像: 私が渡した雰囲気を踏襲した、コーヒーとケーキの大きなビジュアル
• ABOUT セクション: 「日常に、余白をつくる場所。」というキャッチコピー付き
• MENU セクション: ハンドドリップコーヒー、自家製チーズケーキ、焼き菓子セット、カフェラテなど、価格つきで4品
• INTERIOR セクション: 店内の雰囲気写真（これもAI生成）
• ACCESS セクション: 住所、営業時間、定休日、電話番号、地図風レイアウト
• RESERVATION セクション: ご予約フォームへの導線

しかも全部、HTML + CSS + JavaScriptのコード付きで出てきました。コピペしてブラウザで開けば、そのまま動きます。マウスホバーで色が変わったり、スクロールでアニメーションする部分まで含まれていました。

私はある程度コードが読める方なので、出てきたHTML/CSS/JSをスクロールして「ここはFlexboxで配置してるな」「JavaScriptはイベントリスナーでホバー検知か」と内容を把握できました。読めるからこそ、AIの仕事の精度に「これはちゃんとしてる」と確信が持てたんです。

「サイトを作るという行為が、5分の作業に圧縮された瞬間」でした。

たった一行のプロンプトに込めた工夫

「結局プロンプトが上手だったんでしょ？」と思われるかもしれません。でも実際には、本当にシンプルな一行でした。あえて言うなら、3つの工夫がありました。

工夫1: 「雰囲気をもとに」と書いた

「この画像と同じものを作って」ではなく「雰囲気をもとに」と指示したことで、AIが自由に解釈する余地を残せました。結果、ベースの世界観は維持しつつ、必要なバリエーション画像を生成してくれました。

工夫2: 「いろんな画像を作成して」と明示した

実はこれを言わないと、後述するように AIはコーディングを先にやってしまう という落とし穴があります。「画像も用意してね」と先に伝えることで、ビジュアルとコードを並行して用意してもらえました。

工夫3: 「LPサイト」と用途を明示した

「ホームページ」ではなく「LPサイト（ランディングページ）」と限定したことで、AIが構成パターンを絞り込めたのだと思います。ターゲットを限定すると、AIの出力は逆に豊かになる——これは他の場面でもよく感じることです。

一つだけ、想定外だったこと

完璧に見えた今回の体験ですが、一つだけ「あれ？」と思ったポイントがありました。

「あ、これは画像も作ってもらう必要があるな」と気づいて、改めて「画像も生成してください」と頼んだら、そこから一気にビジュアルが揃いました。

つまり、AIに「全部やって」と言うだけでは、必ずしも全部はやってくれないということです。「画像」「コード」「文章」など、欲しいアウトプットを明示的に伝える——これはどんなAIツールを使う上でも、共通の原則になりそうです。

「察してもらうのではなく、指示するのが、AIとの正しい付き合い方」なんです。

あなたが今日から試せる3つのステップ

「自分でも試してみたい」と思った方のために、今日からできる手順を3ステップでまとめます。

この画像の雰囲気をもとに、いろんな画像も作成して、
[作りたいもの] のLPサイトを作ってください。
HTML/CSS/JSのコードと、必要な画像も全部出してください。

「完璧を最初から目指さず、まずは『動くものを5分で作る』体験をしてみてください。」

よくある質問

まとめ：「作る側」への扉は、もう開いている

今回の体験で私が実感したことを、3つにまとめます。

私自身、就労支援の現場で「自分にはIT系は無理」とおっしゃる方とよく接します。でも、今のAIなら、その壁の高さは確実に下がっています。「やってみる」のハードルは、5年前の10分の1くらいになっているのではないでしょうか。

仕事は奪われるのではなく、AIを使って活用するのです。

このブログ「CodeCraft Lab」では、こういった 非エンジニア視点でのAI実践記録 をこれからも発信していきます。「自分にもできるかも」と感じた方は、ぜひ次の記事も覗いてみてください。

今日のひとこと:

「コードを全部自分で書けなくても、サイトはちゃんと作れる時代になりました」