chouchou

未経験からWEBデザイナーを目指すfuyu_naのブログ

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

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

選んだ理由

  • パノラマ写真と海を連想するBGMに惹かれた
  • シンプルで目的にたどり着きやすいデザイン
  • 医療機関のWebサイトに興味があった
 

デザインの観察

パノラマ写真を使ったメインビジュアルとBGMの素敵な相性

まず目に入るのは屋上テラスから見える景色のパノラマ写真(メインビジュアル)。
そして聞こえる海辺の街を連想するBGM
メインビジュアルは三方裁ち落としで時間が進んでいるような印象を受けます。
そこにゆったりとしたBGMが合わさることで海辺のロケーションを想像しやすく、
ゆったりとした癒しの時間の中にいるような感覚になりました。
 

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

迷子になりにくいシンプルなデザイン

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

スクロールでメニューをスライドショー

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

基本のフォントは游明朝

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

配色は清潔感ある白と紺が主

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

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

トレースとは関係ないことですが、配色の比率をバーで示せるようになりたいな。
簡単そうに見えて今の自分には難しい。
 

1行でスッキリとしていて動きのある「NEWS」

NEWS(新着情報)は1行にまとめられていて、約5秒ごとに内容が入れ替わります。
通常は紺色の文字ですが、前述したように最新の情報は赤色になります。アクセントカラーと動きをつけることでスペースをとらずに目立つデザインになっています。
 

BGMはサイトが重くなる

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

最後に

今回は「島の病院おおたに」さんのWebデザインをトレースさせて頂きました。
メインビジュアルとBGMの相性が良く、ロケーションや病院の雰囲気が伝わってくる素敵なデザインでした。