Flash(Animate)で綺麗なアニメーションGIFの作り方【改】

Flash(Animate)で綺麗なアニメーションGIFの作り方(UI Animation)

以前投稿したGIFアニメの作り方解説記事、今は作り方を変えているのでその方法を上げておきます。 Continue reading Flash(Animate)で綺麗なアニメーションGIFの作り方【改】

英語とデザイン(UI/UX)を学びたい人向けTED talks 6+1選

1年くらい海外赴任で働いているんですが、未だ英語が残念な出来のため週2回英会話学校に通っています。
最初は用意されたビジネス英会話のテキストで学習していたんですが、そればかりでは面白くないため、半年くらい前からレッスンの内半分は興味のあるTEDトークを選んで予習、先生と内容について説明したり、議論するという形式にしました。自分にはこれが合っていたようで以前より学習に身が入るようになった気がします。
ご存知のとおりTEDは世界中の様々な分野のエキスパートがプレゼンテーションを行うイベントで、動画が無償で公開されています。英語と同時に様々な知識が吸収でき、長さもジャンルもバリエーション豊富と大変おすすめの英語学習教材なのですが、とにかく沢山あるので、個人的におススメの、中でもデザイン・UI/UXに関するトークを紹介してみます。

Continue reading 英語とデザイン(UI/UX)を学びたい人向けTED talks 6+1選

UIアニメーションの重要性を伝えるにはどうしたら良いのか

モーションデザインはUIの未来 / 英語の元記事

この記事を読みまして、もう1から10まで同意なんです。

モーションデザインとは画面上に跳ねたりさせて動かすことを言うのでしょうか?違います。

モーションはストーリーを語ります。アプリにおける全ての物事は連鎖になっていて、モーションはあなたのガイドになります。

UIアニメーションとはデザインや機能と切り離せるものではなく、そのアプリやサービスのユーザー体験を補助、補強するものでなくてはならないのです。
上記記事では演出に特化したUIには触れられていませんが、例えばゲームのUIに使いやすさとは一見関係ないこんな演出が入っていても、それが世界観にマッチしていてユーザーの没入度に寄与するのであれば、それは良いUIであると言えます。
よってその世界観や組み合わさる数々の要素を取り除いた、UIアニメーション単品を紹介しているこのBlogは、本来意味のないものということになってしまうのですが、それではあまりに私が報われない。その前提があった上で、引き出しを増やす目的でやっている、参考にしてくれている、ということにしておいてください。 Continue reading UIアニメーションの重要性を伝えるにはどうしたら良いのか

利用不可と非アクティブなボタン問題

何のことかといいますと、特にスマートフォンアプリのゲームをプレイしていて頻繁に目にするイケてないUIの問題であります。
下に例を出しますが、簡単に言うと画面に表示されているあるボタンが、利用不可で押せない状態にあるのか、非アクティブな状態になっているだけなのかが、ぱっと見で分からないことが結構あるというものです。 Continue reading 利用不可と非アクティブなボタン問題

Flash(Animate)で綺麗なアニメーションGIFの作り方

このサイトに載せているGIFアニメの作り方を紹介します。
2017/3/20追記:今は別の方法使ってます、詳しくはコチラ
 Flash(Animate)で綺麗なアニメーションGIFの作り方【改】

基本的に動きはFlash(最近名称がAdobe Animateに変わったけど、以下Flashと記述)で制作。Flash単体でGIFアニメ書き出し機能もありますが、画質が悪かったり、作り方によって動きが再現できなかったりするので、最終的な画像書き出しにはFireworksを使用しています。

Flash→(swf→SAC→)連番png→Fireworks→アニメーションgif

という流れ。以下詳細を説明します。 Continue reading Flash(Animate)で綺麗なアニメーションGIFの作り方

デザインの参考サイト

デザインの参考にしているサイトまとめ。
随時更新予定。

デザインポートフォリオ

Dribbble
承認制のデザナーズコミュニティ。Dribbbleプレイヤーになりたい。

Behance
Adobeのデザインナーズコミュニティ。

UYI
UIアニメーションの参考に。

BEST PSD FREEBIES
PSDがダウンロードできる。

Pinterest
画像共有サービス、UIやロゴ等も豊富。

pttrns
App UIがカテゴリ別に整理されている。

ドキュメント系

Material design
Googleのマテリアルデザインガイドライン