副島眼科 Official Web Site

概要

テーマの狙い：コーポレートサイトをより細分化、専門的なサイトを目指す為
主なターゲット：女性、子供連れ
女性院長の病院という設定を決め、清潔感と洗練されたデザインを意識して作成しました。
診療時間のテーブルのみbootstrapを使用して作成しました。

使用ツール

VisualStudioCode / Photoshop / Illustrator

制作期間

4日間／3ページ

URL

http://risasoe.stars.ne.jp/hospital/index.html
※トップページ、「診療のご案内」ページ、「外来予約」ページ　のみ閲覧可能です。
※レスポンシブ対応

色とフォント

メインカラーは、白をそのまま使用し、テキストカラーの#2d344aをボタンやフッターの背景にも使用しています。
洗練された雰囲気を出すためと、画像を多く入れるということもあり、色はあえてこの2色だけに絞りました。
フォントは、清潔感や上品さ、また信頼感を増すために游明朝にしています。

画像編集

清潔感と洗練された雰囲気を出すために、画像は全てPhotoshopで青みを意識した色調補正を行いました。
また、明るく親しみやすい雰囲気も入れたかったので、レンズフレアのブラシをインストールし、光が差し込む様子を追加しました。

感想

画像の雰囲気はそのままサイト全体の雰囲気に直結することに気付き、画像編集の重要性を実感しました。
また、トップページの目の画像の位置調整や、コンテンツページの左側画像の固定などに苦労しました。 その際、参考にしたサイトの検証ツールとにらめっこしたおかげで、検証ツールで構造を解読する力が身に付きました。