タグ

Webディレクションとフリー素材に関するamelsのブックマーク (2)

  • マイクロインタラクションの共有に最適!MacやiPhoneの画面を録画してGIFアニメにする方法

    アプリの世界では普通ですが、ウェブでもユーザの操作に対してちょっとした反応を返したり、システムの状況を提示する「マイクロインタラクション 」がますます重要になってきそうです。ユーザがスマホやアプリの操作に出てくるマイクロ・インタラクションに慣れてくると、無意識のうちにそういった動作をウェブにも求めるようになると思います。 下のGIFアニメはBetterTouchToolのウェブサイト で使われているマイクロインタラクションの例ですが、このようなちょっとした動作がウェブサイトの印象を変えたりしますよね。 数値化は難しい領域ですが、たとえば競合サイトとの差別化のために相対的なユーザ体験を高める施策の一つとして有効に活用できそうです。クライアントに「こんなのできませんか?」と聞かれる機会も増える気がしています。 そして、ウェブ制作においてもマイクロインタラクションの実装が増えると、今度は、それら

    マイクロインタラクションの共有に最適!MacやiPhoneの画面を録画してGIFアニメにする方法
    amels
    amels 2016/09/02
    “言葉では伝えにくいちょっとしたマイクロインタラクションを、さっと録画してGIFアニメでシェアする方法”
  • マイクロインタラクションにこだわったサイトをつくる時に便利なWebサービス一覧 | Chitep!

    多くの人にとって、Webサイトを見ることがどんどん日常に馴染んできている中で、 他のサイトとの差別化や、ユーザーへの配慮に必要不可欠となってくるのが マイクロインタラクションです。 この記事では、細部にこだわったサイトをつくるために 簡単に導入できるWebサービスやjQueryプラグインを紹介します。 マイクロインタラクションとは? そもそも、マイクロインタラクションとは何かと言うと、 「製品の最小単位のインタラクション」として定義されています。 (マイクロインタラクション ―UI/UXデザインの神が宿る細部 より) 米国のデザイナー/建築家であるチャールズ・イームズの名言に、 「細部は単なる細部にとどまりません。細部こそが製品を作り上げるのです」 とあるように、今後ユーザーに「なんとなく使いやすい」「なんとなく、つい見てしまう」 といった体験をしてもらえるようなWebサイトやアプリをつく

    amels
    amels 2016/09/02
    jQueryプラグインやcss3での実装の他、GIFアニメやSVGをアイコンに用いる手法も見られる。
  • 1