ハイアーグラウンドグループの投資会社「株式会社ストーンヘンジ」のコーポレートサイトとして、Figmaカンプをもとに静的コーディングからWordPressテーマ化まで一貫して実装しました。ブランドの格調と先進性を両立するビジュアル表現を軸に、運用担当者が管理画面から各セクションの文言を更新できる構成を意識しています。
CSS設計の方針
- 命名・設計: FLOCSS をベースに、BEM とレイヤープレフィックス（
l-/c-/p-/u-）を組み合わせたクラス設計を採用 - ファイル構成:
src/sass/style.scssをエントリに、foundation / layout / component / project / utility を@useで集約。トークン類はglobal/に分離 - 変数管理:
global/_variables.scssでカラー、フォント、ブレークポイント、z-index（layer）を一元管理 - ネスト制限: Element / Modifier はトップレベルで定義し、詳細度の肥大化と改修時の影響範囲を抑制
- レスポンシブ対応: ブレークポイントマップと
picture要素を併用し、SP/PC での画像差し替えとレイアウト調整を統一的に管理 - ビルド: npm（Sass）で
src/sass/からStonehenge/assets/css/style.cssを生成し、テーマ側ではビルド成果物を読み込む二層構成
JavaScriptで実装した機能
- ヒーローアニメーション: GSAP タイムラインで、ブラー演出 → リード文のマスク消去 → タイトル1行目フェードイン → 2行目タイプライター → 最終リード表示、という段階的な演出を実装
- パララックス: ScrollTrigger によるスクロール連動の視差効果。
data-y/data-y-sp/data-scrub属性で要素ごとに移動量を調整可能 - ヒーローとパララックスの連携: トップビジュアルのパララックスはヒーローアニメーション完了後に有効化し、transform の競合による表示ズレを防止
- スムーススクロール: 固定ヘッダー高さを動的に取得したオフセット付きスクロールに対応（Vanilla JS、jQuery 非依存）
- アクセシビリティ配慮:
prefers-reduced-motion: reduce時はアニメーションを省略し、最終表示状態へ即時遷移 - ビューポート制御: 最小幅 375px 未満の端末向けに
viewport.jsでスケーリングを調整
WordPressテーマ実装としての工夫
- テンプレート設計:
front-page.phpを中心に、セクション単位でphp/parts-*.phpに分割し、構造の見通しと部分更新をしやすくした - カスタムフィールド連携: Secure Custom Fields（SCF）のグループフィールドから各セクションの文言を取得。
stonehenge_group_field()で複数のメタキー形式に対応し、フィールド名の揺れを吸収 - セキュリティ:
declare(strict_types=1)、出力時のesc_url/esc_html/wp_kses_postによるエスケープ、管理バーのフロント非表示など、WordPress コーディング規約に沿った実装 - アセット管理:
wp_enqueue_style/wp_enqueue_scriptで CSS・JS を登録。filemtimeによるキャッシュバストと、メインスクリプトのtype="module"付与をフィルターで制御 - 運用設計: フロントページの About us / Solutions / Overview / フッター文言を管理画面から更新可能にし、デザインを崩さずにコンテンツ差し替えができる構成
このコーディングで特に工夫した点
1. デザイン再現と表現力の両立
- Figma カンプのタイポグラフィ・余白・配色を Sass 変数とセクション単位の Project 層で再現
- Solutions カードや会社名セクションに背景パララックスを適用し、静的なコーポレートサイトに奥行きと動きを付与
- 画像は WebP 変換スクリプト（
npm run img:webp）で最適化し、表示品質とパフォーマンスのバランスを確保
2. アニメーション実装の品質
- ヒーロー演出はタイムライン上の待機・段階表示を定数で管理し、調整と保守をしやすい構造に整理
- アニメーション完了時に
clearPropsの適用範囲を制御し、パララックス用 transform との干渉を回避 aria-hiddenの切り替えで、演出中と完了後の読み上げ対象を明示的に分離
3. チーム開発・引き継ぎを見据えた設計
docs/coding-conventions.md/wordpress-conventions.mdに沿った命名・ディレクトリ構成で、共同開発時の認知負荷を低減- ソース（
src/）とテーマ本体（Stonehenge/）を分離し、Sass ビルドと WordPress 配置を役割ごとに整理 - セクション・コンポーネント単位のファイル分割により、今後のセクション追加や文言改修時の影響範囲を限定