Y’sデンタルクリニックサイト公開いたしました！

こんにちは、スタジオディテイルズの北川です。

本日公開しました、Y’sデンタルクリニックサイト様リニューアルについてnoteを書きます！

▼リニューアルサイト
https://www.ys-dc.jp/

１　案件概要

今回Y’sデンタルクリニック様のサイトリニューアルをしたきっかけですが、医院長の吉木先生は弊社の服部と元々知り合いで、今回リニューアルのお話をいただきました。実は私自身も偶然ですが、このY'sデンタルに通う患者のひとりでした！

私自身のお話を少しさせていただくと
私は24歳の時から３年間、名古屋の矯正歯科に通っていました。
元々歯並びにコンプレックスがあり、高校生の時に通い始めたのですが、思春期というのもあり、矯正器具をつけた見た目が恥ずかしいという理由で途中で断念…

社会人になりやっぱり綺麗な歯並びに憧れ、自分のお金で通うことに決めました。費用は３年間で分割し少しづつ払いきり、何度かくじけそうになりながらも矯正治療を終えました！
矯正治療を始める前は、虫歯や歯周病の治療を行っていきます。また、抜歯矯正の場合には先に抜歯をします。
殆どの矯正歯科は矯正を専門に行なっているため、虫歯治療や抜歯の一般治療を行なっていないのです。。
私が通った矯正歯科もそうでした。そのため、一般治療で腕のいい歯科ということで勧めていただいたのがY’sデンタルクリニックでした。

Y’sデンタルクリニックとは？

愛知県名古屋市中区栄の中心地にある歯科です。
栄駅８番出口の隣でアクセス抜群です！
https://www.ys-dc.jp/access/

２　ご提案までの制作プロセス

2-1　現状サイト分析
2-2　競合分析
2-3　顧客の業界理解
2-4　ヒアリング
2-5　ベンチマーク探し、サイト構成、コンセプト
2-6　ご提案

実際の資料やデザインを元にご説明していきます。

2-1　現状サイト分析
現状の改善点をまとめヒアリングの際にご提出しました。
全体としては、レスポンシブ対応がされていないことや情報量が多く、本当に伝えたいことが埋もれているなど…改善できそうなところが多かった印象です。

Point
エリアごとに仕切ってまとめるとサイト構造が理解できるのとリニューアル時の構成をまとめる際にこの情報はどのエリアにあるといいのか？など見えてくる気がします。

▼リニューアル前のサイト

2-2　競合分析
名古屋の競合にあたりそうな歯科や、県外でも参考になりそうなサイトを調べ特徴毎に分類しまとめました。

Point
メインビジュアルはもちろん、タグラインも可視化することでサービス内容やどんな価値を提供しているかまで理解できます。理解が深まることで例えば打ち合わせ時に「○○の歯科は〜」など振られてたとしても事前に目線合わせができます。

2-3　顧客の業界理解
まず、顧客の理解を高めることで業界的な課題や訴求ポイントなど見えてきます。

Point
いざ提案する際に、何を聞き出せていれば、より良い提案ができるか？
顧客が理解できていると質問したい内容が明確化していきます。

▼顧客理解をするにあたってまとめた資料の一部

2-4　ヒアリング
事前に用意した、現状サイト分析、競合分析、顧客の業界理解で整理した質問を元に初回ヒアリングを行いました。

今回大きく変更したいこととして
「一般歯科だけでなく矯正歯科を行なっていることも訴求したい」
というところでした。

▼ヒアリングを元に整理したターゲットと訴求ポイント

【ターゲット】
・既存ユーザー
　└継続して通ってくださるお客様
・新規ユーザー
　└30-40代のお金と時間に余裕を持っている人
　└美に対して感度が高い人

【サービス力訴求】
他の矯正歯科ではない、一気通貫の修復フローを含めたサービス。
吉木先生の活動報告をもっと伝えることで信頼感を向上させる。

