LP
ランディングページ
模擬制作
モバイルファーストで設計し、
視認性と操作性を意識したLPを実装。
架空のフラワーショップを想定したランディングページの模擬制作。
既存のデザインをもとに、ポートフォリオ用として、実案件を想定したコーディングを行いました。
モバイルファーストで設計し、視認性と操作性を重視したレイアウトを意識しています。また、サイトの世界観に合わせ、スクロールアニメーションを用いて自然な動きでコンテンツが伝わるよう実装しました。
担当範囲Scope
- HTML / CSS（Sass）によるコーディング全般
- レスポンシブ対応（モバイルファースト設計）
- スクロールアニメーションの実装
- XDデザインデータからの書き出し・リサイズ対応
※本案件はデザイン学習用の模擬制作です。
デザインは akane（@omsss22） 様の提供素材を使用しています。
使用技術Tech
工夫・実装ポイント
デザインの世界観を損なわない実装
配色や余白、フォントの印象を崩さないよう、
デザインカンプの再現性を意識して実装しました。
細かな余白や配置も調整し、完成度を高めています。
スクロールアニメーションを実装
スクロール時の表示タイミングやアニメーションの強さを調整し、
コンテンツが自然な流れで目に入るよう実装しました。
Sass設計により保守性の高いCSS構造を構築
変数・mixinを活用し、色・フォント・ブレイクポイントを管理。
修正や追加対応がしやすい構造を意識して設計しました。