#035 クリーンで信頼感のある歯医者さんのサイト
こんにちは！Webサイト研究です。
１週間ぶり…！（もうちょっと頻度を増やしたい…）
今日は、「SANKOU!」さんからチョイスです。
そしていつものようにこちらの記事を参考にして研究します！
「Y's デンタルクリニック」
フルのキャプチャを撮れませんでした…涙
でも動きのあるサイトなので、ぜひWebサイトに飛んで見て見てください〜(^ ^)
キービジュアルのゆらゆら揺れ動く感じが綺麗です〜！
白ベースでクリーンな印象ながらも無機質さはなく、そして信頼感のあるサイトだなと感じました。
そしてこちらの歯医者さんは、私の大好きなモデル大屋夏南ちゃんが行っているところで、名前を聞いたことがありました。（でもPRではなく知り合いにオススメされて行き始めたって言ってました！）
さて研究していきます！
☆リンク要素のルール
・グロナビ→グロナビ全体がマウスオーバーで色が変わり見えづらくなる＆マウスを乗せたナビの色が明るく見えやすくなる！
（↑分かりづらい説明…）
・「more」系→マウスオーバーで円形が出てくる
・記事系は「→」と文字が動く
・リストはマウスオーバーで、下層ページの関連写真が出てくる
☆王道サイズ、形のセオリー
・大見出しの英語（100px程度）が、テキスト部分（13pxt程度）の10倍。ジャンプ率大きい！
・小見出しの文章は25px程度
☆薄い色は何色あるかをつかむ
・新着記事や診療時間などの区切り線に薄いグレー
☆コンテンツの横幅、グリッドのルール
・ブロークングリッド
・見出しは左右に交互or中央
・wrapper作ってその中でpositionで配置
☆写真や図や比率のルール
・縦長、横長、正方形など色々なサイズ感があり、ランダム感。
→ブロークングリッドにはランダム感がちょうど良さそう！
☆レスポンシブの変化のセオリー
・左が上、右が下の基本ルール
☆配色のルール
・文字色#586166でグレーっぽい
・背景白
・写真は背景が淡い水色系やブルーグレーっぽい感じ
☆読みやすい文字量
・正直テキスト部分が13px程度と小さく、そしてグレーっぽく薄いので読みづらい感はある…
・でもline-height:2.8で行間が大きいので、小さい文字でも読みやす差はある。
・英語の見出しが110px程度で大きいのでむしろあまり目に入ってこない
→小見出しの25px程度の文章がすっと入ってくる印象。そういう戦略…？！
こんな感じの研究でした。
個人的には、フォントサイズや行間、配置など文字の扱い方が勉強になりました。
情報の優先順位をきちんとつけて、読ませたいものが読みやすくなるよう作っているのかな、という印象。
あとマウスオーバー。これぞwebならでは！なリンク。
マークアップ難しそう…汗
これもフォントサイズ小さくて読みづらい感は否めない気もしますが、マウスオーバーを使うことで視線誘導がしっかり設計されているのかなと思いました。
私は元医療系で病院で働いていたので、デザイナーとしてもまた医療や福祉の分野に関わりたいと改めて思いました。
今日も最後までお読みいただきありがとうございました！