動物病院のホームページ

制作時期 2025年11月上旬
制作時間 デザイン30時間 / コーディング30時間
使用ソフト Illustrator / Dreamweaver
概要 職業訓練校の最終課題として制作した、架空の動物病院のホームページです。
以前に制作した三つ折りリーフレットと同一の世界観を活かし、Webサイトとして再構築しました。
制作にあたり、まず情報整理と画面構成のラフをノートに落とし込み、イメージ固め → デザイン → コーディングの順で段取りを明確化し計画的に作業を進めることで、期限内に3ページ(トップ/お知らせ/スタッフ・施設案内)を完成させています。
実際のサイト https://gcn-portfolio.com/g20250515/oi/animal/
動物病院モックアップ

ターゲット層

犬・猫を飼い始め、健康診断やワクチン接種のために通院先を探している初心者の飼い主。

サイトの目的

複数の動物病院を比較検討している飼い主に対し、「ここなら安心して通えそう」という印象を与え、継続的な通院につながる信頼感を提供すること。

動物病院の特徴

・動物に優しい診療
・飼い主との対話
・清潔で温かみのある院内づくり
病院に対して「怖い・不安」といったイメージを持つ人や動物の心理を和らげるため、上記の3点を大切にしている設定とした。

デザインコンセプト

色:優しく温かい印象を与えるため、淡いトーンを基調に、平和さと柔らかさを感じる黄と緑を採用。
文字:見出しには丸ゴシックやひらがなを多用し、柔らかい雰囲気を演出。
モチーフ:病院名「てまり」に合わせ、各パーツやアイコンに丸みを持たせ統一感を出した。
テキストだけではやや硬い印象になるため、クッションとなる丸いアイコンを見出し付近に配置し、親しみやすさを強調。

デザイン

※横スライドで別ページのデザインを見ることができます
動物病院トップページイメージ
動物病院お知らせページイメージ
動物病院スタッフページイメージ

back to portfolio...