賞を獲るWebサイトは何が違うのか?受賞歴のあるサイトを解剖してみる。|SeleQt【セレキュト】SeleQtとはお問い合わせALLデザインプログラミングマーケティングサービスガジェットゲーム話題SeleQtとはお問い合わせHOMEプログラミング賞を獲るWebサイトは何が違うのか?受賞歴のあるサイトを解剖してみる。プログラミングプログラミング2016.06.09賞を獲るWebサイトは何が違うのか?受賞歴のあるサイトを解剖してみる。10010Webサイトのデザインや開発に関わる者として、自分が携わったWebサイトが第三者から高く評価されたりすると、デベロッパー冥利に尽きることこの上なしですね。日本でも「グッドデザイン賞」をはじめ、数々のクオリティの高いWebサイトを評価するグランプリが行われていますが、それは海外でも同じ。そこで海外で受賞経験のある100のWebサイトを分解した結果、こんな傾向が見られました。受賞サイトの93%はCSSアニメーションを用いているここ2,3年でCSSアニメーションはすごい勢いで表現領域を拡大させていますが、受賞サイトの実に9割超で用いられていたとのこと。animated-gameboy-in-css/animated-gameboy.gif受賞サイトの91%はJavascriptアニメーションを用いているJavascriptもCSSと同様で、その使用頻度はかなり上がっているのではないでしょうか。受賞サイトの9割超がJavascriptアニメーションを用いていたとのことです。受賞サイトの83%がSVGを用いているSVGにブラウザが対応するようになり、活用されるシーンが多くなってきたSVGですがなんと言ってもテキストエディタでちょっとした修正を簡単に行えるのが魅力ですよね。SVGは、上記のCSSやJavascriptと組み合わせアニメーションとして使われることも多いです。受賞サイトの71%がjQueryを用いている上記のCSSやJavascriptの使用頻度を考えれば、jQueryの使用頻度も連れ高になるのは必然かもしれませんね。受賞サイトの7割でjQueryの使用が見られたようです。受賞サイトの69%がスクロール時にアニメーションを用いているパララックスはその主要なアニメーション表現の一つとなりそうですが、総じてここまで「動きのあるサイト」が受賞サイトの大きな特徴と言えそうです。確かに見た目のインパクトもありますし、なにより細部に「動き」があると作りこまれている印象を受けますよね。受賞サイトの65%がGreenSockを使っているGreenSockはFlashのアニメーションライブラリでしたが、ここ数年はJavascript、jQueryにも対応しています。ライブラリの使用にはライセンスが必要ですが、商用利用でなければ無料ライセンスでも利用することができます。Canvasはブラウザ上にグラフィックを描く要素です。開発はJavascriptベースで行われますが、先述のSVGと使い分け/連携させて使われることも多くなっているそうです。CanvasはSVG柔軟性が高く、数多くのJavascriptライブラリが用意されているのもメリットの一つです。まとめ改めてWebサイト制作の現場において、フロントエンドエンジニアとデザイナーの領域がかなり接近していることがわかりますね。HTML5/CSS/Javascriptでできる領域の拡大という影響が大きそうですが、裏を返せばデザイナー・フロントエンドエンジニア双方に「求められること」が増えているとも言えそうです。