はじめに
「HTMLなどは詳しくないけれど、オリジナルのWebサイトを作ってアイデアを形にしたい！お客さんやいろんな人に知ってほしい！」と思ったことはありませんか？
生成AIを使えば、専門的な知識がなくてもある程度のWebサイトをあっという間に作ることができます。
今回は、GoogleのGeminiというAIを使い、アイデアをWebサイトとして形にする実践例をご紹介します。
「WebサイトがHTMLというものでできていることを知っていて、少しは扱える」程度の知識があれば、あっという間に作りたいイメージに近いWebサイトを作ることができるはずです！
Geminiを使ったWebサイト作り実践！
Webサイトに載せたい情報を書き出す
まず、自分がどんなWebサイトを作りたいのか、掲載したい内容を具体的に洗い出します。
本記事では実践例として、Geminiを使い、「流れ星レストラン」という架空のレストランのWebサイトを作ってみます。
作成するWebサイトは、以下の5ページの構成とします。
- トップページ
- メニュー紹介ページ
- 店舗情報ページ
- ご予約・お問い合わせページ
- ギャラリーページ
GeminiにWebサイト作成を指示する
ここから、実際にGeminiを使ってWebサイトを作っていきます。Geminiに限らず、AIになにかをお願いをするときの文章は「プロンプト」と呼ばれています。
生成AIは種類によって回答の傾向に特徴はありますが、このプロンプトの内容によって、出来上がりの結果に大きな差が出ます！
今回Geminiに伝えたい情報を細かくまとめ、以下のプロンプトを作成しました。
これをGeminiに伝えて、結果を楽しみに待ちましょう！
「流れ星レストラン」という名前のファミレスのWebサイトを作成してください。
トップページにはレストランのコンセプトや雰囲気、人気メニューの写真を載せてください。
メニュー紹介ページでは、牛丼やカレー、サイドメニュー、ドリンク、季節限定メニューなどを価格や写真付きで掲載してください。
店舗情報ページでは、住所や電話番号、営業時間、定休日、アクセス方法を載せてください。
ご予約・お問い合わせページでは、予約フォームやお問い合わせフォーム、よくあるご質問（FAQ）も用意してください。
ギャラリーページでは、店内の雰囲気や料理の写真を掲載してください。
デザインはシンプルで親しみやすく、明るく清潔な印象に仕上げてください。
画像は暫定的に著作権フリーのものを使用してください。上記のプロンプトをGeminiに入力すると、Webサイトを構成するHTMLコードが生成されました。
あとはこのHTMLコードをファイルとして保存すれば、ひとまず完成です。ブラウザで開いてみましょう！
実際に生成したWebサイトの様子
まずはトップページです。「画像は暫定的に著作権フリーのものを使用してください」と指示したためか、まんまる満月カレーの写真がハンバーガーになっていますが、「人気メニューの写真を載せてください」といった指示が反映されレイアウトは十分できています。
2つ目はメニューです。画像表示に失敗していますが、「価格や写真付きで掲載してください」というプロンプトの内容が反映されています。
3つ目は店舗情報ページです。架空の情報ではありますが、「住所や電話番号、営業時間、定休日、アクセス方法を載せてください」と指定したとおり、バッチリ記載されています。
4つ目は「ご予約・お問い合わせ」ページです。「予約フォームやお問い合わせフォーム、よくあるご質問（FAQ）も用意してください」と指定したとおり、予約フォームが作られています。
「よくあるご質問（FAQ）」に書いてあるQをクリック（スマホやタブレットならタップ）すると、以下の画像のように開いたり閉じたりもできます。
最後の5つ目はギャラリーページです。画像表示に失敗している部分もありますが、「店内の雰囲気や料理の写真を掲載してください」と指定したとおり写真が掲載されています。
今回はデザイン等について細かく指定しなかったためAIの裁量で出力が行われましたが、知見のある方であればさらに細かく指示を出し（プロンプトを具体化し）、イメージに近づけていくことができます！
Gemini以外でも、様々なAIでおなじような作り方ができますので、「オリジナルのWebサイトを作りたい！アイデアはあるけれど、Webサイトづくりとかは詳しくなくて…」といった方にもきっと強い味方になるはずです。
最後までお読みいただきありがとうございました。
「作ったWebサイトを実際に公開するにはどうしたらいいの？」など、さらに詳しく知りたい方や、サイト制作にご興味のある方は、どうぞお気軽にご相談ください。
コメント