飾りだけではない、体験のためのアニメーションの活用法 | UX MILK

2018/11/29 22 users アニメーション UX MILK 体験 活用法 Nick

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 ビジュアルデザイナーの間では、アニメーション効果がユーザー体験を向上させると考えられがちですが、全体の体験にはそこまで大きな価値を生み出すわけではありません。デザインにモー... 続きを読む

使って分かった「iPhone X」（後編）--ホームボタン無しの操作に慣れるまで - CNET Japan

2017/11/08 14 users 後編 iPhone x CNET Japan 操作 フリック

前編 に続き、現時点での「iPhone X」レビューをお届けする。 フリック操作に慣れつつある ホームボタンに代わって導入された、上にスワイプするという操作には、だんだん慣れてきた。妙な話だが、本当だ。要するに、使い終わったアプリをフリックで終了するときの操作感に近いのだ。不思議な満足感が得られる。どちらかと言うと、「ホームに戻る」というより、「これは片付いた」という感覚になる。アニメーション効果... 続きを読む

アトラシアン、Gitクライアント「SourceTree for Windows 2.0」リリース。UI改善、高速化、Git Virtual File Systemサポートなど － Publickey

2017/04/30 91 users Git Publickey Gitクライアント アトラシアン

SourceTree for Windows 2.0ではタブ中心のUIとなって、現在の作業に集中しやすい画面になりました。細かいデザインや配色、アニメーション効果などを見直したことで視認性も改善。 Windows 10 Anniversary Updateで追加されたモニタごとのDPI設定に対応したことで、モニタ間で表示を移動させてもつねに精細な表示を実現しました。 またGitの操作にLibGit... 続きを読む

jQueryを使わずスライドするサイドメニューを作る方法 [ホームページ作成] All About

2017/03/03 18 users jQuery ウェブペー ボタンクリック スクリプト タップ

jQueryを使わずスライドするサイドメニューを作る方法 ボタンをクリック(タップ)することによって、初期状態では非表示になっているサイドメニュー(メニューバー)を表示させる方法をご紹介。スクリプト「Sidebar Transitions」使って14種類のアニメーション効果でサイドメニューを表示する方法を解説。 ボタンクリックでスライドイン表示するサイドメニューを作る スマートフォン用のウェブペー... 続きを読む

流行りのページスクロールによるアニメーション効果が多数収録されたサンプル集:phpspot開発日誌

2015/06/16 18 users ページスクロール CodyHouse パララックス効果 多数

流行りのページスクロールによるアニメーション効果が多数収録されたサンプル集 2015年06月16日- Page Scroll Effects | CodyHouse 流行りのページスクロールによるアニメーション効果が多数収録されたサンプル集がダウンロード可能です。 パララックス効果や3D効果など、クオリティの高いものばかりでかなり使えそう。最近流行りのページ作成に役立てられそうです 一昔前にここま... 続きを読む

iOS 7の「もたつき感」を緩和する方法 | Touch Lab - タッチ ラボ

2013/10/23 30 users Touch Lab ラボ タッチ アニメーション ひと

本日リリースされたiOS 7.0.3の設定で、「視覚効果を減らす」をオンにすると、余計なアニメーションが減ってキビキビと動くようになります。 iOS 7では、画面遷移やアプリの起動・終了時に以前よりもアニメーション効果が多用されています。 下は、ロック画面からホーム画面への切り替わる際のアニメーション(見続けると気分が悪くなる場合があるのでご注意を)。 このような視覚効果により、ひとによってはめま... 続きを読む

写真が動き出す?!お洒落なシネマグラフGIFアニメーションまとめPhotoshopVIP |

2013/10/07 125 users 一部分 シネマグラフ 視線 エントリー テクニック

シネマグラフをご存知でしょうでしょうか。まるで写真のように見えて、一部分だけを動かすことで、視線を一点に注目させる、ユニークなテクニックです。写真が動き出したような、不思議なアニメーション効果を作成することができます。 海外デザインブログCGFrog.comで、見ていると不思議な気分になってくる、シネマグラフGIFアニメーションをまとめたエントリー「Amazing Animated Gif’s f... 続きを読む

「iOS 7」の視覚効果で吐き気やめまい、一部ユーザーが報告 （CNET Japan） - Yahoo!ニュース

2013/09/30 29 users めまい 吐き気 Yahoo 視覚効果 CNET Japan

Appleデバイスを最新のOS「iOS 7」にアップグレードした後、操作時のアニメーション効果が原因で気分が悪くなったと一部のユーザーが報告している。 複数のユーザーがAppleのフォーラムでiOS 7に関する不満を訴え、ズーム効果やモーション効果が原因で、吐き気や頭痛、目の痛み、めまい、乗り物酔いを催したと述べた。 あるユーザーはアニメーション効果が原因で、車酔いのような症状が出ると述べた。Ap... 続きを読む

