WebGallery

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

*

ロゴマークにマウスをホバーさせるとアニメーションになる仕組み

   

名称未設定 1

東京都台東区にあるランドセル工業会が運営している「ランドセルくらぶ」のホームページです。

全体的にコンテンツの背景を丸く切り取り、優しく暖かいデザインになっています。背景のクリーム色や手書きのイラストがまた良いですね。

画面左側のロゴマークはマウスをホバーさせるとアニメーションに切り替わるようになっており、背景のキラキラ部分が様々な配置になりロゴマークが輝いているようにも見えます。その下にあるメニュー部分は、コンテンツの囲いの上に学校のイラストを載せたり、ホバーさせて点線を表示させることでランドセルの縫い目を連想させるデザインにしたり、学校をイメージさせるデザインだと感じました。

ランドセルを選ぶコツやランドセルのお手入れ方法など、ランドセルについての様々な情報が掲載されており見やすいだけでなくとても面白い情報がたくさんあります。意外と知らない正しいランドセルの使い方など参考になりますね。

 - 動きで表現 , ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

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

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

情報を中央に寄せることで、まとまりを

大阪にある専門学校のホームページです。全体的にフラットデザインでまとめてあり、ア …

動きのあるグローバルナビでサイトの雰囲気を暖かくする

秋田市にある写真館「岩田写真館」のホームページです。このサイトは何といってもグロ …

松本薫さんが開店したアイスクリーム屋さん「Darcy’s」のサイトが可愛い!

松本薫さんの引退会見、衝撃的でしたね! テレビではいつも柔道でかっこいい姿を見て …

おバカなジェリービーンズたち

  一時期話題になった動画のWebサイトです。現在ではアプリゲームもあ …

ロゴマークの表示を統一することで、ページにアクセントをつける

福岡県福岡市にある「がんこクリニック」のホームページです。 まず初めに、画面いっ …

フルスクリーン動画が迫力ある水族館は、サメやエイに触ることも出来る!?

大阪府大阪市にある世界最大級の水族館で、平成25年の3月14日に開設された「海遊 …

ジャンプ率の差を大きくしてタイトルを目立たせたツアーサイト

「UNISON SQUARE GARDEN」の6thアルバムツアー「Dr.Izz …

花火のアニメーションを使って、夏限定のパッケージデザインを表現したシャンドンの特設サイト

「CHANDON」の2018年夏限定サマーボトルの特設サイトです。 大きな花火や …

2019年に流行しそうなwebデザイントレンド「ローディングアニメーション」を使ったサイト3選!

今年も1年が始まりましたね! 初詣にも行かず正に寝正月を過ごした私ですが、今年は …