この動画の重要ポイント5つ
- 医療系サービスでは「安心感」を伝えるファーストビュー設計が重要
- ブランドトンマナを守りすぎるとCTA（行動ボタン）が目立たなくなるリスクがある
- オンライン診療のような新しいサービスは「利用ステップの分かりやすさ」がCVRに直結する
- カルーセルUIや横スクロールUIはユーザーに気づかれないと重要情報が見逃される
- 商品比較やプラン比較は「一覧性」を高めるUIにすることでユーザー理解が大きく向上する
Mederi Pillオンライン診療サイトのUI/UX分析｜動画の概要
この動画では、オンライン診療サービス「Mederi Pill」の公式サイトを題材に、UI/UXの観点からサイト構造を分析している。
解説では主に以下のポイントに焦点が当てられている。
・ファーストビューの印象
・CTAボタンの設計
・オンライン診療の利用フロー
・商品（ピル）の比較UI
・LP構造の情報設計
特に医療サービス特有の「安心感」と「理解しやすさ」をどうUIで表現するかが議論の中心となっている。
ファーストビューのUI/UX評価｜女性向けブランドの世界観設計
Mederiのサイトは全体的に
・柔らかい色使い
・優しいフォント
・シンプルな余白設計
といったデザインが採用されており、女性向けサービスらしい安心感のあるUIになっている。
北欧ブランドのようなシンプルで洗練されたトーンが特徴的で、ブランドイメージとしては非常に完成度が高いデザインと言える。
また、
「診療満足度」
「スマホで簡単」
「最短翌日配送」
といった安心材料もファーストビューに配置されており、オンライン診療への心理的ハードルを下げる設計になっている。
CTAボタンのUX改善ポイント｜デザイン統一が逆効果になるケース
ファーストビューにはLINE診療へ誘導するCTAボタンが設置されている。
しかし動画内では、このCTAについて次の課題が指摘されている。
・背景色とデザインが似ていて目立たない
・装飾要素（エンブレム）と色が被っている
・押せる場所が直感的に分かりにくい
ブランドトンマナを統一することは重要だが、CTAはユーザーの行動を促す要素のため、あえて色を変えるなど視認性を高める設計も必要になる。
例えば
・CTAだけ強い色にする
・ボタン形状を明確にする
・影や余白でボタン感を出す
といった改善が考えられる。
オンライン診療の利用フローUI｜ステップ表示の重要性
オンライン診療はまだ一般ユーザーにとって馴染みが薄いサービスのため、
「どうやって利用するのか」
を分かりやすく伝えることが非常に重要になる。
サイトには利用の流れがカルーセル形式で表示されているが、
・横スクロールであることが分かりにくい
・右側のコンテンツが見えない
といったUX課題が指摘されている。
改善案としては以下のような方法が挙げられている。
・カルーセルの横幅を70%程度にする
・次のカードをチラ見せする
・縦ステップに変更する
特に医療系サービスでは、手順を隠すよりも「すべて見せる設計」の方が安心感につながる可能性がある。
LP構造のUX評価｜情報量が多いサービスLPの設計
Mederiのサイトは典型的なLP構造になっており、
・サービス説明
・特徴
・料金
・よくある質問
といった情報が順番に並んでいる。
情報量自体は充実しているが、次の点が改善ポイントとして挙げられている。
・CTAが少ない
・ボタンとテキストの区別がつきにくい
・ヘッダー導線が弱い
ユーザーが長いLPを読む場合、途中で疑問が生まれることが多いため、
・アンカーリンク
・追従メニュー
・CTAの再配置
などを行うことでコンバージョン改善が期待できる。
FAQの配置UX｜CTA付近に置くべきコンテンツ
多くのLPでは「よくある質問（FAQ）」がページの最下部に配置されている。
しかし動画では、
FAQはCTAの近くに配置した方が良い可能性があると指摘されている。
理由は、ユーザーが購入直前に
・不安
・疑問
を解消したいケースが多いため。
そのため、
・CTA直前
・料金説明付近
などにFAQを配置することで、CVRが改善する可能性がある。
またFAQのクリックデータを分析し、
よく見られている質問だけをCTA付近に配置する方法も有効とされている。
ピル商品のUI設計｜横スクロール比較の問題点
サイト内には複数種類のピルが紹介されているが、
この比較UIは横スクロールで切り替える仕様になっている。
しかし動画内では、
・横スクロールであることに気づきにくい
・一覧で比較できない
という課題が指摘されている。
ユーザーが
「どのピルを選べばいいか」
を理解するには、一覧比較できるUIの方が適している可能性が高い。
商品比較UIの改善アイデア｜比較表やモーダルの活用
動画内では商品比較の改善案としていくつかのアイデアが紹介されている。
例えば
・ボタンで種類を切り替えるUI
・比較表を表示するモーダル
・Amazonの比較表のような一覧UI
など。
特に「比較表を見る」というボタンを設置し、モーダルで一覧表示する方法は、
・ブランドデザインを崩さない
・比較しやすい
というメリットがある。
この部分はサイト全体のコンバージョンにも影響する重要なポイントと考えられる。
医療LPのCTA設計｜スクロール中の行動導線
商品詳細ページではフローティングCTAが設置されているが、動画では
「途中にもCTAを配置した方が良い」
という指摘がある。
理由としては、
・ユーザーはページを最後まで読まない
・途中で意思決定するケースが多い
ため。
そのため
・説明ブロックごとにCTAを設置
・スクロール途中にCTA配置
などを行うことで、コンバージョン機会を増やすことができる。
