目次
プロジェクトについて
Figmaカンプをもとに、タスク管理Webサービス「Ravek」のランディングページをコーディングした自主制作です。PC幅1440px・SP幅375pxを基準に、フォント・余白・改行・画像サイズまで照合し、ピクセルパーフェクトを意識して仕上げました。
実装と品質のポイント
- FLOCSS・BEMを採用した保守しやすいSCSS構成、SP-firstでレスポンシブ対応
- 英字・日本語それぞれのフォント・行間・文字幅を調整し、改行位置までデバイス別に制御
- ドロワーメニュー、アコーディオン、CTAのホバー表現をJavaScriptとCSSで実装
- 共通スタイルの影響範囲を考慮した切り分けと、修正ごとのPC・SP回帰確認で品質を維持
- ページ全体の高さをカンプと一致させ（PC 8,175px）、320〜1920pxの8画面幅で横はみ出しがないことを確認