デザイン分析日記25
Webサイトから学ぶ、デザイン分析
こんにちは。デザイン歴1年ほどのひよっこですが、本業と両立しながら、心を動かされたデザインを分析・発信していきます。週1〜2回のペースで続けていきます！（熱がこもりすぎると続かない気がするので…！）
今回ご紹介するのは、栄養モニタリングサービスVivoo様（https://www.otsuka-plus1.com/vivoo/）です。
① サイトをどのように感じたのか？
このサイトを見たとき、真っ先に感じたのは「目新しさ」と「親しみやすさ」でした。
特にファーストビュー（メインビジュアル）では、切り抜かれた人物を立体的に配置したコラージュ的なGIF？が目を引きます。現実と抽象のあいだにあるような独特の世界観が、他のサイトにはない新鮮な印象を与えていました。
特に印象的だったのは、以下の要素です：
「個別性」と「自分らしさ」へのフォーカス
コピー「いい習慣と、自分にいい習慣は違う。」が示すように、1人ひとり異なる生活・価値観を尊重した見せ方になっており、人物ごとに独立した空間にて構成されていること。「自分の体の声を聞く」という体験の視覚化
英語コピー 「Listen to Your Body’s Voice」 とともに、日常の一場面を切り取った人物配置により、ユーザーが自分の健康や習慣と向き合うイメージを自然に想起させます。立体感とリアリティの演出
人物の下に落ちる影の処理によって、画面上に浮かんでいるような効果があり、構成全体に動きと奥行きを感じさせます。
また、全体の構成はシンプルながらも、自然な曲線の図形やカラフルな配色によって温かみやポップさが加わり、親しみやすく軽やかなトーンが感じられます。
そして、導入のハードルを下げる工夫も施されていると考えました。
スクロール後にアプリの使い方を簡潔に紹介するセクションがあり、日常生活での使用をイメージしやすく、自然とインストールへの心理的障壁を下げる設計になっていました。
なぜ良いサイトだと感じたのか？
このサイトは、「自分ごととして捉えられる設計」がなされており、それがCV（購入）への自然な導線につながっている点が非常に優れていると感じました。
体調管理に関心はあるけれど、「面倒」「続かない」と感じている人に対して、
自分のペースでできること
導入が簡単であることを丁寧にアピールすることで、「これなら自分でもできそう」という心理的ハードルを下げる構成になっています。
加えて、「いい習慣」ではなく「自分にいい習慣」というコピーが象徴するように、ユーザー1人ひとりの状況やペースを尊重する姿勢が、サイト全体のデザインや体験からも伝わってきます。
こうした当事者意識を自然に喚起させる設計こそが、生活に取り入れてみたいと思わせ、CVへとつながる強みであると感じました。
②このサイトはどのターゲットに向けて作られている？（仮説）
このサイトは主に、
健康に気を遣いたい30代〜50代の男女を中心とした、幅広い年代層をターゲットに設計されていると考えられます。
なぜこのデザインがそのターゲットに刺さるのか？
デザイン全体が、
シンプルで分かりやすい構成
見やすく、親しみやすい配色
で統一されており、健康管理に対して「やってみたいけど、難しそう」「続けられるか不安」と感じている層にも、「自分にもできそう」という安心感を与える設計になっています。
また、コピーやビジュアルに込められた「自分に合った健康習慣を見つける」というメッセージ性が、ユーザー一人ひとりのライフスタイルに寄り添っている点もポイントです。
そのため、「健康を気にしてはいるけれど、一歩が踏み出せていない層」にとって、始めるきっかけとして機能するサイト設計になっていると考えました。
サイトで使われているフォントに関して
Zen Kaku Gothic New
■ 概要
Fontworksの人気書体「角ゴシック」をベースに、Web向けに最適化されたのがZen Kaku Gothic Newです。
デザインの特徴
1. 現代的で洗練された字形
角ゴシックらしい直線的な骨格
ただし硬すぎず、わずかに丸みがあり上品
「無機質すぎないモダンさ」
2. 可読性が高い
画面表示を前提に設計
文字間・線の太さが安定しており小さくても読みやすい
UI・本文どちらにも対応可能
フォントの印象
モダン
クリーン
少し高級感
「ちゃんとしているけど堅すぎない」
游ゴシックより洗練寄り、Noto Sans JPよりややデザイン性あり、
ヒラギノ角ゴより少し柔らかい、というポジションです。
向いている用途
コーポレートサイト
医療・クリニックサイト
美容・サロン
Webサービス・アプリ
LP・UI・本文・見出しすべて
「迷ったらこれでも成立する」万能型ゴシック。
硬すぎず、洗練された印象に見えるのは「Zen Kaku Gothic New」
と行間、文字間のバランスが取れているからだと考えられます。
③気になったセクション分析
1.FV
ファーストビュー（FV）の表現
冒頭でも触れた通り、切り抜かれた人物を立体的に配置したコラージュ的なGIF表現が非常に印象的で、他のサイトにはない新鮮さを感じました。
また改めて見直す中で、キャッチコピー「いい習慣と、自分にいい習慣は違う。」の文字組の美しさにも目が留まりました。
分析してみると、
フォントサイズ：約67px（3.875rem）
行間：1.38
フォントウェイト：500（Medium）
で構成されており、「美しく、かつ読みやすい見出しデザイン」として非常にバランスが取れていると感じました。
文字間については正確な数値は分かりませんでしたが、視認性・可読性ともに優れた設計であり、今後のデザイン制作でも参考にしたいポイントです。
2.セクション
このセクションでは、スクロールに連動して実際の使い方がアニメーションで表示される仕様になっており、サービスの特徴が視覚的・直感的に伝わる構成になっていると感じました。
「どんなサービスなのか」がすぐに理解できるため、興味を持ったユーザーに対して、自然に“もっと知りたい”という動機を促す導線として非常に効果的な設計だと考えられます。
また、スクロールに伴って背景が回転する演出や、最後に曲線図形が画面の外に離れていき滑らかに次セクションへとつながっていく演出など、細部にまで動きが設計されている点も印象的でした。これにより、ページ全体にリズム感と没入感が生まれ、ユーザー体験をより豊かにしていると感じました。
3.セクション
このセクションでは、サービス「Vivoo」について詳細に紹介されており、シンプルで分かりやすい構成が特に印象的だったため、要素ごとの設計を分析してみました。
タイポグラフィ設計
見出し（h3）：
フォントサイズ：34px
行間：57.8px（= 約1.7倍）
文字間：-0.68px（= -0.02em）
マージントップ：17pxテキスト本文：
フォントサイズ：16px
行間：27.2px（= 約1.7倍）
文字間：-0.32px（= -0.02em）
マージントップ：25px
レイアウト設計
写真サイズ：650px × 790px
写真とテキストの間隔（余白）：250px
このように、見出しと本文のジャンプ率（約2倍強）や、写真サイズとのバランスが非常に整っており、「伝える内容に集中できる構成」になっていると感じました。
今後、自分が情報をシンプルに、かつ丁寧に伝えたい場面で、このセクションの設計をレイアウトやタイポグラフィの参考として活用していきたいと考えています。
4.セクション
このセクションでは、使用されているイラストの可愛らしさと世界観との調和が印象的だったため、ピックアップしました。
特に注目した点は、イラストの雰囲気がサイト全体のトーンやメッセージとしっかりマッチしていること。また、ざらっとしたテクスチャ感のあるグラデーショントーンが使われており、これは近年のトレンド感を取り入れたデザインであると感じました。
そのため、ビジュアルのトーンに一貫性を持たせつつ、親しみやすさや柔らかさを演出するための表現として、非常に参考になると考えました。
5.フッター
フッターで特に印象的だったのは、アプリダウンロードへの導線が、程よい余白と情報量の少なさによって、自然と視線誘導されるように設計されている点です。
近年のデザイン傾向として「必要最小限の情報に絞ったフッター設計」が増えている印象がありますが、このサイトでも同様に、シンプルで洗練された構成が徹底されており、情報の整理力を感じました。
さらに特徴的だったのは、ファーストビュー（FV）でも使用されていた切り抜き人物を立体的に配置したコラージュ風のGIFをフッターにも取り入れていることです。シンプルな構成の中に適度な遊び心と視覚的アクセントが加わることで、印象に残る表現となっており、非常に参考になるデザインだと感じました。
制作者としての学びと応用案
1. 「自分ごと化」を促すUI・コピー設計
コピー「自分にいい習慣は違う」や立体的なコラージュ、お客様の声など、ユーザーの個別性を強調することで、「自分の話」として自然に捉えられるデザインがなされていた。サービスや商品の機能だけでなく、「ユーザーの背景」や「状況の違い」に寄り添うコピーやビジュアル演出を意識することで、より共感性の高いLPがつくれる。
2. スクロール連動の動きと心理設計
スクロールに合わせて使い方が表示されたり、背景が動いたりすることで、自然とユーザーが「次を見たくなる」設計がされていた。ユーザーが操作する動きに合わせて変化するUIを意識し、視線誘導や没入感の演出に取り入れる。
今回はここまでにさせていただきます！
引き続き、デザインの言語化学習に努めていき、自分の引き出しを増やしていきます！
30回まで目標に続けていきますため、何卒よろしくお願いいたします。
