見出し画像

Y’sデンタルクリニックさんのサイトを分析してみた

審美治療・部分矯正・精密歯科のY’sデンタルクリニックさんのサイトを分析させていただきました。イメージ訴求重視のブランドサイトで清潔感・透明感があります。

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

画像10

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

商品の特徴:一般治療にも審美治療にも力を入れている歯科医院
#歯医者 #女性 #清潔感 #透明感 #Webデザイン  #虫歯予防デー
URL:https://www.ys-dc.jp/
企業名:医療法人デンタルハート Y’sデンタルクリニック

トップページ

マージン・フォント・写真全てにおいて上質で透明感があります。

-ファーストビュー

スクリーンショット 2021-05-28 16.26.53

歯医者の様にお店の写真ではなく、イメージ写真にしており、通った後の生活が体感できる写真になっています。また、美しさを全面に押し出しているので、審美治療に特化したデンタルクリニックということが伝わります。

スクリーンショット 2021-06-01 14.19.06

右上のナビゲーションのMENUの文字に8の数字がついているのでその中のコンテンツが8個あることが分かりやすく、左の常時出ているハンバーガメーニューもホバーしたときにマウスが変わるので、推移するのが分かりやすくなってました。細かいところまでしっかりデザインされています。

画像17

画像18


-コンテンツ

スクリーンショット 2021-05-28 16.28.08

笑顔が印象的な口元が写る写真を使用しています。文字間を広めに薄い色で入れることで高級感や上質な印象を感じました。

画像19

画像21


スクリーンショット 2021-05-28 16.29.06

項目ごとのマウスオーバーに付随して写真が表示されます。オーバーする前のは何のメニューがあるか一覧があって分かりやすいシンプルなデザインですが、オーバーした際に写真が出てきてイメージが湧きやすいです。
オーバーすると他のボタンは透明度が下がるので背景画像があってもスッキリとした印象になっています。


スクリーンショット 2021-05-28 17.09.58

マウスオーバー時に円が表示されてぐるぐる回ります。動きがつくことでクリックできる箇所というのが分かりやすくなっています。

スマホデザイン(レスポンシブ)

スクリーンショット 2021-06-02 18.31.37

ナビゲーションなどPC版ではマウスオーバーで背景が変わっていましたがSP版ではページ遷移の際に一瞬コンテンツが見えるデザインになってました。
PCよりフォントサイズを小さめにし、余白を大事にすることで高級感を損なわずにスマホ化されています。
TREATMENTなど文字が入りきらない箇所は無理やり入れるのではなく、TREAT-MENTSとハイフンで改行するなど見やすくアレンジされていました。

下層ページ

-ファーストビュー

スクリーンショット 2021-05-28 16.54.59

ファーストビューでフル画面から縮小画面になる動きが特徴的でダイナミックでありながら、白の余白の清潔感や上質も出しています。写真のクオリティが高いからこそ全面でも使用できます。

-CASE

スクリーンショット 2021-05-28 16.58.34


トップページではイメージ重視で詳細ページでは具体的なものを出してイメージが湧きやすく作られています。術前と術後の比較画像わかりやすいリアルなものなので、比較しやすく、料金・期間、院長コメントなど信頼度が高く見えるコンテンツも多く書かれていました。また、タブ切り替えがあり、目的ごとに見つけやすくなっていました。

写真

スクリーンショット 2021-05-28 16.57.27

歯が見える写真が多く、白や淡い青の背景で透明感があります。服やカーテンなど白い布も入れ込んであり全面顔ではなく写真の中の余白も大切にしている印象でした。清潔感・信頼感があり、光=外をイメージし、きれいになったら外に出たくなるような印象を感じます。

動き

画像9

ナビを開いた時、背景に画像がでます。全部違う画像でリンク先のページに行ったときのイメージが湧きやすく、ファーストビューと統一して水のゆらぎの演出があり色々ホバーしたくなります。

フォント

スクリーンショット 2021-05-28 16.54.11

見出しとコピーは画像フォントを使用し、特徴的なデザインとなっています。メインビジュアルに合わせた英語フォントは滑らかな動きに合ったスタイルとなっています。

日本語デバイスフォント:游明朝体
英語:Cormorant Infant
フォントのカラー:#586166

フォントの説明
Cormorant Infantは先端が特徴的なセリフ体です。イタリック体になるとまた表情が変わるので色々使いどころがありそうですね。今回のようにウェイトを細くすれば繊細な印象を残すことができます。

カラースキーム分析

画像15

白とグレーを基調としたサイトとなっています。背景の白を広く取ることで、清潔感・明るさを演出しています。また、文字も黒ではなくグレーを使用しているので柔らかさが出て、より女性的な美しさを表現しています。

ファビコン

画像14

OG画像

画像13

タイトル

Y'sデンタルクリニック(審美治療・部分矯正・精密歯科)|名古屋・栄・歯科

名古屋・栄駅から徒歩20秒の歯医者「Y'sデンタルクリニック」です。当医院ではしっかり噛めること。そして美しくあること。「機能」と「審美」のどちらも疎かにしない。歯科治療は「医療」ですから、まずはしっかりと噛めること、発音できること、長持ちすることなど、機能面でベストな選択肢をご提示いたします。

画像11

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

画像12


この記事が参加している募集

スキしてみて

この記事が気に入ったらサポートをしてみませんか?