「susumate」の企画について
susumate / すすメイト
学生プロジェクトの進行をサポートしてくれる学習メディアの提案
#image(): File not found: "logo_susumate.jpg" at page "長友ひより/MyNote"
概要
これは何？
企画立案から進行、メンバー同士のやり取りまで、主に走り出しの進行をサポートしてくれるWebサイト
コンセプト
初めての学生プロジェクトで、進め方の全体像が見通せるようになるWebメディア
内容
研究の背景
これまでにライブイベントの企画やゲーム制作を経験して、オンラインを通したグループワークの難しさを体感した。オンライン環境が整ってきて、学生のうちからプロジェクト活動に参加する機会は多いが、何から手をつければいいのか迷う場面も多い。
そこで、その迷いを軽くできるようなツール、もしくはまとめサイトが欲しいと考えた。
- 背景
- ネタ探しに苦戦する
- 計画がスムーズに進まない
- 専門用語が分からない
- 人と話すのが苦手
- 目的
- 学生プロジェクトの開始直後に、何を決め、何を話し、次に何をすればよいか分からない問題を解決する
- ゴール
- 初回から3回目程度の会議を通して、プロジェクトの目的、役割、直近のタスク、次回の議題が暫定的に合意され、メンバー間で共有されている状態にする
調査
プロジェクトに関する悩み
- 会議で何を議題にすればいいか分からない
- どうやったら仲を深められるか分からない
- 喋り出しが緊張する
- 会議内での役割分担が分からない
ツールに関する課題点
- 社会人向けのサービスが多い
- 学生が気軽に利用できそうなものが少ない
- 機能が多くて迷ってしまいそう
- 使い分けたり使いこなしたりするのが難しそう
- そもそも何が必要かわからない
先行事例
- 記事等
- Webツール集
- プロジェクト管理ツール
- ブログ作成サービス
企画
ターゲット
- 初めてプロジェクト活動に参加することになった高校生、大学生
- 現時点では人集めの段階は考慮しておらず、活動が始まるその瞬間にフォーカスしている
ペルソナ
大城 凛 Oshiro Rin
- 17歳、高校2年生、女性
- 沖縄県在住
- ゲームが好き
- 絵を描くのは苦手
- 機械に弱い
- 話し下手
- 緊張しい
- SNSは見る専
- 夜は飲食のバイトをしている
- プロジェクトにはオンラインで参加している
- 家族（両親、5歳の弟、チワワ）と同居している
- 自分の部屋がある
サイトマップ
#image(): File not found: "sitemap_260625.png" at page "長友ひより/情報デザイン研究I"
デザイン
ゴール
「プロジェクトをやることになったけれど、何から手をつければいいか分からない状態」から「プロジェクトの進め方が見通せる状態」にするWebサイト
- ユーザーに抱いてほしい感情
- 見通しが持てる
- ワクワクする
- 迷いがなくなる
- 自分たちでも進められそう
- 未知のことに挑戦してみたくなる
テーマ / モチーフ
旅路 × 空・宇宙
- プロジェクトを未知の場所へ進む旅として表現する
- ロードマップで進行の見通しを表現する
- 宇宙で未知への挑戦や可能性を表現する
- 若者向けのスタイリッシュな雰囲気
名称
進める + mate (仲間)
- 実際に手を動かしながら学べる
- 学生自身が進めるためのナビゲーション役
形式
レスポンシブデザイン
今後
プロトタイプ
- デザイン面
- AIに作らせたHTMLを土台として、自分のデザインを乗せていきたい
- 図を入れるなど、視覚的な分かりやすさについて検証したい
- 研究面
- 悩みや課題点について、具体的な内容をまとめたい（活動記録）
- 企画面
- サイトトップの導入を工夫したい
- 個々のツールの要件定義を考えたい
- 試しに記事を1つ書きたい
実装
- 競合、収益モデル、集客、SNS発信などについて企画を深める
- AIを駆使して、自作Webサイトとして一般公開する
- → 完成したものを使って、実際にプロジェクト活動をしてみる（学科内の交流も兼ねた企画？）
AIを使ったWebサイト制作について
課題でやったこと
企画をまとめる（自分）
「Camera Roll to Vlog - 写真フォルダからはじめる動画編集」
- 概要
- Vlog（short動画）の作り方
- Adobe Premiere Proの使い方
- コンセプト
- 課題
- 動画では見ながらの作業がしづらい
- →自分のペースで学べる、文字ベースの解説にする
- 全体の進捗状況がわからず心が折れそうになる
- →どの段階まで進んでいるのか定期的に表示する
- 文字や画像だけではわかりづらい
- →適宜動画も挿入して説明する
- 初めてで何を準備すればいいかわからない
- →編集環境の設定や、素材撮りのポイントから紹介する
- そもそもPCに慣れていない
- →ショートカットも丁寧に記載する
- 他の解説動画などとの差別化
- →プレミアを使ってみたいという人をターゲットにする、自由度の高さを活かせる説明にする
- ターゲット
- いま写真フォルダに入ってる素材を使って、思い出をまとめてみたいと思っている人
- 初めてプレミアプロを触ってみたいと思っている人
- ペルソナ
黒木 葵 Kuroki Aoi
- 19歳、大学1年生、女性
- 宮崎県在住
- 自然が好き
- スマホでよく写真を撮る
- たまに旅行をする
- 行き当たりばったり
サイトマップや画面構成をまとめる（Gemini）
文字でまとめてもらったもの
→ Webサイト画面構成案
プロンプトを作る（ChatGPT）
プロンプトが生成される
→ プロンプト
コードを書く（Claude）
ファイルが生成される
→ HTML
→ CSS
→ JavaScript
※ChatGPTやGeminiにも同じように投げて、一番良いと思ったものを採用した
修正（自分）
Codexを使ってブラッシュアップ
下準備
- VSCodeとCodexを連携する
- 拡張機能の「Codex」をインストールする
- ChatGPT(Plusプラン)でログインする
- ※Codexアプリもあるが、VSCodeのほうが作業状況が分かりやすいと思う
- VSCodeとGitHubを連携する
- ChatGPTに相談して、ブラッシュアップの詳細を決める
- 企画案、プロンプト、現時点でのファイルを見てもらう
- 話しながら、最終的な改善案を自分で考える
- やり取りを基に、AGENTS.mdとREADME.mdを作ってもらう
バイブコーディングについて
個人的に調べてみたいこと
AGENTS.mdとは
AI向け
- このサイトの目的
- 守ってほしい設計方針
- 変更してよいもの / よくないもの
- デザインの方向性
- 作業後に報告してほしいこと
- …など
README.mdとは
人間向け
- プロジェクト概要
- ファイル構成
- 今後の予定
- …など
