blog

今回からもう一名加わり、さらに賑やかに。

今回のお題

たけだ税理士事務所

自分の担当ページ：事務所について

今回は、「参加者がそれぞれ同じサイトの違うページを分析する」という方法にしてみることに。コンテンツが違うページ間で異なる部分を探していく。

自分の分析

STEP1：デザインをパッと見たときの印象を言語化する

• あちこち丸っこい
• 士業だけど堅苦しくなさそう
• シンプルにわかりやすく説明してくれそう
• 怖くない

STEP2：ロゴ・文章・写真からブランド理解を深める

• 【屋号（社名は武田紀仁税理士事務所）とロゴタイプ】
  名前部分はひらがなでやさしい（優しい／易しい）印象。ふところが広く濁点が●になっているタイポロジーで印象を補強している。
  ただしエッジははっきり尖っているので、ふにゃふにゃした印象に寄り過ぎない
• 【シンボルマーク】
  青鉛筆：エスキース（素描）に使われる＝成果物や完成品には残らない存在でありたい
  裏方に徹する、「残る仕事」じゃなくて「残す人（＝主人公）を助ける仕事」がしたい、自分はそれが出来るという自負
• 縁の下の力持ち。物語には登場しないが、なくては物語そのものが成り立たなくなる存在。「物語の基盤を支え続ける」という使命感
• アイソメトリカルなイラスト＝統一感、立体感と奥行き
  モノクロでシンプル

STEP3：レイアウト・余白を分析する

• 左右余白は広めな一方、セクション間などの縦方向は情報が多すぎない程度に詰めている
  本文は上半分と下半分で左と右だが、目立つもの（アクセントカラーのあるもの）は基本的に左寄せで固定
  【機能面】縦方向については、PCスマホ共に1画面分のまとまりを意識して作られているように感じる
  基本的には左に比重が寄っているので視線はあまりふらふらしないように作られている
  【情緒面】親しみやすいが足は地に付いている感じ、安定感。お金を扱う人に持っててほしい真面目さや専門性もちゃんと見せている

STEP4：色味を分析する

• ベース：#FFFFFF
  メイン：#1D4ED8
  アクセント：#1D4ED8（＝エスキースに使う青鉛筆のイメージ）、#EA3800も少し
  フォント：#1c1917（黒すぎない）
  初見の印象はやさしく入りやすく、重要なところは原色に近い色ではっきりと言い切るように

STEP5：フォントを分析する

• 日本語：DNP 秀英丸ゴシック Std L
  英字：proxima-soft
  【機能面】細めでも読みやすい視認性。ラインアートのイラストと線が近くて親和性、統一感がある
  【情緒面】第一印象ではやわらかく親しみやすさがあるが、内容についてははっきり言い切るような明瞭さもある

STEP6：あしらい

• 各見出しに青い◎
  【機能面】シンボルマークとの共通性、統一感
• h1より下は、弧を描くメインカラーの弧を描く背景に切り替わる
  【機能面】見出し・フッターと本文の境界を示す。コントラスト比が低いのではっきり分けようとまではしていなさそう、見えなくても差し支えない
  【情緒面】お固くない雰囲気で、なんでも気軽に相談できそう
• 波のようなあしらい
  【情緒面】わくわく感、軽く跳ねるような軽やかさ。静と動でいえば「動」
• キーワードセクションの破線区切り
  下の事務所概要セクションが直線区切りだったので統一感がないように見えたが、試しに事務所概要セクションを破線にしてみたところ、目がチラチラした。短い情報を頻繁に区切るようなセクションで破線を使うのは避けた方がよさそう
• 「お気軽にお問い合わせください」の左右にあしらいと真正面（⇔他のイラストはアイソメ）のイラスト
  【情緒面】呼びかけられている、「おっ、そうか私に言ってくれてるのか」という感じ。
  文字側の線が一部途切れているので、漫画で朗らかな雰囲気を表す時の漫符っぽくて怖くない（直線だけだと怒鳴る場合などにも使われるのでちょっと剣呑な印象になる）

STEP7：アニメーション

• ヘッダメニューがhoverで若干色変わる
• 【機能性】スクロールでヘッダがはっきりする

→一言でまとめると「　　　　」っぽい

☆各STEPに共通して見られる要素
【第一印象】丸みのあるやさ（優／易）しさ、親しみやすさ
【読んでいくと追加される印象】重要な部分ははっきりと目立つように言い切る、ビビッドな色や太めの線
→やっぱり士業で専門性が高い人なんだな、という信頼感を持たせる。わかりやすさ・とっつきやすさ・相談しやすさを出しつつ、不真面目・情報が不透明な印象にはしない

→「初～中等教育や塾の人気者先生（の板書）」っぽい

他ページとの比較・その他話し合ったこと

• 全体的にほとんどアニメーションがなく、静的なページの印象。トップやサービス紹介のページが割とアニメーションしていたので、このページについてはあえてアニメーションを減らしていそう。実績などを並べている＝「信用を担うページ」なので、地に足がついて落ち着いている印象がほしかったのかも？
• 他のよく見かけるような税理士事務所などと違い、イラストが主体となっているのは何故か？という疑問。
  データがあるわけではないので個人的な肌感覚の仮説になってしまうが、お金や法の話にアレルギー（苦手意識）があるクリエイター層などにとって、写真には「生々しい現実のビジネス」っぽさがありすぎるのではないか（周りのクリエイターにそういう人が多い）。
  アレルギーがあるような人にとって、避けては通れないお金や法、ビジネスの話は「わからない／嫌な／怖い現実」の象徴になりがち。さらにいうと対人がそもそも苦手という人も結構な割合でいるので、税理士の立場としてはまず「自分はあなた方を脅かす存在ではありませんよ」という部分を信頼してもらわないとやりにくいように思われる。
  メインビジュアルを写真ではなくイラストにすることによって、絶妙に「現実感」を希釈しているのではないだろうかという印象がある

課題・気付き

同じサイトでも、担っているコンテンツが違えばレイアウトやアプローチが変わる。全てのサイトでそうだとは限らないが、このサイトではかなりわかりやすく差異があった。

反対に、全員が「親しみやすさ」や「堅苦しくなさ」を感じているので、ここがサイト全体で共通させている雰囲気であると思われる。