
WEBデザイナー向け!はじめての「ChatGPT」で業務効率化をするヒント
こんにちは!株式会社Rabeeのtotoです🐝デザイン・EC・マーケティングでの職務経験から得た、働きやすさに繋がるヒントをnoteに記していきたいと思います。
本日は「生成AI」はほぼ初めて!というWEBデザイナーの方が、業務で使える活用術をご紹介します。
まずは基本的な使い方の習得を目指しましょう!
今回は主にChatGPTを使った業務の効率化方法をお伝えします。
私が普段利用する時はTeamプランを使用していますが、無料プランでできるものを取り上げましたので、ぜひ実際に試しながら読んでみてくださいね!
1. 生成AIを使うリスクとは?
はじめに、生成AIを使う上での注意点をお伝えします。
漠然とリスクを感じているために、生成AIを業務に活用できていないという方も多いのではないでしょうか。
主にどのようなリスクがあるのかを把握し、何に注意をすれば良いのかを知りましょう。
1. データの収集:
ChatGPTに限らず多くの生成AIモデルは、ユーザーからの入力データをトレーニングや品質改善のために収集し、分析します。これにより、意図せず機密情報が収集されるリスクがあります。
2. 情報の保持と再生成:
生成AIは過去のトレーニングデータを元に回答を生成するため、特定の情報が再生成され、機密情報が不適切に開示されるリスクがあります。
3. セキュリティリスク:
サイバー攻撃やアクセス制御の不備により、機密情報が流出する恐れがあります。
4. 法規制とコンプライアンス:
法律や業界規制に違反するリスクがあり、罰則を受ける可能性があります。
5. 不正確な情報を提供する可能性:
公開されているテキストデータから情報を収集するため、正誤性や最新性は保証されません。
主に気を付けるべきは2点!
情報漏洩をさせない
情報の正誤性を確かめる
漏洩のリスクについては、そもそも「機密情報・秘密情報・個人情報」を入力しない使用方法であれば問題ありません。
使用する人が「何が入れてはいけない情報に該当するのか」を理解する事が一番大切です!

GPTの場合は、インターネット上のウェブページ、書籍、記事、Wikipediaなど、公開されているテキストデータから情報を収集し、与えられた文脈に基づいた予測を答えとして生成するため、正誤性や最新性は保証されていません。
正確性を保証するためには、他の情報源との照らし合わせや検証が必要になります。
アイデア出しなど、正解がないものについては相性が良いです!
2. ChatGPTを活用する
基本的な使用方法は、会話をするように「聞きたい事」を入力するだけです。

