4月14日（木）、東京・渋谷ヒカリエにて「UI Crunch #8 UIデザインに求められる実装スキルと考え方」が開催された。UI CrunchはUIデザインを追求していくコミュニティーだ。UI開発に関わるすべての人を対象とした勉強会やワークショップを定期的に開催している。今回8回目を数える当イベントは120名の席に約800人の応募が集まり、Facebookグループも2,500人を超え、多くのクリエイターがUIデザイン、開発プロセスに対し関心が深いことが伺えた。本稿では、登壇した5人のプレゼンの様子をレポートする。

 

「テクニカルクリエイター」という役割

最初の登壇者は株式会社サイバーエージェント チーフ クリエイティブディレクターの佐藤洋介氏。テーマは「テクニカルクリエイターが担う、サービス開発のUIモックの現場～サイバーエージェント流～」だ。

サイバーエージェントは昨年12月「テクニカルクリエイター」という職種を新たに設けた。その理由として、ネイティブアプリ市場ではより高度な表現が最重要で、デザイナーが静的なデザインを行うだけではなく、エンジニアがUIアニメーションやUXを担う必要も出てきたからだ。その背景には、市場のアプリの品質が上がっていることやデザイナーでも動的なデザインを表現できるさまざまなモックツールが出てきたことなどがあげられるという。

「ユーザーが毎日使ってくれるような最終的なアウトプットとして、使い心地の良さがアプリとして重要になります。僕個人の意見ですが、日本のUIレベルはまだまだ低いと思っていて、開発のフロー、効率に対する意識を高めないといけないと思っています」

サイバーエージェントでは「Flash」や「Pixate」を使ってUIモックをつくり、静的なものではなく動的なデザインで心地良さを追求している。そのため、エンジニアにデザインの基礎を教えたり、デザイナーに対してプログラミング言語「swift」の学習機会を設ける予定で、社内のクリエイターの育成研修にも力を入れていくという。

佐藤氏は「技術の垣根をこえて、テクニカルなサービスづくりが求められている。テクニカルクリエイターは専門職ということではなくデザイナー、エンジニアの”新しい役割”。専門的なベーススキルがあった上で、領域を広げるべき」と話した。表現の幅が広い一人多彩なクリエイター、最高品質のものをアウトプットするために技術の持てる限りを尽くして自在に扱える人材が今求められている。


 

失敗から見えた実装スキルの必要性

2番目に登壇したのは株式会社ディー・エヌ・エーのデザイナー 成澤真由美氏だ。テーマは「エンジニアリングするデザイナーが領域を超えて見えたこと」。成澤氏は「デザイナーがXcodeを使って開発効率をUPさせた5つのエピソード」と銘打ったスライドを作成・公開したことでも有名だ。成澤氏は自身がエンジニアリングへ領域を広げた理由を「失敗」を経験したからだと話す。

まだ成澤氏が今のワークスタイルになる前に、とある案件を担当した。すでに制作されたアプリのバグ修正である。バグが多く、ほとんど作り直す状態だった。しかし時間がない。削られたのは、実装の時間だった。

「リリース後の反応は厳しいものばかり。デザイナーとしてできることはなかったのか？ もしこのままデザイナーとしての働き方を変えなければこのような失敗は何度でも繰り返すと思いました。そのためには、実装の知識をつけること。自分が実装できるようになることが必要でした」

実装スキル獲得の決意を決めたものの不安はあった。単純にデザインする時間に実装する時間が追加になるわけだ。そうなると、1日どれだけ開発に時間をかけることになるのか。しかしながら、そういった不安も日々を重ねるごとに減っていった。

「実装ができるデザイナーがいることで、安定的な挙動のUIを採用することが可能。開発コストを下げつつ、実現したいUIをつくることができます」

最後に「これからは高速プロトタイピングを実現したい」と成澤氏は話す。デザイナーとエンジニアがUIをつくりながら実装していくことで、レベルの高いUIができるのではないかとビジョンを描く。成澤氏は領域を超えたいと思っているデザイナーの背中を押せたらと締めくくった。


 

本当にデザイナーはコードを書くべきか

3番目の登壇者は株式会社Gunosyのデザイナー 森浩明氏だ。テーマは「コードをコミットできなくたって大丈夫」。今回の「UIデザインに求められる実装スキルと考え方」とまるで逆行するようなテーマだが、いったいどういうことなのか。

「まず、やはり1人でデザインもエンジニアリングもするとなると時間がかかってしまうという点があると思います。そして、実装へのプレッシャーも抱えることになりますよね。もし自分の担当した部分の実装でバグが起きたら…と」

確かに、両方の技術を高めるとなると、時間がいくらあっても足りないだろう。エンジニアリングの学習も必要で、デザインと同様に日々アップデートされる技術をどれだけキャッチアップできるのか。そういった部分も負担になるのではと森氏は話す。

「そもそも、もっと重要なことがあるのではないかと思います。それは、デザインです。この部分がおろそかになっている状態で、実装しますというのは、感心しません」

では、デザイナーはコードを書かないほうがいいのか？ これに対して矛盾しているかもしれないが、積極的に書いたほうがよいと森氏は話す。ただし、プロダクトの周辺（実装の核となる部分から離れたところ）からチャレンジすることが大事だという。

「学習することって長続きしない人も多いのではないでしょうか。道で海外の方に話しかけられたとき、あぁ英語勉強しようって思いますけど、その気持ちの持続は難しい。コードを書くのも同じことが言えると思います。皆さんは、今日イベントに来られて、ポテンシャルがすごく高まると思います。でも、実際にプロジェクトにコミットするとなるとハードルが高い。なので、まずはコミットしないところで、自由にコードを書く。つくってみる、試してみる。そこから始めてもいいのではないかなと思います」

