こんにちは、UX Designerの大塚です。
モックテックアカデミーで、クリエーターが新しいスキルを習得するための取り組みを行っています。このブログでは、そこで行ったインタラクションデザインについての試みの一部を紹介したいと思います。
今回この試みに参加した若手デザイナー達。左から、デザイナーの中 隆理、松川 逸、内田 達也
1. マクロからマイクロまでのインタラクションデザイン
インタラクションデザインと一口にいっても、単に動くUIを派手につくればいいのか？といえば、当然そうではなく、マクロな視点からユーザー体験を調査・設計し、構造を考えた上で、マイクロな体験を製品の振る舞いとして、トリガーやフィードバックを設計し、モーションが意味を伝え、心地よさにつながるような動きになっているか検証する必要があります。
ただ、そういったマクロ～マイクロまでのインタラクションをデザイナー1人で考えてつくるということはあまりありません。
プロジェクトメンバーで色々な制限や可能性を検討して行くものです。その時、デザイナーがなにを求められるのかというと、やはりどういったパターンが考えられるのか? 新鮮なインタラクションのアイデアはなにか？ 狭い画面で優先順位がうまくつくれない場合、どのように考えればいいのか？ 心地よくするためには、なにを変えればよいのか？プロセス云々といった話も大事ですが、クリエーターとして、より具体的なところが期待されることが多い筈です。
また、時間的、技術的な問題を理由にデザイナーは自ら動きをつけるところまでは行わず、既にある動きを参考にエンジニアにこう動かして欲しいと伝えることも多いのではないかと思います。それがうまくいく場合もありますが、時にはそういった事が歯がゆいものになる場合もあります。
そういった課題を一歩前に進めるため、今回は若手のデザイナー3名に新たにAfter Effectsやpixateといった動きを意識するツールを使って、ライフログカレンダーというテーマをベースにインタラクションを組こんだUIのデザインにチャレンジしてもらいました。
2. 動きのあるUIを作ってみる！
アプリのテーマはライフログカレンダーということで、私の方で簡単なワイヤーフレームを作成し、それをベースにデザインを自由につくってもらいました。課題のオリエン後、サービスサファリをして、ペルソナも緩ーく考えたぐらいでデザインにはいりました。今回の趣旨は動きのあるUI制作の学習なので、なるべく細かい制約に縛られるより、普段より面白みのあることを目指してもらいました。
最初はAfter Effectsなどのツールも使えなかったので、ハンズオンの勉強会などを行い、そこからはお互いにレビュー会などでお互いに学習していきました。作る過程は普段のデザイン業務と違ったためかなかなか大変だったようですが、繰り返しやって行くうちに段々とツールの深い部分も使えるようになってきました。
3. クリティーク（レビュー会）
クリティーク当日の様子。『精神とテクの部屋』の一角にあるリラクゼーションルームにて。
クリティークの様子も踏まえて、それぞれの作品を紹介します。
Lica ライフログカレンダー 内田篇
ライフログカレンダーというテーマに対して、とにかく、クールで心地よいから使いたくなるようなアプリを目指したというこの作品は、カレンダーの数字の動きが秀逸で非常に美しい仕上がりになっています。短期間での制作と思えないような動きで、デザインに説得力があるなと思わせる仕上がりになっています。
内田：
「手帳アプリというお題を聞いた時、モレスキンのように持ちたくなるアプリを作ってみたいと思いました。画面を作る段階では、トーンに重きを置きすぎて機能性を損なわないことに配慮しました。下にスクロールすると過去に、上にスクロールすると未来の情報を見ることができます。またスクロールした時のカレンダーの数字の動きなど、アニメーションにも気を使いました。」
クリーティークでのフィードバック：
「カレンダーを出すところは完璧でいいね」
「時間を入れるところは、予定を入れるひとは結構細かい予定までいれるから、この横幅での入力は難しいかも」
「細かいところで突っ込む以外は全体が非常によく出ている」
製作者の振り返りコメント：
「今回、動きの部分はAfterEffectsで作りましたが、インタラクションの奥深さをさらに考えさせられました。イージングの自然さ、統一感などまだまだやれることがありそうです。」
Lica ライフログカレンダー 中篇
↓Pixateを使って制作しています。実際に触ってみてい方はこちらから
https://app.pixate.com/p1f67eaa1d0d7
Pixateはアニメーションツールではなく、インタラクションがつくれるプロトタイピングツールです。一度つくった人なら判ると思いますが、非常に面白いツールではあるのですが、インタラクションが複合されたり、繋がって行くとだんだんと、融通が効かなくなってくるのがネックです。が、ここまで出来るんだと改めて気づかされた作品でした。UIもパネルを引っぱりだす仕組みなっていて、インタラクションを誘発しやすいデザインに成っています。こういうイメージは、最初からインタラクションをつけようと思わないとあまり出てこないパターンだとは思いますが、実際にインタラクションをつけていくなかで、さらに学びが増えた作品でした。
中：
「実際に触ってもらえるように今回はPixateで制作しました。
予定のチェックをメインで使い、他のSNSアプリでの発言を日記としてためているユーザーを想定して制作しました。SNSの部分をタブなどに入れると振り返る頻度が落ちそうなので、更新感が伝わるようにちょい出ししているUIにしてみました。」
クリーティークでのフィードバック：
「スクロールしたあとで、3枚になってからぐっと大きくなるところの動きとかはいいね」
「Reminderとか機能が分離しちゃってるのは一つにまとめられたんじゃないかな。スクロールで3つの機能に分かれているのは難しいんじゃないかな。」
「設定が同じページにあるのは、避けたい。前のページとか保存できるから、ユーザーの継続性とかもかんがると、もうちょっとやる事を絞って必要な情報を必要なときに出すようにした方がいいかも。」
製作者の振り返りコメント：
「パーツ量が多かったり、ところどころにインタラクションを入れてみたので、なかなか大変でした。なんとか形になって良かったです。」
Lica ライフログカレンダー 松川篇
未来が上、過去ログが下という直感的なデザインになっています。当初デザイン段階で悩んでいたこともあり、ラフのアイデアを多く出す過程を経て出したアイデアです。結果的にUIのアイデアとしては今回の作品のなかでは、もっとも斬新なアイデアになっています。操作が楽しく、新しい体験を提供してくれそうなそんな可能性を秘めた作品です。
松川：
「今回は実験的な意味も込めて、直感的に操作ができ、グラフィック的にも新しい、つい触ってみたくなるようなカレンダーアプリのUIを提案しました。
メインの画面から、上にその日の予定、下にログの画面を置き、スクロールすると画面自体が変化するようになっています。物理的な法則を意識して、動くUIでなく、動かすUI、それ自体が機能であるような設計をしました。」
クリーティークでのフィードバック：
「デザインとしては非常に面白い。使いたい。2回目起動するかかわからないけど、人には教えたくなるようなアプリかも」
「イージングをもっとこだわった方がいい。アイコンの出方は気持ちいい。OKをおしたところは気持ちいいけど、他のところはもうちょっと頑張った方がいい。」
「こういうスワイプとかプルでやらせるアプリは特に、何もしてないときに伝えるインタラクションが欲しい一回バウンスしてみるとかね。」
インタラクションデザインコンセプトいかがでしたでしょうか？
After EffectsやPixateのようなアニメーションをつけることができるツールをデザイナーが使えると表現の幅も広がるのはもちろん、デザインに対しての捉え方やイメージの沸き方も変わってきます。
興味を持った方は是非トライしてみてください。
今回作品を制作したモックテックアカデミーのデザイナーの皆さんお疲れさまでした！
サイバーエージェントでは