「iOS 7」の視覚効果で吐き気やめまい、一部ユーザーが報告 - CNET Japan

2013/09/30 51 users めまい 吐き気 視覚効果 CNET Japan iOS 7

Appleデバイスを最新のOS「iOS 7」にアップグレードした後、操作時のアニメーション効果が原因で気分が悪くなったと一部のユーザーが報告している。 複数のユーザーがAppleのフォーラムでiOS 7に関する不満を訴え、ズーム効果やモーション効果が原因で、吐き気や頭痛、目の痛み、めまい、乗り物酔いを催したと述べた。 あるユーザーはアニメーション効果が原因で、車酔いのような症状が出ると述べた。Ap... 続きを読む

アニメーション表示のプログレスバーをどうすれば体感速度がアップするのかが判明 - GIGAZINE

2013/09/19 134 users プログレスバー GIGAZINE 進捗度合い ソフトウェア

ファイルをダウンロードする時やソフトウェアをインストールする際によく目にするのが進捗度合いを示すプログレスバーですが、このプログレスバーの表示にアニメーション効果を加えることで、処理の体感速度を実際よりも早く感じさせる効果があることがわかりました。 ProgressBarsVisualCHIv15CAMERA1 - ProgressBarsHarrison.pdf (PDFファイル) http:/... 続きを読む

Lettering.jsを併用して、任意のテキストにCSS3のアニメーションエフェクトを実装するスクリプト・textillate.js - かちびと.net

2013/01/31 34 users アニメーションエフェクト テキス Lettering.js

ちょっと面白かったのでメモ的に。 タイポグラフィ用のライブラリ、 Lettering.jsを併用して、テキス トにCSS3によるアニメーション効果 を容易に与える事が出来る、という スクリプトのご紹介。 使いどころは限定されますが、動きが面白かったのでメモ的に。以前ご紹介したLettering Animateを少し進化させたような感じ。 textillate.js エフェクトの種類もかなり用意され... 続きを読む

サムネイルがシャッフルされてクールなギャラリー実装「Photofy」:phpspot開発日誌

2012/08/29 21 users サムネイル phpspot開発日誌 順番 沢山 ギャラリー

Photofy | Photo Swap Shuffle Plugin for jQuery サムネイルがシャッフルされてクールなギャラリー実装「Photofy」。 写真が沢山並んでおり、一定時間ごとにシャッフルされる写真ギャラリーです。固定位置よりも何がでるかわからない楽しさが演出できます ほとんどのギャラリーが順番が決まっていますが、これはランダムに並べられ、そのアニメーション効果もクールです... 続きを読む

マウスを近づけると徐々にアニメーションする効果を作るjQueryプラグイン「Approach」:phpspot開発日誌

2012/08/27 33 users Approach マウスカーソル エレメント マウス 特定

Approach: a jQuery plugin that allows you to animate CSS properties based on distance to an object マウスを近づけると徐々にアニメーションする効果を作るjQueryプラグイン「Approach」。 特定のエレメントへのマウスカーソルとの距離によってアニメーション効果を付けられるjQueryプラグインで... 続きを読む

また新しいHTML5オーサリングツール「Ninja」、タイムラインでアニメーションも作成可能。Motorola Mobilityがオープンソースで公開 － Publickey

2012/07/24 196 users Publickey Ninja オーサリングツール SVG

Motorola Mobilityが今月公開したHTML5オーサリングツール「Ninja」のバージョン0.7は、SVGやCanvas、WebGLなどを用いたHTML5でのアニメーション効果の開発を得意としたオーサリングツールです（それにしてもNinjaという名称は海外で人気がありますね……）。オープンソースソフトウェアとして開発されています。 Ninja | Tetsubo Ninjaは、同じくM... 続きを読む

隠されているWindows7のアニメーション機能をオンにする「AniExplorer」 - GIGAZINE

2012/06/23 39 users GIGAZINE アニメー フォルダー おん http

通常フォルダーを開くと中にあるファイル・フォルダーはただ表示されるだけですが、フリーソフトの「AniExplorer」を使うと、今まで使用できなかったWindows7の隠されたアニメーション効果をオンにすることができます。どのような動きをするのか＆設定方法などは以下から。 WinAero Downloads http://winaero.com/download.php?view.22 ◆アニメー... 続きを読む

Keynoteでかっこいい動画が作れるって知っていた？ | IDEA*IDEA

2012/01/26 37 users KeyNote IDEA MOV iMovie エフェクト

