スクールの卒業課題として制作し、基準を満たして合格の判定をいただきました。

---

CSS設計の方針

• 命名・設計: BEMベースのクラス設計を前提に、Sassを foundation / component / project / utility に分割して管理
• ファイル構成: assets/sass/style.scss をエントリに、責務ごとのパーシャルを @use で集約
• 変数管理: assets/sass/global/_variables.scss でカラー、フォント、ブレークポイント、z-index（layer）を一元管理
• レスポンシブ対応: ブレークポイントマップを利用し、SP/PCでの表示差分を管理しやすい構造に統一
• 保守性: セクション単位（例: frontpage, service, contact）でProject層を分割し、改修時の影響範囲を限定

JavaScriptで実装した機能

• ドロワーメニュー: ハンバーガー開閉とナビゲーション表示を連動し、ページ内リンク押下時のクローズ処理も実装
• スムーススクロール: 固定ヘッダー高さを考慮したオフセット付きスクロールに対応
• メインビジュアルスライダー: Swiperで自動再生・ループ・中央寄せ表示を実装
• FAQアコーディオン: details 要素にGSAPアニメーションを組み合わせ、開閉の視認性と操作性を向上

WordPressテーマ実装としての工夫

• テンプレート設計: front-page.php を中心に、各ページテンプレート・パーツで構造を分離
• 投稿取得: WP_Query で case カスタム投稿や通常投稿（news）を必要件数だけ取得して表示
• タクソノミー連携: 導入事例カード内でターム情報を整理して出力し、一覧可読性を担保

このコーディングで特に工夫した点

1. スタイル管理の拡張性

• Foundation層（リセット・ベース）とProject/Component層を分離し、デザイン変更時の差し替えをしやすくした
• 変数とレイヤー定義を先に整備することで、配色変更や重なり順調整を局所修正で対応できるようにした

2. UI挙動の実装品質

• スムーススクロールでヘッダー高さを動的に取得し、リンク遷移時の見切れを防止
• FAQは open 属性制御とアニメーション完了タイミングを明示的に分離し、開閉の不整合を回避

3. 更新しやすい運用設計

• フロントページの各セクションを意味単位で分け、文言・画像・導線を部分的に更新しやすくした