HPの更新をchatGPTに手伝ってもらった話

記事
学び
こんにちはVESです!
最近、自分のホームページからお問い合わせを頂いたのですが、メールフォームのスパム対策をバチバチにやりすぎて普通のメールさえ届いていないことが判明したので(最悪)取り急ぎHPを更新する必要がありました。しかし、HTMLやCSSの知識がそこまで豊富ではない私…。我がHPは当時デザインを自分でおこし、コーディングのみココナラで出会ったスーパーWEBコーダーさんにやってもらったワードプレスで作成されているため、簡単には変えられません。
今回もそのコーダーさんにお願いしようと2年ぶりくらいにページをお尋ねすると、なんともう引退されているではないですか!抜け殻のプロフィールページを前に私は途方に暮れたのでした…。

とはいえこのまま放置するわけにもいかないので何とか自分でできないかと思っていた時、ふと思いついたのが「ChatGPTに手伝ってもらう」ことでした。

ChatGPTにお願いしてみた

私はChatGPTにまず自分のHPのURL、メールフォームの部分のHTMLコードを張り付け「メールフォームをグーグルフォームに取り替えたい」というオーダーをしました。
するとどうでしょう、あっさりとPHPに入れるHTMLのコードを出してくれたので、それを元のコードに上書きするとあっさり解決!
なんか楽しくなってきたので他の部分も更新しようと思いたち、
「ついでにサイトの既存の要素を踏襲して新しい項目を追加したい」「レスポンシブデザインでの見せ方を変更したい」というリクエストも伝えました。

実際のやり取りはこんな感じです。↓

私:「現在のHPデザインに合わせて、新しい項目を追加したいのですが、既存のスタイルを崩さずに作成できますか?」

ChatGPT:「はい、可能です!既存のデザインを参考にしながら、新しい要素を追加するコードを作成します。追加したい内容やレイアウトの希望はありますか?」

私:「○○部分と同じ要素で内容を▲▲にしたものを追加したいです。また、現在のサムネイル表示をレスポンシブ対応で2列表示に変更したいです」

ChatGPT:「了解しました。それでは、以下のようなHTMLとCSSのコードはいかがでしょうか?」

(実際のコード)

↑こんな感じのやり取りを重ねながら、仕上げてもらいました。
ただ、CSSも一緒にいじくったので途中はレイアウトが崩れたり、chatGPTに「変になって崩れちゃったよー!」と文句を言いつつ修正してもらったりして何とか出来上がりました。(バックアップの大切さを何度も痛感)

とにかく何とかなって感動

複雑な変更オーダーはなかなかうまくいかないこともありますが、自分で一から調べて更新するのに比べたら早い速い!!!無料でこんなことができるのには感動しました。

今後もHPの更新が必要なときは、ChatGPTに相談してみようと思います。

同じように「HPのデザインを変えたいけど、コードが分からない…」という方は、ぜひChatGPTを試してみてください!
私みたいにほぼコーディングに関してはド素人でも、何とかしてくれますよ!
サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら