参考デザイン
design

熊本市にある病院のホームページデザイン例

https://www.sakurajyuji.or.jp/
オシャレな病院のホームページデザイン例
Design Review

デザイン解説

メインビジュアルは背景写真がフェードイン表示でスライドし、キャッチコピーの「これからの医療を、ここから。」で固定して表示している。スライドする写真ごとにキャッチコピーを変えるサイトも多いが、ここは一つに絞ってスライドする写真で安心感・信頼感を演出している。

グローバルナビゲーションでは背景写真が薄っすら表示される仕組みになっており、ソースコードを確認したところ、CSSで透過の設定をしていた。ほんのちょっとした細工だが、とてもオシャレな印象を与えている。また各メニュー等で明朝体が使われているが、厳格、規律という堅いイメージを与えることができる明朝体は、命を取り扱う病院では使われやすい特徴がある。

個人的に着目したいのが、グローバルナビゲーションの下の丸い背景にイラストが置かれたメニューだ。これらのメニューはマウスオーバーすると、ボックス全体まで丸の背景色が広がると同時に、フォントが白抜きになる。

桜十字病院のメニューがおしゃれ

メニューに書かれた明朝体の文字と英語はどちらも画像ではなくWebフォントが使われており、文字色の変更を全てCSSで実現している。マウスオーバーすると画像を切り替えるというようなサイトも多いが、このやり方は更新性が悪いため(通常時とマウスオーバー時の2枚の画像を用意する必要があるため)、弊社でもなるべくWebフォントを用いて表現することを心掛けています。

カラーコード
  • ffffff
テイスト

こちらのホームページは弊社の制作実績ではありません

掲載会社の情報

会社名桜十字病院
業種病院
URLhttps://www.sakurajyuji.or.jp/
住所熊本県熊本市南区御幸木部1丁目1番1号
CONTACT

ホームページを作りたいけど何を相談したら良いか分からない方、まずは費用だけでも知りたい方、
お気軽にご相談ください。まずはあなたのお悩みや相談内容をお聞かせください。