概要
京都の飲食店サイトを想定し、Webデザインからフロントエンド実装までを行った個人制作プロジェクトです。
スマートフォン・タブレット・デスクトップの各画面幅に対応したレスポンシブ設計を意識して制作しました。
制作内容・担当範囲
本プロジェクトでは、以下の内容を担当しました。
- Webデザイン（Figma）
- フロントエンド実装
- デプロイ（Vercel）
デザインについて
- Figmaを使用し、スマートフォン版を起点にタブレット版、デスクトップ版へとデザインを展開しました。
- 各デバイスで情報量や写真の見え方が過不足なくなるよう、レイアウトや余白を調整しています。
- SP・タブレット・デスクトップのデザインは、同一のFigmaファイル内でページを分けて管理しています。
実装について
- Next.js と Tailwind CSS を用いて実装しました。
- デザインの再現だけでなく、画面幅の変化に応じて要素のサイズや配置が自然に変わるよう、レスポンシブ対応を意識しています。
- 完成後は Vercel にデプロイし、実際の表示環境で確認できる形にしました。
工夫した点
制作の中で、特に以下の点を意識しました。
- スマートフォンを基準としたSPファースト設計
- 写真が主役になる構成を意識したレイアウト
- 余白や文字サイズを調整し、可読性を重視
- コンポーネント分割による再利用しやすい構造
使用技術
- Next.js
- Tailwind CSS
- Figma
- Vercel
リンク
→ デモサイト
→ GitHub
→ Figma（SP / タブレット / デスクトップ デザイン）
→ 制作の背景と完成までの記録はこちら
画面イメージ（スマートフォン版））