【体験訴求】
代診に任せず一人一人の患者に向き合うスタイルで安心感を訴求する。
医師だけでなく優秀な歯科衛生士や世界的にも有名な歯科技工士とのパートナーシップ、安心して診察できるサービス環境を伝える。
また現HPでは伝えられてない、美意識について語る。
（顔の面積の多くを、口元が占めており、綺麗にすることは美に繋がる。）

2-5　ベンチマーク探し、サイト構成、コンセプト
訴求ポイントをまとめ、クライアントとすり合わせ
コピーライターにリニューアルコンセプトコピーを立てていただき
「私は、私が変えていく。」に決定いたしました。

こちらのコピーには、歯が綺麗になったことで自信を持って堂々と笑ってもらいたい、それにはまず自分が行動にうつさなければ変わらないという想いを込めています。

改めてベンチマークを探し、サイト構成を考えました。
今回追加したいページなどを整理しサイトマップを作成、その後XDでワイヤーフレームを作成。
WFを元にデザイナーにコンセプト、構成、イメージを共有しデザイン作成を依頼します。

▼実際制作したWF（TOP）
https://xd.adobe.com/view/2cb34bea-b14f-4cb3-7564-e46164f5ca7f-5a82/?hints=off

Point
コピーもWFの時点から、大まかにでも伝えたい事を自分で書いておくことで、デザイナーがデザインする際に何を伝えたいのかWFをみて理解できるのでアウトプットに齟齬が起きにくいです。

３　デザイン

提案から、実際デザインに落とし込んでいく際
に懸念してたことが、あたりのイメージ画像が良すぎることで、あたり画像を上回れるか？撮影についてはトーンの検証を重ねカメラマンと念入りにすり合わせました。

ロケハンにて日差し、アングルの確認を事前に済ませました。サイトに合わせ清潔感を感じさせつつ柔らかいトーンにすることで歯科に対して苦手意識を持つ方へ少しでもその気持ちが和らぐよう意識いたしました。

▼撮影後

キービジュアルについて
今まで出せていなかった内面からの自然の美しさ、その輝きを呼び起こす。美しくなりたいと思うすべての人へ、
歯を治療することで、美しく輝き、世界が新しく変わってみえることを表現しました。
実装では光が差し込む演出で、治療を通して自分自身がポジティブに変わっていくことを表現しています。
https://gyazo.com/f4906188355367888e56d1f5fd713b1c

４　ツールデザイン

ロゴをはじめ、ツール類も一新。

▼以前のロゴ

▼リニューアル後

歪みのない正円で「綺麗に整う」イメージ、歯と歯の間をモチーフに「Y」を表現。滞りなく最初から最後まで一貫していく流れを「滑らかなSの線」で表現しました。今後狙っていく女性に向け、男性的よりも女性に寄ったロゴにしています。ただ、あまり女性よりになりすぎないように、ロゴタイポを少し太めでしっかりとしたもので制作。女性的でもあり、男性的でもあるフォントを選び、制作しています。

▼名刺

▼診察券

▼制作エピソード
予算と納期を優先し、現物を確認せず入稿したことによって実際納品されたものがイメージと違い刷り直し納品。
次回は必ず現物を確認後納品するようにする。

▼診療カード

５　まとめ

▼今回学んだこと
・事前の準備の量で打ち合わせの質が変わる。
・顧客理解を深めれば深めるほど説得力、納得感がでるアウトプットに直結する
・認識の齟齬を無くすためデザイナー、エンジニアとは週一の定例を行う。
・印刷物は現物確認をする。

今回サイトリニューアルのお話をいただきましたが、ツール全体もリニューアルできY’sデンタルクリニックのブランディングに携われたことを嬉しく思います。

吉木先生は患者の問題を解決するために本当に熱心に相談にのってくださり、最善の治療を提案してくださいます。
常に最新の治療を習得しようと休日も勉強会に参加したり学術発表をなさっています。
歯科が苦手なひとも本当に痛くないので、定期検診などでも気軽に寄ってみてください！

最後までお読みいただきありがとうございます！