2018-12-06 デザインがiOSアプリになるまで 〜デザインシステムの手前の話〜 #DevLOVE
2018/12/06 に開催された デザインがiOSアプリになるまで 〜デザインシステムの手前の話〜 のイベントレポートです。
●コミュニティのコンセプト
DevLOVEとは、開発(Develop)を愛する人たちの集まりです。
この集まりでは、開発の楽しさを再発見し、広げるために、下記３つのコンセプトのもと、明日の開発の現場に役に立つことを目指した勉強会やイベントを開催しています。
1. 開発の楽しさを発見しよう。広げよう。
2. 開発の現場を前進させよう。
3. 自分から越境しよう。
■デザインがiOSアプリになるまで 〜iOSプログラマの頭の中〜
CHEEBOWさん
●Twitterのタイムライン
・構成
tweetが複数並んでいる
tweet
ユーザアイコン
ユーザ名
いつ投稿したか
メニュー
コメントなどのアクション
・どんなUI部品で構成させるか？
UILabel
UIButton
UITextField
UISwitch
UITextView
UIImageView
UIPickerView
・UI部品の選定
ユーザアイコン: タップしたそうなのでUIButtonで
：
標準部品が使えない場合、OSSを探して、調べて作る
OSSもあるがカスタマイズの限界。。。
OSSバージョンアップに追従できるか？
・レイアウトを考える
UITableView / Cell
Plain
Grouped
DataSource
リユース: 固定の行数を使い回す
途中に広告を挟むなど、結構しんどい。。。
●Twitterのタイムライン2
・構成
tweetが子(返信)を持っている
子をどう表現するか
子も並列
tweetごとにセクション
・UI部品
UICollectionView
UIStackView
UIScrollView
●Twitterのユーザページ
・構成
ユーザ情報だけ
> ScrollView x StackView
ユーザ情報の下にtweetが出てくる
-> TableView
●複雑なレイアウト
・構成
TableView x CollecttionView x StackView...
・絶対座標時代の終焉
複雑なレイアウトが増えた、AutoLayoutの時代
AutoLayout Guide
制約をつけて、レイアウトを計算
・制約
サイズと距離を指定
高さと幅を指定すれば固定サイズ
横幅だけ指定すれば、高さが伸びる など
・フォローボタンをけしたい
制約だとむずかしい
StackViewをつかって自動計算させる
StackViewの入れ子
●実は標準部品ではないもの
・チェックマーク
・タブメニュー
2本指で操作すると動かなかったり
・ハンバーガーメニュー
●実は実装が悩むもの
・文字入力のときのキーボード
スクロールして使ってほしいの？
想定していないの？
・スクロール範囲がわからない
どこを固定表示するの？
・横3分割されたもの
要素幅が伸びて、マージンが固定？
要素幅が固定で、マージンが伸びる？
●考えておきたい
・モジュール化
Sketch便利
・スタイル
マージンはルール化してしまったほうが良い
途中で変わると、こだわりなのか、まるめたいのかわからない
●Human Interface Guidelines
・共通言語の理解に
・最初のステップとして
ユーザーインタフェースのデザインのヒント が良いかも
UI部品は、44 x 44 point 以上など
■パネルセッション：デザインシステムの手前の話
よしたけさん／ちゃちゃきさん
●デザインシステムって
・UIデザインは答え合わせ
なぜを繰り返していくと、なぜこのサービスをやるのかまで遡る
この辺りから認識合わせしていないとうまく進まない
・デザインシステムをデザイナ、エンジニアの認識合わせに使うのはあり
デザイナが「デザインシステム良いよ！」ってはじめても
大体うまくいかなくなる
●アジャイルの「ライトウィング」と「レフトウィング」
・コミュニケーション vs. 技術
どっちの道もある。チームの状況によって進みやすさは違う。
CIがしくみで回っていても、ふりかえりがないから学びがない
学びがあっても、しくみがなければ片手落ち
・デザインシステムも同じ
●デザイナとエンジニアのコミュニケーション
・できるエンジニアさんと一緒に進めることが多かったから、補足してもらえていた
もっと会話すれば良い、とは思う。
・エンジニアが仮説検証すると、うまく言語化できなかったり
デザイナさんが苦労することもあった
一緒に動いたりもあるが、ニーズなしで終わっちゃうこともあるから巻き込みづらい
■ダイアログ
●今日のルール
・自分なりに考えたこと
・尊重して、否定しない
●学びを伝えよう
・4人程度のグループ
・1人2分で伝えてみよう
●1チームで1つ、登壇者に質問を考えよう
・コミュニケーションのきっかけ、はじめのタイミングはどうしている？
・わからない時にめんどくさがらずに
・はじめから
・必要と感じたらいつでも
・デザインガイドの運用ってどうしている？
・初期でSketchで作って共有しちゃう
・エンジニア内でもずれちゃうので、共有が大切だね。GitHub便利
・プルリのレビューちゃんとしよう。
・価値検証ってどうやってるの？
・仮説キャンバスで、価値以外との関係性を考える
・ユーザーに触ってもらう
・エンジニアとデザイナにはなんで隔たりがあるんだろう？
・相手を知らないから。やりづらいときに聞けば良い
・デザイナ: 全体 > 部分
エンジニア: 部分 > 全体
お互い踏み出しが必要
・チーム作りの具体的な方法
・作業をしている画面を見せ合う
・チームを選んで入っている
・大体組織の問題、一人で何ができる？
・会話しよう
・仲間はいる
・越境しよう
・デザイナ、エンジニアでまたいで作業を渡す時、気にすることは？
・Sketchだと座標がわかりにくかったり
・独自のデザイン、許す許さないの線引は？
・UIガイドラインが基準、ラインはストア公開できているか？
・デザイナはガイドラインを知るのは前提、その上で破る
・エンジニアが仮説検証って以外、どんな経緯でそうなった？
・リーンスタートアップから始まっているかも
・インタビュースクリプトの崩し具合を考えたり
この記事は DevLOVE Advent Calendar 2018 7日目の記事として書いてみました。
この記事が参加している募集
いつも応援していただいている皆さん支えられています。