ゲームの世界を切り取る、写真ギャラリーWebアプリ
A web app to browse in-game snapshot photos
このプロジェクトは、ゲーム内で撮影したスナップ写真を閲覧できるWebアプリです。
フロントエンド開発とUIデザインのスキルを活かして、写真ギャラリーや詳細表示の機能を実装しました。
非エンジニアの友人と共同運営するため、誰でも簡単に更新できるようmicroCMSを導入しています。
This project is a web app for browsing snapshot photos taken in the world of games.
It leverages frontend development and UI design skills to implement a photo gallery and detail view features.
To allow easy updates by non-engineer collaborators, it integrates with microCMS for simple content management.
※ゲーム内の写真が見られます。ただしリリース初期のため、サンプル画像が混在していたり、まだ投稿数が少なめです。
You can view in-game snapshots! However, since the project is in its early stages, there are only a few images, including some temporary samples.
- TypeScript / React / Next.js
- Masonry layout for image grid
- Responsive layout
- Custom icons
- microCMS for content management
- Dynamic routing via Next.js
-
写真ギャラリー / Photo Gallery:
ゲーム内スナップをカテゴリ別に表示
> Display snapshots by category -
詳細表示 / Modal Detail View:
写真の情報をモーダルで確認
> View detailed photo info in a modal -
レスポンシブデザイン / Responsive Design:
スマホからPCまで対応
> Fully responsive for all device sizes -
画像最適化 / Image Optimization:
高速読み込み対応
> Fast loading with optimized images
-
Next.jsによる動的ルーティング
> Dynamic routing powered by Next.js -
microCMSの導入により、非エンジニアでも簡単に更新可能
> Content is managed via microCMS, making it easy to update by non-engineers -
Masonryレイアウトで一覧性を確保
> Gallery displayed in a clear, organized masonry layout -
カスタムアイコンやアニメーションで直感的なUI
> Intuitive UI using custom icons and animations
- モバイル / Mobile（〜428px）
- タブレット / Tablet（428px〜768px）
- デスクトップ / Desktop（768px〜）
-
写真の検索機能追加
> Add photo search feature -
画像のプリフェッチなどによるパフォーマンス向上
> Improve performance with image prefetching, etc. -
「お気に入り」「いいね」などのユーザーインタラクション強化
> Enhance user interaction with "like" and "favorite" features -
ターミナル風の動的な情報表示欄の追加（現在はテスト中）
> Add a terminal-style dynamic info panel (currently in test phase)
Kichita
フロントエンドエンジニア & デザイナー
Frontend Engineer & Designer
© 2025 Kichita. All Rights Reserved.