男性用医療クリニックLP
- クライアント
- 男性用医療クリニック様
- 作業内容
-
- LP全量コーディング（4P）
- SP特化レイアウト設計
- フォームバリデーション実装
- スクロール連動CTA制御
- 計測タグ
- デザインカンプ
- Adobe Illustrator（支給）
- 制作期間
- 3日（トップ1P＋お問い合わせフォーム・確認フォーム・完了フォーム）
- ツール
- Claude / Cursor / Figma / GitHub
- 使用言語
-
- HTML
- CSS
- SCSS
- JavaScript
- URL
- 非公開（センシティブ商材のため）
- 制作ポイント
-
Point 01 縦型モバイルファースト設計
縦型モバイルファーストで設計・実装を行い、スマホでの視認性や導線を重視したコーディングを行っております。
Point 02 保守性を意識したSCSS設計
カラー・フォント・ウェイトをSCSSの変数として一元管理。変数を変数で参照する構造にすることで、デザイン変更時の修正コストを最小化しました。
コード抜粋（SCSS）
$color-main: #CA7F13; $color-accent-1: #54372D; $color-accent-2: #949E33; $color-text: #333333; $color-bg-1: #F9F8F6; $color-bg-2: #D4CEBE; $font-en: $font-serif; $font-script: "Parisienne", cursive; $font-heading: $font-en; $font-brand: $font-script; $weight-regular: 300; $weight-normal: 400; $weight-medium: 500; $weight-bold: 700;
