← 制作実績の一覧へ

WORK / 25 コンペ提案 · 設計・デザイン提案

キャンベル動物病院

飼い主の問いを、診療・信頼・来院の入口にする。

担当・制作範囲
要件整理・情報設計・PC/SPワイヤー・PC TOPデザインB/C案。SPはワイヤー段階の紹介で、完成デザインとは区別します。実装・公開は含みません。
使用ツール
Figma
制作区分
コンペ提案
ラベンダーのB案
ラベンダーのB案拡大して見る ↗

01 / OVERVIEW

背景と、制作の考え方。

飼い主が知りたい「何を診てもらえるか」「安心して任せられるか」「いつ・どう行くか」を整理した動物病院のTOPページ提案です。共通の情報設計をもとに、ラベンダーのB案とぶどう色のC案を展開しました。

02 / DESIGN NOTES

セクションごとに、答える疑問を決める。

診られる動物と診療内容、病院の特徴と診療の流れ、診療時間とアクセスを、それぞれ飼い主の疑問に対応させました。病院の説明と来院の行動を分けながら、読み進める順序を整理しています。

飼い主の3つの疑問と情報の関係
飼い主の3つの疑問と情報の関係拡大して見る ↗

03 / DESIGN NOTES

PCとSPで、情報の優先順位を共有する。

ワイヤーでは同じ情報の優先順位を画面幅に合わせて組み直しました。SPの電話導線も検討し、写真の印象だけでなく、必要な案内にたどり着ける構成を先に考えています。

PCとSPの検討。完成SPではない
PCとSPの検討。完成SPではない拡大して見る ↗

04 / DESIGN NOTES

B案は、柔らかい面と写真の丸みで。

淡いラベンダー、アーチや円の写真を使い、清潔感と親しみやすさを目指しました。診られる動物や初めての方向けの説明を、ひとまとまりずつ読めるように整理しています。

対象となる動物の案内
対象となる動物の案内拡大して見る ↗
来院後を想像するための案内
来院後を想像するための案内拡大して見る ↗

05 / DESIGN NOTES

C案は、ぶどう色と縦書きで記憶に残す。

共通の情報をもとに、ぶどう色の円と縦書き、大きな写真を使う別案を制作しました。医院名を連想する色や形と、診療案内の分かりやすさを両立させる表現を比較しています。

ぶどう色と縦書きのC案
ぶどう色と縦書きのC案拡大して見る ↗
電話など次の行動への入口
電話など次の行動への入口拡大して見る ↗