スクリーンキャプチャを超簡単にGifアニメーションにする方法

先日公開したこちらの記事(Sketchでの素材の書き出しを10倍早くする3つの小技)を読んでくれた知人から、スクリーンムービーをどのように撮影したのか聞かれたので、この際自分自身もわからなかったことも含めて共有したいと思います。

credit: giphy.com

画面をGifで録画する

QuickTimePlayerでスクリーンムービーをmp4ファイルで撮影し、それをPhotoshopでGifに変換する、なんて手間はGiphy Captureがあれば必要ありません。

credit: Giphy Capture

ダウンロードして起動したら、こんな画面が立ち上がるので、あとは中央の撮影ボタンを押すだけ。薄いグリーンの領域が撮影されます。必要なサイズにリサイズしてから撮影しましょう。

撮影を終了するにはもう一度先程のボタンを押します。撮影が終わると、撮影した動画のサムネイルがグリーンの撮影領域の下に出現するので、ダブルクリックしましょう。Saveを.gifでスクリーンのキャプチャを保存することが出来ます。

マウスカーソルごと撮影する

僕も昨日まで知りませんでした。Toolbar > Preference(⌘,)から、Giphy Captureの設定画面を開きます。下の方にある”Capture Cursor”にチェックマークをつければ、マウスカーソルを含むスクリーンムービーを撮ることが出来ます。

キーボード入力を可視化する

静止画+テキストよりもときにパワフルな情報になりうるGifアニメーションですが、画面の外で起きていることを伝えることができないという欠点があります。キーボードで入力したキーをスクリーン上に表示させるためのツールがこちらのmouseposéです。

Boinx Software – Mousepose

¥1,000ほどする有料アプリですが、個人的にはとても重宝しています。主な機能は3つ。

キーボード入力の表示

カーソルへの注目を集める

ショートカットでの切り替えも可能。

クリックも可視化

クリック音なども出せるようです。Gifでは使いませんが、動画だと便利そうです。

ブログに掲載する

せっかく手間を掛けてGifアニメーションをブログに掲載しても、アニメーションは常に動いているため、スクロールのタイミングによってはアニメーションに気づかないことも。GiffferというJavascriptライブラリを使えば、カンタンにGifアニメーションに再生ボタンを設置することが出来ます。

gifffer.jsを使おう

ダウンロードしてきたフォルダの中のgifffer.js、もしくはgifffer.min.jsを、自分のブログに読み込ませます。

以下を記述します。

これで準備完了です。あとは再生ボタン付きGifアニメーションを設置したい場所にイメージタグを置くだけです。この時、”src”ではなく、”data-gifffer”を使います。

軽く確認したい方用にサンプルを用意してます。 Codepen Gifffy Test

再生ボタンをつけることで、アニメーションを見逃すのをふせぐ事ができる上に、注目して欲しいコンテンツへの注意をGIFアニメーションが奪ってしまうということもなくなりますね。

まとめ

今回はGifアニメーションで、カンタンにわかりやすいスクリーンキャプチャを撮る方法と、それにユーザーの任意のタイミングで再生させるためのボタンを付ける方法を説明しました。テキストと静止画だと說明がもどかしいときにぜひ使ってみて下さい!!


続きを読む

ライティングツール 「Bear」がかなりいい感じ

デザイナーであれば、美しいツールを使うと自ずとテンションが上がるのではないでしょうか?最近ブログを書き始めたことも有り、以前は目的がメモ程度であまりこだわりのなかったライティングツールを見直しました。そんな中出会った私的ベストライティングツールがこちら。

Bear

Write beautifully on iPhone, iPad, and Mac 公式サイト

エクスポートがめっちゃ便利

Bearで書いた記事は、WordpressやQiitaにアップロードすることができます。記事をマークダウンやHTMLなどでコピーしたら、あとは任意の場所に貼り付けるだけ!

文句のつけられないUI

説明書不要、ググることなんてありません。いきなり普通に使えます。日本語にも対応しているので、英語恐怖症の人でも安心です。使い始めて3時間くらい経つと、”こんなことできたら便利なのに”と思い始めます。でも大丈夫!ウェルカムテキストの中に、その答えが面白いように書かれています。

こういう心配り素敵

