アイディアの建て方から UIへの落とし込み｜私の個人開発自慢LT #2

16年間の野球経験を持つエンジニアが、個人開発アプリ「BUZZ BASE」（野球の個人成績を記録・ランキング形式で共有できるアプリ）の開発プロセスを通じて、アイディア発想からUI実装までの手法を解説。

Transcript

1. アイディアの建て方から UIへの落とし込み 清水一平（@ippei_111） 2025.12.23 私の個人開発自慢LT #2
2. 自己紹介 清水 一平 / Ippei Shimizu 株式会社RUNTEQ｜Webエンジニア兼講師 ・社会人硬式野球 → コーダー（Web制作）→ エンジニア ・小学校から社会人まで16年間、野球に取り組んでいました。 ・個人開発でBUZZ BASEを開発しました。 @ippei_111
3. 今日話す3つのポイント ◼︎「自分ごと」の課題を探す ◼︎ 課題から「機能」に落とし込む ◼︎ UIへの落とし込み
4. BUZZ BASE 野球の個人成績を記録し、 ランキング形式で共有できるアプリ http://buzzbase.jp/
5. 「自分ごと」の課題を探す ◼︎自分が長く関わってきた領域を1つ選ぶ ◼︎その中で「面倒」「不満」「もったいない」と感じたこと ◼︎「自分以外にも同じことで困っている人がいそうか」を考える
6. 「自分ごと」の課題を探す（BUZZ BASEの場合） ◼︎自分が長く関わってきた領域を1つ選ぶ → 野球（16年間） ◼︎ その中で「面倒」「不満」「もったいない」と感じたこと → キャプテンとして「選手のモチベーション維持」に苦労した ◼︎ 「自分以外にも同じことで困っている人がいそうか」を考える → 他のキャプテンや指導者も同じ悩みを持っているはず
7. 課題から「機能」に落とし込む ◼︎課題を分析する（何が原因か？） ◼︎仮説を立てる（〜すれば解決するのでは？） ◼︎仮説を実現する機能を考える
8. 仮説 機能 承認欲求を満たせれば 成績の「見える化」 、ランキングで比較 悔しさ・焦りを感じれば 「ランキング」で比較 、 「グループ」機能で過去のチームメイトと比較 課題から「機能」に落とし込む（BUZZ BASEの場合）
9. UIへの落とし込み ◼︎ターゲットが使っているであろうサービスを調べる ◼︎競合サービスを参考にする ◼︎検証ツールでCSS値を確認して参考にする
10. UIへの落とし込み（BUZZ BASEの場合） ◼︎ターゲットが使っているであろうサービスを調べる → 10〜20代 : Instagram、XなどのSNS ◼︎競合サービスを参考にする → ベボレコ、パリーグTVなど ◼︎検証ツールでCSS値を確認して参考にする → UIライブラリで対応できなかったUIに関しては、検証ツール でCSSの値を確認して、参考にしながらUIを作成
11. 打撃成績記録フォーム マイページ 投手成績ランキング グループ作成
12. まとめ 自分ごとの課題 ↓ 課題分析・仮説から機能に落とし込む ↓ UIに落とし込む