最初の一歩に力を込めすぎるのではなく、やれるところからやってみる。それが経験が蓄積されれば、現場で発揮できるチャンスがきっとくるはずだ。


 

つくりたいものをつくるために開発を効率化していく

4番目の登壇者はウォンテッドリー株式会社のデザイナー 青山直樹氏だ。テーマは「全員がコードを書く会社では どんな感じでデザインしてるの?」。ウォンテッドリーはほとんどの社員がコードを書くのだという。なぜコードを書くのか？ デザイナーのひとりから「作りたいのは絵じゃなくてプロダクトだから、自分で書いたほうが効率的に目的に近づけるのではないか」と聞いたという。

通常開発プロセスは最初ワイヤーフレームをつくり、画面遷移を考える。画面デザインをし、プロトタイピングや指示書作成など細かい工程がある。しかし、青山氏は今までやってきた工程がデザイナーがコードを書くことで不要になる部分があるとした。例えば、プロトタイピングや指示書作成。実際に動くものをつくってしまったほうが伝わりやすく、早い。ウォンテッドリーではアイコンライブラリをWebフォント化していつでも使えるように共有している。デザインしたものを何度でも使える「環境」を整備することでプロセスをシンプルにするだけでなく、スピードも上げることができる。

理想は開発プロセスではなく「ユーザーに体験してもらい、そのフィードバックをアプリ・サービスのアップデートに時間をかけること」だ。

青山氏は「大事なのはエンジニアと一緒にやったときに、無駄なく進められるか。僕としては、コードを書くことが必要だと思えばコードを書けばいいし、それ以外に自分はもっとできることがあって、他のところで価値を発揮できるのではあればそっちに力を入れればいいと思います。ただ、効率化を超えて、技術とともにでしかできない表現があると思います」と最後に話した。



 

偉大なプロダクトをつくるためには

最後は株式会社グッドパッチ 執行役員CTO ひらいさだあき氏が登壇した。テーマは「デザインと技術をつなぐ」だ。 ひらい氏は「『偉大なプロダクトは偉大なチームから生まれる』と考えています。一般的に成功していると言われるプロダクトはコミュニケーションの量が圧倒的に多いのです。メンバーが意見を交わしやすく、アイデアの化学反応が起きやすい環境をつくることが重要です」と話す。 

「偉大なプロダクトは偉大なチームから生まれる」という言葉にもあるように、グッドパッチではこういった環境が整っているという。デザイナーもエンジニアもプロジェクトの初期段階からコミットすることで、度々意見を交わしていくのがグッドパッチのスタイルだ。実装する段階でアサインされることはなく、デザインと開発の両視点で要件定義を行い、プロトタイピングを重ねブラッシュアップする。

また職種という肩書きに固執しすぎず、プロダクトをつくるために、柔軟にプロジェクトにアサインされる場合もあるという。例えば、AndroidデベロッパーがMaterial Designアドバイザーとしてプロジェクトに携わったり、iOSデベロッパーがデザイナーと同等にUXやUIについて議論することもある。実装するだけがエンジニアの仕事でなく、実装する前段階の設計にも自らコミットしていくのだ。 

「技術によって領域が広がり、デザインによって洗練される」

「デザインと技術をつなぐ」というのはグッドパッチのエンジニアミッション・ステートメント。デザインと技術が歩み寄るからこそ偉大なチームが生まれ、そこから偉大なプロダクトが生まれるとプレゼンを締めくくった。 


 

質疑応答

5人のプレゼンが終わり、質疑応答の時間が設けられ、さまざまな質問が投げかけられた。ここではその中のひとつ「デザイナーから見て、どういったエンジニアに会社にJoinしてほしいですか？ 主にネイティブアプリについて教えてください」という質問に対して5人の回答を紹介したい。

「デザインに興味を持っているエンジニアの方と一緒に働きたい。自分でアプリを公開まで持っていったことがある人。ガイドラインを読んで、理解した上で仕事できる人です」（ひらい氏）

「自分で自分のモチベーションを高く持っていける人。一緒につくりたいものをつくれるエンジニアがいいなと思います」（青山氏）

「スペシャリストであるということ。自分の専門領域外に目を向けられる人ですね」（森氏）

「自分を信頼してくれる人。また、雰囲気に合わせたインタラクションをつくってきてくれる、どんどんコミットしてきてくれる人」（成澤氏）

「より柔軟なエンジニアの方です。お互いの共通言語を増やすというのが大事だと思うので。エンジニアの方にもデザインに理解を持っていただき、先回りしたアウトプットしていくですとか、そういった方だといいなと思います」（佐藤氏）
 

日本のデザインの価値を底上げする 

そして最後、UI Crunch運営団体である株式会社グッドパッチ代表取締役 土屋尚史氏が「海外ではだいぶ前からデザインとエンジニアリングは密接な関係にありました。今回のUI Crunchの応募の多さを見て、ついに日本もそのフェーズに来ているんだなと思いました。 今日のパネリストの話は、日本のデザインとエンジニアリングに携わる皆さんにとって非常に価値のある話だったと思います。ぜひ、自分たちの会社に持って帰ってもらいたい。そしてより良いプロダクトをつくるために実践してもらいたいです」とイベントを締めくくった。 

ユーザーがいいプロダクトに触れる機会が増えれば、その分いいプロダクトが市場に輩出される。そのためにも、デザイナーとエンジニアがそれぞれの領域に歩み寄り、チームにしていくことが重要なのではないだろうか。盛況のままに幕をとじたUI Crunch #8、今回のパネリストたちの実践を皆さんの現場にも取り入れていただきたい。