良いWEBデザインの分析：もろぐち保育園採用サイト

「デザインの引き出し」を増やすために、世の中の良いと感じたWEBデザインを見つけて、なぜそのデザインが良いのか、言葉にしてみる試みです。
これは以前受講した「みんなのデザイン筋トレ」の中で紹介されていた、「何かを見たら、感想と一緒に記録する」というトレーニングを参考にしています。
（「みんなのデザイン筋トレ」がどれだけ役に立ったのかは、改めて記事を書こうかと思っています…！）

個人的なルールとして、
目的は「良い点やデザインの意図を分析して自分の引き出しにする」ことであり、「もうちょっとこうした方が…」という部分については、仮にあったとしても触れないようにします。

主に下記の部分について分析します。

・デザインの目的（仮説）
・MV（メインビジュアル）
・色
・文字
・レイアウト
・訴求の見せ方
・装飾

今回分析するサイト：もろぐち保育園採用サイト

今回分析するのは、もろぐち保育園さんの採用サイト（https://www.moroguchihoikuen.jp/recruit-lp/）。
温かみを感じる優しい印象で、素敵な採用サイトです。なぜそう感じるデザインなのかを分析していきます。

デザインの目的（仮説）

メインビジュアルに書かれている「子どもにも、保育士にも、最善の利益を。」という保育ポリシーのように、サイト全体から「保育士も子どもも笑顔で過ごせる保育園」というメッセージを感じます。そのことに共感し、一緒に実現したいと思う人を採用したい、という思いを感じました。

MV（メインビジュアル）

いきいきとした笑顔の保育士さんと、楽しそうな園児さんたち。心から笑顔が溢れる保育園で働いている、未来の自分を描けるような写真。
１枚目が室内で読み聞かせをしている写真、外で運動会をしている写真も入れているので、保育園の様々なシーンを連想します。写真のトリミングは保育士さんと子どもたちの全身と、周囲が映り込む構図で、保育園の雰囲気が感じられます。
写真を角丸で切り抜きずらして並べたり、背景に有機的な形をあしらうことで楽しげな印象に。
キャッチコピーや背景の装飾に水彩で塗ったような表現があることで、温もりを感じます。
キャッチを白い帯に乗せることで、抜け感があります。

色

白＋ベージュのベースカラーに、緑と赤をサブカラーに。ポイントで黄色を使用しています。
自然にある色と暖色を多く使うことで、優しく温もりを感じる印象になっています。

文字

読みやすいゴシック体を使用。タイトルには墨溜まりのあるゴシック体を使用し、文字間を開けることで落ち着いた印象に。

レイアウト

余白や行間を大きめにとり、ゆったりと落ち着いた時間を感じます。
要素の配置は整列されていて、採用情報ということもあり落ち着いて読み進めることができます。

コンテンツごとに写真を入れてメリハリ、リズムをつけています。笑顔の保育士さんの様々な写真を入れることによって、保育園の雰囲気を想像しやすくしています。

また、画面いっぱいに入れている写真に、水彩の楕円を対角線上に配置することで動きがあり、写真がある箇所は賑やかで楽しげな印象になっています。

先輩たちのインタビュー部分では垂直位置に動きをつけることで、いきいきとした印象にしています。

訴求の見せ方

エントリーボタンには一番目立つ赤の塗りを使用し、水彩のテクスチャを入れています。
エントリーボタンの他に注目してほしいコンテンツには、緑や黄色を使用しています。
「先生の一日」の下層ページへのバナーは、シンプルながらも写真をはみ出させたり、水彩の塗りを入れることで目を引きます。右下の黄色もアクセントに。

装飾

親しみやすさを感じるように、
・ボックスの角を丸にする
・水彩で塗ったようなテクスチャと有機的な形を使用
・コンテンツの区切りにも一部、水彩を塗ったような波の形にする
といった工夫が感じられます。

水彩のテクスチャと円の形で親しみやすさを出しつつ、広い面積は明るい色のフラットな塗りにしたり、ボックスや写真を角丸の四角にすることで、全体で柔らかすぎず、落ち着きのあるバランスが取れています。

抜け感を出すために装飾はシンプルに、
・英字＋線
・白抜きの数字
・英字アーチ
・縦書きの英字を枠のように飾る
・アイコンは線＋丸の塗り
という装飾にしています。

また、タイトルや本文はほとんどノセ文字にして、ボタンや目を引きたいポイントにヌキ文字を使用しています。

押せるけれどもボタンだとわかりにくい要素には「click!」の文字を入れています。

デザインの感想

デザインの目的に合わせて印象のバランスが取れていて、落ち着いていて読みやすく、保育園の心温かい雰囲気が伝わってくる素敵なデザインだと感じました。

応用するとしたら…

・温かみ、親しみを覚える印象にしたい
・柔らかさはありつつ、落ち着いた印象にしたい
という時の参考になりそうです。
温もりを覚える表現は水彩の他にも、色鉛筆で描いたようなイラストや版画のようなスタンプ、紙や布のようなテクスチャであったり、ナチュラルな風合いの素材を使ってみるのも良さそうです。
また、有機的な形（水彩）の代わりに手書き文字を入れたりすることで温かみを出すことができそうです。
配色については、暖色や、パステルカラーを使用すると近い印象になると思いました。