https://roku.v2008.coreserver.jp/wandeli/ ユーザー名 admin パスワード wandeli_lp Webデザイナーの「にきさん」と一緒に行った自主制作です。 ↓にきさんのポートフォリオをこちら↓ https://www.foriio.com/twotree056 コーダーとしてのこだわりポイント 1. FVボタンの座標をFigmaから実寸取得しvw/%変換 FV画像上に重なるボタンの位置・幅をpx固定ではなく、Figmaの実寸値をもとに画面幅比率（%）で算出。どの画面幅でもボタンが画像デザインに追従するよう実装しました。 2. 3段階のブレイクポイントでボタンテキストを出し分け PC（1244px〜）、中間（768〜1243px）、SP（〜767px）の3段階でボタンのテキスト内容を切り替え。文字数の違いによる折り返しを防ぎながら、各画面サイズで最適なコピーを表示しています。 3. clamp()によるフルードなフォントサイズ 固定pxではなくclamp(最小値, vw値, 最大値)を使い、画面幅に応じてボタンの文字サイズが滑らかに変化。途中で折り返しが発生しないよう、表示範囲を計算してチューニングしています。 4. SPのみ動作するスクロール固定CTA（JS実装） FVのアンカー要素を基準にスクロール量を監視し、FVを通り過ぎたタイミングで画面下部にCTAボタンを固定。CTAセクションと重なる際は自動非表示にする制御もJavaScriptで実装しています。PCでは固定しないよう、ビューポート幅で分岐させています。 5. min-heightとSCSSのclamp()でセクション高さを柔軟に管理 各セクションの高さをpx固定にせず、コンテンツ量に応じて伸縮しながらもデザインカンプの見た目を維持できるよう調整しています。 6. CSSグリッドのminmax(0, 1fr)でオーバーフロー防止 統計カードのグリッドレイアウトで、1frのみだとセル内コンテンツの最小幅に引っ張られて崩れる問題をminmax(0, 1fr)で解決。ブラウザのグリッド仕様を踏まえた実装です。 7. SCSSのBEM設計と変数・ミックスインによるスケーラブルな管理 カラー・最大幅・ガターなどをSCSS変数で一元管理。ブレイクポイントはミックスインで統一し、修正時の影響範囲を最小限に抑える構造にしています。