ChatGPTって、文章を書いたり、アイデアを出したりするだけのツールだと思っていませんか？
じつは、ChatGPTを使えば『ウェブサイト』を簡単に作れてしまうんです。
プログラミングなどの専門知識は不要。ChatGPTと対話するだけで、ポートフォリオサイトやプロフィールページが簡単に作成できます。
『AIに文章を作らせる時代』から『AIで自分のウェブサイトを作る時代』へ。
この記事では、ChatGPTのアカウント作成から有料プランへのアップグレード、簡単なウェブページを作って公開するところまで、順を追って紹介します。
あなたの中の“ChatGPTのイメージ”が、ガラリと変わるはずです。
おもちAIと会話しながら作る『バイブコーディング』に挑戦してみよう！
ChatGPTを始める前に知っておきたいこと
ChatGPTとは？
ChatGPTはただの検索エンジンではありません。
“質問を投げかければ答えを返してくれる”、会話のやり取りが加わるのが大きな特徴です。
たとえば『旅行の計画を立てたい』と入力すれば、行き先の候補からスケジュールの提案まで、まるで友達と話しているように返してくれます。
さらに文章作成や英会話の練習、プログラミングの学習まで幅広くサポート。
『検索する』から『一緒に考える』へ
この違いを理解すると、ChatGPTの使い方が変わってきます。
おもちいろんな使い方ができるよ！
無料と有料の違い
ChatGPTには『無料版』と『有料版』の2種類があります。
無料版でも十分使えますが、正直なところ『本格的に使いたい』と思うなら有料の方がおすすめです。
無料版は“GPT-3.5”というモデルが使えるため、ちょっとした質問や短い文章の生成には問題ありません。ただ、混雑時につながりにくかったり、回答が浅くなりがち。
一方、有料版では最新モデルのGPT-4が利用できるため、コードや文章の精度が大幅にアップします。
『ちょっと試してみたい』なら無料版で十分、でも『しっかり活用したい』なら有料版を利用しましょう。
実際にChatGPTで作成したウェブサイトを紹介
ChatGPTでどんなウェブサイトが作れるのか、実際に私が作成したサイトを紹介していきます。
まずは、こちらのポートフォリオサイト。画面右上にあるボタンをクリックすると、デザインのテイストを切り替えることができます。
つづいては、SNSリンクをまとめたおしゃれなプロフィールページ。ChatGPTをつかえば、デザインのテイストを簡単に変更できます。
おもち今回は、こちらのプロフィールリンクページの作り方を解説していくよ！
ChatGPTアカウントを作成する方法
ChatGPTの登録に必要なもの
ChatGPTの登録に必要なものはとってもシンプル。
メールアドレス もしくは Googleアカウント があればOK。特別な書類や難しい手続きは一切いりません。
普段、ネットサービスを利用している人なら、誰でもすぐに登録できます。
ChatGPTの新規登録とログイン手順
OpenAIの公式サイトをひらきます。
おもちニセモノのChatGPTもあるから気をつけよう！
サイトがひらいたら、画面右上にある『ログイン』ボタンをクリック。
『ChatGPT』をクリック。
ChatGPTがひらきました。
画面右側にある『無料でサインアップ』ボタンをクリック。
お好きな方法でサインアップしていきましょう。
おもち今回はメールアドレスで登録していくね！
メールアドレスを入力したら『続行』ボタンをクリック。
パスワードにお好きな文字列を入力。
パスワードが入力できたら『続行』ボタンをクリック。
登録したメールアドレス宛に、コードが送られてくるので、確認していきましょう。
メールをひらいて、メッセージ内容にあるコードをコピー。
ChatGPTにもどり、コピーしたコードを貼り付けてください。
コードがコピペできたら『続行』ボタンをクリック。
名前（ニックネーム）と生年月日を入力。
入力できたら『続行』ボタンをクリック。
ChatGPTにログインできました。
おもちこれでChatGPTが使えるようになったよ！
ChatGPT有料プラン（Plus）を使うメリット
GPT-4系モデルで回答の質が安定
有料プラン最大の強みは『GPT-4』が使えることです。
無料のGPT-3.5と比べると、回答の正確さや深さが段違い。
とくにプログラミングのコード生成では、GPT-3.5だと手直しが必要なこともありますが、GPT-4では最初から完成度の高いコードを返してくれます。
おもち簡単なウェブページなら、すぐに作れちゃうよ！
混雑時でもスムーズ
無料版でよくあるのが『混雑しています』という表示。
アクセスが集中する時間帯には応答が遅くなったり、最悪ログインすらできないことも。
せっかく時間ができたからイロイロやりたかったのに…
そんな心配は不要です。有料プランなら優先的にアクセスできるので、待ち時間にイライラすることなくスムーズに使えます。
おもち一日を通して問題なく使えるよ！
こんな人はChatGPT有料プランがおすすめ
ChatGPTの有料プランがおすすめな人は、つぎのとおり。
- 毎日ChatGPTを使いたい
- 本格的に学びたいテーマがある
- 仕事で使えるクオリティを求めている
無料版よりもストレスなく安心して使えるのが有料プランの魅力です。
こんな人はChatGPT無料版で十分
ChatGPTの無料版で十分な人は、つぎのとおり。
- ちょっと試してみたい
- 短文の文章を作るだけ
- 混雑しても気にならない
こういう人は、無料のままでも問題ありません。
いきなり有料プランにせず、まずは無料で試し、物足りなさを感じたらアップグレードしていきましょう。
おもち１ヵ月単位で『無料版』と『有料版』の切り替えもできるよ！
有料プラン（ChatGPT Plus）にアップグレードする方法
ChatGPT Plusの料金と支払い方法
有料プラン（ChatGPT Plus）の料金は月額20ドル。日本円にすると3,000円前後です。
クレジットカードに対応しており、手続きはすべてオンラインで完結します。
おもち解約手続きも、とっても簡単だよ！
ChatGPT有料プラン（Plus）にアップグレードする方法
ChatGPTにログインします。
画面左下にある『アップグレードする』ボタンをクリック。
『Business』が選択されている場合は『Personal』を選択。
プラン一覧が表示されました。
画面中央にある『Plusをはじめる』ボタンをクリック。
決済画面がひらきました。
必要な情報を入力。
入力できたらメッセージ内容を確認して、チェックボックスにチェック。
『申し込む』ボタンをクリック。
これで決済は完了。
ChatGPT Plusに登録できました。
ChatGPTのトップ画面がひらきます。
画面左下にあるアカウント名に『Plus』と表示されていたらOKです。
おもちこれでChatGPT Plusが使えるようになったよ！
ChatGPTに会話を学習させない設定（オプトアウト）
チャット内容がAIの学習に使われるのはちょっと気になる…
そういう方は『データコントロール』のスイッチをオフに設定することで、学習への利用を停止できます。
オフにしてもサービスそのものの機能は今まで通り使えます。
おもち気になる人のみ設定すればOKだよ！
ChatGPTをひらいてログインします。
画面左下にあるアカウント名をクリック。
『設定』をクリック。
設定画面がひらきました。
画面左側のメニューにある『データ コントロール』をクリック。
データ コントロール画面がひらいたら『すべての人のためにモデルを改善する』の右側にある『オン』をクリック。
モデルの改善画面がひらいたら『すべての人のためにモデルを改善する』の右側にあるスイッチをクリック。
スイッチがオフになったら『実行する』ボタンをクリック。
『すべての人のためにモデルを改善する』の右側に『オフ』と表示されていたらOKです。
おもちオフをクリックしてスイッチを切り替えると『オン』にもどすこともできるよ！
ChatGPTで簡単なウェブページを作ってみよう
いよいよChatGPTを使って、ウェブページを作ってみましょう。
今回は、こんな感じのプロフィールリンクページを作成していきます。
インターネット上に公開できるので、SNSのプロフィール欄からアクセスしてもらうことも可能。
おもち自分だけのオリジナルページを作っちゃおう！
具体的な流れは、つぎのとおり。
- 使用する画像の準備をする
- プロンプトを完成させる
- ChatGPTにプロンプトを送信
- デザインレイアウトを整える
- インターネットに公開する
プログラミングやデザインの専門知識がなくても大丈夫。初心者向けにわかりやすくお伝えしていくので安心してください。
STEP1.ウェブページに使う画像を準備しよう
まずはプロフィールリンクに使う画像の準備から始めていきましょう。
必要な画像は、つぎの２枚。
- ヒーローセクションの背景画像（1200×400px）
- プロフィールアイコン画像（512×512px）
画像のファイル名は、下記のとおり設定してください。
- ヒーローセクションの背景画像 hero.jpg または hero.png
- プロフィールアイコン画像 icon.jpg または icon.png
ファイル名はすべて小文字を使い、スペルミスがないよう保存しましょう。
画像の準備ができたら、パソコンのデスクトップに、新規でフォルダーを作成していきます。
フォルダー名は『links』に設定してください。
フォルダーが作成できたら、準備しておいた２枚の画像を、そのフォルダーの中に移動します。
デスクトップの『links』フォルダーをひらくと『hero』と『icon』の画像が入っている状態になればOKです。
おもちつぎはプロンプトの準備をしていこう！
STEP2.ChatGPTでウェブページを作るためのプロンプトを完成させよう
画像の準備ができたら、プロフィールリンクページを作るためのプロンプトを完成させていきましょう。
【プロンプト】プロフィールリンク をひらいてください。
ページがひらいたら、画面左上にある『ファイル』をクリック。
『コピーを作成』をクリック。
コピーが作成できたら、緑色のテキスト部分を自分の情報に置き換えていきましょう。
緑色のテキスト部分が自分の情報に変更できたら、プロンプトの完成です。テキストをすべて選択して、コピーしておきます。
おもちさっそくChatGPTにプロンプトを送信していこう！
STEP3.ChatGPTにプロンプトを入力してHTMLを生成しよう
プロンプトが完成したら、ChatGPTをひらいてログインします。
ChatGPTがひらいたら、画面左上にある『新しいチャット』をクリック。
新しいチャットがひらいたら、コピーしておいたプロンプトを貼り付けます。
プロンプトがコピペできたら『送信ボタン（上向き矢印）』をクリック。
コードの生成がおわるまで、数分ほど待ちましょう。
しばらく待つと、ChatGPTから結果が返ってきますが、その表示のされ方にはいくつかパターンがあります。
よくある３つのパターンを紹介するので、自分の画面と照らし合わせながらチェックしてみてください。
パターン1：『Download: index.html 』が表示された場合
ChatGPTからの返答メッセージに『Download: index.html』が表示されている場合は、そちらをクリック。
これでHTMLファイルがダウンロードできます。
ダウンロードした『index.html』ファイルは、デスクトップにあるlinksフォルダーに移動しておきましょう。
パターン２：『ダウンロードする』が表示された場合
ChatGPTからの返答で、生成コードが表示される場合もあります。
その場合は、すべての生成が終わってから、コードの右上にある『ダウンロードする』をクリック。
これでHTMLファイルをダウンロードできます。
ダウンロードした『index.html』ファイルは、デスクトップにあるlinksフォルダーに移動しておきましょう。
パターン3：『コードをコピーする』が表示された場合
ChatGPTからの返答で、生成コードが表示され『コードをコピーする』のみ表示される場合もあります。
その場合は、すべての生成がおわってから『コードをコピーする』をクリック。
コードがコピーできたら、Windowsの方は『メモ帳』を、Macの方は『テキストエディット』をひらきます。
『メモ帳』もしくは『テキストエディット』がひらいたら、コピーしたコードを貼り付けます。
コードがコピペできたら、画面左上にある『ファイル』をクリック。
『名前をつけて保存』をクリック。
保存先は、デスクトップ上にある『links』フォルダーを選択。
ファイル名は『index.html』と入力。
ファイルの種類は『すべてのファイル』を選択。
エンコードは『UTF-8』を選択。
すべて設定できたら『保存』ボタンをクリック。
デスクトップにあるlinksフォルダーに『index.html』ファイルが表示されていればOKです。
STEP4.ChatGPTで作ったHTMLのデザインを整えよう
それでは、ChatGPTが作ってくれたプロフィールリンクページを確認していきましょう。
デスクトップにあるlinksフォルダーに『hero』『icon』『index』の３つのデータファイルがあることを確認してから、『index』ファイルをダブルクリック。
ChatGPTが作ってくれた、プロフィールリンクページがひらきました。
気になる点を１つずつ書き出し、ChatGPTにコードの修正をしてもらいましょう。
今回は、ヒーローセクションの背景画像とリンクボタンの影が濃すぎるのと、SNSアイコンが小さすぎるので、その修正をお願いしていきます。
ChatGPTをひらいて、さきほどのチャットのつづきに、修正してほしいことを入力していきます。
修正文が入力できたら『送信ボタン（上向き矢印）』をクリック。
コードの生成がおわるまで、しばし待ちます。
コードの生成が終わったら、HTMLファイルをダウンロードしてください。
ダウンロードしたHTMLファイルは、デスクトップにあるlinksフォルダーに移動します。もともとあった『index.html』は削除でOK。
おもち削除ではなく、ファイル名を変更して残しておいても大丈夫だよ！
修正してもらったページを確認してみましょう。『index』をダブルクリック。
ChatGPTが修正してくれたページがひらきました。
気になっていた影の濃さは薄まりましたが、SNSアイコンのサイズが小さいままなので、再度、修正のお願いをしていきます。
こんな感じで、ChatGPTと何回かやり取りしながら、ウェブページを作り上げていきましょう。
STEP5.ChatGPTで作ったウェブページを公開しよう
ここまでの手順で、あなたのパソコンの中に『自分だけのウェブページ』が完成しました。でも、まだこのページは“自分のPCだけで見られる状態”です。
せっかく作ったなら、インターネット上に公開して、誰でもアクセスできるようにしましょう。
公開までの手順は少し長くなるため、次の記事でくわしく紹介していきます。
👉 【初心者向け】無料でウェブサイトを公開する方法｜GitHubアカウント作成からデプロイまで
ChatGPT自動更新の停止・解約方法
さいごに、ChatGPTの解約方法についても解説しておきますね。
ChatGPTは有料プランに切り替えると、解約しない限り毎月自動でサブスクが更新されつづけます。
試しに１か月だけ使いたかっただけなのに…
という場合も心配はいりません。
設定画面から簡単に解約でき、次の月から請求は止まります。解約後も支払い済みの期間までは利用できるので“途中で損した”ということもないので安心してください。
おもち契約直後に『解約予約』をしておいても大丈夫だよ！
ChatGPTをひらいてログインします。
画面左下にあるアカウント名をクリック。
『設定』をクリック。
設定画面がひらきました。
画面左側のメニューのある『アカウント』をクリック。
アカウント画面がひらいたら『管理する』ボタンをクリック。
『サブスクリプションをキャンセルする』をクリック。
メッセージ内容を確認して『サブスクリプションをキャンセルする』ボタンをクリック。
これでサブスクリプションがキャンセルできました。
おもち期限までは有料プランが使えるので安心してね！
まとめ｜ChatGPTの始め方とウェブサイト作成
この記事では、ChatGPTのアカウント作成から有料プランへのアップグレード、そして実際にウェブページを作るところまでを紹介しました。
『AIにお願いすれば、自分の手でコードを書かなくてもページができるんだ！』
そんな小さな“驚き”を感じてもらえたらうれしいです。
今回つくったページはシンプルですが、慣れてくると、トップページやサービスサイト、LPのような本格的なデザインにも挑戦できます。
たとえば、こちらのウェブサイトもChatGPTで作りました。
👉 おもちのポートフォリオサイトを見る
バイブコーディングをうまく活用すれば、こんなふうに自分の実績や作品を紹介するポートフォリオも簡単に作れるんです。
次の記事では、今回作った プロフィールリンクページをインターネット上に公開する方法 をくわしく解説していきます。
おもち作ったウェブページを誰でもアクセスできる状態にしていこう！
👉 【初心者向け】無料でウェブサイトを公開する方法｜GitHubアカウント作成からデプロイまで
