読み込み中...
この記事は、ひとりでつくるSaaS - 設計・実装・運用の記録 Advent Calendar 2025 の14日目の記事です。
昨日の記事では「Vercel最適化」について書きました。この記事では、モバイルファーストで設計するレスポンシブUIの実践について解説します。
SaaSにはデスクトップ前提のものもありますが、私が個人開発しているMemoreruではデスクトップでもモバイルでも快適に使えることを目指しました。移動中にスマホでメモを確認したり、PCでじっくり編集したり、シーンに応じて使い分けられるようにしたかったからです。
モバイルファーストで設計するメリットは以下の通りです。
Tailwind CSSではmdが768pxに対応しています。この768pxを主要な境界として、モバイルとデスクトップを切り替えています。
// モバイル版：md未満で表示
<div className="md:hidden">
<MobileSidebar />
<BottomTabBar />
</div>
// デスクトップ版：md以上で表示
<div className="hidden md:block">
<LeftSidebar />
<TopNavigation />
</div>この設計の理由は以下の通りです。
コンテンツの表示列数は、画面幅だけでなくサイドバーの開閉状態によっても変化します。
const gridCols = areBothSidebarsClosed
? 'grid-cols-1 sm:grid-cols-5 3xl:grid-cols-7'
: 'grid-cols-1 sm:grid-cols-4 3xl:grid-cols-6';サイドバーが閉じているときは表示領域が広いので列数を増やし、開いているときは減らします。単純な画面幅だけでなく、実際の表示領域に応じて最適化しています。
モバイルでは、画面下部に固定のタブバーを配置しています。
// BottomTabBar.tsx
<nav className="fixed bottom-0 left-0 right-0 z-40 md:hidden">
<div className="flex items-center justify-around pb-safe">
<TabButton icon={Star} label="ブックマーク" />
<TabButton icon={Globe} label="パブリック" />
<TabButton icon={Users} label="チーム" />
<TabButton icon={Lock} label="プライベート" />
</div>
</nav>ポイントは以下の通りです。
md:hiddenでデスクトップでは非表示pb-safeでiOSのセーフエリアに対応ハンバーガーメニューをタップすると、左からスライドインするドロワーが表示されます。
// MobileSidebar.tsx
<aside className={`
fixed left-0 top-0 z-50 h-full w-80
transition-transform duration-300 ease-in-out
${isOpen ? 'translate-x-0' : '-translate-x-full'}
md:hidden
`}>
{/* ナビゲーションコンテンツ */}
</aside>
{/* オーバーレイ */}
<div className={`
fixed inset-0 z-40 bg-black
transition-opacity duration-300
${isOpen ? 'opacity-50' : 'pointer-events-none opacity-0'}
`} onClick={onClose} />アニメーションにはtranslate-xとtransitionを組み合わせ、ネイティブアプリのような滑らかな動きを実現しています。
画面左端からの右スワイプでドロワーを開く、ドロワー表示中の左スワイプで閉じる、というネイティブアプリでおなじみの操作を実装しています。
// AppLayout.tsx
const minSwipeDistance = 50;
const leftEdgeThreshold = 150;
const handleTouchEnd = () => {
const deltaX = touchEndX - touchStartX;
const isRightSwipe = deltaX > minSwipeDistance;
const isLeftSwipe = deltaX < -minSwipeDistance;
const isFromLeftEdge = touchStartX < leftEdgeThreshold;
// 左端からの右スワイプ: ナビゲーション開く
if (isRightSwipe && isFromLeftEdge) {
setIsSidebarOpen(true);
}
// ナビゲーション開時の左スワイプ: 閉じる
if (isSidebarOpen && isLeftSwipe) {
setIsSidebarOpen(false);
}
};スワイプ距離の閾値（50px）と、左端の検知範囲（150px）を適切に設定することで、意図しない操作を防ぎつつ、自然な操作感を実現しています。
タップ時に軽い振動を返すことで、操作の確実性を高めています。
// haptic.ts
export function vibrateLight() {
// 注意: navigator.vibrate は iOS Safari では非対応
if (typeof window !== 'undefined' && 'vibrate' in navigator) {
navigator.vibrate(10); // 10msの軽いバイブレーション
}
}
// 使用例
<button onClick={() => {
vibrateLight();
handleAction();
}}>振動時間は10msと短く設定し、煩わしくない程度のフィードバックにしています。なお、navigator.vibrateはAndroidでのみ動作し、iOSでは効果がありません。
コンポーネント内でモバイルかどうかを判定する必要がある場合は、window.innerWidthを使用します。
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
const checkMobile = () => {
setIsMobile(window.innerWidth < 768);
};
checkMobile();
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener('resize', checkMobile);
}, []);リサイズイベントをリッスンすることで、ウィンドウサイズの変更にも対応できます。
複数のコンポーネントで同じ判定を使う場合は、Contextで一元管理します。
// UIStateContext.tsx
const UIStateContext = createContext<UIState | null>(null);
export function UIStateProvider({ children }: { children: React.ReactNode }) {
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
const checkMobile = () => setIsMobile(window.innerWidth < 768);
checkMobile();
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener('resize', checkMobile);
}, []);
return (
<UIStateContext.Provider value={{ isMobile }}>
{children}
</UIStateContext.Provider>
);
}これにより、各コンポーネントで同じロジックを繰り返す必要がなくなります。
Next.jsのSSR（サーバーサイドレンダリング）では、サーバー側で最初にHTMLを生成します。このときwindowオブジェクトは存在しません。その後、クライアント側でJavaScriptが実行される際（Hydration）に、サーバーとクライアントで異なる値が生成されるとエラーになります。
const [isMounted, setIsMounted] = useState(false);
useEffect(() => {
setIsMounted(true);
}, []);
if (!isMounted) {
return <LoadingPlaceholder />;
}
return <InteractiveComponent isMobile={isMobile} />;マウント後にのみインタラクティブなコンポーネントを表示することで、Hydrationのミスマッチを防いでいます。
Next.jsのImageコンポーネントでは、sizes属性で画面幅に応じた画像サイズを指定できます。
<Image
src={item.thumbnail_url}
alt={item.title}
fill
className="object-cover"
sizes="(max-width: 768px) 100vw, 300px"
/>モバイルでは画面幅いっぱい、デスクトップでは300pxの画像を読み込みます。不要に大きな画像を読み込まないことで、通信量とレンダリング時間を削減できます。
iPhoneのノッチやホームインジケーターがある領域を避けるため、SafeAreaに対応しています。
// tailwind.config.ts
padding: {
'safe': 'env(safe-area-inset-bottom)',
}
// 使用例
<div className="pb-safe">
<BottomTabBar />
</div>env(safe-area-inset-bottom)を使うことで、デバイスごとに適切なパディングが自動的に適用されます。
モバイルファースト設計を実践した結果をまとめます。
| 項目 | Before | After |
|---|---|---|
| ナビゲーション | デスクトップ前提のサイドバー | ボトムタブ＋ドロワー |
| 操作感 | クリック前提 | スワイプ＋タップ対応 |
| レイアウト | 固定幅 | 画面幅に応じて動的調整 |
| 画像読み込み | 一律サイズ | デバイスに応じたサイズ |
モバイルファーストでレスポンシブUIを設計する実践について解説しました。
設計のポイント:
md: 768pxを境界として、モバイルとデスクトップを切り替え実装のポイント:
md:hiddenとhidden md:blockでデバイス別表示を制御モバイルファーストは、制約の中から本質的なUXを見つけるアプローチです。小さい画面で使いやすいUIは、大きい画面でも使いやすいUIになります。
明日は「無限スクロール × Zustand × React 19」について解説します。
シリーズの他の記事
コメント