株式会社リースエンタープライズ 大阪南森町発、最強のホームページ制作集団

動く!ホームページ作成でアニメーションや動画を取り入れる方法まとめ

006_01
動画やアニメーションを取り入れたホームページの作成依頼をお考えの方は、「動画・アニメーションホームページ作成」ページをご覧ください。

どうもお久しぶりです、チーフデザイナーの塩谷朋広です。

ホームページの作成方法(デザイン部分)を紹介している当シリーズ、前回は「和風ホームページ作成の際に利用したいフォントや素材まとめ」を紹介させていただきました。

今回は、「動く」というキーワードに注目して、アニメーション動画ホームページの作り方をご紹介していきます。

皆様は動くホームページ、アニメーションするホームページを依頼されるタイミングはありませんか?

そんな時に役立つ動くホームページの作成方法やメリットについてご紹介いたします。

動くホームページとは?

当記事の中では、動くホームページとは画像がスクロールに応じて動いたり、文字がアニメーションしたり、ボタンがアニメーションしたり、動画コンテンツをデザインに上手く取り込んでいるホームページデザインのことを指すことにします。

動くホームページや動画を取り入れたホームページを作成するメリットとしては、何よりもインパクトやアイキャッチにあります。

ページを飽きさせない工夫になったり、コンテンツを効果的に表示するには最適な効果を生むことがあります。紙媒体→Web媒体と移ったことによって出来るようになった表現の幅としては、「動く」というキーワードが最も当てはまるのではないでしょうか?

また時にはアニメーションがUX(ユーザーエクスペリエンス)向上に繋がることもあり、数多くのホームページデザインで動くアニメーションが取り入れられています。

一方で動くホームページのデメリットとしては、デザイナーのクリエイティブ精神が強く出過ぎてしまい、過度なデザインになってしまいがちです。ユーザーを置いてけぼりにしたデザインにならないことが重要です。

また、動画アニメーションは負荷も大きく、表示が重くなることもあります。アニメーション負荷のせいで機会損失が起きないように十分注意しましょう。

動くアニメーションホームページデザインの
参考まとめ

動くアニメーションホームページについて理解したところで、効果的に動画コンテンツを組み込んだホームページデザインの参考をご紹介いたします。

ホームページデザイン作成を行う際は、まずリサーチから!参考となるホームページを見つけましょう!

マウスに応じて動くアニメーションホームページデザインです。

疾走感があり、アニメーションがとても効果的にコンテンツを魅せていますね。

それぞれアニメーション用の画像素材をCSS3アニメーションで実装しているようです。とても参考にできるホームページデザインです。

動画を背景素材として使用したアニメーションホームページデザインです。

スクロールした際のページ移行時のアニメーションもめっちゃかっこいいです。

シンプルなデザインですが、動く素材を効果的にホームページデザインに使うことで、とても魅力的なホームページに仕上がっています。

フルアニメーションといっても良い壮大なホームページデザインです。

ここまで求めるクライアント様は特別だと思いますが、キャンペーンサイトなどにはとても効果的で、デザイナーも楽しくデザインできるくらい動きやアニメーション、動画が存分に利用されたホームページデザインです。

トップメニューボタンや写真に動くアニメーションを使用したホームページデザインです。

基本的には静的、部分的に動画アニメーションを使用してメリハリをつける、クライアントワークの中では最も多いデザインがこのような動くホームページとなります。

続いて、参考ホームページ2つ目でも使用されていて、最近とても良く目にするトップページ背景に動画を利用したホームページデザインの作成方法をご紹介します。

動画ホームページ作成方法・載せ方

動画をホームページに載せるには、<video>タグを使うのが一般的です。

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属性でサムネイルを設定、<video>タグの中で<source>タグを使用することで異なる拡張子の動画を指定しておく事ができ、各ブラウザによって再生できないというようなバグに対処することが出来ます。

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プロパティを使用して写真にマウスオーバーした際に拡大させるアニメーションを実装することが出来ます。

応用して様々なアニメーションをホームページに取り入れて作成してみてください。

最後に、写真の一部だけが動くシネマグラフをご紹介いたします。

シネマグラフを使った
アニメーションホームページ作成

シネマグラフ1 シネマグラフ2 シネマグラフ3 シネマグラフ4 シネマグラフ5 シネマグラフ6 シネマグラフ7

写真のように一部分だけが動くアニメーションの写真(gif画像)を作る技術をシネマグラフと呼びます。

動画ではなくgifアニメーションなので、少し手軽にホームページに動きを取り入れることが出来る他、一部分だけが動く特徴を活かして、アニメーション部分にコンテンツをフォーカスさせることが出来るのも面白い点です。

シネマグラフは下記のアプリケーションで作成可能です。

Flixel

lixel

1週間だけの無料お試しもあり!

動くアニメーションホームページ作成に是非シネマグラフを取り入れてみてはいかがでしょうか?

最後に

株式会社リースエンタープライズでは、動くアニメーションホームページの作成依頼を随時受け付ております。こんなアニメーションをホームページに取り入れたい!ダイナミックなホームページが欲しいという方は、是非06-6940-0662またはメールフォームからご相談ください。

この記事が面白かったという方は是非ソーシャルボタンをポチッしてくださいね!

新着記事と笑いは鮮度が命や!

「動く!ホームページ作成でアニメーションや動画を取り入れる方法まとめ」記事が気に入った方はいいねしよう!!