Webサイト分析 vol.9 「こやま法務事務所」

今回は「こやま法務事務所」さんのWebサイト分析をしていきます。

Webデザインのまとめサイトに掲載されていたのですが、なんだか温もりや優しさを感じたので、パッと見では法務事務所のサイトだとは思わなかったです。
でも、私が受けた印象は狙い通りなのだと思います。

ターゲット

・法務事務所に相談したい人
・誰に相談しようか迷っている人

サイトのねらい

・相談の連絡をしてもらう、事務所に来てもらう
・事務所のことを知ってもらう
・どんなことができるか知ってもらう（業務内容＋強み）
・クライアントの声を載せることで、依頼を考えている人へのアピールと後押し

サイトから受ける印象

・優しい
・あたたかい
・柔らかい

使用フォント

YakuHanJP
游ゴシック
Verdana
Meiryo
ヒラギノ角ゴ Pro
sans-serif

使用カラー

・文字色：#13334e（紺）
・背景色：#fff（メイン）, #e8f3f9, #1a3b56
・区切り線：#d9d9d9, 
・ボタンのbg：rgba(72,98,120,.2), #0a2235

メインカラーが#13334e（紺）で、同系色の淡い青やもっと彩度を落としたほぼグレーのような色と白でまとめている。

ファーストビュー

・ロゴ
・小山さんが（おそらく）相談者の方とにこやかにお話をしている写真
・小山さんがペンを持って紙に何か書いている様子の写真
・グローバルメニュー（PCでは画面右に固定・メールと料金表のボタンを設置）

余白の取り方

・コンテンツ幅は大体67%ほど。
・パディング、マージン共に
（それぞれのコンテンツで設定した上下左右の値）*1em/16

文字の組み方

・日本語の見出しを縦書き文字にしている。
・ウェイトは太めで視認性、可読性が高い。
・line-height:は1.8〜2
・左揃え、一部justify

写真の質感

明るく鮮やかで明瞭。
落ち着きを感じる。

TOPページの構成

FV
↓
簡単な事務所の紹介
↓
業務について（どんな仕事を請け負えるか）
↓
強み
↓
クライアントの声
↓
お知らせ
↓
フッター（無料相談の案内と住所）

機能的な特長

・ページを読み込むと、ふわっとコンテンツが現れ、メッセージが１文字ずつアニメーションで出てくる。
・スクロールに合わせて写真が傾く。
・スクロールに応じてコンテンツがフェードインするようになっている。
・ボタンはホバーすると背景色が左から右へ動く。
・「業務について」の写真はホバーすると拡大する。また、文字の可読性が上がるように下の方は半透明の黒いフィルターがかかっている。
・ページ遷移すると上から下に色がついて、元いたページのコンテンツが見えなくなり、下から色が上がっていき遷移先のページが現れる。そして、ページタイトルの文字がふわっと現れる。

SP
・メニューは、開くとそれぞれのページへのリンクが写真と共に表示される。
・「業務について」はスワイプすることでコンテンツが見られるようになっている。下にスクロールバーが表示されている。

視線の流れ

基本的には上から下に緩やかにS字に流れる。
アニメーションがついているのでそちらに視線が引っ張られる。

良いと思ったところ

・「業務について」は５項目あるが、その5つで一つのかたまり（まとまり）に見えるよう、四隅に当たる写真を角丸にしている。
・この法務事務所は「クライアントに寄り添う」ことを大事にしているようで、丸みを帯びたデザインは小山さんが柔らかい相談しやすい人なのではないかと言う印象を持たせる。
・写真が明るく、緑をバックに撮影したり、木製の家具を撮影したりしていることから温もりを感じる。
・ふわっとしたアニメーションからも優しさを感じる。一貫して優しさや温もりを感じる。