見出し画像

架空サイトリニューアル【歯科医院編】

en

こんにちは。QUOITWORKS（@quoitworks）の遠藤（@en_design0315）です。

入社してから2回目のサイトリニューアルに挑戦したのでその内容をまとめていきたいと思います＾＾

今回は実在する歯医者さんのサイトを自分なりにリニューアルしてみました。

リニューアルしたデザイン

※実案件ではなく勉強として行なっているもののため、デザインに使用した画像やアイコンには「ネット検索」や「他サイト」などから持ってきたものが含まれています。不都合ございましたら迅速に取り下げますのでご連絡頂けますと幸いです。

FV

全体のデザイン

リニューアルは以下のフローで進めていきました。

01.ヒアリングシート作成
02.ゴール設定
03.ディレクトリマップ作成、参考サイトの選定
04.ワイヤーフレーム作成
05.デザイン作成

今回は2回目なので、プロセスそのものの説明は割愛します。01〜04の行程については前回のサイトリニューアルの記事に詳しく書いていますので、もしよろしければ見てみてください〜

ヒアリングシート・ゴール設定作成

まず会社の先輩であるワタナベさん（@ws0606）にお客さん役になっていただき、ヒアリングシートを記入していきました。また、自分で現行サイトを見たり、クリニック系のサイトについて調ベ、今回のリニューアルで行った方がいいものを追加しました。

ヒアリングの結果、以下の特徴があることが分かりました。

・「東京都内のインプラント・審美歯科治療の満足度No.1」「東京で友達・家族にも紹介したい歯科No.1」「エキテン口コミランキング1位」「名医のいる病院2018」にて日本の歯科5選に選ばれるなど、患者様からの満足度・評価が高い。
・内装にこだわっており、歯科医院らしくない高級感のある雰囲気や個室の待合室を完備す流など患者様に居心地がいいと思ってもらえる環境づくりを重視している。
・インプラントの症例数が多いことやハーバード大学で症例が表彰されるなど特に審美治療に強みがあり、高度な治療にも対応可能。
・治療自体の品質を高めるため、最新設備・最新技術を積極的に導入している。
・機能的に治すだけでなく、審美的にも綺麗にして、機能と外見の両面を満たした治療を行なっている。

次にヒアリングを元に以下のようなゴールを設定しました。（ゴール設定の内容の一部を抜粋しています）

●コンテンツ課題
→歯科医院のお客様に対する考え方と医院の取り組みが伝えられている。
→数々のランキングで1番になるほど評価が高いことがサイトの見た目から感じられるようになっている。
→技術力が高いこととその理由が説明されている。
→最新の医療機器が使用されていることと、医療機器の紹介では、どんな検査が可能か、なぜ機器が必要なのかを一般の人にも分かるように説明されている。
→見た目の美しさを蔑ろにしていないこと、単に「歯科治療が優れている」ではなくその中でも特に審美治療に強みがあることが端的に伝わるようになっている。
→矯正治療の症例が紹介されている。
→アクセス、診療時間、連絡先が記載されている。またアクセスは住所だけでなく各交通機関の行き方も掲載されている。
→初めてくるお客様が分かるように外観の写真が掲載されている。
→Q&Aなどユーザーの疑問や不安を解消するコンテンツが用意されている。
→スタッフ紹介や内装の写真などどんな人が治療してくれるのかや雰囲気が掴めるようになっている。
●デザイン課題
→電話番号や問い合わせボタンなど予約の動線が目立つようになっている。
→診療メニューはただ記載するのではなく表や写真を用いるなど見た目が端的に分かるようになっている。
→歯科医院として信頼感が感じられるような奇を衒っていないサイトの振る舞いになっている。
→内装に合わせて派手な色やカラフルな配色は用いず、洗練された印象になっている。
→スタッフや院内の写真には実際のイメージを持たせたいため、嘘くさいビジュアルは使わない。
→病院系のサイトでよくある怖いイメージを払拭するためにイラストを使ったポップなテイストにはしない。
→サイトからモダン、エレガント、都会的、シック、リッチといったイメージが感じられる。
→サイトは院内の内装から大きくイメージが外れていない見た目になっている。

また、調べていく中で初めて知ったのですが、厚生労働省から病院等の広告規制についてのガイドラインが発布されており、クリニックのサイトは記載に制約があるとのこと。

「No.1」や「日本一」など他院よりも優れていることを断定的に言うことは認められていないなど、他のジャンルのサイトよりも規制が厳しいようです。

ワイヤーフレーム作成

ヒアリングシートやゴール設定の内容を踏まえてワイヤーを作成していきました。

ページ上部では強みを訴求することで他院と差別化をはかり、ページ下部では自分事化させるコンテンツや、疑問や不安を解消するコンテンツを掲載することで、ここなら理想の見た目が手に入りそうと思ってもらえるような技術力の高さが伝わりつつ、安心感を与えられる構成を目指しました。

今回のワイヤーは特に下記のクリニックを参考にしています。このサイトはワタナベさんにコンテンツが良く出来ている例として教えてもらいました。

画像2

診療内容は全て掲載するのではなく、「矯正歯科」「予防歯科」と代表的なもののみを掲載することで何を得意としているのかが一目で伝わります。

画像3

またこのサイトには「LIFE STYLE」というコンテンツがあり、患者さんの年齢などに合わせておすすめの治療法を紹介しています。こういった別の切り口で治療法への接点を多く持たせており、自分事化させることで興味を持たせるような工夫がしてあります。

