UI Crunch #8 UIデザインに求められる実装スキルと考え方 - connpass

120人定員に対して800人の応募という、恐ろしい倍率のイベント。私は抽選で落ちてしまいました。CyberAgent、DeNA、Gunosy、Wantedly、Goodpatch各社のクリエイターさんが登壇という豪華さ。

今回は自宅でYoutube配信を視聴しました。通信もほとんど途切れることなく快適に視聴できました。なんと発表の様子が録画・公開されています。
4/14 UI crunch #8 UIデザインに求められる実装スキルと考え方 - YouTube

内容

タイムリーなテーマで、いろいろ勉強になりました。
印象に残ったポイントを箇条書きにします。

デザイナーが開発領域に踏み込めると、チームの開発スピードは高速になる

• エンジニアが使いやすい基盤を整備できる

• エンジニアがパッと見て実装イメージをつかめるようなアウトプットができる

• 関わる領域は増えるが、結果的にデザイナーとしての作業コストが減少する（理解が深まる、出戻りが減るなど）

• 的確なUI変更の判断（ユーザーの使いやすさと開発コストとのバランスなど）ができれば、エンジニアの負担減につながる

• プロジェクトにおいてリリースまでに担当する選択肢が増え、自分自身やエンジニアの忙しさにあわせて一番良い進め方ができる

• デザインプロセスの一部工数（画面デザイン、指示書の作成など）を削減できるかも

• 共通言語でやり取りができるようになると、コミュニケーションロスが減る

• コミュニケーションの流量が増えると最終的なプロダクトのクオリティも向上する

デザイナー・エンジニアに求められる領域は変化し、環境も整ってきた

• ネイティブアプリ市場ではより高度な表現が最重要になり、デザイナーが静的なデザインだけを行うものではなくなってきた

• エンジニアがUIアニメーションやUXを担う必要も出てきた

• プロトタイピングツールやコミュニケーションツールなど、デザインとエンジニアの中間を担うツールが整ってきている

• それぞれの垣根を超えたツールをも扱う時代（デザイナーがXcodeやSwiftを触り、エンジニアもPhotoshopやFlashを扱うなど）

• より良いプロダクトづくりのためには、プロジェクトの初期の段階でデザイン・開発に知見のあるメンバーがコミットすることが不可欠

• エンジニアがMaterialDesignアドバイザーやUXデザイナーとしてプロジェクトに関わるケースも

• デザインを実現するためには開発技術が欠かせない

クオリティの高いプロダクトをつくりたい！という情熱がなにより大事

• 妥協することなく、ユーザーがふれるプロダクトの最高品質を追求する

• 課題があれば、自分（たち）でどう解決できるのか考える（領域を超えてみる、など）

• デザイナーがプロジェクトの中でコードを書くのは、目的達成のため

• 必ずしもコードをプロジェクトの中で書く必要はないが、ある程度のコードやプログラミングへの理解は求められる

• 尖ったメンバー同士で互いを補い、より高め合えるようなチームがよい（状況によってはテクニカルクリエイターのような新しいポジションが必要になる）

• チームの一員としてある分野のスペシャリストであることが求められる（iOS、Android、アニメーション、ビジネス、など…）

• デザイン・開発どちらの領域にもまたがるには、それぞれの十分なベーススキルが不可欠

• そんなチーム全員が同じ目標に向かい一丸となってこそ、本当に良いプロダクトをつくりあげられる

各セッションで印象的だったこと

どの発表もアツい内容でした！

Tecnical Creator for the App Design. At CyberAgent

CybarAgent 佐藤洋介さんの発表。新設された職種「テクニカルクリエイター」のことや、有名サービスのモックアップ事情など貴重なお話でした。

• AbemaTV、AWAなどのインタラクティブなモックアップの様子が見れた

• デザイナーがflashやPixateでモックアップをつくる

• デザイナー向けのSwift研修、エンジニア向けのデザイン研修をやってる

• 代表の藤田さんも企画やレビューなどのプロセスに頻繁に関わっててすごい

