UI Crunch

(司会：GoodPach広報　高野さん)

サイバー佐藤さん

昨今のサービスデザインの昨今の変化の話

テクニカルクリエイターとは、サービス開発に携わる。

アニメーションなどの最高頻出のものをアウトプットするためにいろんな知識を持つ人。

ネイティブアプリではより高度な表現が最重要
img1
日本のUIまだまだ
Point3
フラットデザインに始まり、デザインの敷居が下がってきている

field

before→after

今まではDESIGNER、ENGINIAはそれぞれ使えるツールがバラバラ
img3

テレビ朝日と一緒にAbemaTZ

フラッシュでモックを作った。
ピンチアウトのジェスチャーを作ったり、
紙芝居→よりサービスの世界観を詰めていく
議論を進めていくモックの時は縦型のUIだったのを議論を進め、ユーザがキモ地区
ノーティフィケーションも
アニメーションなどモック作る道具

＋
AWAの開発について
違い→エンジニアの人が
画面遷移、アニメーションの演出などのアプリを独自開発
サーバーとつながなくていい
APIなど書きながら
現実世界との動きのギャップをなくす(マテリアルデザイン)
UIのモックの中にはめちゃくちゃ動くものもある、

動きをずらして、見たり試す。

3つのクオリティ
img5三つ
チェックする時に心がけているのは、デザイナーだけにフィードバックするのではなく、ディレクたーと一緒に行く
bc.サービスのうぶ

1946デザイナーとエンジニアがペアで会議に参加している。

フォローアップ研修

デザイナー向けSwift研修
エンジニア向けデザイン研究(でざいんしこうの基礎力)

動的なアウトプッとする、
デザイン＋コーディングまで課題とする。
現場のデザイナーデザイナーエンジニアは以外とできない

プランニング業務に関して

デザイナーとエンジニアの
技術の垣根を越えて仕事
MFなのにトップ下と呼ばれている人に似てる。

Q====================

・ぬるぬるのUIにすることがどれくらいの効果を生むのか？
・投資対効果の話。

どこまでこだわって、すればいい?
サイバーは結構、自社コンテンツだから、こだわりにこだわった。
デザイナーとエンジニアが話し合って、妥協しないものづくりをするのが大事！

どんなエンジニア欲しい？
より柔軟な人
共通言語を持つ
エンジニアはデザインの理解を、デザイナーはエンジニアの理解を。

MBAとった方がいいんじゃない？
途中から企画に対して文句言い始めてる自分に気づく。
前後の余白をデザイナーとプロデューサーセットで聞くのはそのため。
一気通貫でわかって欲しいと思いつつ、
三位一体の開発をしている。3人で企画することもある。

=====================

DeNAまゆみさん

iemo

KenCom
4ねんめで6ポートフォリオ
スライドシェア

53 目次

きっかけ
当初の予定より急遽工数が肥大した。
リリース時に削ぎ落とされたのがUIの実装
クレーム

54
反省
説明責任
デザイナーが 実装に関する知識をつけないと

C=============

いい人><

葛藤：時間がない！

UI実装の環境セットアップが大変だった。

ギットのツール使った。
エンジニアに

Q===========
時間もらうことに抵抗はなかったか？
どのように頼んだか。

普段どういう風に貢献してるのか？

MBAとった方がいいんじゃない？

デザイン戦略室の方針としても自らがプロデューサーとしてキャリアップしていこう。

ストーリーボードで

ファイル構造を把握しやすい
Xコー度

