ChatGPT Workで美容室サイトを作ってみた｜公開まで約30分

本記事はアフィリエイト広告（PR）を含みます。掲載しているサービスは実際に使用・検証した上でご紹介しています。

ChatGPTのWorkを使えば、専門的なコーディングができなくてもWebサイトを作れるの？と気になっていませんか？

AIに「サイトを作って」と頼めるサービスは増えましたが、実際に使おうとすると、デザインが思っていたものと違ったり、完成後の確認や公開方法が分からなかったりしますよね。

私も以前、ChatGPTを使ってカフェのランディングページを作ったことがあります。そのときは、作成したファイルをデスクトップへダウンロードし、ブラウザで開いて確認しながら修正していました。

ところが、今回新しく公開されたChatGPT Workを使ってみると、サイトの構成相談からモックアップ作成、コーディング、プレビューまで、かなりスムーズに進められました。

そこで今回は、架空の美容室サイトを制作し、Xserverへ一般公開するまでの流れをご紹介します。

まずは完成したサイトはこちら

https://demo.ai-blog-labo.com/LAYER-HAIR-STUDIO

ChatGPTにWork機能が追加

2026年7月、ChatGPTに新しく「Work」機能が公開されました。
従来の「Chat」とは別に、Webサイト制作やアプリ開発など、複数の工程をまとめて進められるワークスペースとして利用できます。

今回は、このWork機能を使って、架空の美容室サイトを作ってみました。

Chatで行ったこと

サイト全体の方向性を相談
必要なセクションを決める
配色やデザインの雰囲気を決める
Workへ渡す指示書を作成

Workで行ったこと

モックアップ画像を作成
デザインを修正
HTML・CSS・JavaScriptを作成
サイトのプレビュー
ZIPファイルを書き出し

私は最初にChatである程度イメージを固めて、設計図を作ってからWorkへ渡して作成してみました。

まずはモックアップ画像を作ってもらう

今回は最初からコーディングはお願いしませんでした。

まずWorkへ次のように指示しました。

「まずはコーディングせず、下記の指示書をもとにサイト全体のモックアップ画像を作成してください。」

（実際の指示）

架空の美容室「LAYER HAIR STUDIO」の1ページ完結型Webサイトを作成したいです。
以下の指示書を参考に、まずはモックアップ画像を作成してほしいです。
まだサイトのコーディングはしないでください。

デザインは、海外のファッション誌や美容雑誌のような、余白を活かしたミニマルで高級感のある雰囲気にしてください。

使用技術はHTML、CSS、JavaScriptのみとし、外部フレームワークは使わないでください。

サイト構成は以下です。

固定ヘッダー
メインビジュアル
ABOUT
PICK UP
STYLE
MENU
ACCESS
フッター

背景色は淡いアイボリーとベージュを中心にし、文字色は黒または濃いチャコールにしてください。

英字見出しはCormorant Garamond、日本語本文はNoto Sans JPまたはNoto Serif JPを使用してください。

PICK UPセクションは最も目立つ構成にしてください。

左側に大きな商品写真、右側に商品名・説明文を表示し、左右矢印で3商品を切り替えられる横スライダーにしてください。

商品は架空のヘアケア商品とし、以下の3種類を掲載してください。

・LAYER REPAIR MILK
・DEEP REPAIR TREATMENT
・SILKY HAIR OIL

PCでは画像60％、文章40％の2カラム構成にし、スマートフォンでは画像の下に文章が表示されるようにしてください。

ナビゲーションはページ内リンクとし、クリックすると各セクションへスムーズスクロールしてください。

スクロール時に各要素がゆっくりフェードインする演出を追加してください。

派手な装飾は避け、余白、タイポグラフィ、写真の大きさで高級感を出してください。

index.html、style.css、script.jsの3ファイルに分けて作成してください。

すると、サイト全体の完成イメージを1枚の画像として作ってくれました。

（モックアップ画像）

モックアップを見ながらデザインをブラッシュアップ

