【ユニコ🦄】ClaudeCodeセミナー実況の匿名裏掲示板 in #ユニコスクール

①取り組んだ課題です！

課題1-1では、ChatGPTやCodexを使うための準備をしました。

課題1-2では、HTMLとJavaScriptを使ったシューティングゲームを作成しました。自機の操作・敵への攻撃・スコア・残機・ゲームオーバーに加え、ステージ・ボス戦・パワーアップ・コンボ・ハイスコア保存・効果音なども追加しました。

課題1-3では、海辺の猫カフェのホームページを作成しました。メニュー・猫スタッフ・お客様の声・お問い合わせのほか、サイト内検索・ダークモード・お気に入り保存・FAQなども追加しました。

課題1-4では、猫カフェの予約・在庫・売上・お問い合わせを管理する業務システムのモックを作成しました。データをlocalStorageに保存し、再読み込みしても残る仕組みも学びました。

②想定外だったこと

最も分かりにくかったのは、Codexを使える状態にする方法です。ChatGPTに確認しながら進めましたが、課題の説明と現在の画面が異なっている部分があり、迷いやすいと感じました。現在はChatGPT内で「Chat」と「Work」を切り替える画面になっているため、「Codexアプリを開く」「フォルダを開く」という説明だけでは初心者には判断が難しいと思います。

最終的に「Work」を選ぶことでHTMLファイルを作成できました。プログラム経験がなくても、指示文を貼り付けるだけでゲームやホームページが完成したことは、想像以上にスムーズでした。

また、業務システムを作った経験がなかったため、最初はホームページとの違いが分かりませんでした。今回の課題を通じて、ホームページはお客様に情報を見せるもの、業務システムは予約・在庫・売上などのデータを管理するものだと理解できました。

③コピペ用プロンプトへの改善案です！

現在の画面に合わせて、最初に次の説明を追加していただけると分かりやすいと思います。

「ChatGPTを開き、『Chat／Work』の切り替えから『Work』を選びます。今回の課題では、Workに指示文を貼り付けることで、HTMLやJavaScriptのファイルを作成できます。」

あわせて、「Codexが見つからない場合はorkを選ぶ」という補足と、完成後のHTMLファイルの開き方の説明があると、初心者でも安心して進められると思います。

課題ページへの改善案として、現在のChatGPT画面に合わせた形で、Codexを使える状態にする方法をあらためてご説明いただけますと幸いです。

課題1-1〜1-4を通じて、AIに作りたいものや完成条件を伝え、実際に使える形まで仕上げる体験をしました。

女性専用フィットネスジムをテーマに、白を基調としたスマートフォン対応の1ページホームページを制作しました。

ヘッダー・特徴・プログラム・料金・お客様の声・FAQ・無料体験予約を含む構成で、完成後にはフォント変更・実写写真追加・ダークモード・ページ内検索・FAQ開閉・スクロール演出なども体験できました。

次に、ホームページの裏側で使う業務効率化ツールとして、予約管理・会員管理・集計レポートをタブで切り替えられるダッシュボードを制作しました。

サンプルデータが最初から入っており、完成直後から操作を試せる状態でした。

予約・会員の追加・検索・絞り込み・来店済み変更・削除・CSV出力も動作し、入力データはブラウザに保存されるため再読み込み後も残ります。

想定外だったのは、文章で希望を伝えるだけでホームページと業務システムを一気に作れたことです。

最初から完璧な指示でなくても、完成後に「フォントをおしゃれにしたい」「写真を入れたい」と追加で伝えることで段階的に改善できました。

一方、「いい感じにして」のような短い依頼より、作りたいもの・必要な画面・機能・色・保存方法・完成形式を具体的に伝えるほうが希望に近い結果になることが分かりました。

最初のプロンプトに含めると効果的な項目として、誰が使うか・何のために作るか・最初に見せたいもの・必要な画面とセクション・必須機能・希望する色と雰囲気・対応デバイス・サンプルデータ件数・保存の要否・完成後のファイル形式を整理しました。

また、追加修正を依頼する際は「もっとおしゃれにして」だけでなく、「見出しのフォントを上品にする」「ヒーローと商品部分に写真を入れる」のように変更箇所と希望する結果をセットで伝えると確実だと感じました。

>>12514です！【第1弾Codex版「Claude Codeをはじめる」を実施しての振り返り】です！

① 実施した課題です！課題1-1〜1-4の仕上げとして、吉祥寺の少人数制クリエイティブスクール「ユニコラボ」のホームページと、その裏側で問い合わせを管理する業務画面を作成しました。

