231130 サイト分析 #02
サイト分析のやり方（前回と同様）
参考にした記事：https://giginc.co.jp/blog/giglab/webdesign-input
① デザインをパッと見たときの印象を言語化する
②ロゴ・文章・写真からブランド理解を深める
➡︎「印象の言語化」と「ブランド理解」
③ レイアウト・余白を分析する
▼機能面
例:)
・要素の配置や余白が、視線誘導を効果的に果たしているか？
・関連する情報同士は近く、関連性が低い情報同士は遠く配置されているか？
▼情緒面
例:)
・余白が広いことで落ち着いた優しい印象、
反対に狭い余白は緊張感や力強さを感じる
・要素の配置が整頓されていると落ち着いた印象、
反対に配置がずれていることでダイナミックでスピード感のある印象
④ 色味を分析する
⑤ フォントを分析する
⑥ あしらい
⑦ アニメーション
分析するサイト様：menu株式会社 - https://corp.menu.jp/
① ファーストインプレッション
・グレー背景にロゴが真ん中にあり目がいく
・ファーストビューがとてもシンプル
・赤と緑のロゴが印象的
・リクルートを目立たせているように感じる
・ロゴやコンテンツに丸みがあり柔らかい印象
② ロゴ・文章・写真からブランド理解を深める
[ロゴ]
お店にあるフードメニューの形から来ている？
[文章]
「デリバリーしてもらうことで削減できた時間を自分の好きなことに使って欲しい」という旨を謳っている。
積極的に採用を行っており、社員インタビューもありmenuで働く意見や感想を掲載していて社内のことを分かりやすくしている。
[写真]
経営陣や社員の写真が載せられており、どんな人が経営していてどんな人たちが働いているのかが分かる。
③ レイアウト・余白を分析する
[コンテンツの順番]
1. menuについて
2. 経営陣メッセージ
3. リクルート⇨社員インタビュー
4. 事業内容
5. ニュース
6. 会社概要
⬇︎
[知って欲しいこと]
・menuについて知ってもらう
・経営陣はこんな人たちで、こんなことを思っているよ
・積極的に採用を行っているよ
[機能面]
余白が多めのコンテンツと余白少なめのコンテンツがあり、目立たせているコンテンツは余白少なめで横幅目一杯に使用し、情報量を多く載せている。
[情緒面]
・余白があることで柔らかく落ち着いた印象を受ける
・余白の少ないコンテンツでは力強さ、強調を感じる
④ 色味を分析する
・アクセントカラーにブランドカラーの赤と緑
→ あしらいや見出しに使用されており目が行く
・ベースカラーにグレーと青緑と白
→ 白とグレーがベースカラーに使用されているコンテンツは柔らかく落ち 着きのある印象
→ 青緑がベースカラーに使用されているコンテンツはビジネスみが強く感じる
⑤ フォントを分析する
本文などの日本語テキストにはNoto sans JP / Noto sans が使用されシンプルで読みやすい
見出しの英字にはロゴと似たフォント（din-2014）を使用しておりブランドの統一感を出している。
[DINフォントについて]
ユニクロや東京オリンピックで使用されたフォント
DINフォントの特徴
1. 直線的なパーツ
機械的な直線
2. 文字スペースが狭い
大きく表示できる
視認性が高くなる
余白を作れる
3. ドイツ生まれ
DINは1930年代にドイツの工業製品の型番表記などに使うために生まれました。Deutsche Industrie Normen（ドイツ工業規格）の略で、DIN。1990年代に再注目されたのをきっかけに多くのフォントメーカーにより「リメイク」され今の流行へと。
⑥ あしらい
左上にはカットされた紙の切れ端のようなあしらいがある。→ ロゴと同じだ！
切り替わるタイミングが分かるようになっている。
・事業内容の背景には緑,黄,灰の紙吹雪のようなエフェクトがある。
・右に現在のコンテンツ位置がわかる追従メニューがあり、押すと移動もできる。→「社員インタビュー」のところにくると右の追従メニューが非表示になる
⑦アニメーション
・ローディングが終わると同時にロゴのモーショングラフィックスが始まり、3つの円が集まりロゴになる
→ロゴの表示が完了すると左からRecruitが現れる
・「menuの存在意義」コンテンツでPURPOSと円がお互い反対方向に回っている
→こういうのよく見かけるけどどうして反対方向に回す？ググっても出てこないので知ってる方がいたら教えて欲しいです。。
・テキストがグレーアウトしている状態から左から右方向に向かって色づく
・「事業内容」スクロー紙吹雪が下から上に上がっていく
・「事業内容」スマホがポンっと表示される
この記事が気に入ったらサポートをしてみませんか？