【day57】フォーサイト総合法律事務所 #1日1サイトレビュー

フォーサイト総合法律事務所

【概要】
総合法律事務所のコーポレートサイト

【選んだ理由】
・コーポレートサイトのデザインストックのため
・法律関係のサイトのレビューをしてみたいため

【参考になるデザイン（PC）】
・深いブルー色が特徴的な画像に大きめフォントの社名、キャッチコピー、グローバルナビゲーションメニューとハンバーガーメニューが並んだファーストビュー
→社名とキャッチコピーが一文字ずつトトンと表示されたり、青と赤の曲線が動くアニメーションが載っていて、サイトに動きがある
→社名の画像の人物に被さる部分は、可読性を上げるために白抜き文字になっている
・お問い合わせのリンクはサイトの右サイドに縦書きで表示
→深い青色背景では白色、ベージュ背景では青色になっている
・画像のテクスチャが画用紙のような質感になっている
→統一感がある
・「事務所情報」などのボタンはホバーすると左から右向きに背景が色づくデザイン
・見出しはセリフ体、本文はサンセリフ体になっている部分が多い
→本文は文章を読んでもらうためにサンセリフ？内容の役割によってフォントを変えている
・NEWSは、よくある3行分ほどの表記ではなく、エリア内である程度スクロールできるようになっている
→ページ遷移しなくてもある程度最近の取り組みがTOPページでわかる＝すぐ信頼感がでる
・写真素材の明るさや影が統一されている
→青がメインのサイトとも統一感がある
・「取扱業務」ページなど、背景にうっすら罫線のようなテクスチャ
→ざらっとした画像のテクスチャとマッチ
・「著作紹介」ページの「著書」と「論文」など、インデックスが切り替わるようなデザイン
→切り替わるアニメーションの早さもパッと俊敏な動きでスタイリッシュな印象
・問い合わせの固定リンク先は「事務所情報」のページが設定されている
→問い合わせ方法は電話しかないってことかな？そうするとページ遷移よりも電話番号を固定リンクエリアに表示したほうが問い合わせしやすいかも
（1クッション挟む必要があったのかな、、？）
→フッターにも受付時間と電話番号が表示されているからそれでカバー？
・ハンバーガーメニューを開くと、サイト画面が透過された状態で各ページ名に「→」がついたリンクが横並びになっている
→ホバーするとリンク名の下に大きめの余白を開けて下線が現れる
・弁護士の紹介が詳しく書かれている
→うっすら罫線が引かれたうえにレイアウト取扱分野などが配置されているようなデザインで、きっちりしたような印象＝信頼感を彷彿させる
→写真素材も多く、どういう弁護士なのか伝わりやすい＝安心感

【目的】
・事務所の概要を知ってもらう
・採用情報を見て応募してもらう
・弁護士を知ってもらう
・著書や論文を知ってもらう
→問い合わせにつなげる

【フォント】
日本語、英語見出し：Times New Roman（セリフ体）
英語見出し：Barlow Semi Condensed（サンセリフ体、Google Fonts）
日本語本文：Helvetica Neue（サンセリフ体）

【カラー】
フォント：525252（グレー）、1d4094（濃い青）、fff
ハイライトカラー：dc0508（濃い赤）
背景：1d4094、eee9e4（ベージュ）、fff

【レスポンシブ（SP）】
・TOPページの「NEWS」や「COLUMN」はPCサイズでは右寄りの配置だけどSPだと左寄り配置になっている
→その分その下の取扱業務などが右側に配置されていて、左右に視線が流れるようなレイアウト
・フッターは電話番号がボックス表記になっていて、そのほかのリンクはリストのようなレイアウト
→電話番号だけサンセリフ体になっていてフッターの雰囲気からするとちょっと違和感がある
・ハンバーガーメニューはページリンクが「→」なしで1つずつ中央寄せ縦並び
・PCサイズよりも背景のうっすら罫線のデザインが見やすい？縦がそろったレイアウトであることが伝わりやすい

【感想まとめ】
・サイトのメインカラーの青色とハイライトカラーの赤色のラインが動くアニメーションが新鮮
→重くみられそうなイメージがある法律事務所だけど、軽やかな印象を与える
・見出しや本文で書体をかえている
・色が3色ほどに絞られていて、青がメインになっているのでシュッと締まった印象がある＝真面目、信頼感

▼PCサイズキャプチャ