やつしろ行政書士西田拓哉事務所の公式サイトは、濃紺とオフホワイトという二色を軸にした、落ち着きのある士業サイトです。縦組みの明朝体コピーで事務所の姿勢を伝えながら、相談の入口を画面の要所に置き、初めて依頼する方が迷わないように整理されています。
熊本県八代市に事務所を構え、各種申請・届出や相続手続き、補助金申請といった業務を扱っていることが、トップページを上から下まで見るだけで把握できる作りです。この記事では、ファーストビューの組み方、配色とタイポグラフィ、レイアウトのリズム、下層ページへの受け渡しまでを順に読み解き、専門性と親しみやすさを両立させたいサイトづくりの参考になる点をまとめます。
縦組みコピーと人物写真で構成したファーストビュー
このサイトの第一印象を決めているのは、縦書きの日本語と一枚の人物写真の対比です。文字と写真をきれいに左右へ振り分けているため、情報量を増やさずに事務所の姿勢と担い手の姿を同時に伝えられています。ここではファーストビューを三つの視点から見ていきます。
縦書きの明朝体が生む落ち着いた印象
画面の左側には、依頼者のやりたいことを支える存在でありたいという趣旨のコピーが、明朝体の縦組みで大きく置かれています。横組みが主流のWebサイトの中では縦組みそのものが目を引きますし、書面や証書を思わせる字面が、書類を扱う仕事との相性の良さにもつながっています。
大きな見出しコピーの左隣には、ひと回り小さな縦組みの説明文が添えられ、事業に必要な許認可から生活上の手続きまで幅広く扱う旨が続きます。文字サイズの差が明確なので、視線は自然に大きい方から小さい方へ移り、読む順番が迷いなく決まります。
人物写真と余白の使い方
右半分にはスーツ姿の男性が横向きで写り、背景は白に近い無地でまとめられています。背景に色や物が少ないぶん、隣り合う縦組みの文字と視覚的にぶつからず、写真と文字のどちらも読み取りやすい状態が保たれています。
ファーストビュー全体は、左端に白い余白の列を残したうえで、その内側にベージュがかった面を敷く構成です。画面をいっぱいまで使い切らずに余白を残しているため、詰め込んだ印象がなく、静かな雰囲気に仕上がっています。
画面下端に重ねた相談の入口
ファーストビューの下端には濃紺の帯が重なり、左側に相談を促す短い一文、右側に二つのボタンが横並びで置かれています。一方はお問い合わせフォームへ進むボタンで、24時間受け付ける旨の小さな補足が添えられ、もう一方には電話番号がそのまま大きく表示されています。
ボタンは塗りつぶしではなく白い細枠で表現され、濃紺の帯の上で浮かび上がって見えます。スクロールする前の段階で連絡手段が二つ提示されるので、急いでいる方は電話、じっくり相談したい方はフォームというように、来訪者が自分に合う方法をすぐ選べます。
濃紺とオフホワイトを軸にした配色とタイポグラフィ
配色と書体の選び方も、このサイトの印象を支える大きな要素です。使う色を絞り込み、書体の役割をはっきり分けることで、ページが下へ長く続いても雰囲気がぶれません。ここでは色と文字の扱いを分けて見ていきます。
三色に絞った配色と写真のトーン
基調となるのは深い濃紺で、テキストブロックの背景や、画像の上に重ねる色として繰り返し使われています。これにオフホワイトと淡いブルーグレーが加わり、実質的に三色の組み合わせでページ全体が成り立っています。色数が少ないと単調になりがちですが、写真の面積を大きく取ることで変化がつけられています。
写真も色調がそろえられており、濃紺のフィルターを重ねた業務案内のカード、緑のぼけた背景で握手を写した代表挨拶の画像というように、区画ごとに主役となる色が決まっています。彩度の高い色をアクセントとして一か所ずつに留めているため、全体の統一感が崩れません。
明朝体の見出しと英字ラベルの組み合わせ
見出しは日本語が明朝体で、その上に小さな英字のラベルが載る形に統一されています。ABOUT、SUPPORT、MESSAGE、FLOW、CONTENTSといった英字は字間を広く取った大文字で組まれ、日本語見出しの装飾と区切りを兼ねています。
日本語の見出しにもゆるやかな字間が設定され、行間の広い本文と合わせて、全体にゆったりとした読み心地が生まれています。細めの明朝体は濃紺の背景に白抜きで置かれても線が潰れにくく、士業に求められる硬さと読みやすさの均衡が取れています。
左右を入れ替えるレイアウトと情報の並べ方
トップページは、写真とテキストブロックの左右を入れ替えながら下へ続く構成です。同じ形の繰り返しを避けつつ、使う要素の種類は増やさないため、読み進めるリズムが生まれています。ここではレイアウトの型と、そこから下層ページへ渡す仕掛けを取り上げます。
交互配置で生まれる読み進めるリズム
事務所紹介のブロックは左に写真、右に濃紺のテキスト面という並びで、次の代表挨拶では左右が反転します。さらに相談の流れのブロックで再び入れ替わるため、スクロールするたびに視線が左右へ振られ、単調さが避けられています。
写真とテキスト面はどちらも画面の端まで届く大きさで置かれ、両者の境目に余計な線や影がありません。二つの面がぴたりと接する構成が、書類を整然と並べたような落ち着いた印象につながっています。
業務案内のカードと大きな連番
業務案内では、各種申請・届出、相続手続き、補助金申請という三つの柱がカードで示されています。写真の上に濃紺を重ね、白い明朝体の日本語タイトルと英字を中央に置き、右寄りに大きな連番を半透明で敷いた作りです。
連番は数字としての情報より、カードのリズムを整える図版としての役割が大きく、見出しの読みやすさを邪魔しない濃度に抑えられています。上段に二枚、下段に一枚を中央寄せで置く配置も、三つという数を無理に均等割りしない素直な処理です。
控えめなテキストリンクで下層ページへ渡す設計
各ブロックの末尾には、下線と小さな三角形を組み合わせた控えめなテキストリンクが置かれ、詳しい説明は下層ページへ委ねられています。トップページでは要点だけを短くまとめ、続きを読みたい方だけが先へ進む形です。
この作りのおかげでトップページが長くなりすぎず、事務所の全体像を短い時間でつかめます。淡い背景の帯に置かれた横型のカードからは、よくあるご質問のページへ進めるようになっており、疑問を抱えたまま離脱しにくい構成です。
初めて相談する方に配慮した導線と情報設計
行政手続きの相談は、何を頼めるのかがわかりにくく、依頼のハードルが高く感じられがちです。このサイトはその心理を踏まえ、連絡手段の提示と手続きの説明を繰り返しています。ここでは導線と、掲載されている情報の並べ方を確認します。
連絡手段を画面の要所に置く導線
相談の入口は、ファーストビューの帯とページ下部の二か所に、同じ組み合わせで用意されています。フォームと電話番号を常に対で示す形なので、どの位置まで読み進めた方でも、迷わず次の行動に移れます。
ページ下部の相談ブロックは、細かい織り目のテクスチャを敷いた淡いグレーの面に、二重の枠線で囲んだ白いボタンを並べた作りです。ファーストビューの帯とは地の色を反転させながらボタンの形をそろえているため、同じ役割を持つ入口だとすぐに理解できます。
手続きの流れを段階に分けて説明する
相談の流れを扱うページでは、問い合わせから初回のヒアリング、対応できる業務の範囲や必要書類の案内、正式な依頼、書類の収集と作成へと、段階ごとに区切って説明されています。何度も経験する手続きではないからこそ、順序が明示されていると依頼前の不安が和らぎます。
相続手続きのページも同じ考え方で、身内を亡くした後に何から始めればよいかわからない、平日に役所や金融機関へ何度も足を運べないといった、よくある悩みを先に並べてから、戸籍を集めて相続人を確定する作業、遺産分割協議書の作成、口座の解約といった対応内容へつなげています。読者が自分の状況と照らし合わせやすい順序です。
事務所情報とコラムで信頼性を補う
トップページの下部には、風俗営業許可などをテーマにしたコラムの一覧が並びます。カードは事務所名を入れた共通のサムネイル、カテゴリを示す小さなタグ、明朝体の記事タイトル、日付という順で構成され、一覧としての読み取りやすさが確保されています。
フッターには事務所名、郵便番号と住所、地図サービスへのリンク、電話番号が整理して置かれ、主要ページへのリンクも二段で並びます。アクセスのページでは、JR八代駅から車でおよそ10分、県道250号線からの経路という案内も確認できます。代表挨拶では、代表行政書士の西田拓哉様が対応する旨が示され、誰に相談することになるのかがはっきりしています。
熊本で相続の相談先を探すときに見ておきたい視点
行政書士は、官公署へ提出する書類の作成や、その手続きに関する相談を受ける国家資格者です。扱える分野が広いぶん、依頼先を選ぶ際は、自分の困りごとと事務所が力を入れている分野が重なっているかを見極めることが大切になります。ここではサイトの見方という観点で二つの視点を挙げます。
手続きの全体像が示されているか
相続の手続きは、相続人を確定するための戸籍集め、遺産の分け方についての話し合いと書面化、金融機関や不動産の名義に関する対応など、複数の作業が連なります。期限が定められた手続きも含まれるため、全体像と進め方が示されているサイトほど、依頼した後の見通しを立てやすくなります。
その点でこのサイトは、業務案内、相談の流れ、よくあるご質問と、判断に必要な情報をページ単位に分けて用意しています。トップページでは概要だけを見せ、必要な方が詳細へ進める構造は、情報量が多くなりがちな士業サイトの整理方法として参考になります。
相談の入口と所在地がすぐわかるか
初めて士業へ相談する方にとって、連絡方法と事務所の場所がすぐわかることは、それだけで安心材料になります。電話とフォームの両方を示し、時間帯を選ばず送信できる窓口を用意しておくと、相談のきっかけを取りこぼしにくくなります。
やつしろ行政書士西田拓哉事務所のサイトは、熊本県八代市港町の所在地と電話番号をフッターに置き、地図サービスへのリンクも添えています。地域に根ざした事務所であることを、デザインと情報の両面から伝えている点が特徴です。
まとめ:士業サイトの見本として学べる点
やつしろ行政書士西田拓哉事務所の公式サイトは、濃紺とオフホワイトの配色、縦組みの明朝体コピー、左右を入れ替える大きな面のレイアウトという三つの要素で、専門性と親しみやすさを両立させています。装飾を足すのではなく、写真と余白の使い方で印象を作っている点が、同じ業種のサイトを設計する際の手本になります。
加えて、トップページを要約に徹させて詳しい説明を下層ページへ渡す情報設計や、連絡手段を対にして繰り返し置く導線も、相談を受ける事業に幅広く応用できる考え方です。デザインの意図を確かめたい方は、実際の画面を上から下まで見てみると理解が深まります。
