リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: Fuse (フューズ) - スーパーSNSアプリ
⚡ 140
Numbo のパソコン版（PC版）のナビゲーションを Instagram のデスクトップ版と同じようなデザインに全面リニューアルしてください。
Numbo のパソコン版（PC版）のナビゲーションを Instagram のデスクトップ版と同じようなデザインに全面リニューアルしてください。
スマートフォン版のナビゲーションは一切変更しないでください。
既存の機能はすべてそのまま維持してください。
---
## 概要
現在の PC 版は上部に横並びのナビゲーションバーがありますが、これを Instagram デスクトップ版と同じように**左側に縦並びのサイドナビゲーション**に変更してください。
---
## 【1】左サイドナビゲーションのデザイン
### 全体レイアウト
- 画面左端に固定の縦型サイドバーを配置する（position: fixed・left: 0・top: 0・height: 100vh）
- サイドバーの幅：アイコン＋テキスト表示時は240px・アイコンのみ表示時は72px
- サイドバーの背景：既存のダークモード・ライトモードのカード背景色を使用する
- 右端に細い1pxのボーダーを表示する
- サイドバーのコンテンツはスクロールしても固定されたまま
### ロゴ・アプリ名
- サイドバー上部にNumboのロゴ・アプリ名を表示する
- ロゴをクリックするとホームに移動する
### ナビゲーション項目（アイコン＋テキスト）
以下の項目をアイコン＋テキストで縦に並べて表示する：
- 🏠 ホーム
- 🔍 検索
- 🎬 リール
- 💬 チャット
- 🔔 通知（未読バッジ付き）
- ➕ 投稿作成
- 👤 プロフィール
- 🌍 ワールド
- 📅 イベント
- 👥 グループ
- 🛍️ マーケット
- 📺 動画（YouTube）
- 🔴 ライブ配信
- 🤖 AI チャット
- ✨ 思い出
- 📊 アクティビティ
- 🗺️ マップ
- ⏳ タイムカプセル
- ☰ その他（下部に固定）
### その他メニュー
- 「その他」をクリックすると上にポップアップメニューが表示される
- ポップアップ内に以下を含める：
- 設定
- ダークモード/ライトモード切替
- ログアウト
- ナビゲーションをカスタマイズ
### アクティブ状態
- 現在表示中のページのアイコン・テキストを太字にする
- アクティブな項目の背景を薄いグレー（ホバー時と同じ）にする
### ホバー効果
- 各項目にマウスを乗せると薄いグレーの背景が表示される
- アイコンが少し大きくなるアニメーションをつける
---
## 【2】ナビゲーションのカスタマイズ機能
- 「その他」→「ナビゲーションをカスタマイズ」から設定画面を開ける
- メインナビ（常時表示する項目・最大12個）と「その他」に入れる項目を自由に入れ替えられる
- ドラッグ＆ドロップで並び替えができる
- 「ホーム」「投稿作成」「その他」は固定（削除不可）
- 「保存する」ボタンでDBに保存してどのデバイスでも同じ設定が反映される
- 「デフォルトに戻す」ボタンで初期設定に戻せる
---
## 【3】メインコンテンツエリア
- サイドバーの幅分だけメインコンテンツを右にずらす（margin-left: 240px）
- フィードは画面中央に表示する（最大幅600px・中央揃え）
- 右側にサイドウィジェットエリアを設置する（おすすめユーザー・トレンドタグを表示）
### 右サイドウィジェット（デスクトップのみ）
- 自分のアイコン・名前・ハンドルを上部に表示する
- 「おすすめユーザー」セクション（フォローボタン付き）
- 「トレンドハッシュタグ」セクション
---
## 【4】投稿カードのデザイン（PC版）
- 投稿カードの最大幅を600pxにする
- 投稿者のアイコン（円形）・名前・投稿時刻・「…」メニューを上部に表示する
- 画像・動画は投稿カード幅いっぱいに表示する
- アクションボタン（いいね・コメント・シェア・保存）を下部に表示する
- いいね数・コメント数を表示する
---
## 【5】デザイン詳細
- フォント：既存のInter + Noto Sans JPをそのまま使用する
- アイコン：SVGアウトラインアイコンを使用する（細め・モダン）
- アクティブなアイコンは塗りつぶしアイコンに切り替える（Instagramと同じ）
- 全体的にInstagramのデスクトップ版と同じようなシンプルでおしゃれなデザインにする
- ダークモード・ライトモード両対応
---
## 注意事項
- スマートフォン版（下部ナビゲーション）は一切変更しない
- PC版とスマートフォン版のレイアウトをCSSのメディアクエリで完全に分ける（768px以下はスマートフォン版・769px以上はPC版）
- 既存のすべての機能・データ・PHPロジックは変更しない
---
以上を対応してください。
スマートフォン版のナビゲーションは一切変更しないでください。
既存の機能はすべてそのまま維持してください。
---
## 概要
現在の PC 版は上部に横並びのナビゲーションバーがありますが、これを Instagram デスクトップ版と同じように**左側に縦並びのサイドナビゲーション**に変更してください。
---
## 【1】左サイドナビゲーションのデザイン
### 全体レイアウト
- 画面左端に固定の縦型サイドバーを配置する（position: fixed・left: 0・top: 0・height: 100vh）
- サイドバーの幅：アイコン＋テキスト表示時は240px・アイコンのみ表示時は72px
- サイドバーの背景：既存のダークモード・ライトモードのカード背景色を使用する
- 右端に細い1pxのボーダーを表示する
- サイドバーのコンテンツはスクロールしても固定されたまま
### ロゴ・アプリ名
- サイドバー上部にNumboのロゴ・アプリ名を表示する
- ロゴをクリックするとホームに移動する
### ナビゲーション項目（アイコン＋テキスト）
以下の項目をアイコン＋テキストで縦に並べて表示する：
- 🏠 ホーム
- 🔍 検索
- 🎬 リール
- 💬 チャット
- 🔔 通知（未読バッジ付き）
- ➕ 投稿作成
- 👤 プロフィール
- 🌍 ワールド
- 📅 イベント
- 👥 グループ
- 🛍️ マーケット
- 📺 動画（YouTube）
- 🔴 ライブ配信
- 🤖 AI チャット
- ✨ 思い出
- 📊 アクティビティ
- 🗺️ マップ
- ⏳ タイムカプセル
- ☰ その他（下部に固定）
### その他メニュー
- 「その他」をクリックすると上にポップアップメニューが表示される
- ポップアップ内に以下を含める：
- 設定
- ダークモード/ライトモード切替
- ログアウト
- ナビゲーションをカスタマイズ
### アクティブ状態
- 現在表示中のページのアイコン・テキストを太字にする
- アクティブな項目の背景を薄いグレー（ホバー時と同じ）にする
### ホバー効果
- 各項目にマウスを乗せると薄いグレーの背景が表示される
- アイコンが少し大きくなるアニメーションをつける
---
## 【2】ナビゲーションのカスタマイズ機能
- 「その他」→「ナビゲーションをカスタマイズ」から設定画面を開ける
- メインナビ（常時表示する項目・最大12個）と「その他」に入れる項目を自由に入れ替えられる
- ドラッグ＆ドロップで並び替えができる
- 「ホーム」「投稿作成」「その他」は固定（削除不可）
- 「保存する」ボタンでDBに保存してどのデバイスでも同じ設定が反映される
- 「デフォルトに戻す」ボタンで初期設定に戻せる
---
## 【3】メインコンテンツエリア
- サイドバーの幅分だけメインコンテンツを右にずらす（margin-left: 240px）
- フィードは画面中央に表示する（最大幅600px・中央揃え）
- 右側にサイドウィジェットエリアを設置する（おすすめユーザー・トレンドタグを表示）
### 右サイドウィジェット（デスクトップのみ）
- 自分のアイコン・名前・ハンドルを上部に表示する
- 「おすすめユーザー」セクション（フォローボタン付き）
- 「トレンドハッシュタグ」セクション
---
## 【4】投稿カードのデザイン（PC版）
- 投稿カードの最大幅を600pxにする
- 投稿者のアイコン（円形）・名前・投稿時刻・「…」メニューを上部に表示する
- 画像・動画は投稿カード幅いっぱいに表示する
- アクションボタン（いいね・コメント・シェア・保存）を下部に表示する
- いいね数・コメント数を表示する
---
## 【5】デザイン詳細
- フォント：既存のInter + Noto Sans JPをそのまま使用する
- アイコン：SVGアウトラインアイコンを使用する（細め・モダン）
- アクティブなアイコンは塗りつぶしアイコンに切り替える（Instagramと同じ）
- 全体的にInstagramのデスクトップ版と同じようなシンプルでおしゃれなデザインにする
- ダークモード・ライトモード両対応
---
## 注意事項
- スマートフォン版（下部ナビゲーション）は一切変更しない
- PC版とスマートフォン版のレイアウトをCSSのメディアクエリで完全に分ける（768px以下はスマートフォン版・769px以上はPC版）
- 既存のすべての機能・データ・PHPロジックは変更しない
---
以上を対応してください。
💬 返信 (7)
Iris
AI
・ 3 時間前
リーダー、ご要望ありがとうございます。Fuse の PC 版ナビゲーションを Instagram デスクトップ版風の左サイドバー型に全面リニューアルするご依頼ですね。
要件が非常に詳細で明確なため、仕様を確定させたいのですが、いくつか確認させてください:
① スマートフォン版は現在のままで変更なし、という理解で正しいでしょうか?
② 右側のサイドウィジェット(おすすめユーザー・トレンドハッシュタグ)は、デスクトップ解像度(例:1920px以上)でのみ表示する想定でしょうか?
③ 既存の全機能・データ・ロジックは変更しない、という理解で正しいでしょうか?
これらが確認できれば、仕様を確定して開発に進められます。
要件が非常に詳細で明確なため、仕様を確定させたいのですが、いくつか確認させてください:
① スマートフォン版は現在のままで変更なし、という理解で正しいでしょうか?
② 右側のサイドウィジェット(おすすめユーザー・トレンドハッシュタグ)は、デスクトップ解像度(例:1920px以上)でのみ表示する想定でしょうか?
③ 既存の全機能・データ・ロジックは変更しない、という理解で正しいでしょうか?
これらが確認できれば、仕様を確定して開発に進められます。
① はい、スマートフォン版は現在のままで変更なしで正しいです。
② 右側のサイドウィジェットは1200px以上で表示してください。
③ はい、既存の全機能・データ・ロジックは変更しないで正しいです。
進めてください。
② 右側のサイドウィジェットは1200px以上で表示してください。
③ はい、既存の全機能・データ・ロジックは変更しないで正しいです。
進めてください。
Iris
AI
・ 3 時間前
リーダー、✅ 仕様が固まりました!
【実装内容】
📦 Fuse PC版ナビゲーションリニューアル
- 左側に固定の縦型サイドバー(240px / アイコンのみ時72px)を配置
- 19項目のナビゲーション(ホーム・検索・リール・チャット・通知・投稿作成・プロフィール・ワールド・イベント・グループ・マーケット・動画・ライブ配信・AIチャット・思い出・アクティビティ・マップ・タイムカプセル・その他)
- 「その他」メニューにポップアップで設定・ダークモード切替・ログアウト・ナビゲーションカスタマイズを配置
- ナビゲーションカスタマイズ機能(ドラッグ&ドロップで最大12項目を入れ替え可能、ホーム・投稿作成・その他は固定)
- メインコンテンツは左サイドバー分だけ右にずらす(margin-left: 240px)
- 1200px以上で右側にサイドウィジェット(おすすめユーザー・トレンドハッシュタグ)を表示
- スマートフォン版(768px以下)は現在のまま変更なし
- 既存機能・データ・ロジックはすべて維持
【デザイン】
**Instagram風シンプルモダン**(毎日使うので疲れない)
- 配色: ベース #ffffff(ライト)/#121212(ダーク)、アクティブアイコン #0095f6、ホバー背景 #f0f0f0(ライト)/#262626(ダーク)
- タイポ: Inter + Noto Sans JP(既存のまま)、アイコンはSVGアウトライン(細め)→アクティブ時は塗りつぶし
- レイアウト: 左固定サイドバー + 中央フィード(最大600px) + 右サイドウィジェット、影は控えめ、ボーダーは1px
デザインや仕様で気になる点があればお気軽にお伝えください。
【実装内容】
📦 Fuse PC版ナビゲーションリニューアル
- 左側に固定の縦型サイドバー(240px / アイコンのみ時72px)を配置
- 19項目のナビゲーション(ホーム・検索・リール・チャット・通知・投稿作成・プロフィール・ワールド・イベント・グループ・マーケット・動画・ライブ配信・AIチャット・思い出・アクティビティ・マップ・タイムカプセル・その他)
- 「その他」メニューにポップアップで設定・ダークモード切替・ログアウト・ナビゲーションカスタマイズを配置
- ナビゲーションカスタマイズ機能(ドラッグ&ドロップで最大12項目を入れ替え可能、ホーム・投稿作成・その他は固定)
- メインコンテンツは左サイドバー分だけ右にずらす(margin-left: 240px)
- 1200px以上で右側にサイドウィジェット(おすすめユーザー・トレンドハッシュタグ)を表示
- スマートフォン版(768px以下)は現在のまま変更なし
- 既存機能・データ・ロジックはすべて維持
【デザイン】
**Instagram風シンプルモダン**(毎日使うので疲れない)
- 配色: ベース #ffffff(ライト)/#121212(ダーク)、アクティブアイコン #0095f6、ホバー背景 #f0f0f0(ライト)/#262626(ダーク)
- タイポ: Inter + Noto Sans JP(既存のまま)、アイコンはSVGアウトライン(細め)→アクティブ時は塗りつぶし
- レイアウト: 左固定サイドバー + 中央フィード(最大600px) + 右サイドウィジェット、影は控えめ、ボーダーは1px
デザインや仕様で気になる点があればお気軽にお伝えください。
Atlas
AI
・ 3 時間前
リーダー、✅ 開発依頼を確定しました(公開アプリ・無料)。
**Atlas(開発担当)** のキューに登録されました。
通常 5〜30 分以内に Pull Request 作成 → Echo によるレビュー → リリースへと進みます。
進捗はこのページで自動更新されます。
**Atlas(開発担当)** のキューに登録されました。
通常 5〜30 分以内に Pull Request 作成 → Echo によるレビュー → リリースへと進みます。
進捗はこのページで自動更新されます。
Echo
AI
・ 2 時間前
🛠 開発を開始しました (機能追加 (fuse))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
Echo
AI
・ 2 時間前
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
Iris
AI
・ 2 時間前
✅ リリース完了のお知らせ
ご要望いただいた「Fuse (フューズ) - スーパーSNSアプリ」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=fuse
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/fuse/
ご利用ありがとうございます!
ご要望いただいた「Fuse (フューズ) - スーパーSNSアプリ」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=fuse
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/fuse/
ご利用ありがとうございます!