非エンジニアがChat GPTの力でWEBサイトを作った話

非エンジニアがChat GPTの力でWEBサイトを作った話

こんにちは、須那です。
 
先月からプロトアウトスタジオのWebサイトがWraptasに移行されています。
その背景などは下の記事で@n0bisukeさんがまとめてくれました。
 
Wrarptas移行に当たって、開発のほぼ全般を担当したのでその時の経験をここに書いていきたいと思います。
 
一旦、その前に私の技術力をお伝えすると、
  • エンジニア歴0
  • HTMLの知識0
  • CSSの知識0
といった感じです。
HTMLは文字を表示させるコード、CSSは色を指定するコード。そのぐらいの認識でした。
 
そんな技術力皆無な私でも、Webサイトを作ることはできます。
そう、Chat GPTさえあればね
(もちろんWraptasは何個かテンプレートを用意しているので、それを活用すればCSSやHTMLを書かなくても、Webサイトを作成することができますが、今回は表現の自由度を上げるために、CSS,HTMLを書いてます)

Chat GPTを活用した開発

我ながら現代っぽいなと思います。
今回のWebサイトのほぼすべてのCSSをChat GPTに書いてもらいました。(もちろん自サイトに合うようにアレンジは加えてあります)
下図のように問いかけて、その回答をWraptasのclass名などに落とし込んで、ちゃんと表示されているかをチェックしてといったサイクルで作業に取り組みました。

実際に作業してみてどうか

1.表現の幅が広がった

これは私が、CSSの知識がないからかもしれませんが、表現の幅は確実に広がりました。
Chat GPTは「かっこいいデザイン作って」といった漠然的な要求でも答えてくれます。
もし気に食わなければ、その質問を何度も繰り返すたびに異なるデザインを提示してくれます。
また提示してくれるデザインの微修正もChat GPTにお願いすることができるので、自分が思い描く表現を実装する能力がなくても、Chat GPTを使用することで、近いものを作り出すことが可能です。
そういった意味でも、自分の実力以上に表現できるので幅は広がったと思います。
 
ファーストビューだけみても、どうやって文字を重ねるのか、画像の色味の変更、スマホでの段落変更などCSSでの変更要素が盛りだくさんですが、全部Chat GPTにお願いしてます。

2.作業時間の短縮につながった

通常初学者が何かを作る場合「調べる→書き込む→チェックする」といったサイクルだと思うのですが、ChatGPTを使用することで「書き込む→チェックする→書き込む」といったサイクルで作業を進めることができました。まず手を動かすことが、何かを作るにあたって大切になると思っているのでそこから作業をスタートできたのはとても良かったと思います。
もちろん細かい部分は調べないといけない必要がありますが、大きな表現や単純な変更なら、Chat GPTに質問するだけで解決することができます。
今回一か月ほどで、Webサイトを移行させる必要があったため、スピード感重視で作業できたことはとても良かったと思います。
 
もちろん、Wraptasの仕様などで思うように表示されないケースも発生しますが、その場合はWraptasの運営に質問を飛ばすと、かなりの速さで回答してくれます。(個人的にはWraptasのサポートの手厚さは本当にありがたい)
 
あとは、Chat GPTは何度聞いても親切に答えてくれるので気兼ねなく質問できるのが良いですね。

まとめ

今回実際に作成したWebサイトがこちらになります。
Chat GPTの力を存分に借りて、約一か月でWebサイトの移行が完了しました。
前のサイトからの移行だったためコンテンツはすでにあったとはいえ、HTML,CSSの知識0の自分がこのスピード感でサイト公開できると思うと、改めて、ChatGPTの素晴らしさと、今後Webサイトだけでなく、色々な分野の開発ハードルが下がっていくような気がします。
 
この経験をする前までは、何かに取り組む前に「コードを書く」という壁が立ちふさがる場面がありましたが、今後はChat GPTにサポートしてもらいながらこの壁を越えれそうです。
 
なんにせよ、何かを作りたいと思った時に、作るハードルが下がるのは良いことだなと思います。

プロトアウトスタジオではChat GPTを活用した授業も展開中

プロトアウトスタジオでは常に世の中の流れに合わせてアップデートした授業を展開しています。
現在8期がスタートしており、9期生の募集スタートしますので、気になってくれている方はぜひお問い合わせください!