垣根を越えたモノづくり — テクニカルクリエイターとは?

Source

本記事に書かれている内容は、4月に行われたUI Crunch#8にて、「UIデザインに求められる実装スキルと考え方」というテーマで講演をするにあたり、サイバーエージェントとしての方針をまとめたものになります。

いま向き合うべき3つの現状

まず、これからのサービスにおいてクリエイティブレベルの高いものを創るために、今向き合うべき3つの現状があると考えています。

ネイティブアプリには高度な表現が必須であること
・ デザイナーが静的なデザインだけを行うものではなくなってきた
・ エンジニアがUIアニメーションやUXを担う必要が出てきた
心地よいユーザー体験が求められること
・ 高いクオリティと柔軟なアウトプットが重要
・ 日本のクオリティレベルはまだまだ低く、飛び抜けるチャンスがある
ツールが整ってきたこと
・ Flashのようなツールがネイティブアプリ向けに整ってきた
・ 良質なモックアップツールにより、UIアニメーションやUIデザイン、エンジニアリングヘの敷居が低くなってきた
・ フラットデザインが主流になったことにより、UIデザインにチャレンジする敷居が低くなってきた

このような中で、技術とデザイン、双方の理解ができる人材が必要だと考え、「テクニカルクリエイター」という職種をつくりました。この職種は「一人多才なクリエイター」であり、表現の幅が広く、デザイン・プログラム言語・アニメーションを自在にあつかえるクリエイターとして、次のように定義しています。

  • 技術の垣根を越えて「テクニカル」に「クリエイティブ」できる人材
  • 一人で領域広くカバーしてハイクオリティなアウトプットができる人材
  • 業界のトレンドに敏感で常に新技術を追える人材

ツールの垣根を越えたモックアップ制作

ツールにおいても、デザイナーはアニメーションやプログラミング、エンジニアはデザイン思考など、それぞれの垣根を越えてアウトプットすることが必然となってきています。


○=必須 ×=不要

そういった中でProttやPixateなどのモックアップツールも進化してきているわけですが、サイバーエージェントのサービスにおいて、垣根を越えたモックアップの例として、4月に開局されたAbemaTVでは以下のようにツールを使い分けて制作過程を踏んでいきました。

1. Rough Mock Up(使用ツール: Adobe Flash)
紙芝居型のラフモック作成。

2. Concept Mock Up(使用ツール: Adobe Flash)
サービスの世界観を詰めていく。

3. Detail Mock Up(使用ツール: Pixate)
Pixateで動画も入れ込みながら、より詳細なインタラクションを作り込む。

4. Product Version(使用ツール: Xcode)
モックでインタラクションのイメージを明確にし、正式プロダクトに組み込む。

AWAの例

また、AWAにおいては、社長である藤田から以下のコンセプトをもとに、とにかくアプリの品質にこだわったインタラクション製作をしています。

  • 「音楽との出会い」にフォーカス
  • とにかくお洒落で他人に薦めたくなるUI
  • 一見海外から来たアプリのような世界観


AWAのモックの例

AWAに関しては以下のインタビュー記事で特集されているので是非読んで欲しい。
「自然なUX」が没入感を生む — AWA Product Manager & Interactive Animator 冨樫晃己氏インタビュー

クリエイティブレベルを高める社内の取り組み

このようなモックアップ制作のプロセスの他に、サイバーエージェントではクリエイティブにおける3つのクオリティを設定し、それらを高めるために様々な取り組みを行っています。

Design: UI・グラフィック
ガイドライン、造形美が保てているか、使いやすくわかりやすいか、独自性/新規性があるか。
Interaction: 遷移・トランジション
階層がわかりやすく、過剰な演出を削ぎ落とせているか、動きがスムーズ/ストレスフルか。
Planning: サービスループ
プロダクトビジョンが描けているか、ラベリングは分かりやすいか、ユーザーがハマる工夫があるか。


3つのクオリティを高めるための社内の取り組み

取り組みとしては、例えばデザインのフィードバックにおいては前後の文脈をつかむためにデザイナーとプロデューサーをセットで集めたり、月1回のモックレビューを行い、社長、プロデューサー、プロダクトマネージャー等が一緒にサービス全てを俯瞰する機会などを設けています。

求められる「応用力」

サービス作りにおいてデザイナーとエンジニアは近づいてきていますが、その中間だけを取得しようとしても器用貧乏になってしまいます。技術の垣根を越えてテクニカルにアウトプットする機会をもつことは今後サービス作りの常識になってきますが、それぞれの十分なベーススキルを持っていなければなりません。

「テクニカルクリエイター」は専門職ではなく、サッカーで足の速いディフェンダーが「リベロ」となるように、デザイナー、エンジニアの「新しい役割」を目指しています。そこで大切なことは、自分の強みを理解し、技術を巧みに応用することです。デザイン・プログラム言語・アニメーションなど、全てに長けている必要はなく、最適なアウトプットのための応用力が重要となってくるのです。


<参考リンク>
「テクニカルクリエイター」の詳細はこちら
Technical Creator Hub