デザイン業務の効率化につながる使い方を5つ挙げてみました。
① アイデア出し
アイデア出しはGPTが得意とする業務の一つです。
試しに、既存商品のコンセプトの再設計を考える際のアイデアを出してもらいましょう。(架空のサービスです)
💬 入力プロンプト
あなたは優秀なデザイナーです。商品コンセプトの再設計をする事になりました。以下の条件から、新しいコンセプトのアイデアを10個考えてください。
---------
目的;コンセプトの再設計による新規顧客へのリーチと獲得
サービス概要;お茶のサブスクリプションサービス・毎月1000円で世界中のお茶をお届け。
現状のコンセプト;世界中から届いたお茶を通じておうちで仮想旅行体験ができる。
課題;おうち時間が減ったことで自宅でゆっくりティータイムを楽しむユーザーが減った。自宅以外でも楽しめるコンセプトに変更したい。
🤖 GPTの回答
以下の条件に基づいて、新しいコンセプトのアイデアを10個考えました。
1. ポータブルティーキット:
外出先でも簡単に楽しめる携帯用ティーキット。カップやティーバッグホルダーがセットになっており、職場や公園などどこでもティータイムを楽しめる。
2. ティータイムピクニック:
ピクニック用のお茶セット。季節に合わせたお茶とピクニックに合う軽食のレシピカードが含まれる。
3. ティータイムトラベルバッグ:
旅行用のお茶セット。旅行先で楽しめる特別なお茶や、お茶の葉が入ったトラベルサイズの缶がセットになっている。
4. オフィスティーブレイク:
職場でのリラックスタイムに最適なセット。デスクで簡単にお茶を楽しめるアイテムや、リラックス効果のあるアロマが含まれる。
5. スポーツティー:
運動後のリフレッシュにぴったりなお茶セット。スポーツ用のボトルと共に、疲労回復や水分補給に適したお茶が含まれる。
6. ティータイムエクスカーション:
日帰り旅行やハイキングのお供に。軽量で持ち運びやすいお茶セットや、自然の中で楽しむためのアクティビティガイドが含まれる。
7. ウェルネスティーキット:
ジムやフィットネスセンターで楽しめる健康志向のお茶セット。健康や美容に良い成分が含まれたお茶と、フィットネスに関するアドバイスが含まれる。
8. ティータイムアドベンチャー:
アウトドアやキャンプ用のお茶セット。耐久性のあるティーウェアや、キャンプファイヤーで楽しむためのレシピが含まれる。
9. 親子ティータイムキット:
外出先でも親子で楽しめるお茶セット。子供用のお茶や、家族で楽しむアクティビティブックが含まれる。
10. 車内ティータイム:
ドライブ中に楽しめるお茶セット。車のカップホルダーに合うマグカップや、ティーバッグホルダーが含まれている。
これらのアイデアは、自宅外でもお茶を楽しむための新しいコンセプトとして、様々なライフスタイルに対応することを目指しています。
いかがでしょうか?単純なものが多いですが、ブレインストーミングをするにあたって、たたきの存在があるのと無いのではアウトプットの質もスピードも変わってきます。
② 業務フローの整理
デザインプロジェクトは複数のステップを経て進行しますが、ChatGPTを使うとその業務フローを整理するのに役立ちます。
たとえば、「ウェブサイトデザインのプロジェクトを効率的に進めるための手順を教えて」と尋ねると、具体的なステップとその順序を提案してくれます。
💬 入力プロンプト
ウェブサイトデザインのプロジェクトを効率的に進めるための手順を教えて。
簡潔に、マークダウン形式で記述し、コードブロック表示して。
「簡潔に」というワードを入れる事でよりシンプルな記述になります。
「マークダウン形式で記述し、コードブロック表示して。」と指示する事で、他のテキストエディタにコピーしやすくなります。

