— Background —
制作の背景
Web 制作スクールの卒業課題として、講師から配布されたデザインカンプ（架空のアプリ「OHA!」のサービス LP）をもとに、自分一人で 0 からコーディングする実習です。デザインそのものは私の制作物ではありませんが、カンプを正確に読み解き、HTML 構造・CSS 設計・JS インタラクションをすべて自分で組み立てることが課題でした。
「現場に出る前に、AI に頼りきることなく、自力でどこまで再現できるか」を確かめるべく、全て手作業で完走しました。詰まったら、どこがおかしいのか自分で調べて、地道に解決しています。
— Approach —
こだわったポイント
- 1px 単位でデザインカンプと完全一致させることを目標に、余白・行間・フォントサイズ・色を全てカンプの値どおりに実装。ブラウザの開発者ツールでカンプ画像と重ねて差分をチェックし、ズレを 0 に近づけました
- モーダルウインドウ（お問い合わせ完了表示）、Swiper を使ったスライダー（導入実績）、ハンバーガーメニュー（モバイル時のドロワー開閉）、アコーディオン（FAQ の開閉）など、複数のインタラクションを 1 つずつ自分で実装
- スクロール連動のフェードインアニメーションを Vanilla JavaScript の IntersectionObserver で実装。画面に入った瞬間にふわっと立ち上がるアニメーションを、ライブラリに頼らず自前で書きました
- Sass（SCSS 記法）で BEM ベースの命名規則を徹底し、コンポーネント単位でスタイルを切り分け。後から見返しても保守しやすい構造を意識しました
- レスポンシブ対応は SP / TB / PC の 3 段階。ブレイクポイントごとにレイアウトを切り替え、全てのサイズで崩れがないことを確認
- そして、自分の手で 1 行ずつ書いたこと。ただのコピペではなく「なぜそう書くか」を理解しながら積み上げた一本です
— Scope —
担当範囲
- HTML マークアップ（セマンティック構造・アクセシビリティ配慮）
- Sass（SCSS）でのスタイル設計・BEM 命名
- Vanilla JavaScript でのインタラクション実装
（モーダル・ハンバーガーメニュー・アコーディオン・スクロールアニメーション） - Swiper.js を使ったスライダー実装・カスタマイズ
- レスポンシブ実装（SP / TB / PC の 3 段階）
- 1px 単位でのデザインカンプ再現・差分修正