WebGallery

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

*

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

   

名称未設定 1

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

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

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

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

 - 動きで表現 , ,

Message

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

  関連記事

コンテンツごとに様々な動きをつけたデザイン

新潟県南魚沼市にある道の駅「南魚沼」のホームページです。 大きく表示される道の駅 …

要所で動きを使い、注目度を上げる

エステサロンクレジットカード決済導入「株式会社ジェイ・シー・エス」のホームページ …

「Golden」にかけた黄金のアニメーションがとても幻想的!フェレロ ロシェのキャンペーン公式サイト

「Ferrero Rocher(フェレロ ロシェ)」のキャンペーン公式サイトです …

想像するだけでワクワクが止まらない「ハンズの夏準備」

「ハンズの夏準備」という東急ハンズの特設サイトです。 サイトのトップには、キャッ …

どの言語で閲覧してもデザインが崩れない

東京のデザインやファッション、食べ物や観光地・宿泊施設などを世界に紹介するWeb …

壮大なスケールを感じさせるデザイン

  見た瞬間発狂しました。「ICO」や「ワンダと巨像」の制作を手掛けた …

ひし形のグリットを使って、授業風景などの写真を紹介している倉敷芸術科学大学のサイトがおしゃれ!

岡山県倉敷市にある大学「倉敷芸術科学大学 芸術学部」のサイトです。 ファーストビ …

【閲覧注意!】池袋で開催される「もうどく展2」のサイトが思った以上に毒々しい!!

2017年3月16日の木曜日から6月25日の日曜日までサンシャイン水族館で開催さ …

文字を光らせ幻想的な世界観を創造する

  えのすい(新江ノ島水族館)で行われるナイトワンダーアクアリウムの特 …

コンテンツの区切りを波のアニメーションにすることで、ワインぽさを演出したサイト

山梨県笛吹市にあるワイン製造工場「モンデ酒造」のホームページです。 コンテンツの …