動く！ホームページ制作でアニメーションや動画を実装する
目 次
動くホームページ制作を大阪でお探しの方必見！
ホームページの作成方法（デザイン部分）を紹介している当シリーズ、前回は「和風ホームページ作成の際に利用したいフォントや素材まとめ」を紹介させていただきました。
今回は、「動く」というキーワードに注目して、アニメーション動画ホームページの作り方をご紹介していきます。
皆様は動くホームページ、アニメーションするホームページを依頼されるタイミングはありませんか？
そんな時に役立つ動くホームページの作成方法やメリットについてご紹介いたします。
動くホームページとは？
動くホームページや動画を取り入れたホームページを作成するメリットとしては、何よりもインパクトやアイキャッチにあります。
ページを飽きさせない工夫になったり、コンテンツを効果的に表示するには最適な効果を生むことがあります。紙媒体→Web媒体と移ったことによって出来るようになった表現の幅としては、「動く」というキーワードが最も当てはまるのではないでしょうか？
また時にはアニメーションがUX（ユーザーエクスペリエンス）向上に繋がることもあり、数多くのホームページデザインで動くアニメーションが取り入れられています。
一方で動くホームページのデメリットとしては、デザイナーのクリエイティブ精神が強く出過ぎてしまい、過度なデザインになってしまいがちです。ユーザーを置いてけぼりにしたデザインにならないことが重要です。
また、動画アニメーションは負荷も大きく、表示が重くなることもあります。アニメーション負荷のせいで機会損失が起きないように十分注意しましょう。
動くアニメーションWebデザイン参考まとめ
動くアニメーションホームページについて理解したところで、効果的に動画コンテンツを組み込んだホームページデザインの参考をご紹介いたします。
ホームページデザイン作成を行う際は、まずリサーチから！参考となるホームページを見つけましょう！
今、女子が夢中になる「インスタ映え」。
そんな女子をターゲットにした、夏らしい配色のポップで可愛いWebサイトです。
ローディング画面も飽きさせない動画を設置し、さらにスクロールしていくと全体的に動きのあるホームページになっているので見ていて楽しいですね。
フルアニメーションといっても良い壮大なホームページデザインです。
ここまで求めるクライアント様は特別だと思いますが、キャンペーンサイトなどにはとても効果的で、デザイナーも楽しくデザインできるくらい動きやアニメーション、動画が存分に利用されたホームページデザインです。
弊社で制作させていただいた株式会社Adcate様のホームページです。
会社のロゴマークが不規則に動くアニメーションを実装しています。スタイリッシュでおしゃれなデザインも是非おまかせください。
続いて、参考ホームページ2つ目でも使用されていて、最近とても良く目にするトップページ背景に動画を利用したホームページデザインの作成方法をご紹介します。
動画ホームページ作成方法・載せ方
動画をホームページに載せるには、
HTML5から使用できる動画コンテンツ専用のタグです。
Videoタグの使い方は例えば、
<video src="example.mp4" width="640" height="360" autoplay loop></video> <video poster="example.jpg" preload="metadata" width="640" height="360" controls> <source src="example.webm" type="video/webm"> <source src="example.ogv" type="video/ogg"> <source src="example.mp4" type="video/mp4"> </video>
のように指定します。
<video src="example.mp4" width="640" height="360" autoplay loop></video>
はimgタグ等と使い方はほぼ同じなので、初めての人でもわかりやすいと思います。
Autoplayを入れることで動画が自動再生されます。
| 属性 | 値 | ||
|---|---|---|---|
| preload=”” | 先読みの目安 | none | 先読みを必要としない |
| metadata | メタデータだけは先読みしてほしい | ||
| auto | 動画全体を先読みしてほしい | ||
| mediagroup=”” | グループ名 | 文字列 | 属するグループの名前 |
| width=”” | 動画の幅 | 数値 | ピクセル数 |
| height=”” | 動画の高さ | 数値 | ピクセル数 |
| autoplay | 自動再生を行う | (autoplay) | 値は省略可能 |
| loop | ループ再生を行う | (loop) | 値は省略可能 |
| muted | 音声を出さない | (muted) | 値は省略可能 |
| controls | コントローラを表示する | (controls) | 値は省略可能 |
※autoplay属性が指定されている場合は、preload属性の指定は無効となります。
参照元：TAG index
Poster属性でサムネイルを設定、
mp4ファイルは汎用性が高いので、一番下で指定しておきましょう。
ホームページの動画埋め込み形式は、基本的にはmp4ファイルが良いでしょう。
これでホームページに動画を貼り付けることが出来ました。
動画ホームページの掲載方法はとても簡単ですが、ここから注意点をご紹介しておきたいと思います。
動画ホームページのサイズ容量について
忘れてはいけない点として、動画ファイルはどうしても重いです。動画ホームページは絶対に重くなってしまいます。
動画をホームページに埋め込む場合は、容量を出来るだけ小さくするようにしましょう。
特にスマートフォンではまだまだキャリア回線を使ったアクセスが多いので、動画をホームページに埋め込んでしまうと、読み込み速度に時間がかかりすぎて、動画が再生できないで直帰されかねません。
動画ホームページのサイズ容量を小さくする方法
動画をホームページ背景一杯に埋め込む場合などは、そのサイズのまま作成してしまうと、どうしてもファイル容量が大きくなってしまいます。
容量の小さい動画ファイルの作り方は、640×480pxなど、サイズの小さい動画を引き伸ばして使います。
そうすると、当たり前ですがボケて画質が荒くなってしまいますが、そこで、黒いドットを上からレイヤーで被せてあげましょう！
すると、荒かった画質が気にならなくなり、動画容量を抑えた形で、背景一杯に動画が使用できます。是非お試しください。
音声のある動画に注意しましょう！
動画をホームページに載せる場合、音声はひとつの問題になります。
ホームページから音声が出ることを嫌がるユーザーは非常に多く、もし音声を使用したい場合は、ユーザーに音声のON/OFFの選択ができるようにしておきましょう。
動画をホームページに使う場合は、メリットと共にデメリットのことも念頭に置いて使用することをおすすめします。
CSS3やSVGファイルを利用した
アニメーションホームページの作り方
jQueryやjavascript、CSS3を使用することで、滑らかで美しい、動くアニメーションホームページを作ることができます。
ボタンアニメーションの作り方
ボタンアニメーションは、基本的にはCSS3のみの使用で実装可能です。
CSS3 transition（トランジション）を使って実装していきます。
a { color:#000; transition:all 0.5s ease-in; -webkit- transition:all 0.5s ease-in; } a:hover { color:#666; }
例えば、上記の参考タグでは、リンク文字色が黒からマウスオーバー時にグレーにふわりとアニメーションしながら文字の色が変わります。
allの部分で、どの部分をアニメーションさせるか指定します。allと指定しておけば、全てのアニメーションに対応させることが出来るのでおすすめです。
0.5sの部分で、アニメーションの時間を設定します。
ease-inの部分で、アニメーションの変化の具合を指定します。
- default
- linear（一定のスピード）
- ease-in
- ease-out
- ease-in-out
- cubic-bezier() 4つの数字をカンマ区切りで指定
以上から指定可能です。
応用すれば、背景色を変えたり、ボーダーを変化させたり、画像をアニメーションさせたりと、デザイナーの自由にアニメーションをホームページに取り込むことができます。
写真アニメーションの作り方
ブログのサムネイルに設定している写真などをマウスオーバー時に動かしたいという場合の写真アニメーションの作り方を紹介いたします。
こちらもCSS3のみの使用で実装可能です。
a img { width:300px; height:150px; transition:all 0.5s; -webkit- transition:all 0.5s; } a:hover img { transform:scale(320px, 160px) }
上記タグでは、transform:scaleプロパティを使用して写真にマウスオーバーした際に拡大させるアニメーションを実装することが出来ます。
応用して様々なアニメーションをホームページに取り入れて作成してみてください。
最後に、写真の一部だけが動くシネマグラフをご紹介いたします。
シネマグラフを使った
アニメーションホームページ作成
写真のように一部分だけが動くアニメーションの写真（gif画像）を作る技術をシネマグラフと呼びます。
動画ではなくgifアニメーションなので、少し手軽にホームページに動きを取り入れることが出来る他、一部分だけが動く特徴を活かして、アニメーション部分にコンテンツをフォーカスさせることが出来るのも面白い点です。
シネマグラフは下記のアプリケーションで作成可能です。
Flixel
1週間だけの無料お試しもあり！
動くアニメーションホームページ作成に是非シネマグラフを取り入れてみてはいかがでしょうか？
最後に
株式会社リースエンタープライズでは、動くアニメーションホームページの作成依頼を随時受け付ております。こんなアニメーションをホームページに取り入れたい！ダイナミックなホームページが欲しいという方は、是非06-6940-0662またはメールフォームからご相談ください。
この記事が面白かったという方は是非ソーシャルボタンをポチッしてくださいね！
- 画像参照元:
- Cinemagraph
- Arte em GIFs
- 著者.
- リースエンタープライズ レジェンズ
- 社名.
- 株式会社リースエンタープライズ
- Twitter.
- https://twitter.com/wreathofficial
- Instagram.
- https://www.instagram.com/wreath_enterprise/
リースエンタープライズを創業時期から現在まで中心となって支えてきた人たちが残したブログやクリエイティブ作品、そして日々学んだデザインやマーケティングなどに関する教養をまとめています。
