AI（ChatGPT）を使ったポップアップ作成の実践
ここまでの記事の中で、「コードって難しい」「コードとかよくわからない」と思った方もいるかと思います。
しかし、この知識不足をAIが解決してくれます！
AIを使うことで知識ゼロでもコードを作成して、ポップアップをサイトに表示することが可能です。
本記事ではChatGPTを用いてHTMLとCSSのみでテキストベースのポップアップのコードを作成していきます。
では、早速実践していきましょう。
1、ChatGPTを開く。
ChatGPTは無料版と有料版がありますが、今回は無料版に登録して利用しています。現在無料版では「GPT-4o.」が制限付きで利用可能です。（2024年9月12日時点）
▼サイトへのリンク
https://openai.com/chatgpt
2、ChatGPTにメッセージを送信してみる
ChatGPTに下記の指示内容をコピペして送ってみましょう。
下記内容のポップアップを作成してほしい。
CSSを組み込んだHTMLのコードを記述して。
目的
指定された条件に基づいて、夏季休暇のお知らせを案内するポップアップをHTMLとCSSで作成。
バナーはウェブページの中央に固定表示され、閉じるボタンをつける。
仕様
バナーサイズと位置
サイズ: 幅400px、高さ250px
位置: ウェブページの中央に固定表示
背景と文字のスタイル
背景色: パステルブルー（#f0f8ff）
文字色: 黒（#333）
フォント: Arial, sans-serif
バナーの内容
タイトルテキスト: 「【夏季休業のお知らせ】」
メインテキスト:「誠に勝手ながら、8/10～8/15までを夏季休業とさせていただきます。」
閉じるボタン
テキスト: 「×」（バツ）
位置: バナーの右上
スタイル: 白色の円の上に重ねて、文字色は黒、ホバー時に文字色が赤に変わる
機能: クリックするとポップアップを非表示にする
上記に対する回答で差異はあるかと思いますが、画像のようなポップアップバナーを表示するコードをChatGPTが作成してくれます。
これでポップアップバナーのコードは完成です！
コードをコピーするをクリックしてコードを取得してください。
コードだけだとどのようなポップアップが作成されたのかは分かりません。そのため、ポップアップのデザインを実装前に確認したい場合は、下記リンクなどのHTMLの検証サイトを利用して確認する必要があります。
▼検証サイト例
https://www.yasudaya.co.jp/pworld/help/shymu.html
3、内容の修正を行う
ポップアップのデザインを上記のような検証サイト等で確認した際に、ChatGPTによって最初に作成されたコードが、求めているポップアップのデザインと異なる場合があります。
その際は修正を依頼しましょう。
例１）テキストを調整したい場合
「メインテキストの文字の位置を真ん中にして」「タイトルを太文字にして」など
例２）表示箇所を変更したい
「画面の左下に出るようにして」など
例３）色を変更したい
「背景色を青（カラーコードでも可、例：#8bc8f7）に変更して」
「ボタンにカーソルを合わせたときのボタンの色は赤で×は白にして」など
例４）表示回数を制限する
「このポップアップの表示回数を5回にすることはできる？」など
上記のように依頼するとChatGPTが内容を修正したコードを生成してくれます。
もしも依頼したことによってデザインが崩れてしまった場合はデザインが崩れて修正したい箇所を別で依頼しましょう。その際デザインが崩れてしまった旨を伝えてみるのも効果的です。
もし今後のためにコードについて理解を深めたい方であれば、「表示箇所を変えたいんだけどどこをどう変更したらいい？」と聞いてみるのもよいでしょう。