🌱 はじめに
デザイン性にこだわったポートフォリオを構築する際、PCでは完璧でもスマホ実機で見るとレイアウトが崩れてしまうことはありませんか？
今回、Next.js（App Router）× Tailwind CSS × Vercel を使って ZENTEN の公式サイトを構築する中で得た「スマホ最適化」と「技術的理解」をまとめます。
📱 1. モバイルファーストでの文字サイズ調整
スプラッシュ画面のタイトルが 「PCでは美しいのにスマホでは崩れる問題」 に直面しました。
🔍 原因
Tailwind CSS は モバイルファースト の設計です。text-4xl md:text-7xl のように書くと、以下の挙動になります。
-
スマホ（基本）:
text-4xl -
画面幅 md 以上:
text-7xl
小さい画面のスタイルが基本として優先される仕組みを理解することが重要でした。
🛠 修正コード例
<h1 className="text-4xl md:text-7xl tracking-tighter">
ZENTEN
</h1>
💡 ポイント tracking-tighter を使うと、スマホの狭い画面でも文字が間延びせず引き締まります。
📐 2. SNS セクションの「縦伸び」問題と line-height の理解
SNS タイトルが 縦に潰れたように見える問題 が発生しました。
🔍 原因
Tailwind のデフォルト line-height は 1.5 です。大きいフォントサイズに対して行間が広すぎるため、縦に間延びして見えていました。
🛠 解決策：leading-none
<h2 className="text-5xl leading-none">
SOCIAL
</h2>
💡 技術的背景
leading-none → line-height: 1
大きい見出しでは特に効果的で、行間が詰まることで視認性が向上し、デザインの一体感が出ます。
🧩 アイコンカードの aspect-ratio
<div className="aspect-square bg-neutral-900 rounded-xl" />
aspect-square は CSS の aspect-ratio: 1 / 1 を適用する Tailwind のユーティリティで、画面幅に応じて高さが自動調整され、スマホでも崩れません。
🛠 3. 開発環境での「パス指定」トラブル
ターミナル再起動後に npm run dev が動かない問題が発生しました。
🔍 原因
プロジェクトのルートに移動していなかったことが原因です。
🛠 解決策
cd zenten-official
npm run dev
Windows の便利技 cd の後にエクスプローラーからフォルダをドラッグ＆ドロップすると、フルパスが自動入力されてミスがゼロになります。
🚀 4. Vercel でのデプロイと CI/CD の理解
GitHub と連携して Vercel にデプロイを行いました。
🔍 技術的背景
GitHub に push すると、Vercel が Webhook を受け取ってビルドを自動実行。
成功すると自動で本番環境に反映される仕組みです。
💡 体験したメリット
デプロイ作業がゼロ
プレビュー環境が自動生成
デザイン修正の確認が高速化
🧠 5. Next.js（App Router）で学んだこと
📌 layout.tsx の役割 全ページ共通のスタイル・メタデータを管理できるため、ブランドサイトの一貫性を保つのに最適。
📌 Image コンポーネントの最適化 Next.js の Image は自動で最適化されるため、スマホでも高速に読み込まれ、UX が向上。
📌 public ディレクトリの扱い 画像やフォントを置く場所として便利ですが、パス指定は / から始める必要がある点に注意。
💬 まとめ
スマホ最適化は「Tailwind のクラスを当てるだけ」ではなく、CSS の仕組み・Tailwind の設計思想・Next.js の構造を理解することで、より意図通りのデザインを実現できると実感しました。
🧰 使用技術 (Tech Stack)
- Framework：Next.js 14（App Router）
- Styling：Tailwind CSS
- Deployment：Vercel
** 作成した全天/Zenten公式サイト👇 **