サンプル(架空)

そよは行政書士事務所

架空の事務所を想定した制作サンプルです。

想定した事業者:行政書士事務所(士業・架空) / 公開: / 制作範囲:構成・デザイン・文章・実装

サンプル(架空)そよは行政書士事務所(架空のサンプル)のトップページ。紺色の見出しと、建物と植物のイラストそよは行政書士事務所(架空のサンプル)のトップページ(スマホ表示)

実在の事務所ではなく、「開業2年目の、ひとりで運営する行政書士事務所」を想定して、構成・デザイン・文章・実装までを一通り作りました。ここでは、何を考えてどう作ったかを順にご説明します。

項目 内容
想定した事業者 行政書士事務所(架空・ひとりで運営)
ページ数 5ページ(トップ/業務内容・料金/事務所案内/よくある質問/お問い合わせ)+プライバシーポリシー
制作範囲 ページ構成の設計、デザイン、文章、HTML・CSS・JavaScript での実装、スマホ表示の確認
使った色 紺・やわらかい緑・白の3色
写真 使わず、線の細いイラストで構成

※リンク先も制作サンプルです。フォームや電話番号は動作しません。

想定した相談者と課題

行政書士に相談するのは、会社をつくる、お店を開く、相続の手続きをする、といった人生の節目が多く、ほとんどの人にとって「はじめて」です。そのため、「何を聞けばいいのか分からない」「費用がいくらかかるのか見えない」「むずかしい言葉が並んでいて近寄りにくい」という不安を抱えやすいと考えました。

そこで、見た人の不安をひとつずつ取り除くことを、このサイトの目標にしました。

サイトの目的とゴール

ゴールは「無料相談の予約」です。業務の説明で終わらせず、どのページを見ていても「相談する」までの道が見えるようにしました。

あわせて、「きちんとしているのに、話しかけやすい」印象を目指しました。士業の信頼感と、はじめての人が入りやすい雰囲気の両方が必要だと考えたからです。

設計の工夫

悩みの言葉から入るページ構成

トップでは、手続きの名前ではなく「会社を立ち上げたい」「遺言書を準備しておきたい」といった、相談する人の言葉で業務を並べました。自分がどれに当てはまるか分からない人のために、「分からない場合もまずはご相談ください」と添えています。

料金は「目安」として、注意点も一緒に

料金は税込の目安として表にし、「役所に納める手数料などの実費が別にかかる」「正式なお見積もりは相談のあとに出す」「見積もりの前に費用は発生しない」という注意点を、料金表のすぐ上にまとめました。安く見せるより、あとで驚かせないことを優先しています。

「できないこと」も正直に書く

登記は司法書士、相続税の申告は税理士、争いがある場合は弁護士、というように、他の専門家の仕事は「ご案内します」と明記しました。士業のサイトでは、業務の範囲を正しく書くことが信頼につながると考えています。

よくある質問で、先回りして答える

「相談だけでも大丈夫か」「土日でも相談できるか」「許可は必ず取れるのか」など、問い合わせる前に気になることを、質問と答えの形でまとめました。「必ず取れるとは言えない」という答えも、そのまま書いています。

相談までの道筋を、どのページにも

各ページの最後に相談への案内を置き、スマホでは画面の下に「無料相談のご予約」ボタンを固定しました。相談方法(来所・オンライン・電話)を選べることも、不安を減らす要素として目立つ位置に置いています。

「初回相談無料(60分程度)」のように、無料の条件はどのページでも1回は目に入るようにしました。

デザインの工夫

色は3色だけ

信頼感のある紺を軸に、やわらかい緑を差し色として、白を背景にしました。色数を絞ることで、落ち着いた印象と、ボタンの見つけやすさの両方を保っています。緑は文字色には使わず、背景やボタンだけに使って読みにくさを避けました。

角の丸いゴシック体と、ゆったりした行間

本文は16px以上、行間は約1.9倍にして、スマホでも疲れずに読めるようにしました。見出しは文節の途中で改行されないよう、改行位置を調整しています。

写真は使わず、線の細いイラストで

建物、書類、植物などを、線の細いシンプルなイラストで描きました。写真がなくても寂しく見えないこと、どの画面でも色味がそろうことを意識しています。

誰でも使えるように

画像には内容を説明する文(alt)を付け、キーボードだけで操作しても今どこにいるか分かるようにしました。文字と背景の色の差も、読みやすさの目安(WCAG)を満たす組み合わせにしています。

スマホでの見え方

設計はスマホの画面から始めました。文字が小さくならないこと、ボタンが指で押しやすいこと、表が横にはみ出さないことを、幅360pxの小さな画面から順に確認しています。

制作範囲

  • ページ構成の設計(どのページに何を載せるか)
  • デザイン(配色・文字・余白のルールづくり)
  • 文章(キャッチコピー、各ページの本文、よくある質問)
  • イラスト(建物・書類・植物など)
  • 実装(HTML・CSS・JavaScript)とスマホ表示の確認

※架空の事務所のサンプルのため、公開後の成果(問い合わせ数など)はありません。

※掲載している料金・住所・電話番号はすべて架空のものです。

画面イメージ

※架空の事務所を想定した制作サンプルの画面です。掲載している料金・住所・電話番号はすべて架空のものです。

サンプル(架空)そよは行政書士事務所(架空のサンプル)の業務内容ページ。料金の目安の表と注意書き
PC で表示した業務内容・料金の目安のページ
サンプル(架空)そよは行政書士事務所(架空のサンプル)のトップページ(スマホ表示)
サンプル(架空)そよは行政書士事務所(架空のサンプル)の業務内容・料金の目安ページ(スマホ表示)
サンプル(架空)そよは行政書士事務所(架空のサンプル)のお問い合わせページ(スマホ表示)
スマホで表示したトップ・業務内容と料金・お問い合わせのページ
サンプルサイトを見る(別タブ)

新しいタブで開きます。架空の事務所のサイトです。記載の連絡先は実在しません。フォームや電話番号は動作しません。

制作事例の一覧へ戻る →

CONTACT

同じように、あなたのお仕事に合わせて設計します

行政書士に限らず、個人で仕事をしている方のサイトで大切なことは共通しています。「誰に、何を、どう伝えるか」を一緒に整理するところから始めます。

相談だけでも大丈夫です。

無料で相談する