プログラミング知識ゼロでもWebサイトは作れる
深夜に突然Webサイトを作ってみたくなりました！
しかし私にはコードの知識がありません。
時刻は深夜12時。もう寝たい時間帯ではありますが、アイディアが浮かんでしまいました。熱意は明日には消えているので、今作るしかない…！しかし12時。勉強して作っていたら終わらない。作業を明日に残したら作品は完成しません。
時短したい。楽しいところだけ一旦味わいたい。Webサイトを完成させるという経験をしたい。勉強はサイト作ってからしますので…！こんなわがままを許してくれる現代なのです。そう、私たちには頼れる味方、ChatGPTがいます。
今回制作するWebサイトの概要
今回作りたいサイト：ゆる可愛い猫がにこにこしながらなにか言ってくれるサイト
サイトの目的：私が癒されたい。ついでにサイトを開いた他の人も癒されてほしい。
制作手順：ChatGPTとの協働作業
STEP1：基本構造の作成
こんな感じでプロンプトを書きました。
VSCodeを使用して、サイトを作成したいからコードを書いてほしい。
作りたいもの：サイトを開くと猫のイラストがあって、
その横には「今日も一日楽しく過ごそうね！」と吹き出しが出ている。
するとHTMLとCSSを書いてくれました。「猫のイラスト」というテキストの横に吹き出しがある見た目です（キャプチャなかった）。
拡張子をHTMLで保存し、何か編集を加える度にファイルをChromeで開いて確認しつつ制作を進めていきました。
STEP2：猫のイラスト挿入と調整
「猫のイラスト」というテキストを本当の猫のイラストにしていきます。
iPadで笑顔の猫を描きましたら、さっそく反映していきます。
猫のイラストに枠がついてしまったので消していきます。
↓ChatGPT回答
枠を消そうと思ったら猫が巨大化したので（嬉しい限りですが）サイズ調整します。
↓ChatGPT回答
STEP3：動的機能の追加
ページを更新するたびに、猫の台詞がランダムに出てくるようにしたくなりました。
追加でコードを書いてもらいます。これがJavaScriptか…
完成と公開
そんなこんなで完成しました！ページの更新のたびに猫がなんか言うサイトです。
腐らせていたドメインがあったので、世の中に公開しました。
拡張子をHTMLで保存してファイルを開けば、自分のPCからはサイトが見れるので、練習するだけならドメインは不要かと思います。
成功体験から始める学習アプローチ
今回の方法はWebサイトを自力で作成する練習にはあまりなりませんが、ひとつ完成させたぞ！という成功体験をつくるのにはもってこいだと思います。
気軽にChatGPTとWebサイト作ってみてはいかがでしょうか。
※用語解説
-
VS Code: Microsoft社が開発した無料のコードエディタ
-
JavaScript: Webページに動的な機能を追加するプログラミング言語
