【サイトレビュー】#1 Yard Dental Clinic

No.1

【業界】 医療機関
【テイスト】 シンプル／優しい／やわらか／真面目

URL:

Yard Dental Clinic | 半田市の歯医者

制作会社：

Sea Inc.

デザイン20文字要約：

「清潔感があり、きちんとしているが親しみやすい」
・清潔感を出すため、余白を十分にとり明るいベージュ（#fcf7e1）を多用している。
・全体的に縦横を意識した配置にすることで、整理されていてきちんとした印象を与えるため、歯医者という医療機関に適したデザインになっている。
・気軽で肩ひじ張らない印象を与えるため、写真の角を丸めるなどの曲線を多く使用している。
・歯医者の治療を具体的に想像し、怖いイメージを抱かせないため、診療案内のセクションでは実際の歯の写真ではなくイラストを用いている。逆にそれ以外のセクションでは写真を使用することで施設のアットホームさを想像しやすくしている。

ターゲット・目的：

・歯医者の受信を検討する幅広い年代の男女。
・かかりつけ歯医者として定期的に受信する患者を増やすため。

使用フォント：

FOT-ニューセザンヌ Pro M／NeueHaasUnicaW1G-Medium／Noto Sans JP

配色：

❶ ベースカラー：薄いベージュ（#fcf7e1）
❷ メインカラー：ブラック（#282d27）
❸ アクセントカラー：くすんだグリーン（#5a9f4d）

実装ポイント：

・クリック可能なボタンをマウスホバーした際に、文字が下から回転するように`transform: matrix`で統一されている。その為どこがクリック可能かわかりやすい。
・ハンバーガーメニューがホバー時に線が左右に入れ替わるのがかわいい。`nth-child`で指定し、`transform`で動かしている。`max-width`を指定するするものと、しないものの２種を用意することでPC版とスマートフォン版の動く範囲を変更している。