【制作練習】WEBデザイン_ファーストビュー課題

WEBデザインの初回課題をクリアしたので
またnoteにまとめてみたいと思います。
まともなWEBサイトのデザインはこれがお初(/・ω・)/

＝＝＝＝＝＝＝＝

◆概要

整骨院サイトのファーストビューをデザインをしよう

今回はヒアリングシートに記載されているクライアント要望にそって
ファーストビューをデザインしてみる課題です。
写真素材もいくつかご提供いただいているていです。

◆成果物

左が初稿で、レビュー後のバナーです('◇')ゞ

◆初稿提出時のポイント

①カラー
クライアントからグリーンかオレンジをメインカラーに
と頂いていたので下記色にしています。
・メイン：緑
・強調色：オレンジ
⇒整骨院の名前にある「すずらん」をイメージしやすいように緑メインで白背景にした。
⇒清潔感・安心感・親しみやすさを感じやすいように、優しめの緑に。
⇒若者も年配の方も見やすいようにシンプルで少し可愛らしい色合いに。

②メインビジュアル
すずらんの葉をイメージして少しゆるやかなカーブの囲いを入れました。
院のアピールポイントをビジュアルに追加して、興味を持って頂きやすいようにしました。

③写真の選定
以下イメージしやすいように選定しました。
⇒整骨院の雰囲気を伝えられるように複数写真使用
⇒優しい先生が親身に相談にのってくれそう
⇒清潔な院内
⇒女性も気軽に診察できそう

④その他情報について
トップページ下部に、診察時間などの詳細は記載予定なので
問い合わせ情報は、電話番号のみのシンプルな形にしました。

◆レビュー頂いた点

①横いっぱいのファーストビューはNG
ヒアリングシートに下記記載があったのを、
写真画像さえ画面いっぱいにしなければOKと誤認していた…(´_ゝ｀)
今回のデザインはメインビジュアルの中の要素多めなので
すずらんの葉でメインビジュアルの範囲を狭くすることはやめました。
（写真大1つ・写真小2つ・キャッチ・アピール文と要素が多めなので）
↓
横幅一杯に大きく画像配置すること、ファーストビューでMVの下のコンテンツが見れないのは避けてほしい。

②メニューの「HOME」の余白だけ狭い
コーディングの際に狭いところに余白を合わせるようになってしまうので
もう少し広めにとっておいた方がよい。という指摘。
ここは葉の形をあきらめたので、自然に解消できました。。

③キャッチとアピール文が、もう少し写真にかぶらないように！
ここは提出直前に気づいてたけど、時間の都合上対応できなかったところ…。グラデーション位置を調整して解消しました。

④電話番号マークの白丸は消す
背景に背景を重ねるとやぼったく見えるので今回はなくてよい、という指摘。
言われるまで全然気にしてなかった…！
ご指摘通りに白丸消してスッキリさせました。

あとは、修正案で先生の写真と小さい2枚写真の位置も少し調整する指摘もうけました。

＝＝＝＝＝＝＝＝

バナーの課題レビューでよく指摘されてた整列は
かなり注意して対応したので、メニューボタンとかそのあたりの指摘は
今回はなかったので良かった(*^^*)

今回すずらんの葉の形は残念ながら使えなかったので
次の練習問題でまた、四角じゃない別の見せ方の
ファーストビューデザインチャレンジしたい。