CLINIC SITE CLINIC SITE 
CLINIC SITE CLINIC SITE 

複数の診療科目を設けている地元密着型のクリックサイト。
情報量が多いが、煩雑にならないようにユーザーを意識したレイアウトにした。 また、ユニバーサルデザインを意識して、アイコンや画像を配置することで文字がなくとも理解できる設計を意識している。

URL

https://site03.tnkportfolio.com/

制作期間・範囲

企画、構成(20時間)・WF(5時間)・デザイン(15時間)・コーディング(30時間)

使用ツール

Figma・Illustrator ・Photoshop・Visual Studio Code

サイトの目的

来院してもらう
クリニックについて認知、理解してもらう

ターゲット

お子様がいる30代の働いている女性

情報設計

必要な情報を一目でわかるように診療時間、注意事項をFVに配置しました。 また、コンテンツに入る前に病院の強みをアピールしどんな病院なのかの理解を促しています。
ユーザーが欲しい情報と思われる情報を上部に配置し、クリニック側が伝えたい内容を中央に配置。情報が多い中、双方のニーズに沿わせつつ複雑にならない導線設計を意識。初診の方へのページを設けて、持ち物や診察の流れを記載することで、不安や迷いを払拭する効果をもたらします。

デザイン

ターゲットが女性であること、小児科があることを踏まえて、border-radiusを20pxかけて安心感を与えました。
ユニバーサルデザインを意識して、その内容にあったアイコンをセットで配置すること、色で内容を分けることによって文字がなくても伝わるように。そして清潔な印象を与えられるように青を基調とし、アピールポイントにはグラデーションをかけることで目立つように、かつ単調にならないデザインにしています。
予防接種のページではレイアウトが一定かつ文章量が多いため、ふわっと表示させる動きを邪魔にならない程度いつけることで吸引力を保つ効果を与えることを意識しました。