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


Web デザイナーなら知っておきたい!トレンディーなエフェクト・テクニック8選
目次
  1. Webデザイナーなら知っておきたい!トレンディーなエフェクト・テクニック8選
  2. ページ読み込み中のアニメーション
  3. クリックをためらってしまう!?マウスオーバー・エフェクト
  4. 一味違うグリッド、カードデザイン
  5. 場面切り替えに活かせるエフェクト・デザイン
  6. JavaScriptを駆使しているWebデザイン
  7. まるでテレビ?みたいなエフェクト・デザイン
  8. ヘルプデスクのポップ表示
  9. 動きのあるログイン&登録画面
  10. まとめ

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 : INTERCOMphoto: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サイトでも実装すると面白いですよね。

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

一流デザイナーのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

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

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

GoCodeCamp

icatch:WOCinTechChatFollow


関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp