サイトレビュー 02 - 幕張ベイパーク耳鼻咽喉科 -
こんにちは。
独学からWEBデザインをしているなべたです。
あけましておめでとうございます。
今年はもっとデザインを意識して行動したい1年にしたいと思います。
よろしくお願い致します！
2回目は幕張ベイパーク耳鼻咽喉科さんのサイトです。
サイトを選んだ理由
医療系の柔らかい雰囲気を掴む
テキストサイズの強弱
目的・ターゲット
目的：
海浜幕張の耳鼻咽喉院として知ってもらうこと
オンラインからでも予約ができる鼻アレルギー専門性が高い耳鼻咽喉院としてお問い合わせを増やす
ターゲット：
海浜幕張に住むお子様〜ご年配
耳鼻咽喉に悩む方
鼻アレルギーに悩む方
カラー
カラー
白色・緑色・黒色・茶色（ベージュ）
緑色のイメージ
ポジティブ：安心感、安定、調和、新鮮さ
ネガティブ：保守的、受動的
茶色（ベージュ）のイメージ
ポジティブ：柔らかい、ナチュラル、落ち着き
ネガティブ：無難、野暮ったい
全体的に柔らかい雰囲気を出すために、淡い緑とベージュで整えられている。優しい色合いで余白が広めに取られているのでなのでサイト全体に安心感がある。テキストも #000 ではなく #333 になっているので、読みやすい。
フォント
ベース：游ゴシック体（PC）、Not Sans（SP）
欧文：Brandon Grotesque, Heebo, DINosaur
Brandon Grotesque
Adobeフォントで使用可能。
2010年にHVDフォントのHannes vonDöhrenによって設計されたサンセリフ書体。カーニングを広めに取られている書体で、ロゴや見出しに最適
Heebo
Goggle fonts, Adobeフォントで使用可能。
ヘブライ語とラテン語の書体ファミリー。
DINosaur
Adobeフォントで使用可能。
名前の通り、恐竜のように大胆で親しみやすいフォント。
子供のゲームや漫画関連のデザインなどで使われることが多いそう。
フォントサイズ
PC
header：13px
MV：約48px, 19px, 15px
MV下：15px, 14px, 13.5px
予約表： 22px, 17px, 14px, 13px
各セクション： 34px, 20.4px, 18px, 17px, 16px, 15px, 12px, 11px
footer： 24px, 23.5px, 19px, 15px, 14px, 13.5px, 13px
SP
header： 13px, 12px, 10px
MV：約34px, 14.2px, 12px
MV下：13px, 12px
各セクション： 25.5px, 13px, 12px, 12.5px, 11px, 10px
footer： 20px, 19px, 15px, 13px, 12px, 11px, 10px
コンテンツ分析
FV
複数の写真を全幅に配置し、５秒間隔で徐々に手前から広がっていくようなアニメーションで自動的に写真が入れ替わる仕様になっているため、アニメーション効果もサイトの雰囲気に合っている印象。
右下に予約表を配置し、一目で院のスケジュールがわかるようになっており、また左側にはお知らせ欄もあるので、FVだけでお問い合わせ・院の予定が把握しやすくなっていますね。
他の医療系のサイトもこの配置が多かった印象です。（右下に予約表）
SPに関しては常に画面下部に予約のナビゲーションが固定されているので、予約がしやすいようになっている。コロナ対策の対応を一緒に配置することで、より安全面にも配慮しているという部分を訴求しているのかも。
ハンバーガーメニューに診療時時間やアクセスを入れずに、ハンバーガーメニューに隣に配置することで確認をしやすくしている。
ハンバーガーメニュー → 診療時間・アクセス → ページ
診療時間 → ページ
になっているので、タップする回数を減らしユーザーストレスを減らしている。
ABOUT〜
【全体の構成】
当院について→診療内容→特徴→医師紹介→お知らせ・ブログ
シンプルな構成で、セクションごとに背景色をベージュ→白と変え、コンテンツに変化をつけている。余白が多く取られているので洗練された印象をもて、文字数も多くないので見やすい。
またセクションごとのタイトルが筑紫？に似たフォントで柔らかさもあり可愛さがあるのですごく親しみやすい。
リンク部分はただ緑のテキストではなく、丸を重ねることで視認性が増してうまく下層ページに誘導しているようにも見える、
【当院について部分】
テキストが縦書き。
縦書き文字は右→左に読むようになっているので右側に配置されていると読みやすい。
画像がお母さん・お子さん・医師になっていて、お子さんが笑っていてすごく好印象。医師がお子さんの手を握っているところもまたサイトの優しい雰囲気を伝えていると思う。
【診療内容部分】
診療内容を横一列に並べており、シンプルな配置にしている。
ボックスにし背景色を白にすることで一目でどんな内容があるのかがありわかりやすい。
カーソルをのせた際に診療内容が大きくなるので、クリックできることがわかりやすくなっている。
【特徴部分】
院の特徴である「鼻アレルギー治療の専門性」「苦痛の少ない内視鏡」を他の特徴より大きく見せることで院の特徴を訴求しているのかな。配置はグリッド。
【医師紹介部分】
テキストの下に、医師の画像を全幅に複数枚配置し自動で流れるようになっている。右から左に流れているのは視線の流れに沿って流しているのかな。
写真は院内と医師の写真で、写真のトーンは抑えめに。
サイトと馴染むように彩度・コントラストを低めにしている？
人の顔があるとやはり安心できますね。
【お知らせ部分】
画像を上下に少しずらして、動きをつけている。
お知らせのタグが同じ緑ですが明瞭度を少し変更して、黄緑っぽくしているのでサイトの邪魔をしていない。
Footer
余白が広めで、とても見やすいので何があるかわかりやすい。
フッターにもお問い合わせできるようにフォームが配置してあるが、このフォームはオンラインからでも順番予約ができるようにしてある。FVでお問い合わせを逃したユーザーに対してフッターでオンライン予約可にすることでお問い合わせをしやすく逃さないようにしている。
まとめ
ユーザーにとっての「見やすい」「安心できる」という部分を大事に作られているなと分析をしていて思いました。構成や配置自体はシンプルですが、色を柔らかくしたり、テキストサイズを絶妙に小さくしたり大きくしたりすることで強弱をつけているのでそういったところが見やすい部分に繋がっているんだなと思いました。安心できるサイトってなんかいいですよね。
最初の投稿から時間が少し空いてしまいましたが、やれる時に自分のペースでサイト分析をこれからも続けていこうと思います。
同じくデザイナーを目指しているみなさん頑張りましょ〜！