Webサイトのデザインや開発に関わる者として、自分が携わった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にも対応しています。
ライブラリの使用にはライセンスが必要ですが、商用利用でなければ無料ライセンスでも利用することができます。
【GreenSock】
受賞サイトの50％がHTML5 Canvasを使っている
HTML5 Canvasはブラウザ上にグラフィックを描く要素です。開発はJavascriptベースで行われますが、先述のSVGと使い分け／連携させて使われることも多くなっているそうです。
HTML5 CanvasはSVG柔軟性が高く、数多くのJavascriptライブラリが用意されているのもメリットの一つです。
まとめ
改めてWebサイト制作の現場において、フロントエンドエンジニアとデザイナーの領域がかなり接近していることがわかりますね。
特にHTML5／CSS／Javascriptでできる領域の拡大という影響が大きそうですが、裏を返せばデザイナー・フロントエンドエンジニア双方に「求められること」が増えているとも言えそうです。
（※本稿は100awwwards websites
deconstructedを参考にしています）
おすすめ新着記事
おすすめタグ