で使用可能 HVACool
作者: AutomatticHVACool は住宅用 HVAC 事業者のために設計された専用テーマです。こうしたサイトを興味本位で訪れる人はほとんどいません。暑さや寒さ、水漏れなどのトラブルを前に、訪問者はすぐに対応したいのです。このテーマはビジネスに不可欠な情報を常に表示し、ナビゲーションをすぐ使える状態に保ち、余計な要素を排除します。
固定カラムで重要な情報を最優先
3カラム構成で、左サイドバーにはビジネスの顔となるロゴやナビゲーション、CTA を固定表示し、右側には連絡先情報を常時表示します。電話番号、予約リンク、住所など、緊急時に必要な情報をページのどこにいても確認できます。中央のカラム (幅の 60%) には、見出しやサービスの説明、ニュースなどのコンテンツを配置しています。
角丸デザインと全体を引き締めるアクセントカラー
カラーパレットは意図的な緊張感で成り立っています。ほぼ黒に近い背景とオフホワイトのコンテンツ面に、ロゴブロックやメイン CTA、アイコンバッジ、ホバー時など、視線を集めたい要素にだけ鮮烈なアシッドグリーンを効かせています。テーマには 4つのパレットバリエーションが付属し、アクセントカラーを暖色系、寒色系、ニュートラル系のベーストーンと組み合わせることで、サイトの印象を変えられます。
タイポグラフィは Google Sans ファミリーで統一しています。見出しには Display (72pt)、本文には Text (24pt) を使用し、すべてのウェイトと用途で単一のフォントファミリーを使うことで、一貫性とパフォーマンスを両立しています。
目的のあるモーションと、クリーンな技術基盤
軽量なアニメーションとホバーエフェクトが、コンテンツを邪魔することなく��性を加えます。こうしたディテールは、適切なタイミングで操作できることを伝え、テーマの「すぐに行動できる」印象をいっそう強めます。カスタムボタンスタイルは theme.json に登録され、functions.php を通じて公開されるため、サイトオーナーがカスタム CSS を書かなくても、ネイティブのボタン UI からそのまま利用できます。CSS 全体が簡潔に整理され、コメントも充実しています。
ヒーローセクションをアニメーション化
HVACool のフロントページでは、短いアニメーションシーケンスで訪問者を迎えます。技術者のアバターがポップインし、吹き出し内のテキストが自動でタイプ表示され、最後に CTA ボタンがフェードインして締めくくります。これらのアニメーションは自分のブロックにも再利用でき、コードは不要です。
仕組み
アニメーションは 3つの CSS クラスで制御されます。フロントページの任意のブロックに、「ブロック設定 → 高度な設定 → 追加 CSS クラス名」から追加してください:
anim-avatar— 遊び心のあるスケールとバウンスのポップ。技術者の画像に使用していますが、どの画像ブロックにも使えます。anim-pill— 特徴的なテキストリビールエフェクト。ブロック内の最初のテキスト要素が段落なら、1文字ずつタイプ表示されます。見出しの場合は、スライドアップしながらフェードインします。複数行の見出しをタイプ表示にすると、先に全体の高さが確保されて空の吹き出しが一瞬表示されてしまうためです。anim-buttons— CTA 行のための控えめなフェードアップ。吹き出しのアニメーション完了後に表示されるようタイミングが設定されています。
シーケンスは常に次の順序で実行されます: アバターのポップ → 各 anim-pill ブロックがページ上の順番に 1つずつアニメーション → ボタンのフェードイン。セクションが画面内に入ると開始します。
知っておきたいこと
- フロントページ限定。このシーケンスを動かすスクリプトは、フロントページでのみ読み込まれます。他のページのブロックにクラスを追加してもアニメーションは動作しません——サイト全体の速度を維持するための意図的な設計です。(開発者は
functions.php内のis_front_page()ガードを解除することで変更できます。) - アクセシビリティ対応済み。システム設定で「アニメーションを減らす」相当を有効にしている訪問者には、アニメーションなしでコンテンツが即座に表示されます。JavaScript を無効にしている訪問者にも、すべてのコンテンツが表示されます。コンテンツが非表示のまま残ることはありません。
- 自由に組み合わせ可能。3つのクラスのうち 1つ、2つ、またはすべてを使用できます。複数の
anim-pillブロックも問題ありません。ページ上に表示される順番でアニメーションが実行されます。