文章モバイル環境の入力フォームについて考える優れたモバイルのフォーム事例についての記事を読みました。Design共通したプラクティスとして、入力項目のみにフォーカスする(iGooodsはそもそも入力項目が2つしかないですが)、アニメーションを効果的に使うというところでしょうか。Animation)以前投稿したGIFアニメの作り方解説記事、今は作り方を変えているのでその方法を上げておきます。6+1選1年くらい海外赴任で働いているんですが、未だ英語が残念な出来のため週2回英会話学校に通っています。最初は用意されたビジネス英会話のテキストで学習していたんですが、そればかりでは面白くないため、半年くらい前からレッスンの内半分は興味のあるTEDトークを選んで予習、先生と内容について説明したり、議論するという形式にしました。自分にはこれが合っていたようで以前より学習に身が入るようになった気がします。ご存知のとおりTEDは世界中の様々な分野のエキスパートがプレゼンテーションを行うイベントで、動画が無償で公開されています。英語と同時に様々な知識が吸収でき、長さもジャンルもバリエーション豊富と大変おすすめの英語学習教材なのですが、とにかく沢山あるので、個人的におススメの、中でもデザイン・UI/UXに関するトークを紹介してみます。英語の元記事この記事を読みまして、もう1から10まで同意なんです。モーションデザインとは画面上に跳ねたりさせて動かすことを言うのでしょうか?違います。モーションはストーリーを語ります。アプリにおける全ての物事は連鎖になっていて、モーションはあなたのガイドになります。UIアニメーションとはデザインや機能と切り離せるものではなく、そのアプリやサービスのユーザー体験を補助、補強するものでなくてはならないのです。上記記事では演出に特化したUIには触れられていませんが、例えばゲームのUIに使いやすさとは一見関係ないこんな演出が入っていても、それが世界観にマッチしていてユーザーの没入度に寄与するのであれば、それは良いUIであると言えます。よってその世界観や組み合わさる数々の要素を取り除いた、UIアニメーション単品を紹介しているこのBlogは、本来意味のないものということになってしまうのですが、それではあまりに私が報われない。その前提があった上で、引き出しを増やす目的でやっている、参考にしてくれている、ということにしておいてください。何のことかといいますと、特にスマートフォンアプリのゲームをプレイしていて頻繁に目にするイケてないUIの問題であります。下に例を出しますが、簡単に言うと画面に表示されているあるボタンが、利用不可で押せない状態にあるのか、非アクティブな状態になっているだけなのかが、ぱっと見で分からないことが結構あるというものです。利用不可と非アクティブなボタン問題Flash(Animate)で綺麗なアニメーションGIFの作り方このサイトに載せているGIFアニメの作り方を紹介します。Animateに変わったけど、以下Flashと記述)で制作。Flash単体でGIFアニメ書き出し機能もありますが、画質が悪かったり、作り方によって動きが再現できなかったりするので、最終的な画像書き出しにはFireworksを使用しています。Flash→(swf→SAC→)連番png→Fireworks→アニメーションgifという流れ。以下詳細を説明します。デザインポートフォリオDribbble承認制のデザナーズコミュニティ。Dribbbleプレイヤーになりたい。BehanceAdobeのデザインナーズコミュニティ。UYIUIアニメーションの参考に。FREEBIESPSDがダウンロードできる。Pinterest画像共有サービス、UIやロゴ等も豊富。UIがカテゴリ別に整理されている。