コーディングに取り組むUIデザイナーがその重要性をアピール、開発者もデザインへの参画を！

UIデザイナー向けイベント「UI Crunch #8」レポート

　デザイナーを中心に、UIデザインに関わる人すべてを対象とするコミュニティ「UI Crunch」は4月14日、東京・渋谷ヒカリエにあるディー・エヌ・エー（DeNA）のさくらカフェにて、8回目となるトークイベントを開催。「UIデザインに求められる実装スキルと考え方とは？」をテーマに、アプリ・サービス開発の最前線でデザインに関わる5人によるセッションが行われた。本稿ではその様子をレポートする。

デザインとエンジニアリングのベーススキルを身に付け、垣根を越えることが重要

最初のスピーカーは、株式会社サイバーエージェントでチーフクリエイティブディレクターを務める佐藤洋介氏。

株式会社サイバーエージェント チーフクリエイティブディレクター 佐藤洋介氏

佐藤氏は「市場でネイティブアプリの高品質化が進んでおり、アプリ開発では完成度の高いデザインを考慮したエンジニアリングが必須になってきている。競合優位性を作り出すには、毎日使用できる心地良いユーザー体験が重要であり、開発のフローや品質に対する意識を高め、UIのレベルを向上させなければならない」と指摘。「Prott」をはじめとする、デザインとエンジニアリングをつなぐ優れたツールを開発現場で活用する必要性を説いた。

サイバーエージェントでは、こういった背景からテクニカルクリエイターという新職種を打ち出しているという。テクニカルクリエイターは、最高品質のアウトプットを行うために技術の持てる限りを尽くし、デザイン、プログラミング言語、アニメーションを自在に扱える一人多才（いっとたさい）な人材。佐藤氏は、テクニカルクリエイターを導入した開発のプロセスを、アプリのモックアップ制作を例に紹介した。

例に挙がったのは、2016年4月にサービスインした「AbemaTV」の開発。紙芝居によるラフモックの作成後、Flashアニメーションによるモックで「スマホで心地良い視聴体験」というコンセプトに合ったUIを確認。プロトタイプ作成ツール「Pixate」による詳細モックでインタラクションのイメージを明確にしてプロダクトに取り込むというプロセスを経た。

開発現場ではデザインとエンジニアリングの垣根を越える時代になってきている（引用元：佐藤氏のスライド＠Speaker Deck）

サイバーエージェントでは、こうしたモックアップ制作以外にも、デザイン、インタラクション、プランニングのクオリティを3Qと定義し、プロダクトの品質を高めるための取り組みを行っている。デザインクオリティについてはUI・グラフィックなどデザイナーの視点、インタラクションクオリティについては遷移・トランジション、プランニングクオリティについてはサービスループを重視。それぞれを効果的にチェックする体制を作っている。

最後に佐藤氏は、「開発現場ではデザイナーとエンジニアの役割が近づいている。しかし、デザインとエンジニアリングの中間の技術を習得しただけではただの器用貧乏で終わってしまう。両方の分野でベーススキルを得て、自分のキャリアで積み上げてきたものを理解しながら、技術の垣根を越えてテクニカルなアウトプットを行うテクニカルクリエイターのような役割が重要になる」と述べて、セッションを締めくくった。

デザイナーという領域を越えて実装を行ったことで何が変わったか

続いて、株式会社ディー・エヌ・エーでアプリのデザインを担当してきた成澤真由美氏が、実装も行うようになった自身の経験を語った。

株式会社ディー・エヌ・エー デザイナー 成澤真由美氏

成澤氏がデザイナーの領域を越え、実装を行うようになったきっかけは、あるプロジェクトでの失敗であった。バグ満載のアプリを作り直すにあたって工数が肥大し、リリースに間に合わせるためにUIの実装を削ぎ落としてしまったのだ。その結果、リリース後にUIの不具合が見られ、ユーザー体験が損われると批判されてしまったという。

失敗の原因は、実装コストの低いUIに変更できず、エンジニアの負担を軽減できなかったこと。失敗を繰り返さないためにはデザイナーがその在り方を変えるべきと実感し、実装に関する知識を身に付け、自分でもUIを実装できるようにしようと考えた。

成澤氏はエンジニアの支援を受けながら、Xcodeの導入、プロビジョニングファイルの作成、Gitの設定、CocoaPodsへのライブラリの導入など、実装のための環境を構築。実装は、XcodeのStoryboardで配色とフォントサイズ、属性、画面比率などを設定するところから始め、Storyboardで対応し切れない部分をコードで書くようになった。

領域を越えたことで何が変わったのか。成澤氏はまず開発スタイルが変わったと指摘。サーバー、クライアント、APIといったエンジニアのタスクのうち、クライアントの一部をデザイナーが担当する形になったため、エンジニアは開発により集中できるようになった。開発終盤にデザインの修正依頼があっても、エンジニアに頼まずデザイナー自身が対応できる。

デザイナーが実装を行うことで、開発スタイルが大きく変化（引用元：成澤氏のスライド＠Speaker Deck）

当初、成澤氏の作業コストは大きく膨らんだが、実装の知識が身に付くにつれ、UIの実現方法に悩む時間が減り、デザインと実装の両立が可能になった。画面デザインなどのアウトプットも、エンジニアがすぐに実装のイメージを持てる直感的なものに変化したという。

また、実装ができるデザイナーがいることで、高速プロトタイピングの実現、企画のプレゼンやユーザーテストの早期実施、本開発に向けての明確な課題の洗い出しといった効果も現れた。

デザイナーが実装を行うには、始める際に学習コストがかかり、周囲の理解も必要だ。成澤氏は「躊躇してしまうかもしれないが、自分の例もあるのだから、この機会にぜひ領域を越えることにチャレンジしてほしい」と会場のデザイナーに呼びかけた。