クリニックサイト

西島内科クリニック

クリニックサイト

Webデザイン / コーディング / WordPress構築

WEB SITE

クリニックサイトのスマホモックアップ

概要
世田谷区にあるクリニック「西島内科クリニック」のリニューアル提案
クライアント
西島内科クリニック
目的
新規の患者獲得、現状サイトのリニューアル
制作期間
2ヶ月
担当範囲
Webデザイン、コーディング
使用ツール
Figma、Illustrator、Photoshop、Dreamweaver

わかりやすくて信頼できる、
子供や家族の「かかりつけ医」に選びたいと思って貰えるサイト

クリニックサイトのカンプ

PROCESS過程

現在のクリニックのモックアップ

課題

  • 情報面

    受診日などのクリニックを受診したい時に知りたい情報が分散している。
    新型コロナウィルスの対策や患者に対する注意点の記載がない。

  • デザイン面

    フォントサイズが13pxと小さく、行間も狭いため可読性が低い。

  • その他

    レスポンシブ対応できていない。

ターゲット・ペルソナ

  • ターゲット

    日本全体で少子化が進む中、クリニックがある砧地域の子供の数は増加傾向。また二子玉川・成城学園前駅が最寄り駅であることから「幼い子供を持つオシャレなママ」をターゲット層とし下記を設定しました。

  • ペルソナ

    年齢・職業:32歳・会社員(総務)、時短勤務。

    背景:三軒茶屋の1LDKのマンションに住んでいた。3年前に女児を出産し子供が大きくなってきたため、砧地域に戸建を購入。

    状況:引っ越しして1週間後に娘が発熱。
    インターネットで家から近く、安心して子供を見てもらえる条件でクリニックを検索している。

スマホでクリニックを検索する母親
  • 現在のサイトマップ
  • リニューアルサイトマップ

POINT要点

クリニックサイトのスマホモックアップ2

情報設計

  • ファーストビュー付近に情報集約し、受診行動に繋げる。
  • 新型コロナウィルス対策について追加、バナーを掲載し目に留まりやすく。
  • スマホ版ではワンタップで電話での問い合わせと診療時間の確認可能。

ファーストビューに診療時間や電話番号などまとめ、受診行動に繋がるよう工夫しました。新型コロナウィルス流行により病院の対策状況も受診行動に影響があることを考慮し、対策についてのページも作成し目に留まりやすいようバナーも作成。
また子供を片手で抱きながらスマホを操作することを想定し、スマホ版ではサイドバーを下部に配置。ワンタップで電話での問い合わせと診療時間を確認できるようにしました。

デザイン

  • 文字の可読性担保。
  • 医療機関らしい清潔感と信頼関係のあるカラー。
  • クリニック外観を意識したモチーフを使用。

幅広い年齢層のユーザーが利用することを想定し基本フォントサイズは16pxとし、行間と字間にも余裕を持たせ可読性を担保。また同様の理由で英語のみの表記を避けました。
ベースカラーを白とし清潔感を出し、旧サイトの背景色の紺色とアクセントカラーと調和が取れる水色をメインカラー、ロゴの水色をアクセントカラーに。青系統でまとめ医療機関らしい信頼感を演出しつつ、ピクトグラムや格子柄でアクセントをつけました。格子柄やセクション下部の四角はクリニックの外観にタイルを用いていることから採用しています。

クリニックサイトのデザイン一部