WEBCOACH先生の活用方法

INDEX

WEBCOACH先生の活用方法

この章の目安学習時間：1時間40分

この章で到達できるゴール：

Webスキル学習中に直面する様々な問題に対し、生成AI「WEBCOACH先生」を活用して解決できるようになる
問題の状況に応じて、教材内のプロンプト集から最適なものを選び、活用できる

【1-1】WEBCOACH先生の基本とプロンプト集の活用法

目安の学習時間：10分

プロンプトとは？

プロンプトとは、生成AIに何かをさせたいときに入力する指示や質問のことです。
プロンプトが具体的で分かりやすいほど、AIは求める回答を生成しやすくなります。

重要語句

生成AI：テキストや画像、動画などを生成するAIの総称です。

WEBCOACH先生とは？

「WEBCOACH先生」とは、みなさん受講生向けに提供している生成AIサービスです。

WEBCOACH先生を活用するメリット

学習のつまずきを減らし、スムーズに学習を進められます。
検索に費やす時間を短縮し、効率的に学習できます。
多様なアイデアを得ることで、より質の高い制作物を作ることができます。
疑問点をすぐに解決できるようになり、自律的に学習を進められます。

この教材では、WEBCOACH先生を使いこなすために、それぞれの問題解決シーンに合わせたプロンプト集を用意しました。
このプロンプト集を使いこなすことで、Webスキル学習の頼もしい相棒としてWEBCOACH先生を活用できるようになります。

WEBCOACH先生の使用方法

自身のSlackチャンネルで、「@WEBCOACH先生」をメンションしましょう。
メンションした状態で質問や指示を文章で送信すると、WEBCOACH先生が答えてくれます。

プロンプト集の効率的な使い方

プロンプト集のプロンプトを使う際は、以下のステップで進めていきましょう。

プロンプト集の使い方

解決したい問題に合わせて、プロンプト集の中から最適なプロンプトを選びます。
選んだプロンプトをそのままコピーし、SlackでWEBCOACH先生をメンションした後に貼り付けます。
プロンプトの【】で囲まれた部分を、自身の状況に合わせて具体的な内容に書き換えます。
書き換えたプロンプトを送信し、WEBCOACH先生からの回答を確認します。

WEBCOACH先生は、いつでも、何度でも質問に答えてくれます。
しかし、WEBCOACH先生からの回答は、時に的外れな内容であったり、情報が古い場合があります。

プロンプトを送信する際は、解決したい問題に関する情報をできるだけ詳しく伝えることが、的確な回答を得るための鍵となります。

考えてみよう！

問題
Webスキル学習を始めたばかりで、ある時、学習中のツールが意図した通りに動かず困ってしまいました。
こんな時、WEBCOACH先生はどのような手助けをしてくれるでしょうか？
具体的に2つ考えてみましょう。

解答例

発生している状況を伝えて、原因と解決方法を教えてもらう。
操作した手順を説明して、どこが間違っているかを指摘してもらう。

【1-2】ツールやソフトウェアの不具合・不明点解決術

目安の学習時間：10分

予期せぬエラー発生時に聞く

学習中にツールの操作やコードの記述でエラーが発生することはよくあります。
エラーが発生した際は、以下のプロンプトを活用して、WEBCOACH先生に原因と解決策を聞いてみましょう。

プロンプト例：ツールの操作でエラーが発生した場合

このプロンプトでは、エラーが発生した「ツール名」「状況」「エラーメッセージ」という3つの情報を伝えることで、WEBCOACH先生が具体的な解決策を提案してくれます。

@WEBCOACH先生 
# 指示
あなたはWebスキル学習者のメンターです。

# 目的
発生しているエラーの原因と解決策を、初心者にも分かりやすく説明してください。

# 状況
- ツール名：【ツールの名前】
- 行おうとした操作：【例：Photoshopで画像を書き出ししようとした】
- エラーメッセージ：【表示されたエラーメッセージ全文を貼り付け】

# 条件
- 私は初心者なので、専門用語は避け、簡潔に説明してください。
- ステップ形式で、具体的な解決方法を教えてください。

プロンプト例

WEBCOACH先生の活用方法 1−1

プロンプト例：コーディングでエラーが発生した場合

このプロンプトでは、使用している言語、行いたい操作、エラーメッセージ、そして該当のコードを伝えることで、AIがエラーの原因と修正方法を教えてくれます。

