株式会社OPExPARKさんの医師限定手術教育プラットフォームのサイトを分析してみた

医師限定手術教育プラットフォームのランディングページを分析させていただきました。清潔感のあるスペースの使い方とイラストのバランスが絶妙で情報がとても見やすいサイトです。

KNAPのデザイナー3人でトークしてます。
あくまでメンバーで個人的に分析をさせていただいておりますことをご了承ください。

デザイン分析元の基本情報

商品の特徴：医師限定手術教育プラットフォーム
#病院 #医者 #手術 #イラスト  
URL：https://www.opexpark.co.jp/product/learning-service/lp/
企業名：株式会社OPExPARK

トップページ

イラストが印象的で、コンテンツもメリハリがついていて伝えたい情報がすっと入ってくるサイトです。

-ファーストビュー

医者が描かれたイラストで、医療系ということが分かりやすく作られていました。また、リアルな画面や人にせずにイラストにしているので優しい雰囲気です。
サイトを訪れたときにスクロールでイラストが降ってくる演出が印象的で、モダンな雰囲気を感じました。コピーや何をする商品なのか白背景にかかれており、見やすくデザインされていました。

-コンテンツ

全体的にイラストの統一感があり、イラストも優しいタッチなので、邪魔をせず伝えたい情報をしっかり補ってくれている印象でした。テキストで説明しつつ、項目毎に分けられていて情報が見やすい設計になってます。
ボタンなども、矢印をつけていたり、太めの枠で囲われていたりと分かりやすいデザインになってました。

一番伝えたい特徴に関しては横スクロールにし、他とは違う雰囲気にすることで一番目立たせて、印象に残していました。

スマホデザイン（レスポンシブ）

使い方紹介や会員登録部分などPCでは縦に長めの部分でもスマホでみたときに１画面に収まるようきれいにレイアウトされてました。

下層ページ

ランディングページがイラストな分、他のリンクされているページはリアルな写真を使用して現実味を出していました。商品単体ではなく、空間として商品を見せることで導入後のイメージも湧きやすいです。

写真（イラスト）

イラストがメインで使用されており、少しざらついた彩度低めのトーンで幅広い年齢層の人に響く物になってました。色数を少なくデザインされているのも落ち着きが合って良いなと思いました。

動き

上から降ってくる演出で印象に残しつつ、その下のコンテンツが気になりスクロールさせる効果があります。

フォント

基本的には游ゴシック体を使用していますが、英語の見出しはManropeを使っていました。日本語タイトルは太字なので、Manropeの細い書体を使うことで読みやすく、メリハリのあるデザインとなっています。

游ゴシック体ファミリー

Manrope - Google Fonts

日本語デバイスフォント：游ゴシック
英語：Manrope
フォントのカラー：#1335A1

フォントの説明
Manropeはクセが少なく使いやすい書体です。ウェイトが豊富に揃っているので、用途によって見せ方を変えることができます。今回のサイトのように細めのウェイトを使えばスッキリした印象になりますね。

カラースキーム分析

冷静で落ち着いた印象の青系でまとめられています。差し色のオレンジを使ったボタンは目が行きやすく、イラストにも控えめにオレンジを入れることで寒色の冷たいイメージがうまく消えています。

ファビコン

OG画像

タイトル

医師限定手術教育プラットフォーム | 株式会社OPExPARK

この記事を書いているメンバーが働いている会社
よかったら見に来てください！