ChatGPTでWordPressブログサイトをリニューアルしてみた

このブログを、少しずつリニューアルしています。今回は、ChatGPTを使ってWordPressブログのデザインを考え、HTML・CSSを作成して実際にページを作ってみました。Webデザイナーではない僕でも、ChatGPTを使いながらどこまでできるのか、実際に試してみます。

実際に作成したトップページはこちら👇️

ふたりごと。

ChatGPTにブログのデザインを考えてもらう

まずは、ChatGPTに作りたいブログのイメージを伝えました。
「シンプルで見やすくしたい」
「写真を大きく使いたい」
「雑誌のような雰囲気にしたい」

など、文章でイメージを伝えながら、デザインを調整していきます。さらに、ChatGPTでサイトのイメージ画像も作ってみました。
最初に完成イメージを作っておくと、「もう少し余白を増やしたい」「この部分はシンプルにしたい」といった修正もしやすくなります。

👇️実際にChatGPTに生成してもらったイメージ画像

HTML・CSSもChatGPTに作ってもらう

デザインが決まったら、次はHTMLとCSSです。
今回は、
デザイン → HTML・CSS作成 → WordPressに実装
という流れで進めました。
「このデザインをWordPressの固定ページで再現したい」とChatGPTに伝えると、必要なHTML・CSSを作ってくれます。
もちろん、一発で完成するわけではありません。
実際に表示してみて、
文字が大きい
余白を増やしたい
スマホでは1列にしたい
この部分を削除したい

👇️指示プロンプトと結果の一部

といったところを、ChatGPTに伝えながら修正していきました。素晴らしすぎる！✨️

WordPressでは固定ページ＋カスタムHTMLを使用

今回は、WordPressの固定ページにカスタムHTMLを使って実装しました。そのため、ブログ全体のテーマを大きく変更することなく、特定のページだけデザインを変えることができます。実際にトップページについてまとめたページも、この方法で作りました！

ChatGPTでWordPressをリニューアルしてみて

今回やってみて感じたのは、ChatGPTがあればWeb制作の知識が不要になるということではありません。
ただ、
「こういうページを作りたい」
→ ChatGPTに相談する
→ HTML・CSSを作る
→ WordPressで確認する
→ また修正する

という流れがかなり簡単になりました。
特に、HTMLやCSSを少し触れる人なら、試しながら作っていくにはかなり便利だと思います。

いやーしかし本当に便利な時代になりましたね！✨️

最後まで読んでいただいていてありがとうございました！