Project Overview
クラウドワークスのコンペ案件として出品した税理士事務所のトップページデザインです。 WordPressへの実装を前提に、HTML/CSSで制作しました。
制作の背景と目的
「なかなか聞けない数字の疑問にこそ、真剣におこたえします。」というコンセプトのもと、 経営者が税理士に相談することへの心理的ハードルを下げることを最優先に設計しました。 記帳代行・税務顧問/役事申告・節税の壁打ち・対話という3つのサービスを軸に、 料金体系・FAQ・ご契約の流れまで一気通貫した構成としています。 WordPress構築前提のコンペ案件で、トップページとアイコンデザインを対象に制作しました。
| カテゴリ | Tax / Finance / Professional |
|---|---|
| 制作範囲 | WordPressテーマ開発・SVGアイコン制作・レスポンシブ対応 |
| 使用技術 |
WordPress
ACF
HTML
CSS
JavaScript
SVGアイコン
スライダー実装
|
| 備考 | クラウドワークス コンペ出品作（総額20万円）。WordPressテーマ化・ACFによるカスタムフィールド管理まで実装。 |
Design Points
「信頼感」「親しみやすさ」「相談への背中押し」を軸に、3つの設計ポイントを意識しました。
配色による信頼感と温かみの両立
ベージュ（#F7F3EE）を基調に、オリーブグリーン（#3A5A40）で誠実さと落ち着きを、 マスタード（#C8A84B）でアクセントと高級感を演出。 堅苦しくなく、しかし頼れる専門家という印象を配色で表現しました。
オリジナルSVGアイコン制作
記帳代行・税務顧問・節税の壁打ちという3サービスそれぞれに、 コンセプトを視覚化したオリジナルSVGアイコンを制作。 帳簿＋チェックマーク、盾＋折れ線グラフ、吹き出し＋前進の矢印で サービス内容を直感的に伝えました。
ヒーロースライダーによる視覚的インパクト
5秒自動切り替えのフェードスライダーを実装し、 定禅寺通りのスーツ姿と事務デスク作業という2枚の写真で 「地域に根ざした専門家」と「丁寧な業務対応」の両面を表現しました。
制作で意識したこと
医師として論理的な情報設計を得意とする視点から、税理士サイトに必要な要素を組み込みました。
経営者の「本音」から始まるコピー設計
「こんなこと、聞いていいのかな。」というファーストビューのコピーは、 税理士に相談したいけれど一歩踏み出せない経営者の心理をそのまま言語化したものです。 共感から入ることで、ページを読み進めてもらいやすい入口を設計しました。
料金の透明性による信頼構築
税理士サービスで最も不安になる「費用感」を、 売上規模別の料金表として明示しました。 「〜1,000万円」「1,000〜3,000万円」など段階的に整理し、 自分がどのプランに当てはまるかをすぐ判断できる構成にしています。
ご契約の流れによる不安の解消
お問い合わせ→初回面談→お見積もり→じっくりご検討→ご契約という 5ステップをシンプルに視覚化しました。 「問い合わせた後どうなるか」を事前に示すことで、 相談への心理的ハードルを下げる設計にしています。
PC・スマートフォン両対応のレスポンシブ設計
WordPressへの実装を前提に、PC版・スマートフォン版の両方で 崩れのないレスポンシブ対応を実装しました。 ヒーロースライダーの高さ・画像位置・テキストレイアウトを 画面幅に応じて最適化しています。
制作画面
PC版・スマートフォン版のデザインです。
Page Structure
経営者の不安解消から相談への行動まで、心理的な流れに沿ったページ構成です。
Related Works
信頼感・専門性を重視した他の制作実績もご覧ください。