目次
今回のお題：法律事務所のWebサイトデザイン
今回は法律事務所のWebデザインです。全ページのデザインを作成しました。
提案資料
aadee8ee63bd226135de25ee0280a90dトップぺージ
堅苦しすぎない、爽やかフレッシュな感じをイメージして作りました。左がBefore（初校）、右がAfter（完成形）です。
フィードバック
ファーストビュー
- 一番目立たせたいキャッチコピーが目立たない。ロゴと下のお知らせが濃いので、お知らせの明度を落としたり線にする。
- 青白くなるのでMVの透過削除。爽やかorクールのどちらかに統一する。
- ロゴ背景100pxくらいに低くする。
- 下の画像のように黄金比を透過して重ねてみる。キャッチコピーをすこし小さくする。
お知らせ
- 「News」は全て大文字で統一。
- 右寄せ、MV下に揃えて下の画像をもっと見せる。
- 一個目だけシンプルに見せて、一覧ボタン消す。
ミッション
- 明朝体はRegularに、全体的に色薄くして柔らかさをだす。
明朝でボールドは使わない。 - ボタンの内は余白を文字の1.5倍くらいとるとキレイ
取扱業務
- 余白を上に取る。下と同じ高さ取る。
- アイコンの線の太さ揃える。
お客様事例
- ポップになるので、数字のあしらい変える。なくてもよいか白抜きにする。もしくはさりげなく。
- ナビゲーションボタンに色付ける。押せないときは薄いグレー’（グレー合うと）するとか。
弁護士紹介
- 詰まってるのでもう少しゆとりを持たせる。余白を取って4人か3人にする？
- カテゴリと本文の余白狭める。
お問い合わせ
- カテゴリと本文の余白狭める。
その他
- ページトップボタンは一番右かコンテンツ幅一番右に揃える。
- →の形統一する。
- 黄色っぽい写真をブルートーンにする
下層ページ
続いて下層ページ。画像は左がBefore（初校）、右がAfter（完成形）です。
下層ページ全体へのフィードバック
- キービジュアルはは全幅に替える。
- キービジュアルの文字が大きいので40pxにする。
- 英語左の線は左にはみ出していいので文字で揃える。
- 画像下の見出しも小さくするかあしらい変更して小見出し
事務所案内ページ
フィードバック
- Googlemapのコンテンツ幅を他の下層に合わせて揃える。
弁護士紹介
一覧ページ
詳細ページ
フィードバック
- 一覧ページにメリハリつける。代表・副代表だけ目立たせるなど。
取扱業務ページ
フィードバック
- アンカーリンクボタンの余白を左右と同じくらいに直す。
- 矢印をシャープに線のみにする。
お客様事例
一覧ページ
詳細ページ
フィードバック
- カテゴリとアーカイブの余白つめる。
- 詳細ページの関連記事の右余白が気になるので、背景無くすかカルーセルにする。
お知らせ
一覧・詳細ページ
こちらは特に直さなかったのでAfterのみです。
お問い合わせページ
フィードバック
- プライバシーポリシーは別ページに飛ばすor高さを低くする。
- 確認ボタンの矢印はもっと右でOK。
所感
普段の業務がWebデザインメインなこともあり、チラシに比べたらスムーズに進められました。
メインビジュアルの黄金比を透過させるやり方、すごく使えそうだったので他の案件でもやってみようと思いました！
また、投稿系は単調になりがちなのが悩みだったのですが、弁護士紹介のページのように一部のサイズを変えて配置するというやり方もあるんだなと学びました。
メリハリ、余白を意識して今後のデザインに役立てていこうと思います！
最後までお読みいただきありがとうございました。
コメント