STAR SPARK

CONCEPT WORK — 動物病院

動物病院・ペットクリニックのホームページ制作

犬・猫・小動物を診る地域の動物病院を想定して作ったデモサイトです。「今日診てもらえるか」をいちばん短い手数で確かめられることを最優先に組み立てています。

最終更新日:

公開日:

はるかぜ動物病院のデモサイトのトップ画面。夕暮れの住宅街に建つ病院を俯瞰した映像を背景に、「その子の毎日に、安心を。」のコピーが白いカードに置かれ、ヘッダーには診療時間と電話番号が並んでいる
デモサイトのトップ画面です

想定した企業: はるかぜ動物病院(架空)

本デモは架空企業のコンセプトワークです。実在する企業・団体とは関係ありません。掲載している社名・所在地・実績の数字はすべて架空のもので、写真は用意したイメージ素材です。

デモサイトを開く →

デザインの意図

水色を地に、桜色は押すところだけ

動物病院は、清潔であることと、こわくないことを同時に見せる必要があります。清潔さは白に近い水色と生成りで作り、やわらかさは桜色の差し色で作りました。桜色は電話ボタンと予約ボタン、見出しの小さな印にだけ置いています。面で使うと病院というより雑貨店の見え方になるため、点にとどめました。

角をすべて丸く、罫線を細く

カードもボタンも写真も、角は大きめに丸めています。直線と直角が多い画面は「手続きの場所」に見え、動物病院では緊張のほうが先に立ちます。区切りは太い線ではなく背景色の切り替えで作り、線そのものは細く薄くしました。

処置ではなく、待合と暮らしの写真を選ぶ

診療台や器具の写真は、飼い主の方にとって不安の側に働きます。選んだのは、診察を受けている場面・トリミング中の様子・落ち着いた待合です。「何ができるか」は文章で足りますが、「連れて行ってどうなるか」は写真でしか伝わりません。

ヒーローの演出

住宅街に建つ病院を、夕暮れの空ごと俯瞰から捉えたモーション映像です。スクロールに合わせてカメラが建物へ近づいていきます。

動物病院を探している方は、多くの場合「近所にあるか」「入りやすそうか」を先に見ます。地図で場所を確かめるより早く、街並みの中に建つ様子をそのまま見せたほうが、通える場所かどうかが伝わります。

映像の上には白いカードでコピーを置き、ヘッダーには診療時間と電話番号、予約ボタンを常に出しています。ヒーローを見ている最中に「今日は診てもらえるのか」と思った方が、スクロールを戻さずにそのまま電話へ進めるようにするためです。

ページ構成の考え方

  1. ヒーロー

    病院の外観と、診療時間・電話番号・予約ボタン。

  2. 当院について

    かかりつけ医であること、診察とトリミングを一度に受けられること。長い理念ではなく、通い方の説明として書きます。

  3. 診療・サービス案内

    診察・トリミング・予防接種・健康診断の3枚。どれが自分の用事かを選べる形にします。

  4. 診療時間・アクセス

    曜日ごとの表で午前・午後を分けて出します。休診日と受付終了時刻は表の外にも文章で書きます。

  5. よくあるご質問

    予約の要否・犬猫以外の診察・トリミングのみの利用・支払い方法・初診の持ち物の5つ。

  6. お問い合わせ

    電話番号を大きく1つだけ。タップでそのまま発信できるようにします。

動物病院のサイトで最初に知りたいのは、理念でも設備でもなく「今日この時間に診てもらえるか」です。そのため診療時間はヘッダーとページ中腹の表の2箇所に置き、電話番号はヘッダーと最後の帯で必ず視界に入るようにしました。

よくあるご質問を最後の手前に置いているのは、ここに並ぶ5つが電話をかける手前でためらう理由そのものだからです。予約は要るのか、この子は診てもらえるのか、いくら持っていけばいいのか。先に答えておけば、問い合わせの電話は用件から始まります。

ほかの業種のデモサイト

実際にご依頼いただいて制作したサイトは制作実績にまとめています。

本デモは架空企業のコンセプトワークです。実在する企業・団体とは関係ありません。掲載している社名・所在地・実績の数字はすべて架空のもので、写真は用意したイメージ素材です。

Web制作・AIO対策のご相談から、Tesiaの法人導入まで

まずはお気軽にご相談ください。2営業日以内にご返信いたします。

お問い合わせ