アニメーションをWebサイトに導入するためのテクニック | UX MILK

2017/05/16 120 users アニメーション UX MILK テクニック Webサイト 現状

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事は こちら をご参照ください。 機能的で楽しいアニメーションは、現代のWebデザインにおいて不可欠な要素の１つです。現代のWebサイトでは、細かなインタラクションのデザインが根本的な違いをもたらします。 アニメーションはユーザーに現状を伝えたり、注意をうながしたり、ユーザーの行動の結果を伝えたり、... 続きを読む

【使い方を究める】Webデザインにおけるアニメーション使用の基本的な考え方｜SeleQt【セレキュト】

2017/04/04 38 users ユーザ ご存知 アニメーション アクション 部品

機能的かつ楽しいアニメーションは、現在のWebデザインにおいて欠かすことのできな部品となっています。 ご存知の通り、アニメーションを使えば、ユーザを誘導したり、ユーザが自分のアクションの結果を目で見ることができるようにすることができ、またそのようにしてユーザの振る舞いに影響を与えることができるのです。 本記事では、このようにWebエクスペリエンスを向上させてくれるアニメーションの使用についての、基... 続きを読む

ブックマークしておきたい、スマホUIをコレクションしている海外と日本のサイトのまとめ | コリス

2014/10/22 408 users コリス ユーザインターフェイス スマホUI フック 海外

iPhone, Androidなど、スマホのユーザインターフェイスの参考になるギャラリーサイトを海外・国内ともに紹介します。 まずは、スマホでその操作が楽しいアニメーションを伴ったUIギャラリーから。 CAPPTIVAT...記事の続きを読む 続きを読む

[JS]ぷるぷるとかわいいアニメーションでモーダルボックスを表示させるスクリプト -Stackbox | コリス

2014/07/04 54 users jQuery コリス モーダルボックス メインページ ぺら

ぷるぷるとかわいいアニメーションでモーダルボックスを表示させるjQueryのプラグインを紹介します。 ぷるぷるだけでなく、ぶらーんとさせたり、しゃかしゃかさせたり、ぺらっとさせたり、さまざまなものが揃っていて楽しいアニメーションが満載です。 Stackbox Stackbox -GitHub Stackboxのデモ Stackboxの使い方 Stackboxのデモ デモはメインページだけでなく、デ... 続きを読む

[JS]アイデアが素晴らしい！ページにちょっとしたアクセントを加えるスクリプトのまとめ | コリス

2014/03/26 143 users GitHub GitHub アニメーション リボン コリス

そのまま使ってもよし、アイデアに刺激されインスパイアされてもよし、の工夫をこらした素晴らしいアイデアのスクリプトを紹介します。 forkit.js forkit.js -GitHub GitHubなどでよく見かけるリボンが、ぷら〜んと楽しいアニメーションでぶら下がり、更にそれを引くとコンテンツが表示されます。 Perspective Scroll 縦長のコンテンツをスクロールする時にアニメーション... 続きを読む

シンプルなオブジェクトを楽しいアニメーションで動かしたかわいいプリローダー -Flat Preloaders | コリス

2014/03/26 50 users コリス プリローダー オブジェクト PNG gif

最近のトレンドカラーを使い、シンプルなオブジェクトをさまざざまな楽しいアニメーションで動かしたプリローダーの素材を紹介します。 Flat Preloaders ダウンロードできるファイルのフォーマットは3種類で、32x32, 64x64, 128x128とサイズも3種類が用意されています。 .gif (すぐに使えるGIFアニメーション） .png (スプライト用の画像) .aep (After E... 続きを読む