支給されたデザインデータをもとに、美容室のサイトを構築しました。 女性ユーザーを想定した やわらかく清潔感のあるブランドイメージを損なわないよう、
タイポグラフィや余白設計に配慮しながら、
信頼感のある情報設計と スムーズな導線を意識して制作しています。
また、予約誘導を最優先としたボタン配置や CTA の統一によって、
コンバージョンにつながる UI を実装しました。 ■担当範囲 * HTML / SCSS / JavaScript によるフロントエンド実装 * PC／タブレット／スマホのレスポンシブ対応 * ナビゲーション・フッターなどの共通パーツ化 * アイコンや画像の書き出し・最適化 ■技術ポイント 1. コード設計と保守性向上 * ヘッダー／フッターをテンプレート分割し更新性を向上 * BEM 記法による読みやすい命名と階層整理 * セクションごとに情報を整理した HTML 構造 2. SCSS 設計 * 変数・mixin で統一感あるスタイル管理 * clamp 関数を用いた流動的なフォント・余白 * ページ単位で SCSSを分割し保守性を確保 3. UI アニメーション * スクロールに応じてフェードインする自然なアニメーション * スマートフォンメニューの開閉処理 4. レスポンシブ最適化 * 各デバイスでの視認性を担保 * object-fit / background-size による画像の比率維持 * スマホ利用者が多い業種のため SP導線を最適化 5. 画像アセット最適化 * 読み込み負荷を抑える設計 ■制作で意識したこと * ブランドの世界観を損なわずに予約導線へつなぐ UI設計 * 見やすく・迷わない情報階層 * コードの見通しと再利用性