こんにちは！毎日暑いですね。
最近、12時〜14時の間に屋外に30分以上いると、その後1日の身体機能が20%ぐらい低下する気がしてます。
日常的にあまり水を飲む習慣がないので、脱水気味になっているのかなぁ…
今夏はこまめに水を飲むよう心がけたいと思います。
＊
さて、7月に入り、4月から始まった学校生活も後半に突入しています。
実は、Webグラフィックの授業は一足先に6月末で終了してしまいました。
今日は、その最終課題として提出した「実在する法律事務所のWebサイトデザイン」についてまとめます。
デザインしたWebサイトについて
父が地元・岡山で営んでいる法律事務所のWebサイトを、一応許可を取ってつくらせてもらうことになりました。
個人事務所で規模こそ大きくありませんが、35年前に開所して以来、地域の人々や企業に寄り添い続けてきた法律事務所です。
現在もWebサイトはあるのですが、父曰く「名刺代わりに必要最低限の内容しか載せていない」とのこと。
（実際のサイトURLを載せたいのですが、個人情報的な部分がちょっと気になるのでここでは掲載を控えます。代わりに、ぼかしまくったキャプチャ画像をどうぞ）
文字中心で、メッセージと弁護士紹介、アクセス、採用情報など、たしかに必要最低限の内容のみが記載されたシンプルなホームページです。
父たち（2人の弁護士の共同事務所です）はインターネットがこんなに盛んになる前、そして弁護士が今よりも希少な存在だった頃から弁護士をしていたので、インターネットで集客などをする必要がなかったということですね。
今のWebサイトも味があって私は好きなのですが、
「今のテイストを生かしつつ、より見やすく、そして初見（新規）の人も気軽に相談しやすい雰囲気を少しプラスできたら」
という思いのもとに制作を開始しました。
制作物
ロゴ
まずはロゴの制作から取り掛かりました。
こちらも個人名が出てしまう関係で、ロゴの一部だけお見せしたいと思います。
ふたりの弁護士の名前にどちらも「木」が入っていることから、モチーフを木にしようと思ったんです。
さらに、木を2つ並べ重ね合わせることで、「2人の弁護士が力を合わせる様子」、「依頼者さんと弁護士が同じ立場に並んで問題に取り組む様子」を表現しました。
ちなみに、木の部分の輪郭は「M」、影の部分は「O」を表していて、苗字のイニシャルにもなっているという遊びを入れています。
文字は平成丸ゴシックをもとに、視認性が高くなるよう字体の一部を単純化しました。
プレゼンで、先生からは、
「賢さがありつつ優しい柔らかい印象のロゴ。一歩間違えると幼稚園のロゴのようにもなりそうなところを、色数を絞ったり色の彩度を落とすことで、法律事務所にふさわしい落ち着きを生み出している」
と評価いただきました。
Webサイト
個人情報を加工するのが大変なので、トップページだけお見せします。
（いずれポートフォリオサイトなどを公開する際には、全部見ていただけるようにしたいと思います。）
スマートフォン版もつくっています。それぞれのトップページだけお見せするとこんな感じです。
コンテンツはほぼ現在のWebサイトのままです。
画像素材は、プロフィール写真や事務所の外観・内観は現在のWebサイトから引き継いでいますが
イメージ的な写真もデザイン上は少し必要だったので、仮でフリー素材サイトから借りました。
現在のWebサイトのシンプルな感じや、細い線を装飾的に使っているところを引き継いだつもりです。
カラーは、ロゴに使ったグリーンのほぼ1色で統一。色分けが必要な部分は、彩度を落とした色をつかって落ち着いた印象にしています。
線だけだと少しさみしい感じや、静的な感じがしたので、背景に少しだけ波線や○、斜線のモチーフを使って動きを出し、明るい感じ、柔らかい感じを出しました。
若い人や初めて事務所の存在を知った人に、信頼感を与えつつ、とっつきづらいと思わせないようにしたくて、やりすぎないバランスを狙うのが難しかったです。
先生には、
「電話やお問い合わせフォームのボタンのデザインがとても見やすく、うまい」
「（PC版だと）左右にモチーフがあり、視線が動くので楽しさが感じられる」
「弁護士事務所として、しっかり話を聞いてくれそう、ぼったくられたりしなさそうな印象」
「（これまでの課題で一番大変だったという私の感想を受けて）これまでで一番良くできている」
と言っていただきました。
改善点としては、「トップページでは左右非対称にモチーフが使われており遊びがある感じだが、下層ページの『ご挨拶』では左右対称でより整然とした印象になるので、統一したほうがいいかもしれない」とのことでした。
「ご挨拶」のページが、長い文章がひとまとまりのページなので、どのようにモチーフを入れるか悩んだんですよね…。
どういうふうに動きを出せるか、これから修正してみたいと思います。
バナー（おまけ）
「ロゴ・Webサイト以外に、できればその他の制作物をもう１点提出すること」という課題だったので、私はInstagramのバナー広告を制作しました。
といっても、Webサイトやロゴに時間を取られすぎて、ものの10〜20分で制作したオマケ程度になってしまったのですが…。
Instagramということで思い切り若年層・女性向けを意識したデザインにしました。
同じ緑を基調にしつつ、太めの文字にしたりフリー素材のイラストを使ったりと、Webサイトのトーン＆マナーとは少し違う雰囲気にしています。
先生からは、「優しげな印象は全体通じて保たれているので問題ないのでは」と言っていただきました。
また、「キャッチコピーがとても上手」とおっしゃっていただきました！嬉しかったです。
振り返り
ページ数もコンテンツ数も多く、これまでで一番時間もかかって苦労したので
完成品に良い評価をもらえて、とても達成感がありました！
ちなみに、制作時間としては、ロゴ・Webサイト・バナー合わせて20時間強ぐらいの気がします。
全体的に、「弁護士事務所として信頼感を与えつつ、とっつきづらいと思わせないようにする」というバランスがやっぱりすごく難しかったですね。
今も見返すと「Webサイトのモチーフが少し賑やかすぎるのでは…」という感じがします。
コーディングのほうの授業の最終課題として、このサイトの実装までやりとげたいなと思っているので、もう少し改善して頑張っていきます。
