かさね会計事務所
試算表が組み上がるFVと、表を押すと月額が出る料金シミュレーター
自主制作サイトを開くdemo-zeirishi.tsukuruneko-portfolio.workers.dev
01Overview
制作概要
福岡市中央区の架空の税理士事務所を想定した、5ページのコーポレートサイト（＋404）です。主役は写真ではなく数字と言葉で、藍と白を基調に、帳簿の罫線・合計欄の二重線・印を部品にしました。事務所名・人名・料金・数値・連絡先はすべて架空で、全ページの上部に明記しています。
- 制作区分
- 自主制作デモ（架空の事務所。実在しません）
- 業種
- 税理士事務所
- サイト種別
- コーポレートサイト（5ページ）
- 公開
- 2026年10月（検索エンジンに載せない営業用デモとして公開）
02Problem
課題
税理士を選ぶときの「結局いくらかかるのか」「毎月なにを相談できるのか」を、問い合わせの前に解く
- 制作目的
- 無料相談の予約へ進ませる。顧問料の目安と、毎月どんな相談ができるかを、問い合わせの前に確かめられるようにする。士業の事務所への営業用サンプルとして制作した。
- 読み手
- 創業から年商5億円規模の会社の経営者と、法人成りを考える個人事業主。「税理士を替えたい」「数字の相談相手がほしい」人（サイトの想定読者）。
03Decision
設計判断
毎月の面談で、試算表を前に経営者と数字を見る事務所であること。顧問料 16,500円〜（税込・サンプル）、freee・マネーフォワード対応を最初の画面で示し、断定的な節税や税務調査の保証は書かない。
料金の「含む／別」を、すべてのページで一致させた
料金の明朗さを売りにするサイトなので、業務一覧の「含／別」、シミュレーター、料金ページの注記が食い違わないことを条件にしました。レビューで、業務一覧の決算・申告だけが「含」になっている食い違いを指摘され、月額の4か月分の別料金に揃えています。
断定と、実在する団体の名前を避けた
「必ず節税」「税務調査ゼロ」のような断定は書かず、料金はすべて「〜（税込・サンプル）」と表記しました。登録番号は架空と明記し、実在する税理士会の名前は所属に使っていません。全ページに架空の帯を置き、検索エンジンにも載せない設定にしています。
04Implementation
実装
月次試算表が、罫線・数字・折れ線・押印の順に組み上がる
罫線が引かれ、数字が桁ごとに転がって並び、12か月の折れ線が描かれ、気になる数字に朱の丸とメモが付き、最後に「月次確認」の角印が押されます（約3.3秒）。スマホでは試算表が画面に入った時点で再生を始めます。見出しは最初から表示しているので、動きが無くても全部読めます。
表のマスを押すと、月額と年間の目安が出る料金シミュレーター
年商5段階と記帳の任せ方（自社入力／記帳代行）の表から選ぶと、月額顧問料・決算申告料・年間の目安が桁ごとに転がって変わります。スマホでは表の下端に月額の帯が貼りつき、押した結果を見失いません。
05Verification
検証
数字の見せ方が誤読を生まないかまで確かめた
金額の桁数が変わる瞬間に「0,000,000円」と読める表示が一瞬出る、売上高と営業利益の折れ線が同じ枠で重なり利益が売上を上回って見える、という指摘を受けました。桁の枠を固定して作り直さないようにし、折れ線は売上高と営業利益の2段に分けています。
06Result
成果
自主制作のため事業成果はありません。数値は、公開中のデモのトップページを Lighthouse（モバイル）で測ったものです（2026-10-21）。
モバイル実測（Lighthouse・同一条件）
- Performance
- 100
- LCP
- 1.5秒
- CLS
- 0
07Screens
Desktop / Mobile
枠の中を縦にスクロールすると、ページ全体を確認できます
08Scope
担当範囲・使用技術
担当範囲
- 要件定義
- 構成設計
- コピーライティング
- アートディレクション
- モーション設計
- 料金シミュレーターの設計
- AI画像生成（写真・背景）
- 実装
- レスポンシブ対応
- 構造化データ
- 独立レビューと修正
- 公開
使用技術
- Astro（静的）
- SVG＋CSSアニメーション（ライブラリ不使用）
- IntersectionObserver による再生の制御
- 見出し・数字フォントのサブセット化（Noto Serif JP）
- AI画像生成 + WebP最適化
- Cloudflare Workers