縦スクロールSNSをPC対応｜3カラム×中央500pxの設計判断

Moeriumはスマホ縦スワイプ前提で作りました。でもPC（横長モニター）で開かれた時、画面いっぱいにフィードが広がると見づらい。3カラムレイアウトで対応した話です。

採用した3カラム構成

• 左カラム：ロゴ＋ナビゲーション（Home / Search / Post / Ranking / Me）
• 中央カラム：500px固定幅のフィード（縦スワイプUIをそのまま）
• 右カラム：話題のタグ Top12 + 注目クリエイター Top5

「中央500px固定」が肝です。ウィンドウ幅を変えても中央フィードのサイズは変わらない。スマホUIの感覚をPCでも維持。

ブレイクポイント

• ≥1200px：PC 3カラムレイアウト
• <1200px：モバイルUI（下部タブバー＋全幅フィード）

Claudeに任せた実装

「PCで開いた時に左ナビ＋中央500px＋右ウィジェットの3カラム構成にして。モバイルは既存UI維持」と指示。CSS Grid と media query で実装。30分で完成。

左カラムの中身

スマホ下部タブバーの代わりに、PCでは左カラムにナビを置く。「ホーム」「検索」「投稿」「ランキング」「マイページ」の5項目。アイコン＋テキストで、現在地はハイライト表示。

右カラムの中身

話題のタグ12件と注目クリエイター5人を表示。これらはクライアント側でフィードから動的集計。サーバー側でランキングAPIを叩く必要なし。

オーバーレイ幅の整合性

プロフィール画面・検索画面・ランキングなど、フィード上にオーバーレイされる画面の幅も500pxに揃えた。これがないと、PCで開いた時オーバーレイだけ画面幅いっぱいに広がって不自然。

細かい修正が地味に多かった

• JSON.stringifyのエスケープミスでサイドバーonclickが壊れた
• オーバーレイ幅が画面横いっぱいに広がる問題
• PC背景色とフィード背景色の段階分け

細かい修正は全部Claudeに「ここでこう壊れてる」と伝えて修正してもらいました。バイブコーディングでもデバッグはセットです。

「スマホファースト→PC対応」の順序

最初からPC対応を考えると複雑になります。スマホ縦スワイプで完結するUIを先に作り、PC対応は後付けでレスポンシブ追加。このやり方の方が早い。

Moeriumをもっと楽しむ