くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[サイト制作]第1号Webサイト完成

約1ヶ月取り組んでいた動物病院のサイト制作が、一旦完成しました。

 

コンセプト: 「いつでも親身になって相談できる、私たちの身近にある、町のお医者さん」

 

トップページ

f:id:pleasure10501:20150601173520p:plain

2ページ目

f:id:pleasure10501:20150601173535p:plain

フッター部分

f:id:pleasure10501:20150601173958p:plain

 

<ポイント・気をつけたこと>

  • 色・・・清潔感のある白をベースにした。メインカラーは信頼感を持ってもらえるブルーにし、親しみやすさを表現するためオレンジをサブカラーにした
  • 硬い雰囲気になりすぎないように、病院ロゴや見出しなどは丸いフォントを使用した。テクスチャー感のある背景画像を使用。
  • クライアントの要望によりバナー等にはイラストを使用し、可愛さを出した。
  • サイドナビゲーションはバナー風にした

 

ユーザビリティ

  • バナーにはシャドウで立体感を出した。ボタンだと認識してもらうため。
  • ページの下から上に戻りたい時のために、ある程度下にスクロールすると右下に「ページのトップへ戻るボタン」が表れるようにした。(jQuery使用)
  • アクセス方法を知りたい時に、右サイドバーの簡易地図とGoogle Mapの2種類を用意。Google Mapは古いIEでも表示される。
  • 臨時休業などお知らせを表示する為にTwitterを埋め込んだ
  • 連絡先などを探さなくて済むように、ヘッダーとフッダー両方に電話番号と営業時間を表示した。
  • 予約の必要なサービスの案内のページには、本文中にも連絡先を明示

 

改善点(先生からの指摘など)

  • 青が多いため、動物を扱っている割には冷たさを感じさせてしまう可能性がある。配色を見直すこと
  • グローバルナビゲーションの色は要改善。文字が見づらい

 

 

 

広告を非表示にする