知らない人が多いようなのでちょろりとご紹介。MacのKeynoteですが、.mov（QuickTime形式）で書き出すことができますよ。 ↑ まずはオブジェクトのアニメーション効果を設定。 ↑ ファイルから「書き出し」をします。いくつかオプションがあるのでお好みで。 ↑ 書き出し中。 ↑ 出来た！ Keynoteのエフェクトはかっこいいのが多いので、これでアニメーションを作ってiMovieに取り込... 続きを読む

エレメントに多彩な動きのエフェクトを当てられる「Morf.js」:phpspot開発日誌

2011/07/01 32 users エレメント エフェクト phpspot開発日誌 格段 CSS3

Morf.js ? Custom Easing Functions for CSS3 Transition Joe Lambert エレメントに多彩な動きのエフェクトを当てられる「Morf.js」。 CSS3のTransitionを使ったアニメーションや、JavaScriptによるカスタムアニメーション等、様々なアニメーション効果を作れるライブラリです。 動きをもたせることでUIを格段に分かりやす... 続きを読む

バリデーションエラー時、ビューに注目させる - Kazzzの日記

2011/04/29 11 users Kazzz JFC Swing フレームワーク 一目

バリデーション処理を実施した際に、エラーが発生したビューが一目で判るようにしたい。 JFC/Swingや.NET WindowsFormsでは背景色を変えたり、そのビューに関連付けられた文字列の色を変えたりという処理を書いてきたが、Androidの場合、ビューに対してアニメーション効果を付加することが可能なため、それを使うと印象的な演出を追加できる。 下記のコード片は拙作のフレームワークのバリデー... 続きを読む

Firefox 4のタブアニメーションをオフにする方法 : ライフハッカー［日本版］

2011/04/26 47 users 賛否両論 ライフハッカー リソース タブ ユーザ

Firefox , Mozilla Firefox 4のタブアニメーションをオフにする方法 2011.04.26 14:00 コメント数：[ 0 ] Check Tweet タブを開いたり閉じたりする時のアニメーション効果が、Firefox 4では追加されています。しかし、このタブアニメーション効果、賛否両論の模様。そこにリソースを使うならページの読み込みに力を注いでほしい！ というユーザも沢山い... 続きを読む

CSS3のアニメーション効果をインタラクティブに設計できる『CSS EASING ANIMATION TOOL』 | IDEA*IDEA

2011/03/22 101 users IDEA Ceaser インタラクティブ デモ CSS3

お、これは便利・・・。CSS3のイージング効果（アニメーションすね）をインタラクティブに設計できるツールです。↑ 種類はたくさん。もちろんその場でデモも出来ます。↑ ベジェっぽく設定もできます。↑ あとはコピペするだけ。かなり便利ではないでしょうかね。ご利用はこちらからどうぞ。» Ceaser – CSS Easing Animation Tool – Matthew Lein 続きを読む

アイコンにアニメーション効果が付くフリーソフト「UberIcon」 - GIGAZINE

2007/01/31 107 users 百聞 GIGAZINE フォルダ アニメーション ムービー

フォルダを開くときやファイルを開くとき、ソフトウェアを実行するときなどにアイコンをクリックすると思いますが、その際にアイコンにちょっとだけかっこいいアニメーションが付くようになるフリーソフトで、日本語化もされています。 このアニメーションはプラグイン方式で増やすことができ、既にいくつものアニメーション効果が公開されています。 百聞は一見にしかず、動作する様子をムービーでキャプチャしてみました。再生... 続きを読む

script.aculo.usベースのリッチGUIコンポーネント作成JavaScriptライブラリ「Spinelz」:phpspot開発日誌

2007/01/30 93 users Ajax phpspot開発日誌 ベース 最大限 機能

script.aculo.usベースのリッチGUIコンポーネント作成JavaScriptライブラリ「Spinelz」 2007年01月31日 Spinelz - JavaScript libraries Spinelzはscript.aculo.us.をベースに開発されています。 Ajaxや、script.aculo.us.の持つアニメーション効果を最大限に活かした、ちょっと便利な機能を提供してい... 続きを読む

クール! Flash/Javaアプレット不要、Script.aculo.usでクロスフェード (MYCOMジャーナル)

2006/09/28 79 users クロスフェード MYCOMジャーナル DHTML Ajax

18th Street Software, Mike Arace氏は自身のブログにおいて、FlashやJavaアプレットといったサードパーティプラグインを使わずにアニメーション効果を実現する方法を紹介している。 同氏は、これまでWebでアニメーション効果を実現したい場合、FlashやJavaアプレットなどのサードパーティプラグインを使わないといけないと考えられてきたが、最近のAjaxやDHTMLの... 続きを読む