今日は。

札プロの横田です。
私はプロのWEBディレクターでありWEBデザイナーなので、日進月歩のこの世界で新しい技術の習得は必修です。
今日はアニメーションなどの動きのあるホームページを実現するための、JavaScriptやJQueryなどの最新技術について解説します。

現在、札幌市で最大規模の飲食店グループ企業のホームページの制作と管理・運営を一気に引き受けているので同じ飲食店のホームページの良くできたものは常に参考にして技術を学んでます。

パノラマ撮影画像

ご紹介する技術の1つ目はパノラマ撮影画像の活用です。
まずはこちらのサンプルサイトをご覧下さい。

360度 パノラマ映像は店内などを360度グルッと撮影しそれを静止画像に変えて埋め込むものです。
現在、札幌のWEBサイト制作会社でこの技術を売りにして急激に売上を上げている会社もあります。

カメラやビデオでの撮影の腕や、実現する技術に色んな種類があるので、高い技術や独自のノウハウが有る場合は需要があるようです。

パララックス効果を使用したサイト

飲食店などのサイトではパララック効果を使用したサイトもかなり見られます。
パッラック効果とは、画面を下にスクロールすると画面上部のヘッダーやメニューなどが固定されて、それ以外の下部の画像や文章が順次表示されたり、画面を下にスクロールするとアニメーション効果で横から画像が現れたり、現れてすぐは白黒で、1秒ぐらいでカラー画像に変わっていくなどのアニメーション効果の事です。

例としてこちらのサイトをご覧下さい。

 これらもJavaScriptやJQueryとそのプラグイン=無料追加部品プログラムによって実現します。
 マスターする方法はサイトの技術情報を検索して独習する方法や、こういった参考書を購入して利用する方法があります。
 これらの新技術はこれからもどんどん使用しますしWEBデザイナーには必修のテクニックですので、プロのWEBデザイナーで将来的に会社を変える事も考えているのであればこちらの本などで腰を据えて今年あたり勉強した方がよろしいかと思います。

HTML5の技術でアニメーションするCANVAS

HTML5とはそれまでのHTML4と何が違うのか・疑問な方が多いと思いますが、実は様々な新機能が追加されているのです。

その一つにCANVASというアニメーションの技術があります。
こちらのサンプルをご覧下さい。
これはJavaScriptなどのプログラミングと言うより、HTML5で用意してくれてた簡易アニメーション希望と言って良いでしょう。

透明な地に図形を描きそれを何層もの重ねてそれぞれを独立させて動かします。
そうすることで、個々の図が揺らいで見えます。

いかにして新技術をマスターするか?

これらの新技術をいかにマスターするかが当然課題となって来ます。実はこれにはコツがありまして、これらの技術が使用されているホームページのように凝ったアニメーション効果を使用しているホームページを見つけたら、画面上で右クリックして『コードの表示』を選んでそのページのHTMLなどで書かれたコード=文を見ます。
そこにある、使用されているアニメーションを表示してあるコードを特定して特徴的なタグ、例えばCANVAなら『var canvas = document.getElementById('sample1');』といったコードが書かれていればこれをインターネットで検索します。
 そうすると、容易に使用されている技術が特定出来ます。
後はこっちのもので、自分が作るホームページに合わせこれらの技術をネットの記事を参考に適用すれば良いのです。

問題点もあります

これらの新技術ですが、実は問題点もあります。これらのJavaScriptやJQueryを利用した技術はアニメメーション効果ゆえに訪問者にテクニックを生かした力作のホームページという好印象を与えます。
しかし、サイトの検索順位を決めるGoogleのロボットというアプリはサイトを訪問したときアニメーション効果があるため、アニメーションの図形に載った文章などのコンテンツを追跡できないため読めずに結局「このページには何も書かれていない」と判断して帰って行く危険性があるのです。
自分の作った新技術を生かしたホームページはFetch as googleなどのレンダリングの機能を利用してロボットにどのように見えるかを調べ、以上のような悪影響があるようであれば対策を施さなくてはいけません。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事