Client Brief
山
山田 健太郎代表税理士
山田税理士事務所
件名: 新規制作のご依頼
開業25年の税理士事務所。顧問先500社超だが、Webからの新規相談が少ない。料金体系の透明性とFAQで不安を解消したい。
ご要望
- 1信頼感のある落ち着いたデザイン
- 2料金プランの明確な比較表示
- 3よくある質問のFAQ
- 4代表のプロフィール
予算
¥250,000
納期
1ヶ月
種別
新規制作
クライアントの人柄
誠実、知的、数字に厳密、クライアントファースト
避けてほしいこと
カジュアルすぎるトーン派手なアニメーション若者向けの軽い印象
成功指標
Web経由の新規相談を月10件以上に増やす
追加メモ
"丸の内の会計事務所のような品格が欲しい。紺と金で信頼感を。"
Preview
/demo/C03-yamada-tax/index.html
Learning Points
1
FAQアコーディオン
2
料金表テーブル
3
信頼感カラー
4
プロフィール
How to Build
01
Step 1: FAQと料金設計
40分FAQ5項目と3プランの料金表の内容・構造を設計。
成果物: コンテンツ設計書
02
Step 2: HTML構造
90分ヒーロー→About→サービス→FAQ→料金表→アクセス→フッター。details/summaryのFAQ。
成果物: 完全なHTML
03
Step 3: 紺金配色＋エディトリアル
90分IBM Plex Serif見出し、紺×金の信頼配色。薄いborderで上品に。
成果物: ビジュアルベース
04
Step 4: FAQ＋料金表
90分details/summaryスタイリング、3プラン比較テーブル、おすすめプラン強調。
成果物: ほぼ完成形
05
Step 5: レスポンシブ＋仕上げ
60分料金表のスマホ対応、FAQの開閉アニメーション。
成果物: 完成版
Source Code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>山田税理士事務所 | 確かな実績と信頼のパートナー</title>
<meta name="description" content="山田税理士事務所は、法人・個人の税務申告、経営コンサルティング、相続対策を専門とする税理士事務所です。">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ===== Header ===== -->
<header class="header">
<div class="header__inner">
<div class="header__logo">
<span class="header__logo-mark">Y</span>
<div class="header__logo-text">
<span class="header__logo-name">山田税理士事務所</span>
<span class="header__logo-sub">YAMADA TAX ACCOUNTANT OFFICE</span>
</div>
</div>
<button class="header__menu-btn" aria-label="メニューを開く" aria-expanded="false">
<span></span><span></span><span></span>
</button>
<nav class="header__nav" aria-label="メインナビゲーション">
<ul class="header__nav-list">
<li><a href="#about" class="header__nav-link">事務所紹介</a></li>
<li><a href="#services" class="header__nav-link">業務内容</a></li>
<li><a href="#faq" class="header__nav-link">よくある質問</a></li>
<li><a href="#pricing" class="header__nav-link">料金プラン</a></li>
<li><a href="#access" class="header__nav-link">アクセス</a></li>
<li><a href="#contact" class="header__nav-link header__nav-link--cta">無料相談</a></li>
</ul>
</nav>
</div>
</header>
<!-- ===== Hero ===== -->
<section class="hero">
<div class="hero__overlay"></div>
<div class="hero__content">
<p class="hero__label">Since 1998</p>
<h1 class="hero__title">
経営の確信を、<br>
税務の力で。
</h1>
<p class="hero__subtitle">
25年以上の実績と信頼。<br class="hero__br-sp">
法人・個人の税務から経営戦略まで、<br class="hero__br-sp">
あなたのビジネスを支える確かなパートナー。
</p>
<div class="hero__actions">
<a href="#contact" class="hero__btn hero__btn--primary">無料相談を予約する</a>
<a href="#services" class="hero__btn hero__btn--secondary">業務内容を見る</a>
</div>
</div>
</section>
<!-- ===== About ===== -->
<section class="about" id="about">
<div class="about__inner">
<div class="about__header">
<span class="section-label">About</span>
<h2 class="section-title">事務所紹介</h2>
</div>
<div class="about__body">
<div class="about__photo">
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=600&q=80" alt="代表税理士 山田太郎" class="about__img" loading="lazy">
</div>
<div class="about__text">
<h3 class="about__name">
代表税理士<span class="about__name-divider">|</span>山田 太郎
</h3>
<p class="about__credentials">税理士 / 行政書士 / 経営革新等支援機関認定</p>
<p class="about__bio">
1998年の開業以来、中小企業の経営者様に寄り添い、税務・会計のプロフェッショナルとして数多くの課題を解決してまいりました。「数字の向こうにある経営の本質」を見据え、単なる記帳代行や申告業務にとどまらない、真の経営パートナーとしてのサービスをご提供しています。
</p>
<p class="about__bio">
大手監査法人での10年間の経験を経て独立。これまでに累計500社以上の顧問実績を持ち、特に事業承継・相続税対策において高い評価をいただいております。
</p>
<ul class="about__stats">
<li class="about__stat">
<span class="about__stat-number">500+</span>
<span class="about__stat-label">累計顧問実績</span>
</li>
<li class="about__stat">
<span class="about__stat-number">25年</span>
<span class="about__stat-label">業務経験</span>
</li>
<li class="about__stat">
<span class="about__stat-number">98%</span>
<span class="about__stat-label">顧客継続率</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ===== Services ===== -->
<section class="services" id="services">
<div class="services__inner">
<div class="services__header">
<span class="section-label">Services</span>
<h2 class="section-title">業務内容</h2>
<p class="section-desc">お客様の多様なニーズに応える、3つの専門領域。</p>
</div>
<div class="services__grid">
<article class="service-card">
<span class="service-card__number">01</span>
<h3 class="service-card__title">法人・個人税務</h3>
<p class="service-card__desc">
法人税・所得税・消費税の申告書作成から税務調査対応まで。正確な申告と適正な節税対策で、安心の税務をサポートします。
</p>
<ul class="service-card__list">
<li>法人税・所得税申告</li>
<li>消費税申告</li>
<li>税務調査立会い</li>
<li>節税対策コンサルティング</li>
</ul>
</article>
<article class="service-card">
<span class="service-card__number">02</span>
<h3 class="service-card__title">経営コンサルティング</h3>
<p class="service-card__desc">
月次決算の早期化、資金繰り改善、経営計画策定。数字に基づいた意思決定を支援し、企業の持続的成長を実現します。
</p>
<ul class="service-card__list">
<li>月次決算・経営分析</li>
<li>資金繰り・融資支援</li>
<li>経営計画策定</li>
<li>会計ソフト導入支援</li>
</ul>
</article>
<article class="service-card">
<span class="service-card__number">03</span>
<h3 class="service-card__title">相続・事業承継</h3>
<p class="service-card__desc">
相続税の試算・申告から、事業承継計画の策定まで。大切な資産と事業を、次の世代へ確実につなぎます。
</p>
<ul class="service-card__list">
<li>相続税申告・生前対策</li>
<li>事業承継計画</li>
<li>自社株評価</li>
<li>遺言書作成支援</li>
</ul>
</article>
</div>
</div>
</section>
<!-- ===== FAQ ===== -->
<section class="faq" id="faq">
<div class="faq__inner">
<div class="faq__header">
<span class="section-label">FAQ</span>
<h2 class="section-title">よくある質問</h2>
</div>
<div class="faq__list">
<details class="faq__item">
<summary class="faq__question">
初回相談は本当に無料ですか？
</summary>
<div class="faq__answer">
<p>はい、初回のご相談は60分まで完全無料です。現在の税務状況をお伺いし、課題の整理と今後の方向性についてアドバイスさせていただきます。相談後に契約を強制することは一切ございませんので、お気軽にお問い合わせください。</p>
</div>
</details>
<details class="faq__item">
<summary class="faq__question">
顧問契約の途中解約は可能ですか？
</summary>
<div class="faq__answer">
<p>はい、可能です。顧問契約は1ヶ月前のご通知で解約いただけます。違約金等は一切発生しません。ただし、申告時期に近い場合は、申告完了までの期間についてご相談させていただくことがございます。</p>
</div>
</details>
<details class="faq__item">
<summary class="faq__question">
対応エリアはどこまでですか？
</summary>
<div class="faq__answer">
<p>事務所は東京都千代田区にございますが、オンライン対応により全国のお客様にサービスをご提供しております。Zoom・Google Meet等のビデオ会議ツールを活用し、対面と変わらない品質のコミュニケーションを実現しています。もちろん、ご来所いただいてのご面談も歓迎です。</p>
</div>
</details>
<details class="faq__item">
<summary class="faq__question">
記帳代行もお願いできますか？
</summary>
<div class="faq__answer">
<p>はい、記帳代行も承っております。領収書や請求書をお送りいただくだけで、正確な記帳を代行いたします。また、お客様ご自身で記帳される場合も、会計ソフトの導入支援や使い方のレクチャーを行い、効率的な経理体制の構築をサポートします。</p>
</div>
</details>
<details class="faq__item">
<summary class="faq__question">
相続税の相談はいつ頃すればよいですか？
</summary>
<div class="faq__answer">
<p>相続税対策は「早ければ早いほど有利」です。生前贈与や不動産の活用など、時間をかけて計画的に進めることで、大幅な節税が可能になるケースが多くあります。相続が発生してからでは選択肢が限られますので、できれば相続発生の3〜5年前からのご相談をお勧めしています。もちろん、相続発生後のご相談も対応しております。</p>
</div>
</details>
</div>
</div>
</section>
<!-- ===== Pricing ===== -->
<section class="pricing" id="pricing">
<div class="pricing__inner">
<div class="pricing__header">
<span class="section-label">Pricing</span>
<h2 class="section-title">料金プラン</h2>
<p class="section-desc">事業規模やご要望に合わせた、明瞭な料金体系。</p>
</div>
<div class="pricing__grid">
<div class="pricing-card">
<div class="pricing-card__header">
<h3 class="pricing-card__name">ライトプラン</h3>
<p class="pricing-card__target">個人事業主向け</p>
</div>
<div class="pricing-card__price">
<span class="pricing-card__yen">¥</span>
<span class="pricing-card__amount">20,000</span>
<span class="pricing-card__period">/月（税別）</span>
</div>
<ul class="pricing-card__features">
<li class="pricing-card__feature">月次記帳チェック</li>
<li class="pricing-card__feature">確定申告書作成</li>
<li class="pricing-card__feature">メール相談（月3回）</li>
<li class="pricing-card__feature">年末調整サポート</li>
<li class="pricing-card__feature pricing-card__feature--disabled">月次面談</li>
<li class="pricing-card__feature pricing-card__feature--disabled">経営分析レポート</li>
</ul>
<a href="#contact" class="pricing-card__btn">相談する</a>
</div>
<div class="pricing-card pricing-card--recommended">
<span class="pricing-card__badge">おすすめ</span>
<div class="pricing-card__header">
<h3 class="pricing-card__name">スタンダードプラン</h3>
<p class="pricing-card__target">中小法人向け</p>
</div>
<div class="pricing-card__price">
<span class="pricing-card__yen">¥</span>
<span class="pricing-card__amount">50,000</span>
<span class="pricing-card__period">/月（税別）</span>
</div>
<ul class="pricing-card__features">
<li class="pricing-card__feature">月次記帳代行</li>
<li class="pricing-card__feature">法人税申告書作成</li>
<li class="pricing-card__feature">メール・電話相談（無制限）</li>
<li class="pricing-card__feature">年末調整・法定調書</li>
<li class="pricing-card__feature">月次面談（対面/オンライン）</li>
<li class="pricing-card__feature">経営分析レポート</li>
</ul>
<a href="#contact" class="pricing-card__btn pricing-card__btn--primary">相談する</a>
</div>
<div class="pricing-card">
<div class="pricing-card__header">
<h3 class="pricing-card__name">プレミアムプラン</h3>
<p class="pricing-card__target">成長企業向け</p>
</div>
<div class="pricing-card__price">
<span class="pricing-card__yen">¥</span>
<span class="pricing-card__amount">100,000</span>
<span class="pricing-card__period">/月（税別）</span>
</div>
<ul class="pricing-card__features">
<li class="pricing-card__feature">月次記帳代行（全仕訳）</li>
<li class="pricing-card__feature">法人税・消費税申告</li>
<li class="pricing-card__feature">相談無制限（即日対応）</li>
<li class="pricing-card__feature">年末調整・法定調書・償却資産</li>
<li class="pricing-card__feature">月2回面談 + 経営会議参加</li>
<li class="pricing-card__feature">事業計画策定・融資支援</li>
</ul>
<a href="#contact" class="pricing-card__btn">相談する</a>
</div>
</div>
<p class="pricing__note">※ 上記は基本料金です。売上規模・仕訳数により変動する場合がございます。詳しくはお問い合わせください。</p>
</div>
</section>
<!-- ===== Access ===== -->
<section class="access" id="access">
<div class="access__inner">
<div class="access__header">
<span class="section-label">Access</span>
<h2 class="section-title">アクセス</h2>
</div>
<div class="access__body">
<div class="access__info">
<dl class="access__dl">
<div class="access__dl-row">
<dt>事務所名</dt>
<dd>山田税理士事務所</dd>
</div>
<div class="access__dl-row">
<dt>所在地</dt>
<dd>〒100-0005<br>東京都千代田区丸の内1-1-1<br>丸の内トラストタワー15階</dd>
</div>
<div class="access__dl-row">
<dt>電話番号</dt>
<dd><a href="tel:03-1234-5678">03-1234-5678</a></dd>
</div>
<div class="access__dl-row">
<dt>営業時間</dt>
<dd>平日 9:00〜18:00（土日祝休み）</dd>
</div>
<div class="access__dl-row">
<dt>最寄り駅</dt>
<dd>JR東京駅 丸の内南口 徒歩3分<br>地下鉄丸ノ内線 東京駅 直結</dd>
</div>
</dl>
</div>
<div class="access__photo">
<img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=800&q=80" alt="山田税理士事務所 オフィス外観" class="access__img" loading="lazy">
</div>
</div>
</div>
</section>
<!-- ===== Contact CTA ===== -->
<section class="contact" id="contact">
<div class="contact__inner">
<h2 class="contact__title">まずは無料相談から</h2>
<p class="contact__text">
税務・経営に関するお悩みをお聞かせください。<br>
初回60分の無料相談で、最適なソリューションをご提案いたします。
</p>
<div class="contact__actions">
<a href="tel:03-1234-5678" class="contact__btn contact__btn--tel">
<span class="contact__btn-icon">☎</span>
03-1234-5678
</a>
<a href="mailto:info@yamada-tax.example.com" class="contact__btn contact__btn--mail">
メールで相談する
</a>
</div>
<p class="contact__note">受付時間：平日 9:00〜18:00</p>
</div>
</section>
<!-- ===== Footer ===== -->
<footer class="footer">
<div class="footer__inner">
<div class="footer__top">
<div class="footer__brand">
<span class="footer__logo-mark">Y</span>
<div class="footer__logo-text">
<span class="footer__name">山田税理士事務所</span>
<span class="footer__sub">YAMADA TAX ACCOUNTANT OFFICE</span>
</div>
</div>
<nav class="footer__nav" aria-label="フッターナビゲーション">
<ul class="footer__nav-list">
<li><a href="#about">事務所紹介</a></li>
<li><a href="#services">業務内容</a></li>
<li><a href="#faq">よくある質問</a></li>
<li><a href="#pricing">料金プラン</a></li>
<li><a href="#access">アクセス</a></li>
</ul>
</nav>
</div>
<div class="footer__bottom">
<p class="footer__copy">© 2024 山田税理士事務所 All Rights Reserved.</p>
</div>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>
Self Check
0 / 9
Submit
Discord #提出-corporate チャンネルに以下を投稿
- 1デプロイURL
- 2GitHubリポジトリURL
- 3工夫した点3つ
- 4クライアントへの提案メッセージ案