2020年08月24日CSSデザインCMS・サイト制作マイページにお気に入りCSSを使って実現できることの中でもアニメーションは、特に制作者のセンスが光るものと一つでしょう。動的な表現は、ユーザーにボタンがあることを認識させたり、クリックの動機をつくるなど、ホームページの閲覧をスムーズにする助けにもなるものです。マウスカーソルをメニューに重ねた際の色の変化など小さなものから、もっと目立った動きが印象的なものまで、CSSで作れるアニメーションはたくさんあります。今回は、cssで作れるアニメーションの事例として、様々な業界のホームページをピックアップしました。定番とも言えるアニメーションを搭載したものもあれば、ちょっとめずらしいものもあります。チェックしてみてください。参考にしたいCSSアニメーションのWebサイト事例1)ソニックジャムhttps://www.sonicjam.co.jp/(画像引用:ソニックジャムホームページより)ソニックジャムのホームページは、素早いアニメーションがどんどん展開していくインパクトの強さが印象的です。左側にカーソルを移動すると表示するメニューは、メニュー上でのカーソルの移動に従って、選択箇所を大きくピップアップして存在感を増します。マウスポインターが移動すると円形のイメージが追ってくるマウスストーカーも搭載しており、技術の集合体とも呼べる仕上がりです。ロゴマークやボタンなど、様々なところにカーソルを移動させてみたくなる好奇心をくすぐるホームページと言えます。2)オペラコスメティック(画像引用:オペラコスメティックホームページより)ホワイトを基調としたシンプルさを保ちつつ、洗練されたスタイリッシュさを感じる化粧品のホームページです。このタイプの洗練された印象を打ち出すページは、奇抜で極端なアニメーションよりも、部分的にセンスが光るお洒落なアニメーションを搭載するのが効果的でしょう。このホームページもhoverやtransformを使ってマウスオーバー時の動きのあるカラーの変化などの小さな動きをはじめ、ページをスクロールすると自然な流れで登場するイメージにjQueryをつかうなど商品イメージを演出する上品なアニメーションを実現しています。3)日比谷音楽祭https://hibiyamusicfes.jp/(画像引用:日比谷音楽祭ホームページより)日比谷音楽祭のホームページは、gifアニメのささやかな動きに思わずクスッと笑ってしまう和やかな演出が特徴的です。カーソルを重ねるとバナーが大きく動きをtransitionの設定やナビゲーションのhover設置もホームページのテイストに合ったナチュラルさを感じます。ページ中にある白い矢印にホバーした際のクリックを誘うtransformを使用したアニメーションも面白いです。4)琵琶湖汽船https://www.biwakokisen.co.jp/(画像引用:琵琶湖汽船ホームページより)琵琶湖汽船のホームページは、びわ湖クルーズの様子がわかる動画をメインビジュアルとして再生しつつ、その下に波をイメージしたアニメーションをCSSで動かしています。存在感のあるトップページです。メニューボタンなど細かなところもhoverやtransitionを使った動きのあるカラー変化を効果を見せています。サービスの特徴を全面的に訴求できるホームページのコンセプトを演出する細かなアニメーション効果が印象的なホームページと言えるでしょう。5)キューピーhttps://www.kewpie.co.jp/(画像引用:キューピーホームページより)キューピーのホームページは、jQueryを使い美しく切り替わるトップページのスライドにより、商品やキャンペーンのPR、会社のメッセージを打ち出しています。マウスカーソルをスライダーに合わせると大きくなるようにtransitionを設定するなどの細かな工夫もユーザーの操作リアクションとして効果的です。ボタンの色を流れるようなアニメーションで変えるhoverの設定なども行われています。モバイル表示の際にハンバーガーメニューをタップすると、ハンバーガーが回転するアニメーションが実にさわやかです。表示されるメニューにはアコーディオンを使い、初期状態の表示数が多くならないように工夫されています。この作りはいろいろなホームページで見かける機会が多くあり、スタンダードかつ実用的なものと言えるでしょう。6)スープストックトーキョーhttps://www.soup-stock-tokyo.com/(画像引用:スープストックトーキョーホームページより)スープストックトーキョーのホームページは、トップページ設定された動画からスープの温かさが伝わってきます。そのすぐ下にある今週のメニューにはgifアニメーションが設定されており、様々なメニューのイメージ短い時間で認識できるようになっています。目立ちませんが、グローバルナビやバナーにホバーさせたときの透過や動きはtransitionによるものです。商品をどのようなイメージで見せるのかを熟慮し、ブランドイメージにマッチしたCSSアニメーションを取り入れている事例と言えるでしょう。7)東京国際フォーラムhttps://www.t-i-forum.co.jp/(画像引用:東京国際フォーラムホームページより)東京国際フォーラムのホームページはローディング時やスクロール時のアニメーションやアートワークのカルーセルにつかったjQueryがスタイリッシュさを演出しています。transformを使って、ボタンにホバーした際のグラデーションの切り替わりや、画像が大きくなるtransitionなど、スッキリとしたホームページ全体の印象をさらに洗練させる役割を果たしています。8)shirohttps://shiro-shiro.jp/(画像引用:shiroホームページより)jQueryを使ったスライダーやtransitionを使ったボタンやナビの透過が化粧品の上品な雰囲気を演出しています。トップページをスクロールするとすーっと表示される人気ランキングのアニメーションも印象的です。ブランドイメージに合致したアニメーションはもちろん、色遣いやレイアウトなども魅力です。Globalホームページより)ホワイトのすっきりした背景の中、赤と黒のアクセントが効いたデザインが印象的です。画像やボタンに設定されたhoverやtransitionは、ホームページ全体のデザインがすっきりしていることもあり、効果的に見えます。スクロールを進めるごとに動的な要素を感じる見本とも言えるホームページです。TAPESホームページより)様々な動きが随所に散りばめられたホームページです。その中でも注目したいのは、マウスカーソルがドットになっているところです。これは、cursorを使うことで、マウスカーソルの形状を変化させているのです。このホームページで採用しているドットタイプ以外にも、cursorを使えば、十字形や指差しマーク、矢印など、マウスカーソルを様々な形状にすることができます。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るクロールクロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るバナーバナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。静止画像だけでなく、アニメーションを用いたバナーもあります。詳しく見るナビゲーションナビゲーションとは、もともと「目的地までの経路」や「道順案内」を意味する英単語です。インターネットの分野では、ホームページにある主要コンテンツをまとめたリンクを指します。これがあることで、ユーザーは目的のページがどこにあるかを短時間で見つけることができます。検索エンジンのクローラー(検索ロボット)に対して、効率的にサイト内を巡回させるという効果もあります。ナビゲーションには「グローバルナビゲーション」と「ローカルナビゲーション」の二つがあります。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るトップページインターネットのWebサイトの入り口にあたるページのことをトップページといいます。一般的には、階層構造を持つWebサイトの最上位のWebページをさします。サイト全体の顔としての役割も果たすため、デザインなどで印象を残すことも考えたサイト作りも有効となります。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るコンセプトコンセプトとは、作品やサービスなどに一貫して貫かれている考え方をいいます。デザインと機能がバラバラだったり、使い勝手がちぐはぐだったりすると「コンセプトが一貫してないね」などと酷評されてしまいます。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るトップページインターネットのWebサイトの入り口にあたるページのことをトップページといいます。一般的には、階層構造を持つWebサイトの最上位のWebページをさします。サイト全体の顔としての役割も果たすため、デザインなどで印象を残すことも考えたサイト作りも有効となります。詳しく見るキャンペーンキャンペーンとは、インターネット上のサイトにおいて、ファン数を増やし、購買行動を促すためにおこなう懸賞キャンペーンなどのマーケティング活動のことです。キャンペーンにはファン数を増やすだけでなく、ファン獲得以上のリアル店舗の来店者数を増やす、資料請求者を増やす、実際の購買を増やすなどの目的があります。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るトップページインターネットのWebサイトの入り口にあたるページのことをトップページといいます。一般的には、階層構造を持つWebサイトの最上位のWebページをさします。サイト全体の顔としての役割も果たすため、デザインなどで印象を残すことも考えたサイト作りも有効となります。詳しく見るバナーバナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。静止画像だけでなく、アニメーションを用いたバナーもあります。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るクロールクロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るトップページインターネットのWebサイトの入り口にあたるページのことをトップページといいます。一般的には、階層構造を持つWebサイトの最上位のWebページをさします。サイト全体の顔としての役割も果たすため、デザインなどで印象を残すことも考えたサイト作りも有効となります。詳しく見るクロールクロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。詳しく見るレイアウトレイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るクロールクロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。あるWebマーケティング事務所、コビトスパイス代表。各種メーカーやコンサルティング企業などで様々な分野のマーケティングを経験し独立。これまで培ったマーケティングに関するノウハウを活かしクライアント企業の業績アップに貢献しています。Webマーケティング初心者にもわかりやすい解説に定評があります。戦略設計無駄な努力とお別れ。