WEB未経験、生成AIほぼ初心者の私がChatGPTを活用し、製品一覧ページのワイヤーフレームを作成した話

はじめに

こんにちは、シャノンの二見です。
この記事では、生成AIはほぼ初心者、Webページ制作は完全未経験の私が、
上司から「製品一覧ページのワイヤーフレームを作って」と依頼され、
ChatGPTを活用しながら、修正もほとんどなくページを完成させるまでのプロセスを紹介します。

---

• 専門知識がなくてもなんとかつくれる

• 競合構成などベストプラクティスが学べる

• 簡単な内容であれば複雑なプロンプトは不要

---

そんな「可能性」を感じたプロセスを、実際のやりとりとともにまとめました。
「業務効率化」「外注コストの削減」「生成AIの実務活用」に関心のある方や、
「AIって難しそう…」と感じている方にとって、少しでもヒントになる内容になれば嬉しいです。

 

ChatGPTとのページ構成づくり

製品ページをつくるにあたり、まず最初に行ったのがChatGPTに「製品一覧ページを作りたい」と相談することでした。
Web制作については右も左も分からず、プロンプトもまともに書けなかった私は、かなりラフにChatGPTとのやり取りを始めました。

それでも、ChatGPTはしっかりと構成案を提案してくれました。

提案された構成の概要：

• ヒーローセクション：統合ソリューションとしての訴求

• 製品カード（2×3）：UIイメージ、特徴、CTAを明示

• 導入事例・比較表・診断・セミナー導線 など

この提案や構成から、製品一覧ページでは
製品に素早くアクセスできて、それぞれの違いや特徴が一目でわかる構成が重要だというポイントも教えてもらえました。

---

競合分析から「型」を学ぶ

ChatGPTから「すぐにワイヤーフレームを作ろうか？」と提案があったものの、
先に他社SaaSの製品ページ事例を調査してもらうことで、より良いものができると考え、聞いてみました。

すると、シャノンの競合に該当する企業や大手SaaS製品のページ構成を分析し、比較表にまとめてくれました。

このまとめにより、他社の製品一覧ページのベストプラクティス等が学ぶ事ができ私の中でページ構成の「型」への理解が一気に進みました。

また、この構成が良いと判断した理由なんかも聞いてみると、その理由をしっかりと教えてくれるので、私個人の学びに役立ちました。

ここまでで必要な要素がある程度そろったと判断し、

次は構成とベストプラクティスを反映した第一弾ワイヤーフレームの出力を依頼しました。

それがこちらです。

---

HTML形式で出力 → 編集しやすく大正解

ChatGPTの画像生成機能では、誤字や出力サイズの制限があり実用には厳しかったため、
次はHTML形式で出力してもらいました。

結果としてこれは大正解。
HTMLで出力させると、Canvas（独立ウィンドウでコード修正ができる機能）で簡単に編集ができ、
「レビュー」ボタンを押せばすぐにビジュアルも確認できるため、非常に使いやすいと感じました。

   

デザインまで生成してくれましたが、提案してくれた構成がすべて反映されているわけではなく、
各ステップごとにわけて出力する必要があるようだったのでここから各セクションの追加をしていきます。

---

セクションを順番に追加していく

まず、上司から「トヨクモさんのように製品ごとのセクションがあるページが理想」と聞いていたので、
製品セクションを追加するところから始めました。

デザインがこちらです。

なにも言わずとも、コピーをつけたりタグをつけたりCTAつけたりとやってくれるのは本当に気づきももらえるので、大変参考になりますね。

その後、ChatGPTが提案してくれた以下のセクションを順次追加していきました。

記事の作成中に気づいたのですが、このやりとりは９秒で返ってきていました。やはり文字にされると超早いな～と思いますよね。

そして、出てきたデザインがこちら

画像も後から入れれるようにしてくれていますし、何故か弊社のブランドカラーも認知しています。

ここから各セクションのデザインだったり、中身のコピーだったり、
そういったところをモデル変えたりスレッドを変えたりして改善していったのですが、

ここを書くとかなり長くなりそうなので次回に持ち越します。
もし興味あればまた読んでくださいませ。

---

ChatGPTとWeb制作をして感じたこと

ChatGPTは“難しいツール”ではなく、
“ラフに聞いてもそこそこの回答をすぐ返してくれる物知りな先生”のような存在だと感じました。

中でも最も印象的だったのは、「次のステップを示してくれる」点です。
何をすればいいか分からなくても、とりあえず提案を見て動き出すことができ、
結果として高速でPDCAを回すことができました。

この体験を通じて、今の時代はAIを活用することで、
どんな分野でも“半人前”くらいの成果物は誰でも出せるのではないかと実感しました。

「AIをうまく使えるかどうか」が、そのまま仕事の成果に直結する時代が来ているのだと感じています。

---

まとめ

今回、ChatGPTを使って製品一覧ページの構成を作ってみてわかったのは、次の3点です：

1. 構成から実装まで一貫してサポートしてくれる

2. 指示が曖昧でも“意図”を汲み取ってくれる

3. 一人でも制作の最初の一歩を踏み出せる

特に、構成案やベストプラクティスの調査といった、手間がかかる作業も
「聞けば出てくる」という感覚は非常に心強く感じました。

もちろん、すべてをAI任せにするのではなく、
最後はユーザー視点や目的に応じて微調整することが重要です。

今後はこの経験を活かし、「デザイン面」や「コンテンツの表現力」もさらに強化していきたいと思います。

次回は、このページをよりブラッシュアップしていく「改善編」をお届けしますので、ぜひ引き続きご覧ください。