いでりは行政書士事務所の公式サイトは、白とクリーム色を土台に、山吹色からオレンジへ流れる暖色を差し色として使った縦長1ページ構成のサイトです。行政手続きという硬くなりがちな題材を、丸みのある書体とゆるやかな曲線でやわらげており、設計の意図が画面のすみずみまで一貫しています。
ここでは大分県別府市に事務所を構えるこの行政書士事務所のサイトを、Webデザインの見本として配色・書体・情報設計・UIの観点から読み解きます。形のない専門サービスを扱うサイトが、どのように親しみやすさと信頼感を両立させているかを整理すると、士業や相談業のサイトづくりに応用できる考え方が見えてきます。
ファーストビューが伝える地域性と姿勢
最初の画面には、事務所が拠点とする街の風景と、立ち位置を短く示した言葉が同時に置かれています。写真と文字の重ね方によって、どこで誰に向けて仕事をしているのかが、説明文を読む前に伝わる作りです。
街並みと海を見下ろす実景写真
背景には、手前に市街地、奥に湾と山並みが広がる俯瞰の風景写真が画面いっぱいに敷かれています。抽象的な素材写真ではなく、地域が特定できる実際の風景を選んでいるため、地元に根ざした事務所であることが視覚だけで伝わります。写真には青みのある薄いフィルターが重ねられており、白い文字が背景に沈まないように明度差が調整されています。
丸みのある書体で置かれた見出しとリード
写真の上には「いでゆの町の行政書士」という短い言葉が、白抜きの大きな文字で置かれています。書体は角を丸めたゴシック体で、温泉地を連想させる言い回しとよく合い、堅苦しさのない第一印象を作っています。その下には、大分県を中心に身近な手続きを支える事務所であることを説明する文が2行で添えられ、見出しだけでは分からない業務の広がりを補っています。
浮かせた角丸ヘッダーと差し色のボタン
画面の最上部には、左右に余白を残した白い角丸のバーが浮くように配置され、その中に事務所名のロゴタイプとナビゲーションが収まっています。写真の上に白い面を重ねることで文字の読みやすさを確保しながら、幅いっぱいの帯よりも軽やかな印象に仕上げています。右端には塗りのオレンジ色のボタンが封筒のアイコンとともに置かれ、問い合わせへ進む入口がひと目で分かります。ヘッダーの背後には山吹色からクリーム色へ変わるアーチ状の面がのぞいており、サイト全体で繰り返される曲線のモチーフがここから始まります。
配色とトーン＆マナー
このサイトで使われている色は多くありません。白とクリーム色を土台に、山吹色からオレンジへ至る暖色だけを差し色として使う方針が、最初の画面から最後の帯まで崩れずに続いています。
暖色を置く場所を絞った設計
英字のラベル、セクションの見出し、問い合わせのボタン、電話番号、送信のボタンなど、気づいてほしい場所にだけオレンジ色が使われています。本文は濃いグレーで組まれているため、色の付いた要素がそのまま「見るべき場所」「押せる場所」の合図として働きます。暖色は湯の色や陽だまりを思わせ、法律や手続きという題材が持つ硬さをやわらげる役割も担っています。
曲線で区切るセクションの切り替え
セクションの境目は直線ではなく、ゆるやかな弧で区切られています。クリーム色の面から白い面へ、白い面からクリーム色の面へと、弧を描きながら背景が入れ替わるため、縦に長いページでも話題が変わったことが感覚的に分かります。最下部のフッターも同じ弧で始まり、山吹色からオレンジへのグラデーションでページを締めくくっています。
見出しと文字組みの型
このサイトの見出しは、どのセクションでも同じ型が繰り返されます。形式をそろえることで、初めて見るブロックでも新しい話題の始まりだと即座に理解できます。
英字バッジと日本語見出しの2段構え
各セクションの冒頭には、細い線で囲んだ角丸のバッジにABOUTやSERVICEといった英字を入れ、そのすぐ下に日本語の見出しを置く構成が採られています。英字は小さめで装飾の役割、日本語は大きめで意味を伝える役割と、担当がはっきり分かれています。見出しは中央寄せで字間を広めに取り、色もオレンジ色でそろえられているため、スクロールの途中でも節目を見つけやすくなっています。
丸ゴシックと標準的なゴシックの使い分け
見出しには角を丸めたゴシック体、本文には標準的なゴシック体という使い分けがされています。見出しだけを丸めることで、やわらかい印象を保ちながら本文の読みやすさを損なわない組み方になっています。見出しの下には内容を要約する短いリード文が中央寄せで置かれ、行間もゆったり取られているため、文章量があっても圧迫感がありません。
サービス紹介の情報設計
取り扱う業務は、同じ形のカードを縦に積み上げる形で並列に示されています。建設業許可の申請、相続と遺言、契約書の作成、バイクや自動車の登録という4つの業務に順位を付けず、どれも同じ見た目で扱うことで、読者が自分の用件を探しやすくなっています。
同じ型のカードを縦に積む並べ方
カードは淡いクリーム色の角丸の面で、左にイラスト、右に業務名と説明文という配置が4枚とも共通しています。視線の動きが毎回同じになるため、スクロールしながらでも必要な情報の位置を予測でき、読み飛ばしても内容を取り違えにくくなります。カード同士の間隔も一定に保たれ、区切り線を使わずに独立した項目であることを示しています。
線画イラストで手続きの内容を示す
各カードのイラストは、建設現場の建物とクレーン、書類に向かう人物、チェック欄の付いた書面とペン、家族が乗る車と、業務の内容がそのまま連想できる絵柄で描かれています。線の太さと淡い彩色が全て統一されているため、4枚が並んでもばらつかず、写真では表しにくい手続きの中身を視覚的に補っています。文字だけでは伝わりにくい業務の違いを、絵で見分けられるようにした工夫です。
信頼につながる情報の並べ方
専門的なサービスを扱うサイトでは、誰が対応するのかと、どこにある事務所なのかが分かることが安心につながります。このサイトはその2つを別々のブロックに分け、それぞれに合った見せ方を選んでいます。
人物イラストを添えた代表挨拶
ABOUTのブロックは、左に代表の挨拶文、右に机を挟んで相談する場面を描いたイラストという2カラムで構成されています。挨拶文では代表の出利葉 康生様が一人称で語りかけ、長く建設業に関わってきた経験があるからこそ、現場と経営の両方の視点から提案できるという考えが述べられています。趣味に触れた一文を混ぜることで、士業の紹介文にありがちな硬さがやわらぎ、相談前の心理的な距離を縮める効果が生まれています。
項目と内容を2列で整理した事務所概要
事務所概要のブロックでは、左に項目名、右に内容を置いた行が細い罫線で区切られ、上から順に並んでいます。名称、代表、住所、事業内容、登録番号、電話番号、電話の受付時間という順序で、読者が確認したい情報が過不足なく示されています。大分県行政書士会の会員登録番号（26441922）まで明記されている点は、資格が前提となる業種のサイトとして信頼性を支える要素です。行の高さと余白が広く取られているため、表組みでありながら窮屈さを感じさせません。
問い合わせまでの導線とUI
ページは1本の縦スクロールで完結し、事務所の紹介から業務の説明、事務所の概要、問い合わせという順に並んでいます。読者の関心が「どんな事務所か」から「どう頼むか」へ移る流れに沿った並びで、途中には淡い帯を1行おきに敷いた2列の一覧表も挟まれています。
電話番号を大きく見せる白いカード
問い合わせのブロックでは、まず白い角丸のカードの中に電話番号がオレンジ色の大きな文字で置かれ、受話器のアイコンが添えられています。すぐ下には電話を受け付ける時間帯が平日のみと明記され、いつ連絡すればよいかが同じ視界の中で分かります。周囲がクリーム色の背景なので、白いカードが浮き上がって見え、視線が自然に集まる配置になっています。
入力の負担を抑えたフォーム
フォームは白い面の中に置かれ、項目名を入力欄の上に配置する縦積みの形式が採られています。必須の項目には括弧書きの注記が添えられ、入力欄の中には何を書けばよいかを示す薄い文字が入っているため、迷わず記入を進められます。最後にプライバシーポリシーへの同意チェックと、オレンジ色の送信ボタンが中央に置かれ、強い色で塗られているのがそのボタンだけなので、押す場所を間違えにくい設計です。フォームの下にはプライバシーポリシーの本文が枠の中に収められ、同意する内容をその場で確認できるようになっています。
フッターで連絡先とナビゲーションを繰り返す
フッターは山吹色からオレンジへのグラデーションの帯で、上端が弧を描いています。白抜きの事務所名を大きく置き、その下に住所、電話番号、受付時間をまとめ、右側には主要な項目へのリンクを横一列に並べています。長い1ページ構成では読み終えた位置から戻る手段が必要になるため、フッターでナビゲーションを繰り返す構成は理にかなっています。
大分県で建設業許可の相談先を探すときに見ておきたい点
建設業許可の申請は、そろえる書類の種類が多く、要件の確認や添付資料の準備に手間がかかる手続きです。相談先を探す段階では、どの業務を扱っているのか、誰が対応するのか、連絡先や受付の時間帯が明示されているのかを、サイト上で確認できるかどうかが判断材料になります。
扱う業務と対応する人が分かるか
このサイトでは、建設業許可の新規の取得や更新、業種の追加に対応していることや、建設業キャリアアップシステムの登録（CCUS）についても相談を受け付けていることが、業務カードの中で説明されています。あわせて、代表が建設業を営んでいることから、制度の理解にとどまらず現場の事情も踏まえて対応できる点を強みに挙げています。何を頼めるのかと、誰が対応するのかが同じページで分かる構成は、初めて相談する読者にとって判断しやすい形です。
相談の入口が分かりやすいか
問い合わせの手段は電話とフォームの2つが用意され、どちらもページの下部にまとめられています。会社や自宅へ出向いての対応ができることや、事務所を訪ねる場合は予約が必要であることも書かれており、相談の進め方を事前に把握できます。手続きの内容によっては書類を持ち寄る必要があるため、訪問と来所のどちらを選べるのかが最初から分かるのは、読者にとって実務的な情報です。
まとめ：別府市の事務所サイトのデザイン見本として
いでりは行政書士事務所のサイトは、絞り込んだ色数と一貫した見出しの型、そして統一された線画イラストによって、専門的な手続きを扱う事務所を親しみやすく見せることに成功しています。弧を用いた区切りや丸みのある書体といった細部の選択が、すべて同じ方向を向いている点が、見本として参考になるところです。
士業や相談業のサイトを作るときは、扱う業務を同じ形で並べること、対応する人の姿を見せること、連絡先と受付の時間帯を迷わせない位置に置くことが、読者の不安を減らす土台になります。実際の画面の作りや文章のトーンは公開されているページで確認できますので、別府市で行政書士に相談できるいでりは行政書士事務所の公式サイトもあわせてご覧ください。