57imgオートレイアウトの計算が大変！
(画像の比率指定が楽。）
角丸の処理すとーりー2
ストーリーボードで

アニメーションできるとヌルヌルできる。
Xcodeでデザイナーがプロトタイプができる。

なぜにできたのか？
・コード触ってた過去+
エンジニアリングの内容をやらせてくれた。

開発
サーバとAPIを作り続けなきゃいけない。

デザイナーがクライアントタスクを担うことで、エンジニアが開発に集中できる。
デザイン修正依頼にデザイナーが対応できる。

デザインの作業コストが減っている図
20:04img

実装イメージの湧きやすいデザインを心がけることができるようになる。

このスキルの活かし方

リリースに間に合わせるだけでなく
高速プロトタイピング
ゲームの開発現場では
安定的なきょどうのUIを採用することができる。
企画プレゼンで
ユーザーテストをより早くできる。

周囲の企画の人とかにもすぐ理解してもらえるようになる。
領域を

Q========================
何の実装できるようになるべき？
Ruby?
Xcodeの理由は？
実装できるようになるべきスキルはなに？

どんなエンジニア欲しい？
２人やりやすかった人のタイプを上げると
実装をポンと投げてくる。
裏には信頼をくれてるところを
話しやすい人。

アプリを作り上げていくと、アプリの雰囲気を聞いてくれる。
それに合うインタラクションを作ってくれる人。

========================

Gunocy森さん

デザイナーは、コード実装できなくて大丈夫

bc.大変なこと20:11img
時間
品質
プレッシャー
必要性
学習

技術的キャッチアップが負担(エンジニアでもたいへん)

その他に大事なものはありませんか？？

積極的に書くことはいいこと。
プロダクトの[周辺]からコードを書いていくといい。
x プロダクトにコミットするコード
o テストしてみる。試してみる。たくさん失敗して
o

3つのお勧め

勉強すること(STUDY)

• 自分が思うアイディアを積極的に作ってみる。
• 断片的でもいい
• とりあえず形にしてみる。
• 問題の解決
• 変数が100個200個作ってみる。
• 日々感じている課題を解決するものを作りまくってみる。
• プロセッシングjsのエディタ?思いつきのコードのメモ帳として使える。

自分が普段使うものを作ってみること(STUDY)x(TOOL)

& プロトタイプを作ってみる。

Q====================
なんでデザイナーが勉強するべきなの?

Q====================

組版のルール(TOOL)

文字の扱いの仕方の調整ができるツールの作成
これは実際グノシーで使った。

日々使うツールを作ってみよう

イラストレーターを　JSで作ってみる。
→上の方のアイコンをアートボードを書き出してみる。
→端末に書き出す
Q====================
どうやってやるのJSのみ使うの？
Q====================

パスをiOSの中で座標として取り込んでエクスポートしてそのままアプリで
コードが汚くても迷惑かけない。

Q====================
デザイナーはなんでコーディングしないといけないの？手元でやるくらいなのに。

どんなエンジニア欲しい？
その道の専門に関して(言語。サーバ)のスペシャリストであるのは当然
他のところにも目を向けるべき
Androidの

MBAとった方がいいんじゃない？
誰がどこを向く都下じゃなくて、全員が全方向向かざるを得ない。
100人未満の会社でみんなしないといけない。

Q====================

プロトタイプ作れる。

作ってどうなの？

Wontedly 青山さん

全員がコード書いてる会社の気づいたら手に入れてる。

Sync 企画から4wで出しちゃった。

デザインもコードをも描きたいデザイナーウォンテッド
ほんとは、ほとんど全員がコーッドをかける

みんなのコミット数20:29
みんな書いてるんだけど、なんで書いてるんだろう？？

なんでやり始めたのか？
ハードは、作るのにお金がかかる。

20:29img19歳のデザイナーの言葉。

選択肢が多くなる。
状況に合わせて

デザインのよくあるプロセス

20:31
最初の部分はUXとかけっっこう省いてるけど
コードをかけるデザイナーを想定するとこちらはかなり工数削減する。

エンジニアとの口頭のやりとり+α(手書きの絵)
ゼッペリンの使用
プルリク

手が空いてる時にできることをやる

Q============
どんなエンジニア欲しい？
がりがり作ってく人。
話し合うと、3ヶ月前から使用変更
一緒Hに作りたいものを作れる

MBAとった方がいいんじゃない？
経営もデザインもエンジニアリングも全部するのは難しいと思う。
全体的に見るんだけど、どこか尖った人間がチームを組むのが一番いい！
Q============

環境整備

• アイコンセットのWebfontとしてのライブラリ化
• ガイドラインを作って、ボタンとかも実装しておいて、もうゼッペリンにあげたい。

作るを早くすると

どうやって進めていくの？

できるだけ工数を削って、自分で
エンジニアと一緒にやった時にそこで
密着してる。

他のところで価値が発揮できるのであれば、自分で書くこともできる。

グッドパッチ執行役員：ひらいさだあき さん

エンジニアリングのカルチャー作り

UIデザインに求められる実装スキルと考え方。
グッドパッチのエンジニアがデザインとどのように向き合っているのか？

ハッシュタグで資料は公開してある。

意外なプロダクトは

プロトタイピング

ファーストリリースの後は

x 開発始まってからでないと、エンジニアが関われない
o Androidでぺろっぱーがマテリアルデザインの
18 実装の経験がないとマテリアルの

19 画面の構成をするcオンポーネント作る時どんなこんポーネントがいいのか？
どこはガイドラインから外すべきなのか？

サービス全体を見て、どういう風にアプリケーションにするかを考える。
良いプロダクトを作るために必要なものは

Q================
どんなエンジニア欲しい？

自分でアプリを公開まで持ってったことがある
ガイドラインを読んでる。

MBAとった方がいいんじゃない？
尖っているところを合わせていけばいい。
チームで開発することが多い。
ビジネス的な人がどの立場にいてもいい。
エンジニアがデータ見て分析して、ディレクターでもデザイナーでもいいからビジネスの
ビジネスを見てデザインしなくなったら誰がUI作ってくれるのかな？？？

Q================
プログレッシプWebAPPネイティブアプリに近づくように作る。
+ オンラインでもオフラインでも動作する。
+ エンゲージメント(プッシュ通知に対応し、
+ インストールできる
デベロッパーツールとして

Webコンポーネントとの関係

Webアプリもネイティブアプリ的に設計しないといけない。
対応してるのはクロム・ファイアフォックスくらい。

ネイティブとプログレッシブ
設計が変わっていく

1991 0.1
1993 1.0

デザインによってそれらが洗練されている。
Webデザイナーがなかった。
デザインによって洗練されて身近になっていく。
UI
最初の方のバージョンが出てきた

エンジニアにミッションステートメントとしてすえて

## 繋がった先は??
高い技術を持っているだけではだめで、
でざいんと技術の繋ぎするには一定のスキルが必要

プロジェクトへの関わり方を変えることで、技術と
よいそしきをつくって行きたい！

土屋さん
5年前サンフランシスコではたらいてた
コンピューターサイエンスの高校の子が、デザイナーになっている。
デザイナーがコードを書くのは当たり前。

これを持って行って、4年前にUIにフォーカスして、
エンジニアリング
ユーザー体験を底上げされる。

自選してもらいたい。