@WEBCOACH先生 
# 指示
あなたはWebスキル学習者のメンターです。

# 目的
提示したコードのエラーの原因と解決策を、初心者にも分かりやすく説明してください。

# 状況
- 使用言語/フレームワーク：【例：HTML/CSS】
- 行おうとしたこと：【例：ボタンにホバーした時に色を変えたい】
- エラーメッセージ：【表示されたエラーメッセージ全文を貼り付け】
- 該当コード：【エラーが発生している部分のコードを貼り付け】

# 条件
- 私は初心者なので、専門用語は避け、簡潔に説明してください。
- 修正後のコード例と、その修正理由を教えてください。

プロンプト例

WEBCOACH先生の活用方法 1−2

特定の機能が見つからない時に聞く

「このボタンはどこにあるんだろう？」「この機能はどうやって使うんだろう？」といった、ツールの操作に関する疑問もWEBCOACH先生に質問できます。
以下のプロンプトの型を使い、解決策を聞いてみましょう。

プロンプト例：特定の機能の操作方法を知りたい場合

このプロンプトでは、「ツール名」と「行いたい操作」を具体的に伝えることで、WEBCOACH先生がその手順をステップ形式で教えてくれます。

@WEBCOACH先生 
# 指示
あなたはWebスキル学習者のメンターです。

# 目的
【ツール名】で【行いたい操作】を行う手順を、ステップ形式で教えてください。

# 状況
- ツール名：【ツールの名前】
- 行いたい操作：【例：Wixでアンカーを設定する】

# 条件
- 私は初心者なので、専門用語は避け、簡潔に説明してください。

プロンプト例

WEBCOACH先生の活用方法 1−3

プロンプト例：ツールの仕様変更について知りたい場合

Web制作で使うツールは日々アップデートされており、以前使えた機能がなくなったり、場所が変わったりすることがあります。
そのような場合にもWEBCOACH先生は頼りになります。

@WEBCOACH先生 
# 指示
あなたはWebスキル学習者のメンターです。

# 目的
【ツール名】の仕様変更について教えてください。

# 状況
- ツール名：【ツールの名前】
- 知りたいこと：【例：以前あった機能（〜）が見つからない。仕様変更でなくなったのか、別の場所に移ったのか知りたい】

# 条件
- 変更点と、新しい操作方法を教えてください。
- 私は初心者なので、専門用語は避け、簡潔に説明してください。

プロンプト例

WEBCOACH先生の活用方法 1−4

練習問題

問題
CanvaでWebサイトのヘッダー画像を制作中ですが、画像に動き（アニメーション）をつける方法がわかりません。
WEBCOACH先生に質問する際のプロンプトを作成してみましょう。

解答手順

プロンプトの【】に、「ツール名」と「行いたい操作」を具体的に入力します。
「ツール名」には「Canva」、「行いたい操作」には「ヘッダー画像にアニメーションをつける」と入力します。

@WEBCOACH先生 
# 指示
あなたはWebスキル学習者のメンターです。

# 目的
【ツール名】で【行いたい操作】を行う手順を、ステップ形式で教えてください。

# 状況
- ツール名：Canva
- 行いたい操作：ヘッダー画像にアニメーションをつける

# 条件
- 私は初心者なので、専門用語は避け、簡潔に説明してください。

解答例

WEBCOACH先生の活用方法 1−5

【1-3】デザインやコンテンツに悩んだ時の相談術

目安の学習時間：10分

デザインのアイデアを相談する

デザインのアイデアが思い浮かばない時は、WEBCOACH先生に相談してみましょう。
以下のプロンプトの型を活用し、「サイトの目的」や「ターゲット」を具体的に伝えることで、WEBCOACH先生がデザインの方向性を複数提案してくれます。

@WEBCOACH先生 
# 指示
あなたは経験豊富なWebデザイナーです。

# 目的
【Webサイトの種類】のデザインアイデアを3つ提案してください。

# 詳細
- サイトの目的：【例：オンラインストアでハンドメイドアクセサリーを販売】
- ターゲット：【例：20代〜30代の女性、ナチュラル志向】
- 希望：【例：温かみのある配色、シンプルで見やすいレイアウト】

# 条件
- 配色やレイアウトの方向性について、具体的な例を挙げて説明してください。

プロンプト例

WEBCOACH先生の活用方法 1−6

