ASURA WORKS. 作品一覧へ

ウェブサイト / 行政書士事務所

ときわ野法務事務所

何を頼めるかを、
先に見せる事務所サイト。

静岡県浜松市の架空の行政書士事務所を題材にしたウェブサイトです。許認可・相続・在留資格という三つの業務を並べ、料金と相談の流れを確かめてから問い合わせへ進める構成にしました。

作品を開く

架空の事業者を題材にした自主制作です。

誰が読んでも、
自分の相談先だと分かる。

想定したのは、許可の期限が迫っている経営者と、相続の手続きに困っているご家族です。三つの業務を対等に並べ、どこから読み始めても同じ相談の入口へ着くようにしました。

冒頭は映像と短いコピーだけにとどめ、その先に相談例、三つの柱、料金の方針、お客様の声、事務所の様子を、この順で置いています。

書類を重ねて、
角印を押す。

地色は生成り、章の面と罫線には青灰、リンクとボタンには深い青を使っています。事務所名だけを明朝体にし、見出しと本文は太さを変えたゴシック体でそろえました。朱色は角印の印影だけに使っています。

ヘッダーの業務案内を開くと、三つの業務が写真と説明付きで並びます。本文は、節の見出しと写真を左の列に留め、右の列の本文だけが流れる組み方です。写真は用紙を重ねた台紙に貼り、節に入ると事務所名の角印が押されます。

料金を確かめてから、
相談を書ける。

料金表は建設、運送、相続、在留、その他の五つに分け、34項目を税込で並べました。お知らせとコラムの一覧は、言葉を入れると本文を含むものだけが残ります。

問い合わせは入力、確認、完了の三段階で、確認画面から入力へ戻せます。送信も保存もしないデモで、実際の相談の申込は成立しません。

小さな画面でも、
映像を画面いっぱいに。

スマートフォンでは万年筆の映像を画面いっぱいに敷き、下から暗くなる地にコピーと相談ボタンを重ねます。ナビゲーションは「メニュー」にまとめ、開くと業務ごとの写真付きの一覧が全画面に出ます。料金表は項目名と金額を同じ行に残しました。

制作情報

種別
自主制作・架空サイト
制作範囲
構成・文章・デザイン・実装
使用技術
HTML / CSS / JavaScript
Vite / GSAP
対応画面
PC・タブレット・スマートフォン