最初のモックアップも悪くありませんでしたが、実際に見ると気になる部分もありました。

例えば、

STYLEの写真を5枚構成にしたい
NEWSを追加したい
MENUを縦並びにしたい
セクションの余白を広くしたい
見出しの上下余白を拡大
外部予約サイトへ移動するRESERVATIONを追加したい

など、細かい部分を何度か修正しています。

コードを書いた後に修正するのではなく、まず画像で完成イメージを固められるので、この工程はかなり便利でした。

（完成したモックアップ画像）

気に入ったらコーディングを依頼

モックアップが完成したら、

「このモックアップをもとにコーディングしてください。」

と依頼しました。

すると、サイトの見た目を整えるデザイン部分や、スライダーなどの動きを含めて、実際にブラウザで表示できるWebサイトとして作成してくれました。

に分けてサイトを作成してくれました。

さらに、

スムーズスクロール
スライダー
スクロールアニメーション
レスポンシブ対応

まで実装されていました。

3商品のPICK UPスライダーの商品画像がすべて同じになっていたので、そこは修正してもらいました。

Site機能が想像以上に便利だった

今回一番驚いたのが、ChatGPTのSite機能です。

実は私は、この機能が追加されていることを知りませんでした。

以前カフェのランディングページを作ったときは、

ファイルを書き出す
デスクトップへ保存
ブラウザで開く
修正
また書き出す

という流れでした。

今回は違います。

サイトを作成すると、https://layer-hair-studio●●●.chatgpt.site みたいなURLで表示してくれます。chatgpt.site がChatGPT側のホスティング領域だそうです。

スライダーも動きますし、スマホ表示も確認できます。

つまり、

ChatGPT内で制作・プレビュー・ホスティングまで行えます。

これはかなり便利機能ですね！

一般公開はXserverで行いました

今回表示されたChatGPT側のURLは、所有者限定の公開設定になっていました。

そのため、そのままURLを送っても、他の人は閲覧できない可能性があります。

そこで今回は、ChatGPTからZIPファイルを書き出し、自分で管理しているXserverのサブドメインへアップロードしました。

今回の完成した流れは次のようになります。

ChatGPT内で制作・プレビュー・ホスティングまで行い、一般公開はXserverで行いました。

ZIPファイルを書き出してアップロード

Workへ

「サイトをダウンロードしたいです。」

と伝えると、ZIPファイルを作成してくれました。

あとは、

Xserverのファイルマネージャーを開く
ZIPをアップロード
解凍

これだけで公開できました。

私は以前からデモサイト用のサブドメインをXserverに作っていたため、今回はそちらへ公開しています。

サーバーの契約をしていない方にロリポップ！デプロイナウを使って無料公開する方法もあります。こちらの記事で詳しくかいているので合わせてどうぞ

制作から公開まで約30分

今回、

サイト構成を考える
モックアップ作成
デザイン修正
コーディング
ZIPダウンロード
Xserverへアップロード

ここまで約30分でした。

もちろん、

方向性が決まっていたこと
デモサイトだったこと
サブドメインを用意していたこと

など条件はありますが、それでもかなり短時間で公開まで進められました。

実際に使って感じたこと

今回は特にブランドコンセプトとかも決まっていなかったのですが、

モックアップを先に作る方法はおすすめです。

画像を見ながら

「余白を広く」

「写真をもっと大きく」

「ここにNEWSを追加」

など、人にデザインを依頼する感覚で修正を重ねて、自分のイメージに合ったサイト作りができると思いました。

まとめ

ChatGPT Workを使うことで、

Chatで設計を考える
Workでモックアップを作る
デザインを修正する
コーディングする
Site機能で動作確認する
ZIPを書き出す
Xserverへ公開する

という一連の流れを、とてもスムーズに進めることができました。

特に今回初めて使ったSite機能は、制作したサイトをその場で確認できるので、以前より格段に使いやすくなった印象です。

簡単なランディングページやデモサイトであれば、AIとの対話だけでここまで作れる時代になったのだと実感しました。