魅力的なキャッチコピーを考えてもらう

Webサイトやバナーのキャッチコピーに困った際も、WEBCOACH先生が力になってくれます。
以下のプロンプトの型を使い、「サイトの目的」や「ターゲット」、「伝えたい魅力」を明確にすることで、魅力的なキャッチコピーを複数案提案してくれます。

注意点

AIが提案するキャッチコピーは、あくまでアイデアのヒントです。
そのまま使うのではなく、ウェブサイトの雰囲気に合わせて修正したり、さらに良い表現を考えるためのベースとして活用しましょう。

@WEBCOACH先生 
# 指示
あなたはコピーライターです。

# 目的
【Webサイトの種類】に使うキャッチコピーを5つ提案してください。

# 詳細
- サイトの目的：【例：地域のカフェの魅力を伝え、集客につなげる】
- ターゲット：【例：近隣に住む主婦層】
- 伝えたい魅力：【例：手作りの温かいパン、居心地の良い空間】

# 条件
- ターゲットの心に響くような、魅力的なキャッチコピーを考えてください。

プロンプト例

WEBCOACH先生の活用方法 1−7

考えてみよう！

問題
あなたは地域の小さなパン屋さんを紹介するWebサイトを制作しています。
Webサイトを見た人に「このパン屋さんに行ってみたい！」と思ってもらうために、WEBCOACH先生にどんなキャッチコピーを提案してもらいたいですか？
プロンプトを考えてみましょう。

解答例

@WEBCOACH先生 
# 指示
あなたはコピーライターです。

# 目的
Webサイトに使うキャッチコピーを5つ提案してください。

# 詳細
- サイトの目的：【地域の小さなパン屋さんを紹介し、集客につなげる】
- ターゲット：【近隣に住む主婦層】
- 伝えたい魅力：【毎朝焼き上げる手作りの温かいパン、親子で楽しめる優しい空間】

# 条件
- ターゲットの心に響くような、魅力的なキャッチコピーを考えてください。

解答例

WEBCOACH先生の活用方法 1-8

【1-4】学習内容を深く理解するための質問術

目安の学習時間：10分

専門用語をわかりやすく解説してもらう

Webスキル学習には、多くの専門用語が登場します。
意味がわからないまま進めると学習の効率が落ちてしまうため、わからない専門用語はすぐに調べるようにしましょう。
WEBCOACH先生は、専門用語をわかりやすく解説してくれます。
以下のプロンプトの型を使ってみましょう。

@WEBCOACH先生 
# 指示
あなたはWebスキル学習の専門家です。

# 目的
【専門用語】について、初心者にも分かるように分かりやすく説明してください。

# 詳細
- 専門用語：【例：SEO】
- 補足：【例：教材によると、SEOとは検索エンジン最適化のこと】

# 条件
- 専門用語の定義だけでなく、なぜそれが重要なのかも教えてください。
- 身近な例えを交えて、簡潔に説明してください。

プロンプト例

WEBCOACH先生の活用方法 1−9

難しい概念を例え話で理解する

専門用語だけでなく、抽象的で理解しにくい概念も学習を進める上で壁となりがちです。
そんな時は、WEBCOACH先生に身近なものに例えて説明してもらいましょう。
以下のプロンプトの型を参考にしてください。

@WEBCOACH先生 
# 指示
あなたはWebスキルの学習メンターです。

# 目的
【難しい概念】をわかりやすい例えで説明してください。

# 詳細
- 難しい概念：【例：サーバーとドメイン】

# 条件
- 難しい概念と例えたいものの関係性が分かりやすくなるように説明してください。

プロンプト例

WEBCOACH先生の活用方法 1−10

【1-5】Webスキル学習をさらに進めるために

目安の学習時間：10分

Webスキル学習をスムーズに進めるためのWEBCOACH先生の活用方法について、理解できたでしょうか？
最後に、Webスキル学習をさらに効率的に進めるために覚えておいて欲しいことがあります。

注意

生成AIは正しい情報を回答するとは限りません。誤った情報や古い情報が含まれている可能性があるため、必ず自分で確認する習慣をつけましょう。
問題が解決しない場合は、迷わずコーチに相談してください。個別の状況に合わせた適切なアドバイスをもらえます。
それでも解決しない場合は、カスタマーサポートに問い合わせることも検討しましょう。

【1-6】-章末課題- [総合演習]

