ChatGPTとCodexでショップサイトをリニューアルしてみました - WordPress

本記事にはアフィリエイト広告が含まれます。

ショップサイトのデザインを、久しぶりにリニューアルしました！

今回のリニューアルでは、まずChatGPTにショップサイトのデザイン案を作ってもらい、現在の「WordPress + WooCommerce」という構成を維持したまま、どのように変更していくかを計画してもらいました。

そして、そのデザイン案と計画をCodexに渡して、実際のサイトを修正してもらいました。

デザイン画像

作業の流れとしては、

・Localを使ってWordPressのローカル環境を作成
・All-in-One WP Migrationで現在のショップサイトをローカル環境に移行
・ChatGPTで作ったデザイン案をCodexに読み込ませてコーディング
・実際の画面を見ながら、細かい部分をひたすら微調整

という感じです。

All-in-One WP Migrationでのインポート時には、サイトのバックアップデータが1GBを超えてしまい、そのままではインポートできないという問題も発生しましたが、これもCodexに状況を見てもらい、ローカル環境側を調整してクリアできました。

そしてローカル環境ができたら、ChatGPTで作ったデザイン案をCodexに見せて、
「このデザインになるように現在のWordPressテーマを修正して」
という感じでお願いしました。

すると、この時点でサイトの大枠はほぼ完成。

あとは、
「ここの余白をもう少し狭くして」
「この画像をもう少し大きく」
「スマホではこの並びにして」
「ここのデザインがちょっと違う」

など、実際の画面を確認しながら細かい修正をひたすら指示していくだけでした。

自分で一からローカル環境を立ち上げ、コードを書きながら作業していたら、おそらく1週間くらいはかかっていたと思います。

今回は土曜日の夜に作業を開始し、日曜日のお昼頃から再開して、夕方にはひと通りのリニューアルが完了しました。

Codexの使用量も、今回の作業全体で25％程度でした。

一方で、今回使ってみて、AIがあまり得意ではなさそうだと感じた作業もありました。
それが、ロゴやアイコンのような細かい造形のバランス調整です。

サイト全体のレイアウトやコーディングはかなりいい感じに進めてくれるのですが、アイコンの細かな調整はなかなか思った通りになりませんでした。

ということで、ロゴはお父ちゃん作。
アイコン類についてはこちらのサービスを使用しました。

今回、私はコードを1行も触っていません。
ただ、WordPressやWooCommerceの基本的な仕組みを知っていると、AIへの指示やトラブル時の判断はしやすく、作業も進めやすいと感じました。

あと個人的に助かったのが、サイト内の文言も作ってもらえたことです。
こういうキャッチコピーや説明文を考えるのがあまり得意ではないので、サイトの雰囲気に合った文言をそれらしく作ってくれるのはありがたかったです。

環境構築からデザイン、コーディング、文章まで、AIに任せられる作業の範囲が思っていた以上に広がっているのを実感しました。

コメントはこちらからコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。