🤖 GPTの回答
### ウェブサイトデザインのプロジェクトを効率的に進めるための手順
1. **プロジェクト定義と要件収集**
- 目的と目標を確認
- ターゲットオーディエンス特定
- 必要な機能とデザイン方向性を収集
2. **プロジェクト計画作成**
- タイムライン作成
- 役割分担
- コミュニケーション計画設定
3. **ワイヤーフレームとプロトタイプ作成**
- ワイヤーフレーム作成
- プロトタイプ作成
- フィードバック収集
4. **デザイン作成**
- カラースキームとタイポグラフィ選定
- デザインモックアップ作成
- フィードバック反映
5. **コンテンツ作成と統合**
- テキスト、画像、動画作成
- コンテンツ整理と統合
6. **開発とテスト**
- フロントエンド開発
- バックエンド開発
- レスポンシブデザイン実装
- テスト
7. **ローンチ準備**
- SEO対策
- パフォーマンス最適化
- 最終テスト
8. **サイトローンチとモニタリング**
- サイト公開
- フィードバック収集
- メンテナンスと更新
③ コンテンツ生成
ChatGPTはテキスト生成能力が優れているため、デザインに必要なコンテンツを作成する際にも役立ちます。たとえば、ウェブサイトのキャッチコピーや製品説明文を作成する際に、たたきとなる文章を生成してくれます。
💬 入力プロンプト
あなたは一流のコピーライターです。
新しく作るサービスのLPに使用するコピーを10個作成してください。
------
サービス概要;こども向けのキッチンツールの販売
コンセプト;こどもは、お手伝いが楽しくなる。親は、安心してお手伝いをさせられる。
🤖 GPTの回答
「こどもがキッチンで楽しむ魔法の道具。安全で使いやすい、こども向けキッチンツール登場!」
「お手伝いがもっと楽しくなる!こどもの笑顔が広がるキッチンツール。」
「親子で楽しくクッキング。安心して使えるこども専用キッチンツール。」
「こどもの成長をサポートする、安全でカラフルなキッチンツール。」
「お手伝いの時間が特別な時間に。こどものためのキッチンツール。」
「小さな手でも安心して使える、こども向けキッチンツール。」
「お手伝いが好きになる!こども専用キッチンツールで楽しいクッキングタイム。」
「親子で一緒に料理を楽しむ。こどものための安心・安全なキッチンツール。」
「こどもが主役のキッチンタイム。親も安心のこども用キッチンツール。」
「お手伝いが大好きになる。こどもの成長を応援するキッチンツール。」
正直このまま使用できるレベルではありませんが、一瞬で生成してくれるので、インスピレーションを得るには良い方法です。
必須で入れたいキーワードなど、条件を細かく入力する事でより精度の高いテキストが生成されます。
他にも、
必要画面の洗い出し
LP要素の洗い出し
ダミー文書の作成
ヒアリング項目の作成
などにも便利です。
④ 文書の要約
こちらもGPTが得意とする業務の一つです。
全文章を読む前に概要を把握できるので、インプットの質が高まります。
翻訳も得意なので、海外のサイトからの情報も得やすい点も嬉しいですね!
試しにこちらの記事を要約してみましょう。
💬 入力プロンプト
https://www.zilliondesigns.com/blog/role-ui-ux-design-website-development/
このサイトの記事の内容を翻訳し、要約をしてください。
🤖 GPTの回答
この記事では、ウェブサイト開発におけるUI/UXデザインの重要性について説明しています。
主なポイントは以下の通りです:
第一印象:
ユーザーはウェブサイトを一瞬で評価し、UI/UXがその印象を決定します。
UXとUIの違い:
UXはユーザー体験の設計、UIは視覚的要素のデザインに焦点を当てています。
効果:
優れたUX/UIデザインはバウンス率の低減、ページロード速度の向上、モバイル対応、質の高いコンテンツ表示、クロスブラウザ互換性、ブランドの信頼性向上、CTA最適化などに寄与します。
要約を見ることで知りたい情報が載っているのかを判断でき、最初から最後まで読んだけれど欲しい情報が無かった、という事も避けられます。
⑤ データの分析
chat GPT4oでは、手持ちのデータを読み込んで分析することができます。
たとえば、ヒアリングシートやサービスのアンケート結果をGPTに渡して「データをもとに課題を分析してください。また、課題解決のためにできる施策を挙げてください。」と指示するだけで、簡単に課題と施策を提案してくれます。
※ データの中身については機密事項を含む場合があるので、使用可能なものなのか各自で判断してください。
3. つまずきがちなポイントと解決策
ここでは、ChatGPT初心者がつまずきがちなポイントと、解決策をご紹介します。
途中で生成された文章が終わってしまう
✅ 生成を続けるボタンを押す。
or
✅ 続きをお願いします。
この一言で続きを生成してくれます。
特に続きがない場合でも、この指示を入れる事で詳細を追加で説明してくれる事があります。
生成されたテキストがわかりにくい
✅ 中学生でもわかるように、丁寧な口語体で説明して。
具体的な指示がない
❌「サイトのデザインを改善したいんだけど、どうすればいい?」
↓
✅ 質問を具体的にする
⭕️「eコマースサイトのユーザビリティを改善するための具体的なデザインの提案を教えてください。」
質問が長い
❌「新しいウェブサイトのデザインを考えてるんだけど、ユーザーエクスペリエンスを向上させるための方法、最新のデザイントレンド、SEOに良いデザインなど、いろいろ教えて欲しい。」
↓
✅ 質問を短く分ける
⭕️ 「ユーザーエクスペリエンスを向上させるデザインのヒントを教えて。」
⭕️ 「最新のウェブデザインのトレンドを教えて。」
⭕️ 「SEOに良いデザインのポイントを教えて。」
文脈が失われる
❌「前に言ってたボタンのデザイン、どう思う?」
↓
✅ 前の話を再度要約して質問する。
⭕️ 「ホームページのボタンデザインについて前に話してたんだけど、その具体的な改善案を教えて。」
4. さいごに
今回は、生成AIがはじめての方にむけて、業務に取り入れる方法をご紹介しました。
ChatGPTは会話をするように入力するだけで、だれでも簡単に使用できる点が嬉しいですね!
みなさまの業務で使用するイメージを持っていただけたでしょうか?
次回はGPTsの活用など「脱初心者」のための利用方法をご紹介予定です、あわせてご覧いただけると嬉しいです。
最後までご覧いただき、ありがとうございました!
🎨 サムネイルに使用した画像はこちら
私の勤めるRabeeでは、デザインに役立つ記事を発信中です!
お読みいただけると嬉しいです。
▼ デザインに役立つ記事