WEBデザイン考察#10
こんにちは。WEBデザイン勉強中のるるです。
本日はライフデザイン様のサイトを考察しました。
【考察の目的】
コーポレートサイトのデザインに込められた思いを学ぶ。
【印象】
力強い、若々しい、元気、爽やか、ポップ、先進的
【ブランド理解】
・会社概要
ライフデザインは、未就学児から高齢者まで幅広い層を対象とした福祉サービスを提供する会社。
就労継続支援B型事業所から児童デイサービス、訪問介護など、利用者の気持ちに寄り添った様々な施設を運営している。
・文章・写真から読み取る企業風土
障がいや病気など困難を抱える方々を支え公平な社会を目指したい、
また低賃金、長時間労働、過重労働など「あたりまえ」とされてきた様々な不条理を改善し、福祉という仕事を憧れの職業にすることでサービスの充実を実現したいという思いが、「福祉のスタンダードを変革する」というビジョンに込められている。
福祉の対象となる方だけでなくサービスを提供する側の待遇も変わるべきという考えから、本当の意味で公平な社会になることを目指していることが伝わってくる。社会問題に対して前向きに取り組んでいる姿勢から、エネルギーに満ちた活力のある企業風土を感じた。
また、若い社員の躍動感に溢れた数々の写真からも、若々しく元気なイメージが伝わってきた。
【余白・レイアウト】
・コンテンツ上下間の余白はしっかりと取られているが、見出しの文字が大きく強調されているためインパクトのある印象となっている。
・以下のセクションは見出し→導入文→写真→写真の説明文の順に視線が流れるようなレイアウトが組まれている。
OurServiceの文字を大きく強調することで最初にそこへ視線がいくため、誰もが製作者の意図した流れで読むことができる。
対して採用ページへ誘導するコンテンツは、横に流れるような視線誘導が組まれている。
「Innovation」の文字を少し右側にずらすことで、「Challenging」を読んだ後に視線が「Innovation」に自然と流れるようになっている。
（どちらも同じぐらいの長さの英単語なので、文字をずらさないと余白がなく読みずらくなってしまう）
見出しより下については以下の順で視線が流れるようになっており、Z型の視線誘導が意識されている。
かっこいい福祉の会社で「変革」にチャレンジしませんか？→Rea more→事業別職種を探す→横並びになっている事業所名
・ビジョンの部分は長めの文章でしっかりとコンテンツの大きさを取っており、トップページの上部に配置されていることからも、ここが最も強く訴えかけたいポイントであると推察できる。
また、ヘッダーナビゲーションの左側に「ビジョン」の項目があることからも、伝えたい優先順位が高い事が伺える。
【色】
・ギャラリーとインフォメーションの背景には黒白両方を際立たせることができるグレーが用いられている。
・Our Serviceやフッターのセクションは、緑、ピンク、黄色、青など彩度の高いカラーが用いられており、取り組んでいるサービス（施設）の豊富さや元気で明るい会社の雰囲気を体現しているように感じた。
【文字】
本文：Noto Sans JP
見出し：acumin-pro
・文字サイズは可変の値が設定されているが、見出しは常に100px以上のサイズで太いフォントが用いられているので、訴えかけるような力強い印象。
・見出し以外も比較的大きめの文字サイズとなっているが、英語のあしらいや施設の説明文など重要度の低い情報は小さくなっているので、メリハリがあり読みやすさも保たれている。
【あしらい・図形】
・困っている方々を支援したいという優しい思いが丸形のボタンに反映されている。
・長方形に近い、控えめの角丸図形が用いられている。
長方形のどっしりと構えた安心感と、丸の優しいイメージの両方を兼ね備えた会社であることを表現しているのではないかと感じた。
【アニメーション】
・インフォメーションやギャラリーなど、画像を横スクロールできるカルーセル部分にカーソルを持っていくと、カーソルの後ろに左右の矢印がついた丸い図形が現れる。
横にスクロールできることをユーザーに伝え、操作性を高めている。
・フッターまで画面をスクロールすると、ページが浮き上がってフッターの上に重なっているようなアニメーションが実行される。
これは、ビジョンページ（下層ページ）の「ビジョン達成のためのスタッフ行動指針」というセクションにカードが積み重なるようなアクションがあることから、ページ全体をカードに見立て、フッターの上にカードが積み重なっているような表現を繰り返しているのではないかと感じた。
同じアニメーションを繰り返すことで、ページ全体に統一感を出している。
◼️学んだデザインの法則
・同じぐらいの長さの単語を同じぐらいの優先度で伝えたい場合、２番目の単語を少しずらして配置することで余白を生み、読みやすくなる
・視線誘導をする場合、最初に見てほしい文字のサイズを大胆にすると意図した流れで見てもらいやすい
・優先順位の高く誘導したいページがある場合は、ヘッダーナビゲーションの左側に項目を配置すると目に留まりやすくなる
・サービスの種類の豊富さ、ポップな印象を出したい場合は、カラフルな配色は有効
・力強く訴えかけるような印象にしたい時は、見出しの文字サイズを大きくする
・カルーセルホバー時、カーソルに左右にドラッグを促す図形を付け加えることでユーザビリティを高めることができる
・同じアニメーションや色の繰り返しは、ページ全体の統一感を生む
◼️感想
レイアウトはレイアウトの大きさ、位置（対角線、上下対象、左右対称）、整列（左揃え、右揃え、中央揃え）、余白の広さに着目して観察すると良いことが分かりました。
また、毎度同じようなことばかりに着目して考察をしてしまいがちだということにも気がつきました。
新しいデザインの引き出しを増やしたい、デザインを言語化する能力を高めたいという目的で考察をしているので、毎回「新しい視点でデザインを見る」ということを強く意識して今後の考察を進めていきたいです。
ダラダラ考察をしても意味がないので、明日からは時間を決めて考察をします。目標は１時間以内。
（おそらく次回から文字数がかなり減ることが予想されます・・・）