231207 サイト分析 #04
分析するサイト様：uniam - https://uniam.jp/
サイト分析のやり方（前回と同様）
① デザインをパッと見たときの印象を言語化する
②ロゴ・文章・写真からブランド理解を深める
➡︎「印象の言語化」と「ブランド理解」
③ レイアウト・余白を分析する
▼機能面
例:)要素の配置や余白が、視線誘導を効果的に果たしているか？
例:)関連する情報同士は近く、関連性が低い情報同士は遠く配置されているか？
▼情緒面
例:) 余白が広いことで落ち着いた優しい印象、
→反対に狭い余白は緊張感や力強さを感じる
例:) 要素の配置が整頓されていると落ち着いた印象、
→反対に配置がずれていることでダイナミックでスピード感のある印象
④ 色味を分析する
⑤ フォントを分析する
⑥ あしらい
⑦ アニメーション
サイトについて
ねこの年齢や体重、普段食べているごはんなど、簡単な質問に答えるだけで、ねこの個性に合わせたお食事プランを、獣医師監修のもと提案するフード診断サービス。
① ファーストインプレッション
・猫が可愛い
・パキッとしたビビットカラー
・お皿の色と背景が一緒
・文章が読みやすい
・見てて楽しい感じ
② ロゴ、文章、写真からブランド理解を深める
[ロゴ]
海外サービスっぽいロゴデザイン
「uni」は「一つの」「単一の」という意味を持つ語源。
「I am」は英語で「私は～だ。」 という意味なので、「uni am」ということなのでしょうか…
ちなみに「uniam」を自動翻訳にかけるとルーマニア語で「私は持っている」と出てきました。
[文章]
・「獣医師・栄養士監修」の信頼感、権威感
・「猫」を「ねこ」と漢字を開いており読みやすく愛情を感じる
・ユーモアのある文章や見出し
[写真]
・画質が綺麗
・野菜やフードは新鮮さを感じる
・FVで猫が舌なめずりするタイミングのショットがすごい
③ レイアウト・余白を分析する
[コンテンツ]
1. FV
2. ニュース
3. コンセプト/メッセージ
4. サービス紹介&無料診断への誘導
5. レシピについてと商品
6. 特徴
7. レビュー
8. 専門家チーム紹介
9. フロー
10. 無料診断への誘導
11. ニュースレター
12. フッター
[機能面]
コンセプト→サービス紹介(&無料診断への誘導)→レシピ
➡ 商品についてが統一されたコンテンツ並び
左から右へ、Zの視線誘導の配置
商品を縦横に並べるのではなく、横スライド表示でスッキリ見せている
[情緒面]
余白は多くない。配置が整っているので情報が見やすい。
④ 色味を分析する
ビビットカラー
・イエロー
・ブルー
・レッド
・グリーン
明るく楽しそう、はっきりした色で見やすい、目を惹く。
⑤ フォントを分析する
見出し：游ゴシック体 Pr6N B
本文：游ゴシック体 Pr6N M
文字が小さくても文章量が多くても読みやすい。
文章量によって行間が異なっておりそれぞれ統一されている
游ゴシック体の特徴
「游ゴシック体」は、長文でも読みやすいスタンダードなゴシック体ファミリーです。 字面を小さめに設計し文字間にゆとりを持たせることで、小サイズで組んでも文字同士が干渉せず、一字一字の識別性に優れた、読みやすい組版を実現します。「游ゴシック体」は7つのウエイトで構成され、キャプション・本文から小見出し・大見出しまで幅広い用途に対応します。
⑥ あしらい
無料で診断ボタンが猫の姿に変化する
猫あるあるの姿仕草がところどことにあり猫好きの心をくすぐる
⑦ アニメーション
あしらいのねこたちのアニメーションが多い
⑧ 感想/振り返り
「クリエイティブにこだわったサービス作り」の通りサイトだけでなくパッケージも可愛くこだわられ、受け取ってからの楽しみがある。
「ねこを愛する方々に、楽しみながらねこのことをもっと知ってもらうにはどうしたら良いか」を考えたともあり、サイトのあしらいでは猫について表現されビビットカラーやユーモアのある文章には楽しい要素が詰まっている。
診断サービスも楽しい要素で、そこから猫の状態から一匹一匹に合った食事プランの提案があり、開発ストーリーからは猫のことを考え開発されたことが伝わる。我が家にもねこちゃんが1匹いるので購入を検討しようと思いました。
「ねこの方はこちら」という、ねこに向けて記載されたページがありニンゲンですが見てしまいました。一番ユーモアを感じる要素でした。ねこ好きには堪らないかと思います。
この記事が気に入ったらサポートをしてみませんか？