目次
VirtualStage Vtuberランキングサイト制作
プロジェクト概要
- プロジェクト名：VirtualStage
- プロジェクト期間：3ヶ月
- ページ数：12ページ
背景と目的
背景：Vtuberの人気が急上昇する中、視聴者がどのVtuberを観ればよいか分かりにくいという課題があった。
目的：リアルタイムでランキングを更新できるサイトを構築し、Vtuberファンや企業担当者が最新の情報をスムーズに得られるようにすることで、PV数の増加を目指した。
サイトの概要
- サイトの種類：Vtuberランキングサイト
- 主な機能：リアルタイムランキング、Vtuber検索、詳細プロフィールページ、ソート機能（登録者数順・再生回数順）
- ターゲットユーザー：Vtuberファン、企業担当者
デザインと開発の過程
デザインプロセス
- リサーチ：競合サイトや参考サイトを分析し、UI/UXの改善点を洗い出し。特に使いやすさを重視した設計に。
- ワイヤーフレーム：Figmaを使用し、クライアントと確認しながら調整。
- デザインカンプ：Figmaで作成し、ポップで可愛らしいデザインを意識。
開発プロセス
- フロントエンド：HTML / CSS / JavaScript
- バックエンド：別担当者が実装
- 使用ツール：Figma（デザイン）、GitHub（コード管理）
チームと役割分担
- チーム構成：デザイナー、フロントエンド開発、バックエンド開発、ディレクター
- 自分の役割：Figmaを使ったワイヤーフレーム・デザイン作成、HTML/CSS/JavaScriptでのフロントエンド開発
成果と結果
- 公開後の効果：アクセス数が増加し、クライアントやディレクターから高評価をいただいた。
- クライアントのフィードバック：
- 「進め方もバッチリでした。」
- 「ハイクオリティなデザイン、感謝です。」
- 「さっそくいい感じに順位が取れてきました。本当にありがとうございます！」
振り返りと学び
- 成功した点：
- 競合分析を活かし、ユーザーにとって使いやすいデザインを実現。
- ヒアリングを通じてデザインの方向性をしっかりすり合わせ、クライアントに満足してもらえた。
- チームとスムーズに連携し、効率的に開発を進めることができた。
- 課題と対策：ポップで可愛らしいデザインの表現に苦労したが、ヒアリングや競合分析等の試行錯誤を重ねて実現。
- 学び：
- ランキングサイト特有のUI/UX設計の重要性を実感。
- チーム開発の経験を積み、GitHubを活用して効率的なソースコード管理を行えた。
継続的なメンテナンス
- 運用サポート：基本的な運用はクライアントが行い、必要に応じてデザインやフロントエンドの修正をサポート予定。
