ホーム > 制作実績一覧 > WordPress > クラシックテーマ > HG:ReVIBE 様

HG:ReVIBE 様

hg-revibe.co.jp/

ID:

PASS:

担当領域

コーディング

制作期間

15時間（納品まで）

制作時期

2026年5月

使用言語等

HTML, css(Sass), PFP, JavaScript, GSAP

料金目安

デザイン協力

制作のポイント

不動産・資産コンサルティング企業「HG:Re-VIBE」のコーポレートサイトを、Figma カンプをもとに WordPress オリジナルテーマとして実装しました。シングルページ構成で、イントロアニメーションやスクロール連動の演出を活かしつつ、管理画面から文言を更新できる運用を意識して組み立てています。

CSS設計の方針

  • 命名・設計: BEM ベースのクラス設計（l- / c- / p- / u- 接頭辞）を前提に、FLOCSS 的なレイヤーで Sass を管理
  • ファイル構成: src/sass/style.scss をエントリに、foundation / layout / component / project / utility を @use で集約
  • 変数管理: src/sass/global/_variables.scss でカラー、フォント、ブレークポイント、z-index（layer）を一元管理
  • レスポンシブ対応: ブレークポイントマップ（SP / TAB / PC）を利用し、カンプの SP・PC 差分を一貫した構造で実装
  • 保守性: セクション単位（fv, whoweare, realestate, company, brand など）で Project 層を分割し、改修時の影響範囲を限定

JavaScriptで実装した機能

  • ファーストビュー・イントロアニメーション: GSAP タイムラインでタイトル表示 → beat 画像のマスク演出 → 固定ナビ出現 → 背景のモノクロからカラーへの遷移 → メインタイトルのスライドインまでを連鎖制御
  • FV 固定ナビの色切替: スクロール位置に応じて、濃い背景セクション（Brand / Real Estate / Asset Consulting）上ではナビに --bk 修飾クラスを付与し、可読性を確保
  • スムーススクロール: 固定ヘッダー高さと余白オフセットを考慮したページ内リンク遷移に対応
  • パララックス: GSAP ScrollTrigger と data-y / data-scrub 属性で、背景・写真のスクロール連動をセクションごとに調整可能な仕組みとして実装
  • アクセシビリティ配慮: prefers-reduced-motion: reduce 時はイントロ・パララックスをスキップし、最終表示状態へ即時遷移

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

  • テンプレート設計: front-page.php を中心に、各セクションを php/parts-*.php で分割し、構造と表示責務を分離
  • コンテンツ管理: Secure Custom Fields（ACF 互換）のグループフィールドと連携する re_vibe_group_field() ヘルパーで、文言・画像を管理画面から更新可能に
  • セキュリティ: テンプレート出力は esc_url / wp_kses_post 等でエスケープし、未設定時はカンプ準拠の既定値をフォールバック表示
  • アセット管理: wp_enqueue_style / wp_enqueue_script で CSS・GSAP・メイン JS を登録し、filemtime によるキャッシュバスティングに対応
  • ビルド連携: src/sass と src/img をソースとし、npm ビルドで Re-VIBE/assets/ へ CSS・WebP 画像を出力する二層構成

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

1. デザイン再現とスタイル管理の拡張性

  • Figma カンプのタイポグラフィ・配色・余白を CSS カスタムプロパティと Sass 変数で共通化し、セクション横断でのデザイン変更に耐える構成にした
  • パララックス用ユーティリティ（js-parallax / js-parallax-bg）と --js-parallax-extra を組み合わせ、画像のはみ出し量を JS の移動量と CSS で連動させ、演出とレイアウト崩れの両立を図った

2. イントロ演出の実装品質

  • FV アニメーションは定数（所要時間・待機・開始秒）をファイル先頭に集約し、タイミング調整をしやすい構造にした
  • beat 画像の clip-path マスク表示・消去・差し替えをタイムライン上で連鎖計算（resolveFvTiming）し、後半ステップの開始秒が自動でずれないよう制御
  • イントロ完了後は DOM 状態（aria-hidden、ナビクラス、表示切替）を明示的に確定し、以降のスクロール挙動（ScrollTrigger の refresh 含む）と整合させた

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

  • フロントページを Who we are / Services（不動産・資産コンサル）/ Company / Brand の意味単位で分割し、クライアント側で部分的な文言更新が可能
  • SCF ヘルパーは結合メタキー・グループ配列・入れ子グループの複数パターンに対応し、フィールド定義の揺れがあっても表示が途切れにくい取得ロジックとした
  • 極小幅端末向けに viewport.js で最小幅 400px を担保し、カンプ想定のレイアウトが極端に崩れないよう配慮
制作実績一覧へ戻る