RNDLab. INSIGHT

AIでまつ毛エクステサロンのWebサイトを作ってみました

最近のAIの進化のスピードは異常に早く、デジタル界隈では毎日のように新しい話題が出てきています。
すでに人間の脳を余裕で超えてきてるシーンも多々あり、現実的に考えて、この流れは、私たち人間が想像できるレベルより少し上くらいまでは進化しそうです。

さて、最近はデザインやWebサイト・アプリなどを簡単にAIで作れるようになってきています。クオリティは正直まだ低くその他にも色々問題はあるのですが、目的が作るという事だけであれば、AIで十分作る事ができます。

今回は、AIでまつ毛エクステサロンの1ページ完結のWebサイトを作ってみました。
プロンプト（AIに投げる言葉）をある程度作る必要があるのですが、下記のプロンプトでclaudeに作ってもらいました。少し専門的な用語がありますが、一つのhtmlと画像フォルダのみのシンプル設計にしており、店名や情報を変更すれば、そのまま利用できると思います。

---------------
まつげエクステサロンのwebサイトを作りたい。 htmlのプレビューまで作って。

【構成】 ・1ページ完結型 ・セクション：concept / salon紹介 / menu / faq / access / sns / ご予約 ・ご予約はInstagram or 公式LINE（ヘッダー右上と最下部CTAに設置）

【デザイン】 ・シンプルでモダン、余白多めのミニマルデザイン ・カラー：ベースはオフホワイト（#faf9f7）、テキストはチャコール（#1a1a1a） ・serifフォント：日本語はNoto Serif JP / 英語はCormorant Garamond（Google Fonts）

【コンテンツ】 ・サロン名：Rnd. キャッチコピー：自然な美しさを、丁寧に。 ・ヒーローセクション：サロン風景画像 + サロン名のみ（100%フルスクリーン） ・メニュー：まつ毛エクステ店のダミーメニューと価格（円）を用意 ・FAQ：よくある質問を6項目程度 ・SNS：Instagramへのリンクボタンのみ（Embed不要）

【画像】 ・画像は一旦ダミーでUnsplashから取得 ・imageフォルダ内のファイル（hero.jpg / salon-01.jpg / salon-02.jpg / menu-bg.jpg） 　を差し替えるだけで対応できる構造にすること

【技術】 ・HTML / CSS / JS 単一ファイル ・imageフォルダのみ別途用意 ・スクロール時のシンプルなフェードインアニメーション ・固定ヘッダー（スクロールで背景色変化あり）最初の画像が濃色の場合は文字色は白で
---------------

結果はこちら。
実際に動くデモサイトはこちら>

上記プロンプト以外は一切指定していない状態がこちらでした。スマホ対応もちゃんとされてます。

できたファイルをzipでダウンロードして、そのままサーバーにアップしています。コピーや画像にAI感が出てるのですが、、ロゴや店名、写真や文字をリアルなものに変えれば、そのまま使える気がします。ここから更にバリエーションを複数案作って、その中の3つを作りこんだりもできるのですが、、そこまでは必要ないシーンも多々あると思います。公開にはドメインやサーバーなどの知識も必要ですが、それもAIに聞けば専門家並みに教えてくれます。

SNSは仕組み上どうしても、同じフォーマットの中の大多数の中の一人として消費されるコンテンツになり、AIの登場でますます消費コンテンツが量産しやすくなっています。webサイトではそこでしか見れない何か。がある事が逆に今後、価値になる可能性もあるかもしれません。

ぜひ、皆さんも！というようなモノでは無いのですが、、それほど高クオリティを求めずに無料でWebを作りたい場合は、AIでも良いかもしれません。