【架空】さとう動物病院｜サイトデザイン・イラスト・実装

2025-07-14

架空の動物病院「さとう動物病院」のWebサイトの、デザイン・イラスト制作・STUDIOでの実装まで一貫して行いました。

以下のリンクより、実際のサイトをご覧いただけます。
▶︎ https://satou-animal-hospital.studio.site/

前回制作したサイトはこちら：
▶︎ https://panda-pankobo.studio.site/

サイトの概要

▪️想定クライアント
地域密着型の小規模な動物病院（犬・猫の診療が中心）
▪️ターゲットユーザー
犬や猫の診療の予約・相談をしたい飼い主
▪️サイトを作りたいクライアントの目的
・電話や受付の混雑を避けたい
・臨時休診などの情報を簡単に伝えたい
▪️サイトを見に来るユーザーの目的
・診療の予約をしたい
・診療日、診療内容、お知らせをすぐに確認したい

ロゴデザイン

ロゴは、Adobe Stockのイラスト素材をベースに、色の調整や文字の組み合わせを行い制作しました。
親しみやすく温かみのある印象を意識しています。

トップページ

タブレット・スマートフォンでの工夫

タブレット・モバイルユーザーが使いやすいよう、ハンバーガーメニュー内にナビゲーション・診療時間表・CTA（予約・問い合わせ）を設置しました。

お知らせ記事一覧ページ

現時点でのSTUDIOの仕様上ページネーション機能がないため、「もっと見る」ボタンで記事を追加表示する形にしています。
初期表示は3記事にし、スマホでも快適に閲覧できるよう意識しています。

お知らせ記事詳細ページ

トップページへ直感的に戻れるよう「ホームに戻る」ボタンを設置。
加えてすぐに一覧ページへ遷移できる「一覧へ戻る」ボタンも配置しています。

イラスト・バナー

診療内容紹介のイラストは、ICOOON MONOの素材を一部加工して使用しています。

CTAエリアに使用している犬と飼い主のイラストはAdobe Frescoで手描きしました。

フッターやメニュー内で使用しているバナーは、Illustratorでイラストとデザインを制作しています。
「Instagramでもお知らせを行っている」ことが伝わるようにしつつ、サイトの雰囲気を明るくする配色も意識しています。

STUDIOでの実装について

今回は、「病院の混雑緩和のため、Webでの情報発信を強化したい」という想定で制作しています。
そのため、病院からお知らせを発信できるよう、STUDIOのCMS機能を活用し、お知らせ記事を簡単に投稿・管理できる構成にしています。

また、前回はトップページのみの制作でしたが、今回はより実践的な構成を目指し、下層ページまで制作。レスポンシブ対応も実施しました。

前回のサイト制作についての解説記事はこちら：
▶ https://animo-web-create.com/works/sample-site-studio_pandapankobo/

解説は以上です。
ご覧いただき、ありがとうございました🐶🐱

プロジェクト	架空の動物病院「さとう動物病院」のWebサイト制作
作業内容	TOPページ、記事一覧ページ、記事詳細ページのデザイン実装イラスト作成
使用ツール	Photoshop / Illustrator / Fresco / STUDIO
URL	さとう動物病院