ウェブサイト / 税理士事務所
税理士法人コトブネ
創業期の数字に、
伴走する事務所。
横浜の架空の税理士法人を題材にしたウェブサイトです。創業支援と資金調達という2つの得意分野を軸に据え、対応業務と年商別の料金を先に開いてから相談へ進む構成にまとめました。
作品を開く架空の事業者を題材にした自主制作です。
得意分野と料金を、
比較できる形で。
想定したのは、創業前後で初めて税理士を探す事業主です。選ばれる理由、サービス案内、料金表、相談の流れという順に並べ、他の事務所と比べている段階でも判断材料がそろうようにしました。
トップの映像はスクロールに合わせて進み、申告の相談、経営改善の場面へと切り替わります。場面ごとにコピーが差し替わり、決算だけでなく毎月の関わりが仕事だと伝える導入にしています。
1本の航路で、
全ての節を結ぶ。
全面の写真に深緑の不透明な帯を重ね、明朝体の見出しを行ごとに載せました。帯は文字の幅だけにとどめ、人物の顔や手を隠さないようにしています。ヘッダーはナビの項目を波形の航路の線でつなぎ、今いるページに舟の印を付けました。
本文は各節を寄港地のように左右へ交互に置き、その間の水路を1本の線が縫っていきます。スクロールに合わせて点線の予定航路の上に線が描かれ、先端の舟が進み、舟が通った節の丸印が灯ります。
入力した内容を、
その場で読み返せる。
相談フォームは、氏名・連絡先・現在の状況・面談方法まで入力すると、同じ画面に確認の一覧が開きます。送信は行わない旨をフォームの冒頭に明記しました。
お知らせ・コラムにはキーワードでの絞り込みを用意し、よくあるご質問は開閉式にしています。掲載している電話番号・住所・料金はすべて架空のものです。
小さな画面でも、
映像を画面いっぱいに。
スマートフォンでは映像を画面いっぱいに敷き、下から深緑へ暗くなる地に、帯に載せたコピーと相談ボタンを重ねました。「メニュー」を開くと、ページを縦の航路でつないだシートが出ます。本文は細くした水路の横に、本文と写真を縦に積んでいます。
制作情報
- 種別
- 自主制作・架空サイト
- 制作範囲
- 構成・文章・デザイン・実装
- 使用技術
- HTML / CSS / JavaScript
Vite / GSAP - 対応画面
- PC・タブレット・スマートフォン