Webデザインのトレース　#3.島の病院おおたに

今回は、こちらの「島の病院おおたに」さんのWebサイトをトレースさせて頂きました。

まず目に入るのは屋上テラスから見える景色のパノラマ写真（メインビジュアル）。

そして聞こえる海辺の街を連想するBGM。

メインビジュアルは三方裁ち落としで時間が進んでいるような印象を受けます。

そこにゆったりとしたBGMが合わさることで海辺のロケーションを想像しやすく、

ゆったりとした癒しの時間の中にいるような感覚になりました。

地図で見てもわかるように、病院は広島の海に面した場所にあります。

必要最小限の情報が画面の中に収まっていて、ページ内で迷子になりにくいです。

病院を探している時って、診療科はもちろんですが「受付時間」「休診日」「電話番号」をすぐに知りたい場合が多いと思うんですよね。それがトップページに記載されているので、知りたい情報を見つけやすくて便利です。

スクロールするとメインビジュアルがスライドし、メニューとして機能します。

もちろんナビゲーションもシンプルで使いやすいのですが、「写真」と「動くもの」はついつい目で追いたくなります。そして興味をもったメニューがあればクリックして開けるという自然な流れができています。初めてサイトを訪れる方でもスクロールで簡単に操作できます。

主として使われているフォントは游明朝です。その他の使用フォントも明朝体やセリフ体で、全体的に安心感がありスッキリとした印象を受けます。

ベースカラーに白、メインカラーに紺色を使用しています。

青は信頼、清潔などの印象を持つ色です。冷たい印象を受けるのも青ですが、こちらは自然やひとの写真を多く使用していることで親近感や安心感があります。

最新の新着情報が赤色の文字で表示されるので、タイミングによっては赤がアクセントになります。

トレースとは関係ないことですが、配色の比率をバーで示せるようになりたいな。

簡単そうに見えて今の自分には難しい。

NEWS（新着情報）は1行にまとめられていて、約5秒ごとに内容が入れ替わります。

通常は紺色の文字ですが、前述したように最新の情報は赤色になります。アクセントカラーと動きをつけることでスペースをとらずに目立つデザインになっています。

少し気になったのは、雰囲気づくりに貢献しているBGMがサイトを重くしている可能性でした。作業中、PCが熱くなってきてバッテリーの消費が早くなっている気がしました。このためか情報量が多い他のページではBGMを使用していませんでした。

今回は「島の病院おおたに」さんのWebデザインをトレースさせて頂きました。

メインビジュアルとBGMの相性が良く、ロケーションや病院の雰囲気が伝わってくる素敵なデザインでした。

chouchou