歯ならび矯正クリニック様（店舗サイト）｜Web制作実績 レスポンシブ対応｜制作実績

今回、リニューアルの主要な目的として、「新規顧客の契約を増やしたい」というご要望をいただきました。そのため、「初めての方へ」ページでは、「矯正歯科治療の主なリスク・副作用」や「子どもの矯正」などの情報量が多いコンテンツの各項目を、アコーディオン表示にいたしました。ユーザーが必要な情報だけをピンポイントで確認できるようにすることで、読み疲れや途中離脱を防げるページ設計となっています。

「矯正治療を検討している方」「既に他院で矯正治療を行っているが、乗り換えを検討している方」などの個人ユーザーをメインターゲットとしているため、スマートフォンとPCの使用比率を9：1に想定し、モバイルファーストで設計しております。

スマートフォンサイトでは、「お電話でのお問い合わせ」と「メールでのお問い合わせ」ができる2つの導線ボタンを、それぞれパープルとオレンジのやさしい色彩のグラデーションカラーを使用し、ユニバーサルアイコン付きで画面右下に固定表示いたしました。そうすることで、ユーザーが内容に納得し「矯正治療について詳しくお話を聞いてみたい」と思ったタイミングで、スムーズにお問い合わせできる導線設計に仕上げております。

また、診療時間やクリニックの場所など、来院前に知っておきたい情報についても素早く確認できるよう、「診療時間」と「アクセス」のボタンを画面右上に固定表示しました。こちらのボタンをタップすると、各クリニックの住所や電話番号、診療時間、休診日、アクセスがポップアップで表示されます。ページ遷移をすることなく、ワンタップで必要な情報までたどり着けるユーザビリティの高い設計となっています。

デザイン面では、医療機関としての安心感と落ち着きを印象づけられるよう、全ページに「ブラー表示（ぼかし演出）」を取り入れました。テキストがぼかし表示から徐々に鮮明に浮かび上がってくるアニメーションを取り入れることによって、穏やかで落ち着いた印象を与えるだけではなく、視線の誘導効果も実現しています。また、ページトップに戻るためのボタンを、お客様の業種からインスピレーションを得て歯の形にすることで、オリジナリティあふれるデザインに仕上げています。

システム面では、お客様の豊富な症例を紹介する「症例紹介」を、オリジナルCMSで自社開発しました。こちらのCMSでは、治療方法に加えて「矯正治療前」「矯正治療中」「矯正治療後」の比較写真を掲載でき、それぞれ「正面」「左・右」「上顎・下顎」という3つのパターンのお写真を登録することが可能です。そうすることで、治療前から治療後の経過を視覚的に分かりやすく伝えることができ、似たような症状で矯正治療を検討するユーザーからのお問い合わせを、後押しするコンテンツとなっています。