メインカラーをセッティングしよくブランディングされていて、柔らかくもスッキリとした見やすいサイト。
よく見たら、参考サイトでよく見る大野記念病院の系列とのこと。同じ制作会社さんが作ってるんだろうな、素敵だなーと思ったので今回はこちらをピックアップ。
トンマナ
- メインカラーのグリーン（#42A995）がパキッと使われてイメージカラーが確立されている。
- ターゲット層を意識してフォントは大きめに設定されている。（ベースが20px!!）フォントが大きいと、野暮ったかったり窮屈なイメージがあるが、このサイトは余白がゆったりと設定されていることで、とても見やすく違和感がない。
- ロゴの一部があしらいとして使われている。これもブランディング力につながる。
FV
メインカラーをロゴ・CVボタンだけでなくスクロールを促すエリアにも使用し一目でこの施設のテーマカラーがわかる。
写真は職員さんの笑顔や、患者さんに寄り添うカットが柔らかなフィルターを通して使用されていて、柔らか・温かな雰囲気が伝わる。
写真箇所のRはあまり見ない形だが違和感はなく、柔らかさを感じる。
ナビゲーション
PCは高さ142pxとこれも大きめ！
子ページのあるメニューはロゴを彷彿させるあしらい半円マークが。
子ぺーじが少なくてもホバーで大きく展開。大きめのアイコンでユーザーがメニューへ遷移しやすく工夫されている。
また、背景が暗くなるのも見やすさUP。
ボタン
動きが大きい。これもユーザーを意識して変化がわかりやすく設計されている？
見出し
アクセント代わりに英字が小さく配置。ロゴの一部をアクセントとして使われている。
英語と日本語の間が大きめだが、違和感を感じさせない。
About セクション
ここにもロゴマークの一部があしらいとして使用されている！
写真は一時期（今も？）流行っている数枚重なっている見せ方。（展開はしない。）
背景は右下だけ大きなRで、後ろにメインカラーのグリーンが垣間見えて、それもアクセントになっている
Featuresセクション
右半分だけスクロールされる。
しつこすぎず、かつユーザーが特徴を自然と見るような設計。参考にしたい。
背景は全面メインカラー。パキッとした印象に。
こちらは前のセクションとは反対の左下がのRが大きくなっている。
Servieセクション
特にアイコンの一部がメインカラーを使用しているところがポイント。
そしてここの写真にもロゴのあしらいが！背景が白なのでここにアクセントがあるだけでいいバランスが取れている。
Flowセクション
ページ全体のバランスを考慮して写真の位置は前のセクションを逆に配置してい流。
ここも重要なページメニューはアイコン付きの大きめのボタンを配置。
お知らせセクション
点がホバーで矢印になる。見やすいUI設計。
ここが全部最初から矢印だと窮屈な印象になってしまうので、初期はドットにするという仕様はすごくいい。参考にしたい。
背景はこれまで使用していなかった柔らかいベージュ色。メインカラーとの相性も◎
カテゴリー一覧のUIはすっきりしていてよき。
ギャラリーセクション
施設の雰囲気を写真で伝える重要な箇所。スクロールすると横に流れる展開。
ただ写真を並べるだけでなく、上にFVにも使われているコピーを重ねることで単調ではなく今っぽいデザインにもなっている。
FOOTER前
アクセス、お問い合わせボタンも大きめで存在感抜群。
背景はメインカラー。左上のR大きめ。
FOOTER
ページが多い中で情報が綺麗に整理されていてみやすい。
左の住所・電話番号は大きめにエリアを設けてわかりやすく設計されている。
ここにもロゴを彷彿させつあしらいが使われており、単調さをなくし、柔らかさや温かみを見せ方になっている。
下層ページ
見出し→画像を大きめに配置した後に2カラムページになる使用。
サイドメニューはシンプルなデザインながらも、スクロール位置に合わせて色が変化するので現在の表示セクションがすぐにわかる。
このページは特に見出しの上に、アイコンを一覧で並べ該当のアイコン以外は透過。
こちらも現在表示のセクションがわかりやすく工夫されている。
「1日の流れ」のような、新たにページを作成するまでもないセクションはモーダルで表示。
戻るボタンもロゴの一部を使用！！
まとめ
- テーマカラーの使い方
- 大きいフォントでもゆとりのある見せ方
- ロゴの一部を用いたあしらい方
などなど、今回も勉強になること盛りだくさんでした！
今日のひとこと
できるだけ2日に1サイトは更新したいと誓ったはずが、平日は予期せぬトラブル対応で仕事がバタバタ。本気でプライベート時間取れずに断念。育児・仕事・家事。その合間でインプット。やりたいこともたくさん。時間がない。時間が、ない……..
でもめげずに週末更新しただけでも自分を褒め称えようと思う。
ちなみに来週は子の検診で有給使うので、その分また夜中に仕事消化しないとなので、また更新は遅くなる予感…
夫よ、有給取れば仕事休めるわけじゃないんだからな。
仕事してる分の時間は全部子の面倒に費やされるし、子が寝た後に仕事するんだからな。休みなんかじゃないんだからな、言葉を選べよ。。。（愚痴やんか）