ライティングに最適な幅を保ってくれるため、ウィンドウサイズをいちいち調整する手間も省けます。

Evernoteだとこうなる… Bearだと

スタイリング

スタイリングのやり方も独特で、Kobito(http://kobito.qiita.com/)の編集画面とプレビュー画面をうまいこと1画面に収めたようなインターフェイスになっています。なれてくると、ショートカットキーでテキストのスタイルを設定できるので、ライティング作業中にマウスに手を伸ばす必要は殆どありません。

Kobitoのインターフェイス Kobitoで書いたもの(上画像)と全く同じものをBearで書いたもの

“Evernoteでよくない?”

そうおっしゃる方も結構いるみたいです。というのもEvernoteはアップロードできるデータのサイズに制限はあれど、無料でクラウドストレージが利用できまが、Bearは¥150ほど一ヶ月にかかってしまいます。”毎月150円払う理由がわからない、Evernoteと同じじゃん?”、そういうレビューもいたるところで見かけました。ただ、私個人は、Bearの提供する単なるライティングツール以上の価値は¥150以上あると考えます。百聞は一見にしかず、実際に触ってみると、上に挙げたメリット以外にも、言語化出来ないBearのよさを感じていただけると思います。是非一度お試しあれ!


Bearのダウンロードはこちらから

続きを読む

効果的なアニメーションがUXを向上させる Smashing Magazine和訳

Smashing MagazineさんがアニメーションとUXの関係について書かれていたのが興味深かったので和訳したいと思います。なお、プロの翻訳家ではないので、わかりやすさ>正確さ、というスタンスで訳しています。ご了承下さい。

※当記事は、元サイト、SmashMagazine様に許可を得て翻訳しています。

元サイト

https://www.smashingmagazine.com/2017/01/how-functional-animation-helps-improve-user-experience/

効果的なアニメーションがUXを向上させる

人間は視覚に大きく頼って生きている生き物である。アニメーションによって”見た目”がユーザーに与える影響は大きくなる。動いているものを見ずにはいられない我々の目にとっては、アニメーションというものはまるでキャンディーのように、キャッチーでキラキラしている。それだけでなく、競合サービスとの差別化を図るのにも有用だ。

近年、多くのデザイナーがアニメーションがUXを向上させる重要な要素の一つだと考えている。アニメーションは単に楽しいものというだけにすぎず、インタラクションを成功へと導くツールなのだ

しかしながらデザインにおいてアニメーションは組み込まれている場所はもちろんのこと、適切なタイミングで組み込まれたときにしかユーザー体験を向上させることはない。よいUIアニメーションには目的と意味があり、きちんと機能を果たす。この記事では、UXデザインにおいて機能的なアニメーションが果たす役割について説明し、アニメーションを組み込む適切なタイミングについても見ていきたいと思う。

機能的なアニメーションとは

機能的なアニメーションとは、デザインの機能の一部として絶妙にUIに取り入れられたものである。デザインをより強力なものにし、以下のように明確で論理的な目的を持つ。

  • 認知負荷の軽減
  • 変化の見落としの防止
  • 空間関係を認識する補助
アニメーションはUIに命を吹き込む。人間中心設計の手法では、ユーザーが主要な商店であり、UIは直感的でしっかりとした反応が得られ、そして人間らしいものでなければならない。機能的なアニメーションはそれらを達成するために無くてはならないものである。

UIにおける機能的なアニメーションの役割

考え抜かれテストされ尽くした機能的アニメーションは、複数の機能を果たすことができる。

ユーザーアクションへのフィードバックを視覚的に表現する

よいUIデザインはフィードバックを提供する。フィードバックは、スクリーン上の物質がまるで現実世界のものであるかのように感じさせてくれるうえに、インタラクションの結果(いい場合も悪い場合も)を示してくれる。ボタンやコントローラーなどのUIエレメントは、スクリーンというガラスのレイヤーの向う側にあるけれども、形を持っているようにみえなければならない。ビジュアルと連続した動きは、直ちに入力を認識しユーザーにまるで直接それらを操作しているかのような動きをすることで、このギャップを埋めることができる。

ボタンや他のアクティブコントロールは視覚的フィードバックでユーザーの入力に反応しなければならない (Image credit: Bechance)

Image credit: Ramotion on Behance from Smashing Magazine on Vimeo.

視覚的フィードバックは操作の結果をユーザーに知らせるときに役に立つ 。操作が正常に行われなかった場合、機能的アニメーションはなにが問題なのかを迅速に、簡単な方法で伝えなければならない。たとえばブルっと震えるアニメーションは、間違ったパスワードが入力されたときに使われる。クビを横に振るというジェスチャーが現実世界でも人々が(NOという)フィードバックをお互いに与えるときにつかっていることもあり、ブルッと震えるジェスチャーがNoを意味するのはかなり普遍的なのだというのは理解しやすい。

ユーザーはアニメーションを見て、即座に問題があると判断できる。クレジット: thekineticui

目的

  • ユーザーのアクションをシステムが受け取ったことを認識させる
  • ユーザーのアクションの結果を受け付ける(拒否する)

システムの状態を可視化する

ニールセンのユーザビリティ10原則 の一つによると、システムの状態を見えるようにすることはUIデザインにおいてもっとも重要な原理の1つである。ユーザーは今どういう状況なのか、いついかなるときも知りたいと思っているしアプリはユーザーにそれを推測させるようなことがあってはならない。アプリはユーザーに何が起きているのか、正しい視覚的フィードバックで伝えなければならない。データのアップロードとダウンロードのプロセスは効果的アニメーションが真価を発揮する場面だ。

例えば、ローディング中のアニメーションは、いまどのくらいのスピードで作業が進んでいるのかを示し、あとどのくらいで作業が完了するのか期待を持たせる。

楽しいアニメーションは、スクリーンの後ろで起こっていることからユーザーの注意をそらし、ユーザーの待たされていることへのストレスを軽減することができる。(クレジット: tympanus)

このようなタイプの機能的アニメーションは、電話を受け取った時に代表されるように、なにかアプリ(もしくはシステムでも)の重要な状況変化においてユーザーの注意を引きたいときにも役に立つ。

(Image credit: Material Design)

もしくは新しいメールが届いたときにも

(Image credit: Behance)

目的

リアルタイムなシステムステータスをユーザーに知らせ、ユーザーに今何が起きているのかを理解させる

ビジュアルヒント

はじめてアプリを使うユーザーの多くは、自分一人の力でアプリのインターフェイスの使い方を理解することはできない。(ジェスチャードリブンインターフェイスなどのように)見慣れないユニークなインタラションを持つUIの場合は、特にそうである。

UIをユーザーに教えるとなったときに、インタラクションを使って何ができるのか視覚的ヒントを示してあげなければならない。機能的アニメーションはユーザーの注意を、どんなインタラクションが使用可能なのかという点に向けることができる。

視覚的ヒントはユーザーに今何が起ころうとしているのか見通しを与えることができる。例えば写真を取るという行動をユーザーに準備させていた機能的なアニメーションがiOSのカメラアプリにはあった。

iOS6カメラアプリにおけるシャッターのイメージ

さらにビジュアルヒントはデザインにおける特定の効果がどのように作用するか実証することによって、ユーザーを一歩前進させることができる。

Pudding Monsters for iOS. Image credit: Pudding monsters from Smashing Magazine on Vimeo.

視覚的ヒントはユーザビリティを向上させ、結果的にプロダクトの有用性(desirability)をも向上させる。

目的

  • 必要な予測を創り出し、これから起こることに対する手がかりをユーザーに与える
  • ユーザーがインターフェイスに適応するのを助ける
  • ユーザーがどのようにスクリーン上のエレメントとのやりとりを行い、どのようなやりとりをすべきかをユーザーに教える

ナビゲーション遷移

ナビゲーション遷移は、例えば全貌を映すビューから詳細のビューへの遷移に代表されるように、アプリの状態と状態の間の動きである。なにかしら状態が変化するときは、デフォルトではパチパチとページが移り変わるのでフォローするのが難しい。機能的アニメーションはそのような変化の瞬間にユーザーが楽にページ遷移を認識できるようにする。ユーザーをナビゲーションの状況から状況へとスムーズに移動させ、遷移中のビジュアル的”つなぎ”を作ることによって変化を説明する。ナビゲーション遷移は階層的(親から子へ)、または兄弟遷移からなりたつ階層的な遷移はユーザーがアプリのより深い階層やスクリーンにユーザーが行く場合に使われる。アニメーションは親階層から目的地(子階層)への移動をより一層明確に説明する。

Animated zoom-in transition guides a user’s attention from parent-to-child (detailed view). Image credit: Material Design from Smashing Magazine on Vimeo.

Animated parent-to-child transition clarifies the relationship between parent and child. Image credit: Behance from Smashing Magazine on Vimeo.

兄弟関係の遷移は要素同士がヒエラルキーの同じ階層に存在した場合に起こる。例えば、このアニメーションはユーザーをタブからタブに導いたときに使われる。

The content and surface of each tab stays at the same level and the animation simply guides focus between views. (Image credit: Behance)

コンテンツとタブの表面は同じ階層にあり、アニメーションは単にビューのどこに注目すればよいかを示している。

両方の場合、機能的アニメーションは目がオブジェクトがどこから来て、隠れるオブジェクトがどこにいくのか(それをもう一度見つけるにはどこを探せばいいのか)がわかりやすく示されている。視覚的な手がかりを提供し、インタラクションをカンタンにした上で、何が起きたのかを補足する。

目的

  • スクリーンとエレメントの空間的な関係を定義する
  • ユーザにたった今起こったページレイアウトの変化を理解させることで、パチパチとした遷移によってユーザーを驚かせてしまうのを避ける

ブランディング

ここまでで説明したアニメーションの役割というのはかなり論理的だったが、これは極めて感情的なものだ。よく、全く同じ機能を持ち、同じ課題を解決するためのサービスというのはいくらでも存在する。それらはそれぞれ良いエクスペリエンスを持っている、そのなかでも人々に愛されているプロダクトというものは、良いUX以上のものを提供している。ユーザーとの感情的な関わりの確率である。

ブランディングアニメーションはユーザーとの関わりに一役買っている。マーケティングツールとしても使われ、(会社のブランド価値をサポートしたり、プロダクトの強みを強調する)、同時にUXをほんとうの意味で楽しくて、印象に残るものにする。このアプローチは”ユーザー中心”ではないかもしれないが、機能的な目的を持っている。

いい結果を生むために、ブランディングアニメーションは経験の連続性をサポートする必要がある。例えば、 Lo-Flo Records のウェブサイトにある素敵なアニメーションはユーザーにもっとウェブサイトを見て回ってもらうのに重要な役割を果たしている。人々はウェブサイトが次になにを見せてくれるのかとワクワクしながら見て回るのだ。

Branding animation is able to make design feel unique. Image credits: Lo-Flo-Records from Smashing Magazine on Vimeo.

人々は細部を気にする。アニメーションへの注目は感情を伝達し、エクスペリエンスがよく作り込まれている印象を与えることができる。何かを待っている間に出現するユニークで楽しいインジケーターアニメーションは、本当に楽しいエクスペリエンスを生み出すことができる。

Attention to fine movements can delightfully surprise the user. Image credit: Creativedash from Smashing Magazine on Vimeo.

目的

ユーザーを楽しませ、共感と楽しさをデザインに付与する

プロダクトの特徴をつくる; ユーザーにプロダクトに関わり、ブランドへの理解を高める

落とし所の見つけ方

便利なキャンディーとただのキャンディーのバランスはどこでとればいいのでしょうか?どのタイミングでアニメーションが適切でなのかということに時間を割いて考えることは非常に大切なことである。

目的を伴ったアニメーション

アニメーションは必ず目的を持っていなければならない。自己満足のアニメーションなどあってはならない。機能的な目的にアニメーションがふさわしくない場合、気まずかったり、うざったいものになりかねない。アニメーション無しでもっと迅速に済むはずの作業が、遅らされている場合なんて特にそうだ。例えば、以下にPayPalのメールレシートのコンセプトアニメーションがある。ぱっと見素晴らしいアニメーションだが、アニメーションがあるがゆえに、アニメーションが終わるまでの4秒間待たされるのはやりすぎだし、結果的にアプリのフローをつまらせている。シンプルにレシートがフェードインしてくるアニメーションのほうが、この場合目的に会っている(単純にレシートが現れるまでの時間が短いため)

An example of superfluous animation. Image credits: Vladyslav Tyzun from Smashing Magazine on Vimeo.

ユーザーは常に目的を持ってサイトに来たり、アプリを起動したりするということを覚えて置かなければならない。私たちは短い空間と時間の中でユーザーの目的を彼らに示す必要がある。それゆえ、アニメーションをアプリで使う時、アニメーションが意味を持ち、ユーザーがやりたいことをスムーズにやれることを邪魔しない場所でのみアニメーションを組み込むべきである。

繰り返しを忘れないで

とてもいいアニメーションでさへ、使いすぎると鬱陶しく感じられてしまうアニメーションをデザインするときは自分に聞いてみて欲しい、”100回目にこのアニメーションを見たとしても鬱陶しくないか。またそれは誰が見ても明確で出しゃばりすぎていないか”

アニメーションは鬱陶しいものになってはならない(Image credit: Rachel Nabors) (Large preview)

プロトタイプを作り、アニメーションをテストしよう

UIアニメーションを作品に組み込むときに、インタラクティブなプロトタイピングとテストを実際のユーザーと共に行うのは正しい行動だ。プロトタイピングはあなたがどのようにアニメーションをデザインに使いたかったのか伝えるのに最適である。もしインタラクティブなプロトタイプを使えば、なにがうまくいき、アプリの欠陥がどこに隠れているか明確に知ることができる。アニメーションの見た目と、実際に触ってみての印象とは違うため、よくプロトタイプを行った後で再度作り直すというのは珍しいことではない。だらら何度も迅速に繰り返そう。何度も何度も小さなディテールを見直すだけでも、アニメーションは劇的に良くなるはずだ。

Create interactive prototypes using Adobe XD. Image credits: fastcodesign from Smashing Magazine on Vimeo.

まとめ

どこでアニメーションが有意義なものになるのか定義するだけでは、まだ完全ではない。もしあなたがアニメーションをデザインで使う場合、しっかりと作り込まれていなければならない。アニメーションの作り込みの成功の鍵は、アニメーションがデザインプロセスの1つになっていいるかどうかだ。きちんと行えば、アニメーションはデジタルプロダクトを単なるスクリーンのつながりから、細かなところまで考えられて開発された忘れがたい経験に帰ることができる。 

続きを読む

AfterEffectsでつくるUIアニメーションその1 – ScaleとEasing

以前こちらの記事でAfterEffectsを使って作ったアニメーションを、アプリ用に書き出すまでの方法を書きました。

デザイナー向け – iOSアプリ用に豊かなUIアニメーションを作る方法

今回はUIアニメーションを作るためのAfterEffectsの使い方を、簡単なアニメーションを作りながら解説していきたいと思います。今回作成するのは簡単な拡大縮小のアニメーションです。

新規コンポジションを作成する

今回は80pxから100pxに拡大したあと80pxにふたたび戻るアニメーションを作ります。コンポジションのサイズは円が最も大きいときの100 x 100にします。

AfterEffectsのウィンドウ – 各ウィンドウと機能

コンポジションを作成したら下の画像のような画面になったと思います。AfterEffectsは主に4つウィンドウから構成されています。さらっとどこで何をするのか見ていきましょう。

0. ツールバー

選択中のツールによって、やれることが変わってきます。このあたりはphotoshopやsketchと似ているので問題ないと思います。

1. プロジェクトウィンドウ

ここは、アニメーションに使う素材をおいておく素材置場です。アニメーションに必要な素材をこちらにまずドラッグしてくることで、素材をアニメーション内で使うことができるようになります。

2. メインパネル

ここは、アニメーションに使う素材をおいておく素材置場です。アニメーションに必要な素材をこちらにまずドラッグしてくることで、素材をアニメーション内で使うことができるようになります。

3. その他ウィンドウ

整列パネルや、プレビューパネルなどがあったりします。個人的にはあまり使いません。

4. タイムライン&レンダーキューウィンドウ

レイヤーにアニメーションを加えたり、レイヤーのスタイルなんかも編集するのがこのウィンドウです。タブでが後ろ側にあるレンダーキューウィンドウに切り替えることもできます。レンダーキューウィンドウでは動画出力の設定を行います。

新規レイヤーを作成する

今回はプロジェクトウィンドウに画像ファイルを持ってくる必要はありません。代わりに円形のレイヤーを作成しましょう。ツールバーの図形ツールを選択肢ます。

デフォルトでは長方形ツールになっているので、長押しで図形ツールのオプションを出して楕円形ツールを選択しましょう。

ツールバーのアイコンが楕円に変わりました。この状態で、メインパネルにドラッグで円を書くことも出来ますが、それだとアニメーションさせるのに非常に都合が悪いです(アンカーポイントが図形の中心からずれてしまうため)。図形をメインパネル中央に表示させるには、ツールバーの楕円アイコンをダブルクリックしましょう。

メインパネルいっぱいの円が中央に表示されました。

タイムラインウィンドウにシェイプレイヤー1というファイルが追加されていることも確認しておいて下さい。

レイヤーの大きさを編集

作成したレイヤーはメインパネルいっぱいに表示されています。つまり、縦横が100pxになっている状態です。これを80pxに変更します。タイムラインウィンドウを見ていきましょう。シェイプレイヤー1というファイル名の左にある三角マーク▶を押してこのようにオプションを展開しましょう。

展開すると、コンテンツとトランスフォームというオプションが出現します。このトランスフォームの中のスケールを100から80に変更しましょう。

レイヤーの色を変更

今度はコンテンツ > 楕円形 1 > 塗り > カラーを編集します。カラーの右側にある長方形をクリックするとカラーウィンドウが現れます。今回は#4990E2に設定しました。

タイムラインを編集

タイムラインを編集して、先程の円形に動きをつけていきます。先程編集したトランスフォーム>スケールの左にあるストップウォッチアイコンをクリックしましょう。ストップウォッチアイコンが青く点灯し、タイムラインにダイヤモンドのかたちが現れたと思います。

次に時間インジケーターと呼ばれるバーを20fのところに移動させて、スケールを100に変更してみましょう。ここまで出来たらスペースキーを押してアニメーションを再生させてみて下さい。先程の一連の作業で、0秒のときにスケール80から20f秒のときにスケール100にするというアニメーションを設定していたんですね。

ここまで来るとなんとなくあらゆるエフェクトの付け方も想像がついたのではないでしょうか?スケールの他にも位置、回転、不透明度など、さまざまなスタイルを動かすことができるので試してみて下さい。

一度大きくした円を最後にもとに戻さなければいけないので、26f秒のところに時間インジケーターを持っていき、スケールを80に戻します。再度スペースを押して動作を確認して下さい。一度大きく膨らんでもとに戻る円のアニメーションの完成です。

イージング(加減速)を編集

ただ、このままだとあまり気持ちのいいアニメーションとはいえませんね。そこで編集するのがイージングとよばれる加速、減速を司る関数です。jQueryやcssアニメーションに馴染みのある方だと聞いたことがあると思います。

楕円レイヤーのスケールを選択した状態で、グラフアイコンをクリックしましょう。先程はダイヤモンドがポツポツ置いてあるタイムラインが表示されていましたが、折れ線グラフのようなものに切り替わりました。こちらもグラフのx軸やy軸などはあまり気にせずにどこをいじればどうなるのかだけを説明するので、あとはひたすら自分で触りまくって慣れてください。

折れ線グラフの点の部分をクリックすると、黄色くハイライトされます。黄色くハイライトされている状態でイージーイーズアイコンをクリックします。

すると、グラフの点からハンドルが生えてきました。このハンドルを伸ばしたり、角度を変えることによって、イージングを編集することが出来ます。いろいろ試して、気持ちがいいアニメーションを作ってみましょう。

なお、”気持ちいいアニメーションってなに?見当もつかない”という方はこちらのMaterial design guidelines – Googleを参考にしてみて下さい。車の発進と停車に代表されるように、地球上では万物はゆっくりと加速してゆき、ゆっくりと停まりますね。Material design guidelinesでは、UIアニメーションもそういった現実世界のモノに近づけることによって”自然さ”を実現しようとしています。

まとめ

今回はAfterEffectsの基本的な操作方法を、簡単な実例を交えて説明しました。今後はアニメーションのコピーの方法、ファイル管理の方法、複数のコンポーネントを持つ複雑なアニメーション作成の方法など、なかなか調べても出てこない部分を解説していきたいと思います。

続きを読む