2024.07.23
AIにワイヤーフレームをつくってもらった!
- その他
こんにちは!
新人ディレクターのYamamotoです!
スピカデザインに入社をしてからChatGPTに出会い、その奥深さに感銘を受ける毎日です!
新人ディレクターがまず最初に覚える業務の1つがサイトマップの作成です。
作成の手順として全体のページ数、ページの掲載内容、URL…と考えることがたくさんあります。
最初のうちはこれが結構時間がかかる..。できれば楽したい…。
そうだ!ChatGPTに全部考えてもらおう!
というわけで、架空のWebサイト制作会社のサイトマップを作成してもらいます。
※今回は有料版の「ChatGPT 4o」を使用しています。
モデル学習されない物を使用しています。
目次
まずは載せたいコンテンツを書き出してChatGPTに構成を考えてもらいます。
下記のプロンプトを投げかけてみました。
<プロンプト>
あなたは一流のWebプランナーです。
以下のようなWebサイトの、サイトマップを作成してください。
【Webサイトの目的や機能や内容】
・目的: Web制作会社のホームページ
・機能: 問い合わせ、資料ダウンロード、ブログ、サービス、制作実績、料金
・サービス概要:Webサイト制作、モバイルアプリ開発、デジタルマーケティング
・対象: ホームページ制作を考えてる企業や個人
・内容: 構造はシンプルでわかりやすく、目的は問い合わせ
それに対してのChatGPTの解答は…?
<解答>
1. ホーム
- ウェルカムメッセージ
- 主なサービスの概要
- 最新のブログ記事
- お問い合わせボタン
2. サービス
- サービス概要
- Webサイト制作
- モバイルアプリ開発
- デジタルマーケティング
- サービスの詳細ページ
3. 制作実績
- ポートフォリオ
- クライアントの声
- プロジェクトの詳細ページ
4. 料金ページ
- パッケージプラン
- カスタムプラン
- 見積もり依頼フォーム
5. ブログ
- 最新の記事一覧
- カテゴリ別記事
- 人気記事
- 記事の詳細ページ
6. 資料ダウンロード
- 資料のリスト
- ダウンロードフォーム
- メールアドレス登録
7. お問い合わせ
- お問い合わせフォーム
- 会社情報(住所、電話番号、メールアドレス)
- 地図とアクセス情報
ナビゲーションバー
- ホーム
- サービス
- 制作実績
- 料金ページ
- ブログ
- 資料ダウンロード
- お問い合わせ
フッター
- 会社概要
- プライバシーポリシー
- サイトマップ
- ソーシャルメディアリンク
意外といいかも…!
プロンプトでは特に指定していなかった会社概要やプライバシーポリシーなどのページを追加してくれました。
ChatGPT自身で判断してあった方がよいコンテンツの案を出してくれるのはとても助かります!
各ページに記載する内容を出してもらいましたが、まだまだ抽象的な印象…。
なのでもう少し具体的な内容を出してもらうことにしました。
<プロンプト>
もっと具体的で洗練された提案をしてください。
<解答>
1. ホーム
- ヒーローセクション: キャッチフレーズと主要サービスの紹介、問い合わせボタン
-サービス概要: 主要サービスの簡単な説明とリンク
- 制作実績ハイライト: 最近のプロジェクトや注目の実績
- お客様の声: クライアントのレビュー
- ブログの最新記事: 最新の3記事のリンク
- フッター: 会社情報、ソーシャルメディアリンク、プライバシーポリシー、サイトマップ
2. サービス
- 総合サービスページ
- 各サービスの紹介とリンク
- 個別サービスページ
- Webサイト制作: 概要、特徴、事例
- ECサイト構築: 概要、特徴、事例
- モバイルアプリ開発: 概要、特徴、事例
- デジタルマーケティング: 概要、特徴、事例
- UX/UIデザイン: 概要、特徴、事例
3. 制作実績
- ポートフォリオ: プロジェクトごとの詳細ページへのリンク
- クライアントの声: カテゴリ別に整理されたレビュー
- 事例紹介: プロジェクトの詳細ページ
4. 料金ページ
- 料金プラン: パッケージプランとカスタムプランの紹介
- 見積もり依頼フォーム: 簡単な入力フォーム
5. ブログ
- ブログ一覧: 最新記事、人気記事、カテゴリ別記事
- 記事詳細ページ: 各記事の詳細とコメントセクション
6. 資料ダウンロード
- 資料一覧: ダウンロード可能な資料のリスト
- ダウンロードフォーム: メールアドレス登録フォーム
- サンクスページ: ダウンロード後のメッセージと関連資料のリンク
7. お問い合わせ
- お問い合わせフォーム: 名前、メールアドレス、メッセージ入力欄
- 会社情報: 住所、電話番号、メールアドレス
- 地図とアクセス情報: Googleマップの埋め込み
ナビゲーションバー
- ホーム
- サービス
- Webサイト制作
- モバイルアプリ開発
- デジタルマーケティング
- 制作実績
- 料金ページ
- ブログ
- 資料ダウンロード
- お問い合わせ
フッター
- 会社概要
- プライバシーポリシー
- サイトマップ
- ソーシャルメディアリンク
その他の要素
- CTA(コール・トゥ・アクション): 各ページの下部に「お問い合わせ」や「資料ダウンロード」のボタンを配置
- ライブチャット機能: 迅速な問い合わせ対応のためのチャットボット
- FAQセクション: よくある質問と回答を掲載
前回の回答に比べてかなり細かく提案をしてくれました。
BtoBサイトの基本に則った構成になっており、思ったよりも精度は高めです。
最後にURLを作成してもらいました。
URLに関しては定番の表記があるので自動で出してくれたらかなり助かります!
<プロンプト>
ページごとのURLを生成してください
<解答>
ホーム
/
サービス
/services
├── Webサイト制作
/services/web-development
├── モバイルアプリ開発
/services/mobile-app-development
└── デジタルマーケティング
/services/digital-marketing
制作実績
/portfolio
├── ポートフォリオ
/portfolio
├── クライアントの声
/portfolio/testimonials
└── 事例紹介
/portfolio/case-studies
料金ページ
/pricing
ブログ
/blog
└── 記事詳細ページ
/blog/{article-title}
資料ダウンロード
/resources
お問い合わせ
/contact
会社情報
/about
└── プライバシーポリシー
/privacy-policy
ちょくちょく見たことがない表記もありますが、
一から考えるよりも時間短縮になることは間違い無いですね!
最初のプロンプトでヒアリングの際に聞いた要件を入れることで内容に沿った提案をしてくれました。
また、あった方が良いコンテンツなどは追加で提案してくれるので、アイディアの引き出しが増えることも期待できます。
そのまま使用することは難しいのですが、一から考えて作成するよりも時間は短縮されると思いました。
私のような業務を始めたばかりの段階ではかなり有効に使えると感じたので、新人ディレクターの方や、初めてホームページ制作をされる方はぜひChatGPTを使ってサイトマップを作成してみてください!
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design