透き通るように白く輝く美しさ……透明感さえ抱かせる Y'sデンタルクリニックのウェブサイト
まるで化粧品のサイトのようなたたずまい
今回ご紹介するのは、名古屋にあるデンタルクリニック Y's デンタルクリニックのウェブサイトです。
最初に見たときの第一印象が、まるで化粧品のメーカーサイトかなと思うほどに透明感のある美しい仕上がりで、本当に驚きました。
制作されたのが株式会社スタジオ ディテイルズさんだということで、ある意味納得……
とても洗練された印象の美しいウェブサイトとなっています。
リンク：
Y'sデンタルクリニック（審美治療・部分矯正・精密歯科）｜名古屋・栄・歯科
様々なインタラクティブな演出がなめらかに動く
今回のサイトは、クリニックの名刺やロゴなども含めたトータルブランディングの一環のようで、芯が一本通った、コンセプトのハッキリしたウェブサイトになっています。
白をベースにした開放感のあるデザインで、全体的にとても美しく仕上がっています。
トップページ部分など、様々な場面で水が揺らぐような演出が入るようになっており、これがどことなく透明感を演出する下地になっているのかなと思いました。
単に画像が切り替わるのではなく、WebGL を利用したエフェクトによる実装となっていますね。
水が揺らぐようなエフェクトだけでなく、表示されるコンテキストが切り替わる場面では、その他にも様々な演出が発生します。
ただ派手に見せるということに終始するのではなく、ここで内容が変化しますよ、ということをユーザーに上手に伝えるような工夫がなされており、見ている側も混乱することなくサイトを閲覧できるように思いました。
そして今回のサイトは、こちらはおそらくクリニック側からの協力があってのことなのだろうと思いますが、単純にコンテンツの量がかなりありますね。
実際に治療を検討している方が事前にいろいろな知識や技術の詳細を知ることができるように、結構細かくいろんなコンテンツが用意されています。
歯科の専門用語みたいなものもかなり詳しく書いてあり、WebGL を含むビジュアルだけでなく、見る人の知りたいことや興味に対する心配りが随所に感じられるサイトだなと思いました。
メニュー画面を表示する際の演出、リンクにカーソルをホバーさせたときの演出など、とにかくふんだんに WebGL や CSS を活用した演出が散りばめられており、ウェブのフロントエンドに携わる人なら事例としてかなり参考にできる部分が多いと思います。
スムーズなスクロールやページの切り替えなど、WebGL に頼らない骨組み部分の実装力にも驚かされます。
ぜひチェックしてみてください。
