ふくだハートクリニック

地域完結型医療を支えるため、地域の基幹病院と連携し切れ目のない医療提供を目指す架空の心臓内科医院

サイトのファーストビューです。
診療内容をまとめた箇所の画像です。
制作目的
新規にオープンしたクリニックをPRする
診療内容を知ってもらう
デザインイメージ
清潔感や医療機関としての信頼性を感じられるデザイン
ターゲット
心筋梗塞治療後の50代男性
制作期間
2か月(企画2週間、デザイン3週間、コーディング3週間)
使用ツール
Figma / Illustrator / Photoshop / HTML / CSS / JavaScript
URL
https://fukuda-hc.design-dandan.com

Comment

スマートフォン版の画像になります。
・デザインについて


医療機関ということもありメインカラーは清潔感や信頼感を感じさせる青系統とし、ロゴにアクセントカラーとしてピンクを設定しました。ロゴのカラーから、心臓や血管といったイメージを感じてもらえるようにしています。
また、初期のデザインではページ全体を通して堅い印象が強かったので、カラーに灰色味を加えたり画像やアイコンの角を丸め柔らかさを感じられるようにしました。


対象はご高齢の方が多くなると予想し、コンテンツ量を絞るとともにナビゲーションや具体的な診療案内につながるアイコンやフォントサイズは大きめに設定しています。
ページ構成が複雑になると混乱しやすいと考えたため。今回は2階層の構造となっています。


TOPページ以降のデザインにも統一感がでるように設計しました。
ページ全体をシンプルにしたぶん、今後例えば患者への学習要素としてコラム欄や疾患についての概要ページを設けたい、といった要望がでたとしても追加・カスタマイズしやすいページ構成としています。

・制作した感想

初めて自主制作したサイトになります。企画からデザイン、コーディングまでサイト制作の流れを実践してみました。
実際に作成に移るとフォントやコンテンツがユーザーにどう映るのか、自分と違う年齢や立場の人を想像しながら設計するのは難しかったですが、ご高齢の方と関わることの多かった看護師の経験を活かすことができたと思います。
受診につながるアクセス情報はユーザーが混乱しないようにアドバイスをもらいながら修正しました。
コーディングについては、思ったように表示されないことも多く時間がかかってしまいました。クラス名についても設定するルールを決める、意図が明確に伝わるようにするなど分かりやすいコーディングを心がけたいと思います。

ページヘッダーへのガイドボタンです。