宮城県仙台市に事務所を置くヴァロ行政書士事務所の公式サイトは、オレンジとネイビーの対比を軸にして、行政手続きという硬くなりがちなテーマを親しみやすく見せているサイトです。円形に切り抜いた大きな写真、段差をつけて重ねたコピー、要点を先に見せる横長のカードなど、初めて士業へ相談する人が身構えずに読み進められる工夫が積み重ねられています。
この記事では、フルページキャプチャから読み取れる配色、レイアウト、写真の扱い、視線誘導、UIの作り込みを順番に取り上げます。許認可や在留資格の手続きを扱う事務所のサイトを設計するときに応用しやすい観点を中心に整理しました。
ファーストビューは円形の写真と段違いのコピーで組み立てられています
最初に表示される画面は、右側へ大きく回り込む円形の写真と、その手前に重ねたコピーという二層で構成されています。写真とテキストの領域をきれいに分けず、あえて重ねているため奥行きが生まれ、静止した画面でありながら視線が左上から右下へ流れる作りになっています。ここでは、その組み立てを三つの要素に分けて確認します。
大きな円形マスクが写真を主役に押し上げています
ファーストビューの写真は四角ではなく直径の大きな円で切り抜かれ、画面の右端をはみ出す位置に据えられています。写っているのは自然光の入るオフィスのデスクで、ノートパソコンや観葉植物、窓の外に広がるビル群がやわらかくぼけています。輪郭を円にしたことで背景のアイボリーとの境目に角が生まれず、事務的な印象になりやすい業種でも柔らかさが先に伝わります。
帯状のコピーを段違いに置いて視線を下へ運びます
キャッチコピーは、白抜きの文字をオレンジの帯に載せた形で二行に分けて配置されています。二行目は一行目より右へずらしてあり、階段のようなリズムが生まれています。読み手の視線は一行目の左端から入って右へ流れ、そのあと二行目の左端へ戻る動きを繰り返すため、短い言葉でも印象に残りやすくなっています。帯の背後には淡い色の「VALO」というロゴタイプが大きく敷かれ、装飾と屋号の記憶づけを兼ねています。
チェックアイコン付きの横長カードが要点を先に示します
コピーとリード文の下には、白い塗りに細いオレンジの枠線を回した横長のカードが置かれ、その中に短い項目が三つ横並びになっています。各項目の頭にはオレンジの円形チェックアイコンが添えられ、文字数を抑えた語だけで構成されているため、スクロールを始める前に事務所の特徴を拾えます。ファーストビューの最下段という位置も、次のセクションへ進む前の踏み台としてよく働いています。
配色と書体が事務所の印象をやわらげています
サイト全体は、主役となるオレンジ、見出しや本文に使うネイビー、下地のアイボリーという三色でほぼ統一されています。使用する色数を絞ったうえで面積の配分に強弱をつけているため、縦に長いページでも散らかった印象になりません。ここでは配色と書体の扱いを分けて見ていきます。
オレンジを主役に置き、ネイビーで文字を引き締めています
ヘッダー、事務所紹介のブロック、問い合わせのセクション、フッターというページの節目にあたる部分が、面でオレンジに塗られています。一方で、見出しの上に添えた英字ラベルや本文の文字色にはネイビーが使われ、暖色だけでは不足しがちな引き締まりを補っています。暖色と寒色を対比させる配色は視認性を確保しやすく、士業のサイトで求められる落ち着きと、相談しやすい雰囲気を同時に成り立たせています。
アイボリーの下地がセクションのつなぎ目をなじませます
純白ではなく、わずかに黄みを含んだアイボリーが背景に使われている点も特徴です。ファーストビュー、業務内容のカード、選ばれる理由のセクションというように、白とアイボリーとオレンジを交互に切り替えることで、罫線を引かなくてもセクションの境目が伝わります。カードの塗りにも同系のアイボリーが使われているため、色数を増やさずに階層を作れています。
丸みのある書体と英字ラベルを重ねて表示しています
見出しにも本文にも角の丸いゴシック体が用いられ、太さの差だけで主従を作っています。加えて、日本語の大見出しの上には短い英字ラベルが小さく置かれ、視覚的なアクセントと現在地の目印を兼ねています。和文と欧文で書体の表情をそろえているため、二段構えの見出しでもうるさく感じません。
セクションの情報設計は三つ組みの反復で整理されています
このサイトは、業務内容も選ばれる理由も連絡手段も、いずれも三つの要素を横に並べる形で提示しています。同じ数の繰り返しは読み手にとって予測が立てやすく、下へ進むほど内容を把握する速度が上がります。各セクションの作りを順番に見ていきます。
事務所紹介は全面オレンジのブロックで区切られています
ファーストビューの直後には、背景を一面オレンジに塗ったブロックが置かれ、左に人物写真、右に見出しと本文という左右二分割で構成されています。白抜きの文字を使うことで前後の明るいセクションとの差が大きくなり、ページの中で最も目に留まりやすい帯になっています。末尾には円形の矢印ボタンを添えた導線が置かれ、事務所案内の詳細ページへ進めるようになっています。
業務内容は三枚のカードに大きく振り分けられています
業務内容のセクションでは、飲食店や風俗営業に関わる手続き、その他の許認可の申請、在留資格に関わる手続きという三つの柱がカードに分けて並んでいます。各カードはアイボリーの塗りに細いオレンジの枠線を回した共通の型で、上部にフラットな線画のイラスト、中央にオレンジの見出し、その下に短い区切り線、続いて説明文という順序で組まれています。ジョッキや地球といった具体的なモチーフを添えているため、専門用語が並ぶ分野でも扱う領域が直感的に伝わります。
選ばれる理由は写真を先頭に置いた三段組みで並びます
続くセクションでは、対応できる手続きの幅、書類の作成から提出までを任せられる進め方、相談のしやすさという三つの観点が並んでいます。こちらは枠線を使わず、横長の写真を先頭に置き、その下へ見出しと短い説明文を添える構成です。カードで囲んだ直前のセクションと作りを変えているため、同じ三列でも単調な繰り返しには見えません。
コラムは横長カードで一覧性を優先しています
お役立ち情報のセクションでは、記事が横長のカード形式で縦に積まれています。左にサムネイル写真、右に日付と見出し、そして本文の冒頭という並びで、見出しはネイビーの太字、抜粋は淡いグレーで表示されています。抜粋は途中で省略記号によって切られており、続きが気になる形で詳細ページへ誘導しています。手続きの疑問に答える切り口の記事が並ぶことで、事務所が扱う領域の専門性も間接的に伝わります。
視線誘導と回遊を促すUIが丁寧に作り込まれています
このサイトの見どころは装飾だけではありません。次にどこを見ればよいのか、どこから連絡すればよいのかを迷わせない仕掛けが、ページ全体に一定の間隔で置かれています。
ヘッダーは屋号と連絡手段を一列にまとめています
画面上部のヘッダーはオレンジの帯で、左端に屋号、中央にページを移動するためのリンク、右側に電話番号と受付の時間帯、さらに右端に相談用のボタンが二つ並びます。リンク同士は細い点線の縦罫で区切られ、余白だけに頼らずに項目の切れ目を示しています。右端の二つのボタンは帯の高さいっぱいまで塗られていて、面積の差だけでどこを押してほしいのかが分かる作りです。
円形の矢印ボタンが次の階層への入口を示します
詳細ページへ進むリンクの右隣には、必ず円形のボタンが置かれ、その中に右向きの矢印が入っています。オレンジのブロックでは白、明るい背景ではネイビーというように地の色に応じて反転させているため、どのセクションに現れても同じ役割だと認識できます。形の決まったパーツを繰り返し使う方法は、下層ページの多いサイトほど効果が出やすい手法です。
全幅の写真帯がページのリズムを切り替えています
業務内容のセクションと選ばれる理由のセクションの間には、青空の下に建物が広がる街並みの写真が、左右いっぱいの帯として差し込まれています。文字を載せずに写真だけを見せる区切りは、情報が続いたあとの休符のような役割を果たします。仙台の市街地を思わせる風景を選んでいる点は、地域に根ざした事務所であることを言葉に頼らず伝える方法として参考になります。
問い合わせは三つの手段を等価に並べて提示しています
ページ下部の問い合わせセクションは、オレンジの面に街並みの写真を薄く重ねた背景の上へ、白いカードを三枚並べた構成です。電話とLINEとメールという三つの窓口が同じ大きさのカードに収められ、それぞれにボタンが一つずつ置かれています。ボタンの色は手段ごとに変えられていて、LINEは緑、メールはネイビー、電話は枠線だけの淡い作りというように、見た目でどの手段かを判断できます。ヘッダーにも同じ役割のボタンが並んでいるため、読み始めと読み終わりのどちらからでも連絡先へたどり着けます。
仙台で許認可や在留資格の相談を受ける事務所のサイトに求められる工夫を考えます
ここまで見てきた作りは、同じように許認可や在留資格の手続きを扱う事務所のサイトにも応用できます。この分野は手続きの名称が読み手になじみにくく、どれが自分に必要なのかを判断しづらいという共通の課題を抱えているためです。
手続きの名前から入れる導線を用意します
飲食店の営業許可、深夜に酒類を提供する場合の届出、接待を伴う店舗に関わる許可、就労を目的とした在留資格の申請というように、依頼する側が検索で使う言葉は手続きの名称であることが多くなります。トップページの段階で扱う領域を大きく分類し、そこから詳細ページへ降りていける構造にしておくと、検索から訪れた人が迷いにくくなります。ヴァロ行政書士事務所のサイトが業務内容を三つの柱へ整理しているのは、この考え方に沿った作りです。
相談前の不安をやわらげる情報を近くに置きます
外国人を雇用する企業や開業を検討している事業者にとって、行政手続きは初めて経験する場面が多くなります。誰が対応するのか、どこまで任せられるのか、どのような流れで進むのかが分かる情報を、連絡の導線と近い位置へ置いておくと、問い合わせまでの心理的な距離が縮まります。このサイトでは、代表者の経歴や所属する会、事務所の所在地が事務所案内のページにまとめられ、トップページから一段でたどり着けるようになっています。
まとめとして、ヴァロ行政書士事務所のサイトの見どころを整理します
ヴァロ行政書士事務所は、宮城県仙台市青葉区愛子東に事務所を構えています。飲食店の営業許可や深夜営業の届出、風俗営業に関わる許可のほか、古物商や酒類販売などの許認可、在留資格の申請、会社設立の支援といった手続きを扱っていることが、業務内容のページに整理されています。代表は谷本菜生様で、宮城県行政書士会に所属していることが事務所案内のページに記載されています。
デザイン面では、円形マスクを使ったファーストビュー、オレンジとネイビーの対比、三つ組みを繰り返す情報設計、地の色に応じて反転する円形の矢印ボタン、三つの連絡手段を等価に並べた問い合わせセクションが特に参考になります。装飾を足していくのではなく、色数とパーツの型を絞って繰り返すという方針が一貫しているため、専門性の高い分野を扱いながらも読みやすいページに仕上がっています。
スクロールに応じた見え方や細部の質感は、実際の画面で確かめたほうが理解しやすい部分もあります。仙台で深夜営業の届出に対応する行政書士事務所の公式サイトをご覧いただき、配色とレイアウトの組み立て方を確かめてみてください。