ホームページには、スクールの特徴・コース・受講者の声・よくある質問・お問い合わせを掲載し、サイト内検索・表示モード切り替え・お気に入り保存・スクロール演出も追加しました。

管理画面では、問い合わせの検索・絞り込み・新規登録・対応状況の変更・自動集計を実装し、重要な操作には承認フローを設けました。

② 想定外だった点です！プロンプトをしっかり書けていれば、ホームページだけでなく管理画面や便利な機能まで一度に作り込めることに驚きました。

最初の指示が長くても、作る順番と必要な機能が具体的に書かれていたためスムーズに完成まで進め、完成後のクイズや置き手紙まで自動で続く点も印象的でした。

③ 初期プロンプトへの改善案です！「ホームページ制作」「管理画面制作」「完成後に行うこと」の3ブロックに分け、各先頭に短いチェックリストを付けると、初めて読む方でも全体の流れをつかみやすくなると思います。

また、冒頭に「この指示は最後まで読んでから開始してください」と目立つ形で記載し、クイズと置き手紙が続くことを予告しておくと、見通しがさらに良くなります。

次の方へ：プロンプトを最後まで読んでから作業を始めることをおすすめします。

課題1〜4、すべて完了しました！

吉祥寺の少人数制クリエイティブAI教室「MIRAI NOTE」のホームページと管理画面を作成しています。

管理画面でできることとして、問い合わせ対応・受講生登録・進捗確認・講座別および月別集計を実装しました。

課題を通じて感じたことは、AIへの依頼の仕方を工夫するだけで、本格的な画面まで作れることに初めて気づき、大変驚きました。

【第1弾Codex版「Claude Codeをはじめる」に取り組んでみて】です！

① 取り組んだ課題です！

課題1-1〜1-4を通じて、AIへの依頼の仕方を考えながら制作を進めました。

最後の課題では、原宿を拠点とする縦型動画専門のクリエイティブスタジオ「FRAME POP」を設定し、お客様向けホームページとスタッフ向け管理画面を制作しました。

ホームページには、スタジオの特徴・制作プラン・実績・お客様の声・FAQ・お問い合わせフォームを用意しました。さらに、サイト内検索・ダークモード・スクロール演出・作品のお気に入り保存といった機能も加わり、本格的なサイトになりました。

管理画面では、問い合わせの確認と検索・担当者や対応状況の管理・案件登録・制作工程の進行管理・CSV出力・売上や受注状況の集計などを体験しました。重要な操作は、モーダルで内容を確認してから人が承認する形になっています。

② 想定外だったこと

お店のジャンルや設定を短く答えるだけで、デザインされたホームページと管理画面が一気に形になったことが印象的でした。

特に、ホームページから送った問い合わせが管理画面に表示され、表側と裏側がつながって動くところは、想像以上に本格的でした。

プログラムの詳しい知識がなくても、作りたいものや欲しい機能を言葉で伝えるだけで制作を進められました。「すごく楽に形になることが嬉しい」と感じられ、課題そのものも楽しく進めることができました。

課題ページの説明は分かりやすく、全体としてスムーズでした。一方で、複数の課題を進める際に「課題ごとに新しいチャットを使う」という点が最初から明記されていると、さらに迷いにくいと感じました。

③ 最初のコピペ用プロンプトへの具体的な改善案です！

最初の案内に「課題ごとに新しいチャットを開いて、このプロンプトを貼り付けてください」と目立つ形で追記すると、どのチャットで作業を続けるべきか分かりやすくなると思います。

完成後に何が作られるのかを「お客様向けホームページ1ファイル＋スタッフ向け管理画面1ファイル」のように短く示すと、初心者でも完成形を想像しやすくなります。

作ったファイルの開き方や、ホームページから送信した問い合わせを管理画面で確認する手順も、実践課題ページに短く書かれていると安心です。例えば「ホームページのお問い合わせを送信管理画面の問い合わせタブを開く」という確認手順があると、連携機能を迷わず試せます。

課題ページへの改善案：分かりやすくて良かったです。しいて言うなら、「課題ごとに新しいチャットで」と書いてあれば嬉しいです。

次の受講生へ：課題は楽しかったです。

課題1〜4のホームページ＋管理画面が完成しました。

テーマは吉祥寺の少人数制クリエイティブAI教室「MIRAI NOTE」です。

裏側の管理画面では、問い合わせ対応・受講生登録・進捗確認・講座別および月別集計まで対応しています。

すべての課題をやり終えた感想として、AIへの指示の仕方を工夫することで本格的な画面まで作れることに驚きました。