青山会計事務所 コーポレートサイト
- URL
- https://aoyamakaikei.too-code.com/
- サイト概要
- 税理士事務所のコーポレートサイトです。「信頼感」と「親しみやすさ」を両立させるデザインを、サービス内容・事務所の強み・代表挨拶や理念がひと目で伝わる構成でコーディングしました。
- 担当範囲
- コーディング / WordPress / アニメーション実装
- 使用技術
- HTML / CSS（Sass） / JavaScript （Swiper.js , GSAP） / WordPress（オリジナルテーマ , ACF） / PHP / Figma
- 実装内容
-
・TOP＋下層9ページ
・「お知らせ」「お客様の声」はカスタム投稿タイプで構築し、一覧・詳細・カテゴリー絞り込みを実装
・サービス内容・事務所の強みページはACFの固定フィールドで、公開後も文言・画像を差し替え可能に
・IntersectionObserverでスクロール位置に応じてヘッダーの配色（黒文字⇔白文字）を自動反転する実装
・GSAP（ScrollTrigger）による、士業サイトにふさわしい上品なスクロールフェードイン、ページ遷移時のカーテン演出
・prefers-reduced-motionを検知し、動きを抑えたい閲覧環境ではアニメーションを一括オフにする設計
・Swiper.jsを使用したTOPページのサービス紹介スライダー
・ 320px〜のリキッドレイアウトによるフルレスポンシブ対応 - 工夫した点
-
①スクロール連動でヘッダーの配色を自動反転
セクションごとに背景色が変わるデザインに対し、IntersectionObserverで「今どのセクションが見えているか」を検知し、ヘッダーの文字色を黒⇔白で自動切り替えする実装をしました。固定ヘッダーが常にどの背景でも視認性を保てるよう、見た目の完成度にこだわった部分です。
②アニメーションを「一元管理」できる設計にした
GSAPの演出を9本のJSファイルに機能単位で分割しつつ、ScrollTriggerの発火条件（start・toggleActions）は共通デフォルトとして1箇所にまとめ、サイト全体で動きのトーンが揃うようにしました。あわせてprefers-reduced-motionを判定し、動きを抑えたい閲覧者には演出を出さない設計にすることで、見た目の華やかさとアクセシビリティを両立させています。
③「更新しやすさ」と「回遊させやすさ」を両立する情報設計
お知らせ・お客様の声は更新頻度が高いためカスタム投稿タイプ、サービス内容・強みは項目数が固定のためACFの固定フィールドと、コンテンツの性質で管理方法を使い分けました。また下層ページの各セクションに固定IDを振り、TOPページやグローバルナビから該当箇所へアンカーリンクで直接遷移できるようにし、固定ヘッダーで見出しが隠れないようscroll-margin-topで調整しています。
④ 複数要素を1つのタイムラインで組む、FVの多層演出
TOPのFVは、見出しの文字が1文字ずつ浮かび上がりながら画面中央から本来の定位置へ戻る動き、画像がカーテンのように左から開くリビール、サブタイトルの行ごとのstagger表示、装飾の跳ねるような出現、スクロール誘導矢印のバウンドループ——これらを1本のGSAPタイムラインの上で秒数までずらしながら重ね合わせ、「バラバラに動く」のではなく「ひとつの流れとして着地する」ファーストビューに仕上げました。
このカーテンリビールやパララックスは他ページの画像にも共通モチーフとして再利用し、静的になりがちな士業サイトに、ページをまたいだ統一感と控えめな奥行きを持たせています。 - 制作期間
- 25日
- 値段
- ￥110,000（目安）
