動物病院のホームページ

制作時期	2025年11月上旬
制作時間	デザイン30時間 / コーディング30時間
使用ソフト	Illustrator / Dreamweaver
概要	職業訓練校における最後の制作発表における作品です。以前の課題で制作した三つ折りリーフレットの題材を活用し、動物病院のホームページを制作しました。 これまでの反省を踏まえて、情報を整理した後にそのままデザイン制作へ移行するのではなく、一度デザイン案をノートに留めイメージを固めてから制作へ取り掛かりました。いつまでに何を終わらせる、などを細かく計画し、段取りを大切に制作しました。 トップページ1枚と、お知らせページ1枚、スタッフと施設案内ページ1枚の、合計3ページをデザイン＆コーディングしております。
実際のサイト	https://gcn-portfolio.com/g20250515/oi/animal/

ターゲット層

猫、犬を飼い始めた飼い主。健康診断やワクチン接種などで通院するための動物病院を探している。

サイトの目的

動物を飼い始めた飼い主さんが、家から通える範囲にあるいくつかの動物病院の中からどこに通うか迷ってそれぞれのホームページを閲覧・比較している時に「ここの動物病院なら安心して通えそうだな」という印象を与え、通院し続けたいと思ってもらえるようなwebサイトを目指す。

動物病院の特徴

・動物に優しい診療。
・飼い主さんとの対話を大切にしている。
・清潔であたたかな院内づくり
病院と聞くと「行きたくない」「怖い」というイメージを飼い主さんも動物も抱くことが多いと思われるが、そんなイメージを少しでも和らげられるように上記の3つを大切にしている。

デザインコンセプト

色に関しては、温かい優しい印象を与えるために全体的に淡いトーンで統一し、柔らかく平和な印象を与える黄と緑を選択。
文字に関しては、テキストからも柔らかい雰囲気を感じてもらえるよう、特にタイトルなどは日本語やひらがなを多めに使用する。特にタイトルなどの目立つ部分は丸ゴシックを使用する。
病院名の「てまり」を意識して、配置するオブジェクトなどの多くに丸みを入れる。
テキストをそのまま配置するだけでは鋭い印象を少々与えるかと感じたため、クッションとなるようにタイトルの手前などに丸みのあるデザインのアイコンを配置。

デザイン

※横スライドで別ページのデザインを見ることができます