Web デザイナーなら知っておきたい！トレンディーなエフェクト・テクニック8選

Webデザイナーにとってユーザーが見やすい・使いやすいWebサイト作り、というだけでなく驚き（インパクト）も重要な要素になってくると思います。

そこで今回は、近年のブラウザ、デバイス、プラグインの進化によって実現可能となったエフェクティブなwebデザインをピックアップしてみました。ユーザーへの刺激度120%間違いなしです

Webデザイナーなら知っておきたい！トレンディーなエフェクト・テクニック8選

ページ読み込み中のアニメーション

photo:CODEPEN／LokeshSuthar

デモ＆コード　https://codepen.io/magnus16/pen/BKoRNwhttps://codepen.io/magnus16/pen/BKoRNw

訪問者に安心感を与えるページ読み込み中のアニメーションですが、デザイン次第で訪問者にワクワク感を与えて、サイト滞在時間も長くなる可能性があります。

Webサイトが表示される前だからこそ、訪問者の心をくすぐることができますよね。

上記画像はCSSアニメですが、CODEPEN

クリックをためらってしまう！？マウスオーバー・エフェクト

photo:iquadart.com

デモ　http://iquadart.com/portfolio/http://iquadart.com/portfolio/

普通はクリックしてもらうためにマウスオーバー・エフェクトを設定しますが、こちらのサイトのマウスオーバー・エフェクトは可愛すぎてクリックをためらってしまいます。

ついつい何回もマウスを動かして画像を動かしたり、過去のエフェクトが気になってスクロールダウンしてしまいます。印象深いWebデザインですね。

サイト自体は、ポーロランドの横にあるベラルーシ国内のWebデザイン会社ホームページです。

またこちらはクリックした後のボタンアニメーションがとってもキュートなデザインになります。スマホでもきちんとアニメしてくれるので、いいですよね。他にもこちら（alectia.comuxpin.com

photo:codrops

デモ＆チュートリアル　http://tympanus.net/codrops/2016/05/11/distorted-button-effects-with-svg-filters/http://tympanus.net/codrops/2016/05/11/distorted-button-effects-with-svg-filters/

一味違うグリッド、カードデザイン

photo:codrops

デモ＆チュートリアル　http://tympanus.net/codrops/2015/06/18/card-expansion-effect-svg-clippath/http://tympanus.net/codrops/2015/06/18/card-expansion-effect-svg-clippath/

グリッドやカードデザインは例年トレンドですが、どうしても個性を出しにくくなってしまいます。

しかし、こちらのエフェクトを聞かせたカードデザインはちょっと違います。カードをクリックするとおおっ！と思ってしまうようなアニメーションを実行します。

SVGを活用していますのでスマホでもきちんとアニメしてくれます。

場面切り替えに活かせるエフェクト・デザイン

photo:CODYHOUSE

デモ＆チュートリアル　https://codyhouse.co/gem/animated-transition-effects/https://codyhouse.co/gem/animated-transition-effects/h

使い方は色々考えられますが、画面切り替え時に検討したいエフェクト・テクニックです。

デモサイトでは、11種類のエフェクトを楽しむことができます。

JavaScriptを駆使しているWebデザイン

photo:MYSTATICSELF

デモ　http://mystaticself.com/http://mystaticself.com/

カナダ在住のグラフィック・プログラマーのポータルサイトになりますが、スゴ過ぎます。

各ページのデザインもステキですが、ソースコードを拝見するとその美しさに魅了されてしまいます。

あとこちらのHUNGERCRUNCHもユニークなWebデザインで、一見動画かな？と思うトップの画像は、どうもJavaScriptとCSSでうまくデザインしています。トップの大きい画像を細かく区切ってアニメーションしているあたりは脱帽モノです。スマホでも動画風なトップデザインになっていますので、参考になります。

photo:HUNGERCRUNCH

デモ　http://www.hungercrunch.com/http://www.hungercrunch.com/

まるでテレビ？みたいなエフェクト・デザイン

photo:NowYouSeeMe2

デモ　http://www.nowyouseeme.movie/http://www.nowyouseeme.movie/

ほぼすべてのブラウザがサポートしているWebGLを使ったWebデザインもカッコイイです。

PCはもちろん、スマホでも動いてくれるので、メッセージ性の高いWebサイトを作ることができます。ちなみにこちらのサイトは映画『Now You See Me 2

またこちらもWebGLを使ったデザインですが、シンプルに仕上げられています。コーポレート系のデザインにも使えそうですね。

photo:codrops

デモ＆チュートリアル　http://tympanus.net/codrops/2016/05/03/animated-heat-distortion-effects-webgl/http://tympanus.net/codrops/2016/05/03/animated-heat-distortion-effects-webgl/

ヘルプデスクのポップ表示

photo:INTERCOM

サンプルhttps://www.intercom.io/live-chathttps://www.intercom.io/live-chat

商用サイトなどで時々見かけるサポートチャット。ページ表示後にピョコッと下から登場するサポートのポップも、使いやすさとデザイン性を両立させようと思うと、なかなか難しいものです。

動きのあるログイン＆登録画面

photo:CODEPEN／ChrisAporta

デモ＆コード　http://codepen.io/caporta/pen/XbWgGPhttp://codepen.io/caporta/pen/XbWgGP

photo:CODEPEN／AndyTran

デモ＆コード　http://codepen.io/andytran/full/RPBdgM/http://codepen.io/andytran/full/RPBdgM/

どちらかというとモバイル受けするデザインになりますが、Webサイトでも実装すると面白いですよね。

ログインした時に動きがあると、なんとなくログインした甲斐があるように感じますよね。

まとめ

いかがでしたでしょうか？近年のモバイルファーストを意識して、Webデザイン業界においてはJavaScriptやCSS、SVG、GIFなどを使ったエフェクト・デザインが盛んに採用されています。

動きのあるWebデザインに挑戦しようと思われた方、まずはHTML、CSSの基礎学習からいかがでしょうか？

GoCodeCamp

icatch:WOCinTechChatFollow