WEBサイトのデザイン観察 vol.5
今回も、以下のサイトのアドバイスしたがって、WEBサイトのデザインのポイントを書き出してみます。
https://www.webcreatorbox.com/tech/improve-design-skills
観察するサイト
今回はこちらのサイトについて考察します！
デザイン観察
《気になったところ》
・書体の雰囲気が優しい
・メニューが見やすい
・余白があって読みやすい
・ボタンがわかりやすい
《なんのサイトか》
・さい眼科医院の紹介サイト
・地域医療の一環として、来院が困難な方への往診・送迎等を行なっている
・バリアフリー設計なので、車いすで院内を移動することができる
・日帰りで白内障手術ができる
考察：
・病気の不安を抱える患者さんに安心感を与えるサイトになっている。
《ターゲットのユーザー層を予想》
・埼玉県川越市に住む、高齢の親の受診を検討している50代の女性（？）
考察：
・文字が大きめで読みやすい。
・「当院の特徴」で、近隣の老人ホーム・介護福祉施設様から通院できることをアピールしている
《配色》
・白、緑、黒
考察：
・緑色を使うことで、健康的で安心感があるサイトになっている
《書体》
・英語はサンセリフ体、日本語はゴシック体
考察：
・丸みのあるフォントで、親しみやすさを感じる
《レイアウト》
・グリッドレイアウト
・ハンバーガーメニュー
・ファーストビューで眼科の写真の上にキャッチコピーが載せてある
・マウスを載せると、説明文の部分が緑に変わり、ブロックに若干影ができる
・スライダーで、病院の外観や、院内の様子がわかる写真を表示している
考察：
・診察内容が内容ごとに並べてあり、見やすい。が、リンク先が内容に対応していないため、少しわかりづらい。
・メニューの左下に緑色で「contact」というボタンがあり、「問い合わせ」が目立つように配置してある。
・メニューの頭に矢印がついており、マウスを載せたら色がかわるとともに、動きがある。色覚に障害がある方にもわかりやすい。
・ファーストビューが印象に残る。が、文字が少し読みづらい。
・病院の内外の紹介の優先度は高くないと思われるが、複数枚にわたるため、ページの下部に配置し、スライダーにすることで程よく目立っていると思う。
・地図が画面横幅いっぱいに表示されており、見やすい
サイトの説明をしてみる
埼玉県川越市に住む、高齢の親の受診を検討している50代の女性をターゲットにした、さい眼科医院の紹介サイト。診断内容がグリッドレイアウトで整列されており、わかりやすい。丸みがあり優しい雰囲気の書体や、白、緑、黒といった色合いを使用し、健康的で安心感のあるサイトになっている。
参考
Webデザインの基本。グリッドレイアウトの魅力と参考になるWebサイト
https://webdesign-trends.net/entry/1110
WebサイトのスライダーについてUIの観点から考える
https://sib-lab.jp/usability-test/slider
【失敗しない】病院・クリニックのホームページ参考デザインをプロが総まとめ！
https://web-kanji.com/posts/hospital-homepage-design
この記事が気に入ったらサポートをしてみませんか？