目安の学習時間：10分

問題

あなたは「架空のフラワーショップのWebサイト」を制作しています。
次の2つの問題について、WEBCOACH先生を使い、それぞれの解決策を導き出してみましょう。

Webサイト制作中に、デザインソフト（例：Figma）の特定の機能（例：オートレイアウト）の使い方がわかりません。解決策をWEBCOACH先生に尋ねてみましょう。
Webサイトのメインビジュアルに使うキャッチコピーが思いつきません。ターゲットを「花を贈ることが好きな20〜40代の女性」と設定して、WEBCOACH先生にキャッチコピーを提案してもらいましょう。

解答手順

デザインツールの機能に関するプロンプトを作成し、WEBCOACH先生に質問する。
ターゲットとWebサイトのコンセプトをWEBCOACH先生に伝え、キャッチコピーを複数案提案してもらう。
提案された解決策やキャッチコピーを参考に、Webサイトの修正・改善を行う。

解答例

1. デザインツールの機能に関する質問

@WEBCOACH先生 
# 指示
あなたはWebスキル学習のメンターです。

# 目的
Figmaでオートレイアウトを使用する手順をステップ形式で教えてください。

# 状況
- ツール名：Figma
- 行いたい操作：オートレイアウトを使用する

# 条件
- 私は初心者なので、専門用語は避け、簡潔に説明してください。

プロンプト例

WEBCOACH先生からの回答

もちろんです！Figmaでオートレイアウトを使用する手順を簡単に説明しますね。
以下のステップに従ってください。
1. **新しいフレームを作成する**
  - Figmaを開き、左側のツールバーから「フレームツール」を選択します。
  - キャンバス上でドラッグしてフレームを作成します。
2. **オートレイアウトを追加する**
  - 作成したフレームを選択します。
  - 右側のプロパティパネルで「+」ボタンをクリックして「オートレイアウト」を追加します。
3. **要素を追加する**
  - フレーム内にテキストやボタンなどの要素を追加します。
  - 要素をドラッグしてフレーム内に配置します。
4. **オートレイアウトの設定を調整する**
  - フレームを選択した状態で、右側のプロパティパネルにあるオートレイアウトの設定を調整します。
  - 「方向」を選んで、要素が横に並ぶか縦に並ぶかを決めます。
  - 「間隔」を設定して、要素間のスペースを調整します。
5. **サイズを自動調整する**
  - フレームのサイズを自動で調整するために、「サイズをコンテンツに合わせる」オプションを選択します。
6. **デザインを確認する**
  - すべての設定が完了したら、デザインを確認して、必要に応じて微調整を行います。
これでFigmaのオートレイアウトを使った基本的な操作が完了です！何か質問があれば、気軽に聞いてくださいね。

回答例

2. キャッチコピーに関する質問

@WEBCOACH先生 
# 指示
あなたはコピーライターです。

# 目的
フラワーショップのWebサイトに使うキャッチコピーを5つ提案してください。

# 詳細
- サイトの目的：フラワーショップの魅力を伝え、集客につなげる
- ターゲット：花を贈ることが好きな20〜40代の女性
- 伝えたい魅力：洗練されたデザインのブーケ、特別な日のためのオーダーメイド、花のある暮らしの提案

# 条件
- ターゲットの心に響くような、魅力的なキャッチコピーを考えてください。

プロンプト例

WEBCOACH先生からの回答

以下はフラワーショップのWebサイトに使えるキャッチコピーの提案です。
1. 「あなたの特別な瞬間に、花の魔法を。」
2. 「洗練されたデザインで、心に残る贈り物を。」
3. 「オーダーメイドのブーケで、思い出を彩る。」
4. 「花のある暮らし、あなたの毎日を特別に。」
5. 「大切な人へ、心を込めた花の贈り物を。」
これらのキャッチコピーが、ターゲットの心に響くことを願っています！

回答例

ポイント

Webスキル学習の経験を積み、「生成AI基礎」講座を学習済みの方は、教材内のプロンプトをベースに、より詳細な指示や条件を追加して、より精度の高い回答を引き出すことができます。
「生成AI基礎」講座を学習した方は是非、より良いプロンプト制作にチャレンジしてみましょう！
まだ学習していない方は、今後の学習を円滑に進めるために是非学習してみましょう！

これで「WEBCOACH先生の活用方法」の解説を終わります。
お疲れ様でした！