231222 サイト分析 #06
分析するサイト様
女性の悩みである子宮に関するサービスを行うOops WOMB（ウープス ウーム）。
「子宮との365日に、ちょっぴりピースを。」をコンセプトに誰でもピルの処方が受けやすいよう予約〜処方までをすべてのステップをオンライン化したオンラインピル処方サービス。また、毎日でも着けたくなる肌に気持ちいいおりものシートも同時に提供。
ファーストインプレッション
・FVで女性のお尻姿はかなりインパクトがある
・ビビットカラーでインパクトがあり目をひく
・海外っぽいデザイン
・全体的にテキストが大きく読みやすい
ロゴ、文章、写真からブランド理解を深める
[ブランド名・ロゴ]
Oops：「おっと！」「しまった！」 ／ WOMB：子宮
Oopsでは他に、AGA診療の「Oops HAIR」、ED診療の「Oops LOVE」のサービスを行なっており、共通して「Oops 〜」という名称になっている。
「Oops HAIR」：おっと髪が！
「Oops LOVE」：おっと愛が！
「Oops WOMB」：おっと子宮が！
ということでしょうか？
ユーモアがあり、ここでも少し海外っぽさを感じました。
LOVE AND PEACE WITH 子宮(のイラスト)
子宮にニコちゃんマークがあり、コピーにもある「少しでもピースになれる。そんなチョイスを、増やしていこう。」という想いが込められていると感じる。
[画像]
コントラスト強めな人物画像が多い。人物や商品を切り抜き背景をビビットカラーにしてインパクトを出しつつ人物にフォーカスするようにしている？
特徴コンテンツでは背景のある写真が使用されており、白衣の女性や木目テーブルに置かれた商品の画像があるなど、落ち着いた印象を感じ信頼感を感じられる。
手書きイラストを使用した説明コンテンツも親しみやすく伝わりやすい。
レイアウト・余白を分析する
[コンテンツ]
1. FV
2. コンセプト
3. サービスと製品
（ ↓ピル処方コンテンツ↓ ）
4. 3つの特徴
5. プロダクツ - ピルの基礎知識
6. 取り扱いピルについて
・ピルの種類
・価格表
・効能トラブルについて
7. LINEへの誘導
8. サポート
9. ご利用の流れ
10. 質問
11. 口コミ
12. FAQ
（ ↓おりものシートコンテンツ↓ ）
13. 3つの特徴
14. プロダクト - おりものシートについて
15. FAQ
16. 詳細への誘導
17. インタビュー
18. フッター
[機能面]
自由そうなレイアウトに見えて、流れるような視線誘導のあるしっかりしたレイアウト
プロダクトに関する説明や特徴、手順などの情報が多くなるところは余白少なめで表や文字などの情報が詰まっている。
[情緒面]
コンセプトなどのところでは余白が若干多く落ち着きやゆとりを感じる。
パキッとしたビビットカラーは明るく元気な印象を受け前向きな気持ちになる。Oopsのプロダクトを通してビビットカラーという点は共通しており、後ろ向きになりがちは問題を明るい配色にしていることからコンセプトとマットしている。
色味を分析する
ベースカラー：#FAF8F2／#F5F7FA
メインカラー：#FE7D29／#A0BEF2
アクセントカラー：#FFEB27／#FEA1CD
色の効果
オレンジ：
暖かさ、明るさ、元気、可愛さなど。 明るい気持ちにしたり、親しみやすいイメージを与えたりするなどの効果がある。
青：
穏やかで安らぎを与える色 ブルー（青色）の光を浴びるとリラックス効果があるとされている。 また、知的で冷静な印象を与える。
フォントを分析する
太めのゴシックフォントで文字間、行間ともに余裕がり読みやすい。
見出し/本文：Avenir LT Pro
Avenir (フランス語で「未来」) フォントは、Futura デザインに代わるもう 1 つの実際のフォントとして作成され、オリジナルの文字体は 3 つのウェイトとそれに付随するイタリック体が用意されていました。この限られた種類のため、21 世紀初頭にフルティガーと小林による活字の作り直しが行われました。(https://learn.microsoft.com/ja-jp/typography/font-list/avenirnextltpro)
あしらい
アニメーション
・FVで画像が切り替わる
・ロゴマークのアニメーション
・リンクボタンをホバーで色が切り替わる
・フッターの上の画像たちがゆっくりスライド