• テクニカルクリエイターはデザイナーとエンジニアの新しい役割で、双方のベーススキルを前提とした上級職みたいな感じ

詳細なレポートはこちらがオススメ。
『AbemaTV』のUIづくりも担ったCAのテクニカルクリエイターが重視する「3つのQ」向上策とは～UI Crunch #8レポ - エンジニアtype | 転職type

エンジニアリングするデザイナーが領域を越えて見えたこと

DeNA成澤真由美さんの発表。Xcodeをつかった実装まで担うに至った経緯や体験談、メリットなどをお話いただきました。背中を後押ししてくださる内容でした。

• 「デザイナーが変わらなければ、何も変わらない」という強い想い！

• 難易度１〜５強の、Xcodeを使ったUI実装の実例紹介

• 学習コストはどうしてもかかるので、周囲の理解が欠かせない

CODEをCOMMITできなくたって大丈夫

Gunosy森浩明さんの発表。成澤さんの内容とのタイトルギャップがおもしろい。いきなりデザイナーがコードをプロジェクトで書こうとしても長続きしないとのことで、まずどんなところから手を出してみるのが良いのか指南頂きました。

• プロジェクト内でコードを書こうとすると、いろいろな不安・プレッシャーに襲われるので、そうではないところから始めると良い

• イラストレーターのツールをJavaScriptで作ってみる（？！）

• 自分が使うツールなら、気兼ねなく、自分の納得いくもの（コード）をとことん追求できる

• ユーザーがさわることのない、実際に動くプロトタイプ（モックアップ？）でコードを書いてみるなど

全員がコードを書く会社ではどんな感じでデザインしているの？

Wantedly青山直樹さんの発表。デザイナーがコードを書けることによる、チームでの開発プロセスの効率化（メリット）についてのお話でした。

• ワイヤーフレーム、画面遷移設計、画面デザイン、プロトタイピング、指示書作成…これらのプロセスは、全員がコードを書ける環境では省略できる場合がある

• Githubのプルリクがコミュニケーションのベース

• 毎回使える環境を整えている（デザインをガイドラインとしてパターンに出し、実装にコンポーネントとして組み込むなど）

デザインと技術をつなぐ

Goodpatchひらいさだあきさんの発表。エンジニアとして「デザインと技術をつなぐ」ために大切にしていること、取り組んだことについてお話いただきました。

• Goodpatchのデザインプロセス

• エンジニアが要件定義や設計フェーズから関われないと、よいデザインがつくれない！

• AndroidデベロッパーがMaterial Designアドバイザーとして、iOSデベロッパーが UXデザイナーとしてプロジェクトに参加するなどプロジェクトへの関わり方を見直した

• Progressive Web Apps…普及するにつれ、これからはサービスデザインから考える必要がでてくる（ネイティブアプリとWeb、どちらにするかなど）

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

その他

質疑応答

特に、最後のデザイナーのエンジニアや経営者との距離感についての質問とその答えが興味深かったです。

• 佐藤さん…企画が始まるとプロデューサー、デザイナー、エンジニアの３人体制になる。三位一体、一気通貫で企画のことも理解していてほしい

• 成澤さん…実装段階と、企画の段階が分かれていて、企画をデザイナーやエンジニアが覆すことも。自らがプロデューサーになる気概でスキルアップしていこう意識がある

• 森さん…前方位を見ざるをえない

• 青山さん…エンジニア、デザイナーが企画を考える体制。ただ、経営もデザインもエンジニアリングも、一人の人間が全てに気を払うことは難しいと思っている

• ひらいさん…チームで仕事をすることが多い。データをデザイナーが見てても嬉しい。ビジネスを考えるのがデザイナ、エンジニア、ディレクターでも構わない。ビジネスのことを考えなくなったら、誰がインターフェイスをデザインするのだろう

終わりに

個人的な話ですが、JSにふれる機会を業務内でいただけそうでして、今回の内容には背中を押されたような気分になりました。

あと、何度でも言うんですが、こうやって遠方(かつ落選)の自分でも見れるように動画配信していただいたことが本当にありがたかったです！ありがとうございました。