ブログでも商品紹介でも、一度は自分のホームページを作成しようとした人は多いと思います。しかし実際に「簡単」と書いてある参考書やWEBを見ても、結局プログラミングが何しているか分からなくて諦めてしまった人も多いのではないでしょうか？そんな人向けに今回はChatGPTを使用して、ホームページを作成する方法を解説したいと思います。
「文字を黒にして」「画像を横に並べて」といった口語で作成することが可能なので、きっと今回は挫折しないはず。
※2024年5月13日に、ChatGPTの新しいLLM「GPT-4o(オムニ)」が登場しました！以下の記事で詳しい概要や使い方について解説していますので、合わせてチェックしてみてください。
ChatGPTでホームページを作成する方法とプロンプト例
チャットGPTでホームページを作成するためにはどんなプロンプトが必要か分からない。そんなあなたへ、今回は実行例付きでその方法をご紹介します。
ホームページ作成手順・プロンプト例①：ChatGPTで必要な要素を明確にする
ChatGPTでホームページを作成するときに初心者にとってもっとも大切なことは、何から始めるかを理解することです。
良くAIは「頭はいいけど融通が利かない人」と揶揄されます。これは半分正解で半分嘘と言えるでしょう。なぜならばAIは複雑なタスクを行うことはできません。しかし、単調なことを組み合わせて複雑なものを作成することはできるからです。
一見すると複雑そうなホームページですが、最初に大きな課題を分解して小さな要素に分けることでホームページ作成をスムーズに行うことができます。
具体的な例を挙げて考えてみましょう。仮にパン屋のホームページを作成する場合、何が必要か思い浮かぶでしょうか？
お店として販売しているならば、どんなことを特色としているかを記載すると、それに共感した消費者が買いに来てくれるかもしれません。そして、当然パンの種類がどんなものがあるかを記載しているメニュー。また予約や状況を聞くためにメールアドレスや電話番号を載せるお問い合わせフォーム等。
ぱっと思いつくのはこの辺りではないでしょうか。これらの要素が、ホームページの基本的な骨組となります。
では実際にChatGPTに質問するとどうなるか確認してみましょう。
この時のプロンプトは下記のようにざっくりとした命令としてみます。
パン屋を新規開店する予定です。お店のホームページを作成しようと思うが、どんなコンテンツが必要になるか初心者向けに5つのコンテンツで簡単に教えていきなり複数のコンテンツを作成していくと難しいので、最初は重要な5つぐらいを抽出して、そこから肉付けをしていく方が理解しやすいと思います。
各コンテンツとその要約された内容が表示されました。
質問結果として上記のように
- トップページ
- メニュー
- 店舗情報
- ブログまたはニュース
- お問い合わせフォーム
がホームページ作成に必要なコンテンツとして挙げられました。
トップページにおけるロゴやブログまたはニュースなど、個人では思いつかなった内容なども補填してくれています。まずはこれを骨格として、実際にホームページを作成してみましょう。
ホームページ作成手順・プロンプト例②：明確化した要素からデザインを考える
ホームページ作成に必要な要素が明確化になったので、それを元にホームページデザインを考えていきます。
最初に、トップページに焦点を当ててみます。トップページには何を記載すべきか、どのような順番が適切かについて質問してみましょう。
今回もプロンプトは下記のようにざっくりとした内容で命令としてみます。
上記のトップページの構成を教えて
初心者向けとして基本的な構成と要約を提示してくれました。
「お得な情報」や「お問い合わせ情報」などは専門用語を知らなくても理解しやすいと思いますが、「ヘッダー」や「フッター」などは知識がないと難しいかもしれません。
ですが、専門用語を理解していなくても問題ありません。ChatGPTに「作って！」と命令すれば求めるデザインを簡単に実現することが可能だからです。
上記のトップページの構成でHTMLとCSSを出力して画像では全部載せきれていませんがindex.html (HTML)とstyles.css (CSS)が出力されました。
そしてChatGPT上ではホームページが表示できないので、上記2つをメモ帳などにコピーして、同じフォルダに保存しindex.html を開いてみます。
メニューやお店についての情報が表示されてホームページの元になるものが出来上がっているのが分かります。
頭の中でイメージを明確化し、要素からホームページデザインを考えるのも良いですが、実際に作成してみると、「こうした方がいい。」とか、「これはいらない。」とかが出てくるかもしれません。
そのため、まずは思い描いているイメージをできるだけ具体的にChatGPTに命令し、出力された実物を見てみるのも良いでしょう。
また、ChatGPTは思った通りに変更されない場合もありますので、下記のように今のHTMLとCSSに名前を付けて記憶させると、変な改修をされた時に記憶したところからやり直すことができるので便利です。
このHTMLとCSSを「ベース１」という組み合わせで記憶してください
ホームページ作成手順・プロンプト例③：HTML、CSSを実行してみる
ホームページを作成するためにはHTMLとCSSが必要になりますが、それぞれ役割が違います。
- HTML（HyperText Markup Language）は、ホームページの構造やコンテンツを定義します。
- CSS（Cascading Style Sheets）は、ホームページの見た目やデザインといった装飾周りを変更します。
この2つの違いを理解することで、「コンテンツを追加したい→HTMLを変更」「商品紹介のデザインを変更したい→CSSを変更」のように、何を変更すれば良いか明確になるため、ChatGPTへの命令を具体的に行うことができます。
例えば先ほど出力したホームページはざっくりとした土台は完成していますが、テキストが見にくかったり、寂しい印象を受ける部分もあるかもしれません。そうした課題に対処するために、HTMLとCSSを使用して改善を行います。
簡単なデザインの変更を行ってみる
まずは簡単なところから変更して、プロンプトに慣れていきたいと思います。
今回は白地に白背景だと文章が読みにくいので、まずは文字色を変更します。
プロンプトは下記になります。
「ベース1」のトップページの中で、下記2行の文字色を黒にして、「ベース1」と合わせたHTMLとCSSを「ベース2」として出力して
新鮮なパンをお楽しみください
季節のおすすめ商品や特別なセールをチェックしましょう。
無事に意図した文字の色を変更することができました。このように文字の色や背景色などは簡単に変更することができます。
変更した後は「ベース２」という名前で保存することを忘れないようにして下さい。
ChatGPTでは、変更した部分のHTMLやCSSを断片的に提示してくることもあります。その場合、どこに追加すればよいのかわからなければ、ひとまとめにしたHTMLとCSSを出力するように命令すれば、一括で出力することも可能です。
トップページの情報量を増やす
簡単な変更はできることは分かったので、次はトップページをコンテンツの拡充を行っていきます。
今回はパン屋なので販売するパンを追加していきたいと思います。
まずメロンパン、カレーパン、クリームパンを追加すると仮定します。
追加するパンに合わせてプロンプトは下記になります。
「ベース２」のトップページにパンの商品紹介を載せたい。
パンの種類はメロンパン、カレーパン、クリームパンの3種類。
それぞれの値段は200円、500円、1000円。
それを「ベース２」と合わせたHTMLとCSSを「ベース3」として出力して
HTMLにメロンパン、カレーパン、クリームパンの項目が出来上がっています。
そしてホームページ上にも追加することができました。これをベース３として記憶させます。
具体的な情報を伝えれば箇条書きレベルでは表示させることができました。
しかしすべて文字だけであり、ただ縦に並んでいるだけなので、良いデザインとは言えません。
配置の変更してみる
必要な情報は追加されましたが、左詰めで縦に並んでいるいるため画面全体をうまく使えているとは言えない状態です。
まずは商品を横に並べて比較しやすくしたいので、下記のようなプロンプトにします。
「ベース３」で商品が横並びに変更したHTMLとCSSを「ベース4」として出力して
パンの画像がないので微妙ですが、先ほどよりは若干見やすくなりました。
今回は横に並べただけですが、命令によっては縦に並べたり、順番を入れ替えたりとより見やすくすることも可能です。
こちらをベース4として記憶させます。
デザインの変更と装飾を行ってみる
多少見やすくなりましたがこのままではパン屋らしくありません。もっと鮮やかで見やすいデザインにすることで、購買意欲が高まるようなホームページにする必要があります。
そこでこのホームページに装飾や視覚的な改善を行ってみましょう。
「パン屋らしい飾り付けを行う」とはいえ、パン屋さんらしい装飾がどんなものか分からない方やホームページデザインに自信がない方もいるかもしれません。しかし全く問題ありません。
装飾の色や配置も全てChatGPTに丸投げすれば良いのです。
「パン屋らしい」「食欲」「購入意欲」のような思いつくキーワードを入れて、下記のようなプロンプトにしてみます。
「ベース4」をコンテンツはそのままで全体的にパン屋らしい、食欲をそそられて購入意欲を引き出すようなデザインにして
全体的にオレンジのアクセントカラーとなり、フォントも題目や商品名は大きく他は相対的に小さくなっています。また商品のところにカーソルを合わせると、商品が浮かぶようなホバーエフェクトなども含まれています。
パン屋らしいかは断定できませんが、先ほどの白黒の時より温かみが増え、親しみやすいホームページになったと思います。
これをベース5として記憶させます。
これで、ホームページの基本的な骨組みが完成しました。
ホームページ作成手順・プロンプト例④：追加したい要素等を付け足す
ホームページの情報を拡充させるために下記を埋め込んでみましょう。
GoogleMAPを埋め込んで地図を表示する
お店の場所を探すのに地図はとても便利です。
地図を追加することでお店がどこにあるのか簡単に把握することができるようになり、お店を訪問するハードルが下げることも可能になります。
特に近年ではGoogle Mapsが広く利用されていますので、今回はGoogle Mapsをホームページに埋め込んで地図を表示させる方法をご紹介します。(※今回は暫定として東京駅の地図を載せたいと思います。)
コンテンツを追加するので、
- 追加するコンテンツの場所を作成する。
- コンテンツの中身を作る
今回はプロンプトは2段階に分けます。
「ベース６」として「ベース5」の中で、「お店についての説明」部分に「お店の場所」というコンテンツを追加してください「ベース7」として、「ベース6」の店の地図を追加したい。
トップページの「お店の場所」にGoogleMAPを表示したい。
表示するGooGleMAPは〒100-0005 東京都千代田区丸の内１丁目
上記を合わせて一つのHTMLとして出力して
無事に東京駅の地図が埋め込むことができました。
Twitterのリンクを表示する
ホームページの更新は、新商品や休日などお店の情報を最新に保つためには欠かせない作業ですが、忙しい時には手間と時間がかかります。
それを解消する手段としてホームページ上にSNSの情報を埋め込む方法があります。
最新情報を提供するためにSNSを活用するお店が増えており、SNSを更新するだけでお店の情報を更新することができ、ホームページを改修する手間を省くことができます。
今回はX(旧Twitter)を埋め込んでそのタイムラインをホームページ上で表示するようにします。(※暫定として東京駅のアカウントを埋め込みました。)
前回同様に
- 追加するコンテンツの場所を作成する。
- コンテンツの中身を作る
プロンプトを2段階に分けます。
「ベース8」として、「ベース7」の「お店についての説明」の下に新しいコンテンツを作成して
コンテンツ名は「SNS」で作成して「ベース８」にSNSの情報を埋め込みたい。
埋め込む場所はベース8の中の「ここにSNSのアイコンやリンクを追加」
埋め込むアプリは「X」
埋め込むURLは「https://twitter.com/JRC_Tokyo_Sta」
タイムラインの画像がリアルタイムで表示したい。
上記を含めて「ベース9」としてHTMLを出力して
無事にXのタイムラインを表示することができました。
今回は「X」を埋め込みましたが、写真などを多く表示したい場合は、「Instagram」などと連携すれば、手軽に新商品を紹介することができるようになります。
プロンプトを2段階に分けなくても出力することは可能ですが、勝手に商品紹介などと紐づけてその部分をSNSに置き換えてしまうこともあるので注意が必要です。
ChatGPTのAPIをホームページに埋め込むこともできる
近年MAPやSNSを埋め込んだホームページは一般的となっていますが、さらにホームページ作成に使用しているChatGPTのような自然言語モデルを組み込むことが可能なことを知っていますか？
具体的には、ChatGPTにはAPIが提供されており、これを活用することで、ユーザーエンゲージメントを向上させることができます。
難しい話に聞こえるかもしれませんが、実際にやれることは従業員の代わりにAIが質問に答えるだけです。それだけかと思うかもしれませんが、実際に対話型のAIをホームページに組み込むだけで集客の増加が期待できます。
例えばパン屋であれば使用している原材料だったり、アレルギーに対する回答、お店の雰囲気などをＡＩが自動で質問に回答してくれるようなこともできるため、消費者はより深くお店や商品のことを知ることができます。特にアレルギー情報などは返答が難しい場合もありますが、AIならば待ち時間をほとんど必要せず回答することができます。
ここまでの説明でとても有用であることは理解して頂けたと思うのですが、実際に適用するのは厳しいのが実状です。
例えば今までと違い自身でAPIを動かすためのプログラムを組まなくてはいけません。PythonやNode.jsなどを使用しますが、成果物が見えにくいバックグラウンドのプログラミングになるため、ChatGPTで自動で作成してもそれが正しいかを判断することが容易ではありません。
また埋め込むためには、OpenAIのAPIを使用することが必須となりますが、残念ながらAPIの利用は無料ではありません。そのため実際に活用するときにはコストと利益をよく検討することが重要です。
こちらの記事でAPIの利用について詳しく説明しているので興味がある方は是非ご覧ください。
まとめ
いかがでしたか？
この記事をまとめると
- ホームページをデザインするためには要素を明確にすることが重要
- 要素さえ明確にすればChatGPTがホームページの骨格と要約を作成してくれる
- 情報の追加や装飾を施して、見やすいページを作るのもChatGPTに丸投げできる
- GoogleMAPやX等他アプリとの連携もChatGPTを使えば簡単にできる
- ChatGPTのAPIを使用すればより良いホームページにできるが現状では無料ではなく、使用するのは簡単ではない
でした！
実際にChatGPTを使用してみると、「さっき書かれていたソースコードが消されている」「勝手に変なところとリンクされている」等起きてしまうこともありますが、それでも1からホームページを作成するよりは簡単に作成することができます。
AIがもっと簡単にホームページを作ってくれる未来は遠くないかもしれません。
- ChatGPTで〇〇を効率化したい
- スライドを作るならどのAIツールがおすすめ？
- おすすめのGPTsが知りたい
同じ悩みを解決した人がいるかもしれません。ぜひ質問してみてください！
