観光サイト / ランディングページ
Onomichi
尾道の魅力を伝えることを目的とした
観光ランディングページです。
- 制作期間

- 約1ヶ月
- 担当範囲

- HTML/CSSコーディング
- SCSS設計
- JavaScript実装
- レスポンシブ対応
- 制作方法

- Figmaデザインカンプから実装
- 制作人数

- 個人制作
- デザイン

- 支給デザインカンプ
プロジェクト概要
広島県尾道の魅力を伝え、旅行のきっかけをつくることを目的とした観光ランディングページです。
デザインカンプをもとに、コーディングから各種アニメーションの実装までを行いました。
使用技術
- HTML5
- CSS
- JavaScript(jQuery)
- FLOCSS
- Responsive Design
工夫した点
- FLOCSSを採用し、Component・Project・Layoutを分離することで保守性・再利用性を意識しました。
- スマートフォンでも見やすいように、余白や文字サイズを最適化しました。
- スムーススクロールやフェードインアニメーションを実装し、ユーザー体験を向上させました。
- 画像の最適化と遅延読み込みを行い、表示速度の改善に取り組みました。
苦労した点
- メインビジュアルでは、画面サイズごとに画像が適切に表示されるよう、clamp()やcalc()を用いてサイズを調整しました。
- スライダーの実装において、デザインの意図を正確に再現することに苦労しました。
スクリーンショット
PCデザイン

スマートフォンデザイン