ある情報は全部載せた方がいいかと思ってましたが、トップではより得意なものだけ載せた方がクリニックの特徴が端的に伝わりやすいこと、自分事化させると興味を持ってもらいやすくなることが分かりました。

デザイン作成

ここからは各コンテンツの説明をしていきます。

FV

FVは以下の内容を伝えることを意識して作成しました。

・審美治療が得意であること
・高い技術力で幅広い治療に対応できること
・「このクリニックなら理想の見た目が手に入りそう」と感じさせたい
・すぐに営業しているか確認できるようにFVに営業時間を掲載する

最初に作ったデザインがこちら。

コピーの中にコピーの内容を想起させるようなビジュアルを組み込めばより強く伝わるのではと思い、テキストと画像を組む形にしました。

下にはスライダーを設置し、最新の医療機器を使用していることや治療に向き合っている様子が伝わるようにしました。

作ったものを見てもらったところ、見た目がお洒落なものを作っているだけで、何も伝わらないと指摘されました。確かに「optimal」など英語が直感的に理解できる言葉でなかったり、見映えばかりを気にして営業時間を左下に持ってきてしまい、目立たせる必要のあるものがおざなりになっていました。

いつもそうなのですが、見た目が寂しくないかなど表面上のデザインをこねくり回すことに必死で、そのデザインで本当に伝わるかを深く考えられないんですよね。難しい...。


苦戦しながらも何とか形にはなりました。以下がFBを踏まえて作り直したものです。

英語のコピーだと何が書いてあるか分かりにくかったため、日本語に変えました。またコピーの右下にクリニックの端的な説明も加え、クリニックのサイトであることがすぐに伝わるようにしました。

また、画面左右にはそれぞれ画像を設置しています。左はマウスピースなどの治療道具、右には人物写真を掲載し、２つの写真を組み合わせることで治療内容を想起させるようなビジュアルに。2つの写真を何パターンかに切り替えることで、一人ひとりに合わせた治療を行なっている、どんな治療にも対応できるということを伝えます。（マウスピース×人物1＝歯列矯正。ホワイトニングジェル×人物2＝ホワイトニングなど。）

当院の特徴

ここではクリニックの強みを訴求します。当初は一つずつ縦積みに配置し詳しい説明文を記載することで、それぞれを強く見せようと思っていました。しかしサイトの閲覧性が悪くなるということと、トップページは目次のようなものなので詳しい説明は下層に流し、ビジュアルをメインにした見せ方に変えました。

当院で解決できるお悩み

診療内容を紹介するエリアです。「インビザライン」「精密根管治療」など専門用語が多く、知識がない人がいきなり見てもどんな内容か想起しにくいため、診療名をそのまま書くのではなく、お悩みから探せる構造にしました。また一覧で掲載することで幅広いお口の悩みに対応できることを可視化しています。

最初は新川電機のサイトを参考に絞り込み機能を入れていました。

画像13
画像7

しかし最初からそこまで検索する人はいないため、絞り込みまでつけるのはやりすぎだと指摘されました。

新川電機の場合は最初から目的の製品・サービスを探すためにサイトを訪れているのに対し、クリニックのサイトは大まかな内容をを知りたいなどユーザーのレベル感が異なるからだそうです。

サイトのトップページでは、何でも細かく説明すればいいわけではなく、ユーザーの求めている情報のレベルによって情報の粒度も合わせる必要があることを学びました。

初めてご利用の方へ

診療内容の下には「患者様のライフスタイルに合わせた治療」を設置しました。別の角度からも訴求し、自分事化させることで興味を持ってもらいます。治療内容のボタンはホバーすると端的な説明が表示され、クリックで詳細ページに遷移する想定です。

また「当院について」というコンテンツでは大まかな治療の流れやよくある質問など疑問や不安を解消するコンテンツを設置することで予約へのハードルを下げます。

ギャラリー

ギャラリーでは、院内がどんな雰囲気なのかを伝えます。またこのクリニックは内装にも力を入れており、高級感のある空間や個室の待合室を完備するなどストレスなく治療を受けられることも特徴のため院内の写真を掲載しています。

デザイン上の写真はアテではあるのですが、このクリニックは大理石を基調とした内装になっています。よりさとうデンタルクリニックらしさを出すために全体のデザインにも大理石のモチーフを入れています。

お知らせ

実際に訪れる前に営業しているかどうか確認したい人もいるため、「休診のお知らせ」を目立たせる形にしました。またこのクリニックは雑誌などメディアに取り上げられることも多いため、最新情報とは別にメディア情報も設置して信頼感を与えます。


反省

コンテンツのいくつかは最初に作ったワイヤーフレームから構成を変えてしまいました。デザインで迷わないようにワイヤーを作っていたのにグダグダになってしまったのでもっと考え抜く必要があったなと思います。

またFVのデザインがクリニックの強みや特徴を最大限に引き出すものには出来ませんでした。今回あえて、技術力が高い、メディア掲載豊富、審美治療が得意など特徴的なクリニックを選んだのに、そのクリニックだからこそできる表現を取り入れられませんでした。結果としてどのクリニックでも当てはまるようなただ綺麗なサイトにとどまってしまったので、次回はもっとアイデアを込められるようにしたいです...！

最後まで読んで頂きありがとうございました＾＾








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