プロジェクト実践：アイデアを作品に仕上げる
この章で行うこと
- 自己知道从哪里开始
- 正常输入可以得到结果
- 遇到问题时自己会绕过去
- 第一次打开也知道怎样操作
- 等待和失败时能看懂发生了什么
- 结果可以继续编辑、复制或保存
1. 製品を最初から最後まで一度使う
ログイン、チーム機能、分析画面を急いで追加する必要はありません。今ある製品を開き、利用者になったつもりで最初のページから結果を得るところまで使います。隣で説明しなければ進めない箇所が、次に直す場所です。
このコースの EC コンテンツ作業台では、一回の利用は次のようになります。
EC 担当者が商品画像をアップロードし、必要な情報を補い、文章と画像の下書きを生成する。結果を確認したら、あとで修正・掲載できるようにコピーまたは保存する。
まずはこの短い流れを完成させれば十分です。ログイン、チーム権限、本番公開は、本当に必要になってから追加できます。
1.1 実際に使う順番で進める
いったんコードやコンポーネントを見ず、利用者の行動どおりに進めます。
- ページを開き、このツールが何を助けるものか分かる。
- 商品画像をアップロードし、商品名や素材など必要な情報を入力する。
- 「文章を生成」を押し、処理中であることが見える。
- AI が返したタイトルと訴求点を確認し、必要なら編集または再生成する。
- 結果をコピー、ダウンロード、または一時保存して作業を終える。
最後まで進めたら、「自分が隣にいなくても相手は進めるか」を考えます。チーム管理や複雑な分析画面など、今回の利用に影響しない機能はメモだけ残し、今は作りません。
今回はどこまで作ればよい？
相手に一文で目的を伝え、数分以内に操作を始められるなら、たいてい適切な範囲です。
1.2 空の状態からもう一度試す
開発中のページには、テストデータや前回の結果が残りがちです。そのため、初めて開いたときに何もない状態を忘れてしまいます。シークレットウィンドウを開くか、ローカルデータを消して最初から試してください。
確認するのは次の三つだけです。
- 空のまま一度開く： 何も入力せずに押し、必要な項目が案内されるかを見る。
- 通常どおり一度生成する： 画像を追加して生成し、待機中の表示と、結果後の次の操作を確認する。
- 一度失敗させる： 非対応ファイルを使うか通信を失敗させ、入力が残り、もう一度試せるかを見る。
つまずいた場所をメモし、次の節で一つずつ直します。
AI IDE にコードを調べてもらうことはできますが、実際の操作の代わりにはなりません。
まだコードは変更しないでください。
現在のプロジェクトを、次の利用者タスクに沿って確認してください。
商品画像をアップロードし、必要な情報を入力し、文章を生成し、
結果を確認してコピーまたは保存する。
この流れに関係するページとファイル、
途中で止まりそうな場所を教えてください。AI IDE は問題がありそうなコードを探せます。ページが使いやすいかどうかは、自分で操作して初めて分かります。
2. つまずきやすい場所を直す
最初から使ってみると、問題はたいてい四つの時点に現れます。最初に開いたとき、AI を待つとき、結果を受け取ったあと、そして通信が失敗したときです。複雑な設計は要りません。何が起きていて、次に何をできるかが伝われば十分です。
2.1 初めて開いても、することが分かるか
空のページに入力欄だけを置かないようにします。短い説明、入力例、または対応する画像形式とサイズをアップロード欄の近くに表示します。
項目が多い場合は、結果に本当に必要なものだけを残します。商品名、画像、主な特徴を必須にし、ブランド、参考リンク、細かな文体設定は「詳細設定」に入れられます。初回利用で長い申込書を書かせないようにします。
2.2 ボタンを押したあと、反応が見えるか
AI の処理には数秒以上かかることがあります。押したあとはボタンに「生成中」と表示し、連続送信を一時的に止めます。入力内容を突然消したり、空の結果欄へ飛ばしたりしないでください。
複雑なアニメーションは不要です。処理が始まったことを示し、入力と画面位置を残すだけで、多くの混乱を防げます。
画像や動画が待ち行列に入る場合は、「待機中」「生成中」などの段階を示せます。API が進捗を返していないのに、正確そうな割合を作らないでください。
2.3 結果が出たあと、次に進めるか
AI の返答は作業の終点ではありません。利用者は事実を確認し、表現を直し、結果を次の作業へ持っていきます。結果欄には、編集、コピー、ダウンロード、再生成のうち少なくとも一つを用意します。
アップロードした商品画像を残し、その下に認識・生成結果を表示しています。利用者はモデルの一回答を受け入れるだけでなく、元画像と見比べられます。
モデルが確認できない情報は印を付け、利用者が補足または削除できるようにします。文章を「最終回答」として見せるより、実際の仕事に合っています。
2.4 失敗したあとも続けられるか
ネットワーク切断、利用上限、非対応ファイルなどで処理は失敗します。技術的なエラー全文を一般の利用者に見せる必要はありませんが、今回の操作が完了しなかったことと、再試行または修正の方法を伝えます。
たとえば次のようにします。
- 画像形式が非対応： 対応形式を示し、選び直せるようにする。
- 必須項目が不足： 「パラメータエラー」だけでなく、該当欄の近くに案内を出す。
- AI サービスが一時的に使えない： 入力を残し、「もう一度生成」を用意する。
- 結果が期待と違う： 最初からやり直さず、入力を直して再試行できるようにする。
更新で長い入力が消えるなら、LocalStorage にフォームの下書きを一時保存できます。再開に必要な通常データだけを保存し、API Key、実在する顧客情報、機密ファイルはブラウザへ保存しないでください。
見つかった問題を AI IDE にまとめて渡します。
「商品画像をアップロードして文章を生成する」流れを、
開始、待機、成功、失敗の四つの時点で確認してください。
利用者が続けられなくなる問題を先に直してください。
- 必須項目の案内がない。
- 処理中でもボタンを連続して押せる。
- 失敗すると入力が消える。
- 結果に編集、コピー、再生成の操作がない。
変更前に、修正するファイルを教えてください。
完了後は手動テストの手順を示してください。3. ほかの人に一度使ってもらう
自分のページを長く見ていると、すべての操作が当然に感じられます。開発に関わっていない人なら、数分で見落としていた問題を見つけられます。
できれば実際に使いそうな人を選びます。EC コンテンツツールなら、店舗運営や商品ページ作成を経験した人が適しています。見つからなければ、この画面を初めて見る友人でもかまいません。
3.1 完成してほしいタスクだけを伝える
テスト開始時には目的だけを説明します。
このツールを使い、商品画像からタイトルと訴求点を生成してください。内容を確認し、あとで編集に使えそうな版をコピーしてください。
どこを押すかはすぐ教えず、まず観察します。止まった場所、戻った場所、連打した場所、質問した場所を記録します。先に説明してしまうと、本来ページが解決すべき問題を隠してしまいます。
一人か二人だけでも、明らかな問題は多く見つかります。正式な報告書は不要で、止まった場所をメモすれば十分です。
ページを開いて動かないなら用途説明を足します。「生成」を連打するなら待機表示を明確にします。結果後に迷うなら編集やコピーを追加します。失敗すると再入力が必要なら、内容を残して再試行ボタンを出します。
3.2 終わってから話を聞く
タスクを完了または断念したあと、次を聞きます。
- どの手順が最も不安でしたか。
- 生成結果のどこはそのまま使え、どこは必ず直しますか。
- 次に同じ作業があれば、もう一度使いたいですか。なぜですか。
「使いやすかったですか」だけを聞かないでください。礼儀としての「よかったです」より、具体的な行動と例のほうが次の改善に役立ちます。
実際の素材を使うとき
テスト参加者の商品画像、録音、文書には業務情報が含まれる場合があります。どの種類の AI サービスへ送るかを事前に説明し、許可のない顧客資料は使わず、不要になったファイルはテスト後に削除します。
4. つまずいた場所を直し、もう一度試す
テスト後には多くの問題が集まります。すべてを一度に直す必要はありません。タスクを完了できない問題や、結果を信用できなくする問題から取り組みます。
次の順で考えます。
- タスクを完了できない： ボタンが動かない、通信が失敗する、結果を持ち出せない。
- 結果を明らかに信用できない： 情報を作る、確認できない、必要な出典がない。
- 操作を誤解しやすい： 開始地点や現在の状態が分からない。
- 利用の負担が大きい： 操作が重複する、入力が消える、待機中の案内がない。
- 見た目と追加機能： 中心のタスクを妨げない装飾や要望。
重要なものを一つから三つ選びます。直したら、自分でもう一度試します。可能なら先ほどの人にも再度見てもらいます。元のつまずきが本当に消えたとき、その変更は役立ったと言えます。
4.1 具体的な観察を AI IDE に伝える
「最適化して」とだけ言わず、見た状況を書きます。
利用者のタスク：商品画像をアップロードし、三つの訴求点を生成する。
観察した問題：
2人のテスト参加者が「生成」を何度も押しました。
処理が始まったことが分からず、重複したタスクが作られました。
現在のページを次のように直してください。
1. 処理開始後は生成ボタンを無効にし、「生成中」と表示する。
2. 成功または失敗後にボタンを戻す。
3. 入力済みの内容は消さない。
4. 連続クリックと失敗を手動で確認する方法を教える。ここまで具体的なら、関係ない変更が入りにくく、あとで確認する内容も明確です。
4.2 修正後、最初からもう一度試す
一箇所の修正が別の場所に影響することもあります。共有前に、次の四つを試します。
- 必要な情報がそろった通常入力。
- 必須項目を一つ欠いた入力。
- API の失敗またはタイムアウト。
- 結果後の編集、コピー、再生成。
下書きを保存する製品なら、ページ更新後の動作も確認します。新しい機能だけでなく、元の中心的な流れが壊れていないことも確かめます。
5. 作品を共有できる形に整える
ここまで来ると、作品は自分のパソコンで「動くだけ」ではありません。ほかの人が使い、その際に見つかった問題を一度直しています。入口と説明を整え、より多くの人に見せられるようにします。
5.1 1分で説明する
次の順番で紹介できます。
- 誰がどんな問題を持つか： 例として、EC 担当者は商品ページの初稿を作るたびに画像と訴求点を整理する。
- 製品がどう助けるか： 商品画像と情報を入れると、編集可能な初稿を生成する。
- どの AI 機能を使うか： 画像理解とテキスト生成。
- 利用者がどう完了するか： アップロード、生成、確認、修正、コピー。
- テスト後に何を直したか： 待機表示を追加し、失敗後も入力を残した、など。
フレームワークやモデル名より先に、何を作ったかが伝わるようにします。
5.2 相手に必要なものを用意する
共有前に三つを準備します。
- 実行できるアプリ： アクセスリンクを示す。未公開なら起動コマンドとアクセス先を書く。
- 30〜60秒のデモ動画： 入力から結果まで中心タスクを一度見せる。ページを素早く切り替えるだけにしない。
- 1ページの説明： 対象利用者、中心の問題、主な流れ、AI 機能、利用者の声一つ、それに基づく修正を書く。
遠隔で利用できなくても、ローカル実行とデモ動画は Stage 1 の成果になります。相手が内容を理解でき、中心の流れが本当に完了することが大切です。
5.3 続けて作るか、別の作品にするか
この章で使った EC コンテンツ作業台を続けても、会議整理、音声コンテンツ、学習支援、業務ツールなど自分の場面に同じ方法を使ってもかまいません。AI 活用場面の参考から方向を広げられます。
独創的に見せるためだけに、知らないテーマへ変える必要はありません。自分の勉強、仕事、生活から出た小さな問題でも、実際に人に使ってもらい直した作品なら、機能は多いが誰も使っていないページより説得力があります。
共有する前に
最後に共有リンクを開き、最初から一度使います。ほかの人が開けること、AI が結果を返すこと、ページや画像に API Key がないことを確認します。他人の画像、音声、文書を使った場合は、利用許可も確認してください。
6. 📚 課題
Stage 1 の作品を完成させて公開する
新しい機能は増やしません。現在の作品を整え、本当に一人の人に使ってもらってください。
- 最初から最後まで一度使う
- ページを開くところから始め、結果の取得、編集、保存まで進める。
- 一人に試してもらう
- 先に操作方法を教えず、止まった場所を観察して問題を一つ直す。
- 作品を共有する
- リンクまたは起動方法、30〜60秒の動画、短い紹介文を用意する。
ほかの人が作品を開き、一回の利用を自力で完了できたら、Stage 1 は本当に完成です。
次のステップ
これで、実際の問題を見つけ、最初の版を絞り、操作できるプロトタイプを作り、AI を接続し、利用者に試してもらって直すところまで、一つの道筋を通りました。
Stage 2 では、データベース、利用者システム、決済、デプロイ、より完全なフロントエンドとバックエンドを学びます。それらは製品が多くの人と実データを扱うための技術ですが、出発点はこの段階と同じです。価値のある一つの利用者タスクを、まず最後まで完成させます。
你完成了第一阶段
从第一次让 AI 写出一个小游戏，到把自己的产品交给别人使用，你已经走完了一次真正的软件创作。