概要
架空の
※ ポートフォリオ用の
制作意図
- クライアント像
- 税理士1名と
スタッフ3名の 小さな 事務所。 開業したばかりの 方の サポートと、 オンライン相談に 力を 入れている。 - 目的
- サイトから
無料相談の 申し込みを 増やす。 - ターゲット
- 開業1〜
3年目の 個人事業主や、 従業員数名の 会社の 経営者 （30〜60代）。 - 課題
- 税理士は
「敷居が 高い」 「料金が わからない」 「何を 頼めるのかわからない」と 思われやすく、 問い合わせを ためらわれていた。 - 解決策
-
- 料金表に
加えて、 5つの 質問に 答えるだけで 月額と 年間の 目安が わかる 「料金シミュレーター」を 用意しました。 選んだ 条件は そのまま 予約フォームに 引き継がれ、 入力の 手間を 減らしています。 - 「開業したばかり」
「法人化を 考えている」など 状況別に、 頼める ことと 料金の 目安を 案内しました。 - 予約フォームは
入力 → 確認 → 完了の 3画面にし、 入力ミスは その 場で 欄の すぐ 下に お知らせします。
- 料金表に
デザイン
- キーワード
- 誠実／わかりやすい
／話しやすい - 配色
- 事務所名の
「凪」から、 落ち着いた 紺と 水面の 色を 基調に しました。 予約ボタンだけを 温かい 「灯り」の 色に して、 次に 押す場所に 迷わないように しています。 - フォント
- 見出しは
Zen Old Mincho （落ち着きと 信頼感）、 本文は Noto Sans JP （スマホでも 読みやすい）。
工夫した点
-
料金シミュレーターは、
スマホでは 質問を 選んでいる間、 画面下に 月額の 目安を 表示し、 選ぶたびに 金額が 変わる 様子が 見えるようにしました。 -
専門用語には
「記帳＝帳簿の 入力」のように 短い 言い換えを 添えています。 -
「〜」の
付く 料金は、 どの 項目から 来ているかが 内訳で わかるようにし、 年間合計の 計算式も 表示しています。
品質への配慮
- スマホ最優先の
レスポンシブ対応。 画面幅に 合わせて 文字・余白・画像の 大きさが 変わり、 文節の 切れ目で 改行します - 表示速度：サイトで
使う 文字だけの フォントを 作り、 読み込み量を 約3分の 1に 減らしました （Lighthouse の Performance は スマホ90以上、 PC 100） - アクセシビリティ：文字の
コントラスト （WCAG AA）、 キーボードだけでの 操作、 入力エラーや 料金の 変化の 読み上げに 対応 - 動きを
減らす設定 （prefers-reduced-motion）では、 スクロール時の 演出を 止めます - title／description／OGP を
設定。 架空の 事務所の ため、 検索結果には 表示しない 設定に しています