概要

今回の制作物は、スクールの最終課題で仕上げた歯医者を想定したものになります。
制作に4ヶ月かかりました。

意識した点は3つ

• 病院らしく配色は多用せず白と青系の色でまとめています
• 背景画像や影を多く使って奥行きのある印象にしました。
• 当院について、診療案内、スタッフ紹介、スタッフブログ、お問い合わせののトップページ以外で5ページ作成しています
• ホバーなどのアニメーションもリンクがついてる箇所に付けています。
• 各セクションのタイトルのデザインは統一させています。
• 背景画像があるセクションとないセクションを設けて、セクションごとの区切りが分かりやすいようにしています。

それでは各セクションごとに解説をしていきます。

PC表示

スマートフォン表示

ハンバーガーメニュー

header

• ロゴ、各ページのリンク（アイコン付き）、アクセス情報を入れています
• タブレットサイズになるとハンバーガーメニューになります
• 常に上部に表示されます

top

• メインビジュアルには、案内風景の写真に伝えたいメッセージを乗せています。
• 最新のお知らせ情報とカレンダーも盛り込みました。
• topだけタブレットサイズに対応しています

concept

• 背景画像、画層、本文の3つで構成しています。
• 背景画像は枠を丸く仕上げています。
• 本文は背景画像の上に表示させて、タイトルと説明欄を設けています。
• リンクボタンを設置して当院についてのページにリンクさせています。
• スマートフォン表示では、縦並びになるので背景画像の位置を変えています。

当院の3つのおすすめ

• 画像を入れて伝わりやすくしています。
• 注意書きの部分だけ赤色にしています。
• 表示サイズが変わっても各アイテムの間隔は一定にしています。

診療案内

• 診療は、一般診療と特殊診療の2つなのでそれぞれ画像の上に文字をのせました。
• 一般診療、特殊診療どちらとも画像にホバーすると画像が拡大し暗いフィルターがかかります。

スタッフブログ

• アイキャッチ画像、カテゴリ、タイトル、日付けで構成して一目でどの様な記事かわかる様にしています。
• 記事自体にマウスをホバーすると画像が拡大し。タイトルの文字が青色に変わります。
• 記事の数は6つ以外でも一定の間隔を保って表示できる様にしています。

フッター

• フッターには、住所、電話番号、予約ボタン、お問い合わせボタン、カレンダー、マップを入れて一通りの情報をまとめました。
• マップのサイズは表示サイズに合うように調整しています。

ハンバーガーメニュー

• スマートフォン表示では、headerの右側のリストを1つのアイコンに集約しました。
• そのアイコンをクリックすれば画面が切り替わりリスト一覧の表示になります。