ほしくず.com

Animal Hospital ＠ Sakurazaka Dog&Cat Hospital

グループ課題【さくら坂ワンニャン病院】
Webページへ

病院のサイトという性質上、とにかく情報量が多く、設備の写真等もあまり無い状態だったのでコンテンツをどう振り分けるかにまず時間がかかりました。
今回はナビゲーション以外にも要所要所イラストを描きましたが少しくどくなってしまったなぁと反省。

課題名 動物病院
課題概要
  • 4人でのグループ制作
  • 各グループで病院のコンセプト、ロゴマーク、テーマカラー、キャッチコピーを考え共有。その後、各自DTPもしくはWEB制作
  • 必須課題：WEB→サイトのデザインとコーディング
案件概要
  • 名称：「さくら坂ワンニャン病院」
  • サイト概要：10/1に新規オープンする動物病院のサイト
  • 対象動物：犬、猫のみ
  • コンセプト：地域に密着した、病気やケガの時以外でも気軽にペットを預け、任せられる病院を目指す。
    健康管理からしつけ、病気の予防等なんでも相談できるペットのトータルコンサルタント。
  • テーマカラー：オレンジ（温かみ、親しみやすさ）
  • ターゲット：近所に住んでいる広い層の年代の方に愛されたい
構成要素
  1. トップページ
  2. 病院概要、診察概要
  3. 独自のサービスページ（トリミング、ペットホテル、出張預かりサービス）
  4. お問合わせフォーム
キャッチコピー 『耳かきだけでも、だいじょうぶ。
あなたの家族（ペット）を任せられる場所』
サイズ 幅：900～1000px　縦：任意
（ブラウザサイズに合わせて変化するデザインでも可）
制作意図 身近感と気安さを出すためにところどころにイラストを配置し、テーマカラーのオレンジを全面に出しつつも、そればっかりにならないように気を付けました。
結果、少々子供向けコンテンツのようなデザインになってしまった感じもしますが、必要な情報や信頼性を出したい部分は多少カッチリとした印象のデザインにするようにしました。

ヘッダーとフッターを各ページ定位置に固定し、フッターには病院の診察時間や住所、電話番号、マップを掲載したりヘッダーのボタンから一瞬で下部へ飛べるようにする等、見たい情報を迷わず選んで見ることができる、という点に気を使ったつもりです。

ナビゲーションはカラント表示にし、該当ページを見ている時はずっと絵柄が変化したボタンが表示される仕様にしました。
作業環境
  • 制作期間：2016/9/6～2016/9/22　2016/9/23発表
  • 作業時間：約50時間
  • 使用ソフト：illustrator CS5、Photoshop CS5、Tera pad
  • 確認環境：Google chrome
© 2016 Webマーケティングデザイナー養成科 第12期生 生徒作品