WebGallery

Webデザインの初心者がスマートフォン対応しているWebサイトを淡々と紹介していくサイトギャラリーです。

*

動く虎たちが見ていて楽しい!病院ということを忘れさせてくれそうな「やざわ虎クリニック」のホームページ

   

長野県諏訪市にある内科・外科病院「やざわ虎クリニック」のホームページです。

ファーストビューに日本アルプスの山々の写真を使用しています。
壮大な景観がとても素敵です!爽やかな青色をした空と日本アルプスは、見ているだけで癒やされますね〜

何よりこちらのサイト、とにかく虎が動きます!
ホバーアクションだけでなくスクロールしたときもアニメーションを取り入れ、シンプルな構成にアクセントとして虎やバラのイラストが動くwebサイトになっています。

 

ボタンだけでなく、写真にカーソルを合わせると虎が出現!


画像をクリックすると、拡大表示されます。

上の写真のように、写真にカーソルを合わせると写真の後ろから虎がひょこっと顔やしっぽを出します。
ホバーアクションも1つ1つこだわっていて、サイト全体に統一感が生まれますね!私はコーディングする時に、「とりあえず写真はopacityかけとくか…」となってしまいがちなので、こういったキャラクターを使ったホバーアクションは見ていてとても新鮮です!
虎の顔と腕を別々の画像にし時間差をつけて表示させることで、より遠近感が生まれ虎の動きもリアルになっているんですね!

フッター部分にはトップページに戻るボタンや、トップに戻るボタンも虎のアニメーションを使用していて、とにかく徹底しています!

 - 写真で表現, 動きで表現, 病院

  関連記事

シネマグラフを使った写真が印象的!「京都 宇治 伊藤久右衛門」のサイト

「京都 宇治 伊藤久右衛門」のホームページです。 ファーストビューのスライダーが …

綺麗になれそうな美容外科

東京都豊島区にある美容・形成外科「エルテ大塚クリニック」のホームページです。 フ …

ケーキの魅力が伝わりやすいように白黒で配色されたサイトがシンプルでおしゃれ!

日本の四季を感じる、旬の国産フレッシュフルーツをふんだんに使用したアート感覚あふ …

シンプルな配色で写真を際立たせた一級建築士事務所のサイトが綺麗!

神奈川県葉山町にある一級建築士事務所「tentline(テントライン)」のホーム …

キャッチコピーで見る人の心を掴む!KOSEの「feliscent」

KOSEの取り扱い商品「feliscent(フェリセント)」のホームページです。 …

シンプルなレイアウトで、モデルの写真を際立たせた美容院

東京都福生市と昭島市の駅前にある美容室「vivarc」のホームページです。 ファ …

左側にスライダー、右側にコンテンツのレイアウトでデザインされた花火大会のサイト2選!

あっという間に6月も中旬ですねー! 今回は、少し先ですが8月に開催される花火大会 …

背景に写真をたくさん使用して、ログハウスの雰囲気を伝えているカフェ&スクール

東京都荒川区西日暮里にあるスイス風ログハウスのカフェ&スクール「CHAL …

写真を使って島の魅力を伝える

2016年4月に「星野リゾート リゾナーレ西表島」からリオープンする「ホテル ニ …

楽しみながら美容を学べる「九州美容専門学校」

熊本県熊本市にある「九州美容専門学校」のホームページです。 モデルさんの顔を大き …