支給されたデザインデータをもとに、コーポレートサイト全体（複数ページ）のコーディングを担当 しました。 トップページだけでなく、会社概要・事業内容・事例紹介・お問い合わせページなど、 各ページの意図を踏まえたレイアウト構築と UI の統一を意識し、実務に近いワークフローで制作しています。 自然エネルギーを扱う企業らしい清潔感・信頼感を損なわないよう、 デザインの再現性だけでなく、可読性やスムーズな動線設計にも配慮しながら実装しました。 担当範囲 • HTML / SCSS / JavaScript による全ページのコーディング • PC／タブレット／スマホのレスポンシブ対応 • ナビゲーションの実装・全ページ共通パーツ化 • 画像書き出し・最適化 • ページ間のUIルールの統一（余白・タイポグラフィ・ボタン） 技術ポイント 1. 複数ページを前提としたHTML構造設計 • ヘッダー・フッター・CTA などをコンポーネント化 • BEM をベースにした読みやすい命名規則 • 各ページに応じたセクション設計で、情報の整理と視線誘導を意識 • 共通レイアウトとページ固有レイアウトの使い分けを徹底 2. SCSS（設計） • @use 管理による変数・ミックスイン統合 • レスポンシブは @include mq(pc) @include mq(tab) @include mq(sp) で統一 • clamp を用いた流動的なフォント・余白設定 • ページごとに SCSS ファイルを分割し、保守性を高めた構成 3. JavaScript（軽量アニメーション・UI処理） • スクロールアニメーション（フェードインなど） • SPメニューの開閉処理 • ページ読み込み時の軽いトランジション（必要箇所のみ実装） 4. レスポンシブ実装 • PC／タブレット／スマホの3段階でレイアウトを最適化 • 画像比率が崩れないよう object-fit / background-size を調整 • 複数ページでも統一されたレイアウトになるよう全体のリズムを意識 5. 画像・アセット最適化 • デザインデータから適切に書き出し • 必要に応じて WebP や軽量化 • PC/SPで別画像を用意して読み込みを最適化 制作で意識したこと • 支給デザインの意図を正確に再現すること • 複数ページ間での UI の一貫性 • 実際の企業サイトを想定した読みやすさと導線設計 • 見た目だけでなく、コードの美しさ・保守性にも配慮