Embed Size (px)
Citation preview
for Android
わたしたちの開発秘話デザイナー＆エンジニア
たにぐち＆のがちゃん
2015/07/28
たにぐち のがちゃん
DesignerEngineer
@aekiikea@ghostnotes
Prott画像
Prott for Android 2015年６月リリース
開発体制１Prott for Androidを開発するときにTryしたこと
４ フィードバックより良いフィードバックを受けるために
３ デザインAndroidをSketchでデザインする上で学んだTipsなど
Material Design２AndroidのUIを深く知る
開発体制１Prott for Androidを開発するときにTryしたこと
４ フィードバックより良いフィードバックをうけるために
３ デザインAndroidをSketchでデザインする上で学んだTipsなど
Material Design２AndroidのUIを深く知る
１ 開発体制Prott for Androidを開発するときにTryしたこと
対話 使い込む 情報共有 スプリント
Try!
対話 使い込む 情報共有 スプリント
Try!
お互い遠い席
デザイナーがデザインを作成し終えてから
エンジニアに画像ファイルが渡される
対話
お互い遠い席
デザイナーがデザインを作成し終えてから
エンジニアに画像ファイルが渡される
対話
席を隣に！
細かくコミュニケーションがとれるように
・デザイン中にいつでも相談できる
・実装中のものでもできるだけ早く見せる
対話 Good!!
早期に認識のずれを修正
対話 Good!!
席が隣
以前の職場では
そもそも所属する部署が分かれていたりして
密に連携することは不可能だった
対話 使い込む 情報共有 スプリント
Try!
結合テストおよびOSバージョン別のテストを
デザイナー・エンジニア両方の視点で行い、
意識的に自分たちのサービスを隅々まで使った
使い込む
・デザインや実装では使わない端末での見え方に
ついて配慮できるように
・なんとなく使っただけでは気付かないような
バグや、デザインの抜け漏れに気づいた
使い込む Good!!
対話 使い込む 情報共有 スプリント
Try!
気になった記事やデザインをシェアして
一緒に読んだり、意見を交わす
情報共有
・職種に偏らないインプット
・Prottに反映するとどうなるかなどの議論ができ
るように
情報共有 Good!!
対話 使い込む 情報共有 スプリント
Try!
１スプリントでテーマを決め、
短いスパンで開発、改善を繰り返す
スプリント
２週間ごとに振り返ることで、デザインや
実装工数の見積もりの精度が高まっていった
スプリント Good!!
対話 使い込む 情報共有 スプリント
Try!
開発体制１Prott for Androidを開発するときにTryしたこと
４ フィードバックより良いフィードバックを受けるために
３ デザインAndroidをSketchでデザインする上で学んだTipsなど
Material Design２AndroidのUIを深く知る
Material Design２AndroidのUIを深く知る
Material Designの
移り変わり
Material Designが発表されたのは
2014年６月
開発当初、Material Designが
発表されてから日が浅く
情報がとても少なかった
Problem!!
Material Designコンポーネントを
サポートしているライブラリもない…
Problem!!
Material Design Guidelinesを
とにかく読み込む
Try!
Material Design の理解が深ければ
情報は少なくても前に進める
Material Design の理解
=Googleの思想の理解
Material Design Guidelinesは、
エンジニアとデザイナーの架け橋となる
共通言語になる！
チェックしている情報源
Material Design Guidelines (http://www.google.co.jp/design/spec/material-design/introduction.html)
Material Design Awards (http://www.google.co.jp/design/articles/material-design-awards/)
Material Designの HotとCold
※DevFest Japan 2015 Summer Google I/O 2015 報告会より
Hot
Cold
Hot
Cold
Material Designを完全にコピーしている Googleの純正アプリの様に見える
Hot
Cold
Material Designを完全にコピーしている Googleの純正アプリの様に見える
Googleの思想を完全に無視している
Hot
Cold
Material Designを完全にコピーしている Googleの純正アプリの様に見える
Googleの思想を完全に無視している
Hot
Cold
Material Designを完全にコピーしている Googleの純正アプリの様に見える
Googleの思想を完全に無視している
・Material Designを踏まえた上で、ブランディングができている ・Googleの思想をさらに一歩踏み込んだ理解・工夫
Guidelines
Prott・ブランディング優先 ・Prottらしい配色・色
Guidelines
Prott
MaterialDesignを理解した上でのブランディング
ちょっとした外しも
ただし、
The New York Times (https://www.youtube.com/watch?v=sCmg2ND1bZc&feature=youtu.be)
Material Design Awardsを取るようなアプリは
Material Designを理解した上で
オリジナルの解釈を加えて開拓している
やっとリリースできたので今後はさらに
Material Designを深めていきたい
開発体制１Prott for Androidを開発するときにTryしたこと
４ フィードバックより良いフィードバックを受けるために
３ デザインAndroidをSketchでデザインする上で学んだTipsなど
Material Design２AndroidのUIを深く知る
３ デザインAndroidをSketchでデザインする上で学んだTipsなど
Sketchを使ったデザイン
アートボードは-mdpiで作成
ステータスバーの高さ(48dp)は省き
360dp×592dpで作成
8dpのグリッドを引く
コンポーネントは基本的に4の倍数でで
きているため、8dpくらいの大きさでグ
リッドを引くと配置が楽
グリッドを設定・表示
右上のView > Grid Settingからグリッドのサ
イズを設定できる
View > Show Gridでグリッド表示の切り替え
（ショートカット Control+G）
テキストスタイルを保存
Material Design Guidlineを参考に
あらかじめテキストスタイルを
保存しておくと便利
書き出し
一度に複数のサイズでで書き出し
便利なプラグインも
sketch-android-assets
（https://github.com/zmalltalker/sketch-android-assets）
カラーコードや画像の管理
色、サイズなどのGuidelineやファイルの位置など
一箇所から辿れるようにまとめる
・Sketchファイルの場所・画像の場所・カラーコード・フォントサイズ、色・各スクリーンのサイズ
など
Goodpatchでは情報共有に使っている Qiita:Teamにまとめています
便利なツール、サイト
Skala Preview (https://bjango.com/mac/skalapreview/)
画像をリアルタイムで 実機に反映するサービス デザインの確認に必須
Sketch App Souces (http://www.sketchappsources.com/)
Sketchのフリーリソースを ダウンロードして使える
Material Iconも揃っている
Prott Sketch Plugin (https://blog.prottapp.com/post/ja/sketch-integration)
昨日リリースした機能！ Sketchのアートボードを
Prottに読み込める
ブランディング
Sketch App Souces (http://www.sketchappsources.com/free-source/1355-gesture-transition-icons-
sketch-freebie-resource.html)
自分でSketchファイルを投稿すると並ぶことがある
Webのリンクも貼れるため海外の人にリーチするチャンス
MaterialUp (https://www.materialup.com/posts/prott-rapid-prototyping-tool)
これも投稿型 多くのAndroidデザイナーに見てもらえるチャンス
開発体制１Prott for Androidを開発するときにTryしたこと
４ フィードバックより良いフィードバックを受けるために
ｚ３ デザインAndroidをSketchでデザインする上で学んだTipsなど
Material Design２AndroidのUIを深く知る
４ フィードバックより良いフィードバックを受けるために
適切な人にフィードバックをもらう
Prottを必ず使う
みんなが見ている場で共有
適切な人にフィードバックをもらう
Prottを必ず使う
みんなが見ている場で共有
？
？
？
？ ？
UI・ビジュアル エンジニアリング
Prott全体に関わること ユーザー目線
様々な疑問、相談したいこと
MTGやレビューできる場を活かし
適切な人に適切なフィードバックをもらう
UI・ビジュアル
Prott 全体に関わること ProttイテレーションMTG
大きな機能追加、変更 プロジェクトレビュー
エンジニアリング AndroidデベロッパーMTG
デザイナーMTG・気になったデザインの共有 ・デザインをお互いにレビュー ・デザイナーのあり方についてなど議論
・それぞれの進捗報告 ・最新情報共有 ・ライブラリ選定の相談など
・メンバーの進捗を共有 ・開発の優先順位の整理など ・Prottの方向性などを議論
・全員でお互いのプロジェクトをレビュー ・各職種からの情報共有
UI・ビジュアル
Prott 全体に関わること ProttイテレーションMTG
大きな機能追加、変更 プロジェクトレビュー
エンジニアリング AndroidデベロッパーMTG
デザイナーMTG・気になったデザインの共有 ・デザインをお互いにレビュー ・デザイナーのあり方についてなど議論
・それぞれの進捗報告 ・最新情報共有 ・ライブラリ選定の相談など
・メンバーの進捗を共有 ・開発の優先順位の整理など ・Prottの方向性などを議論
・全員でお互いのプロジェクトをレビュー ・各職種からの情報共有
UI・ビジュアル
Prott 全体に関わること ProttイテレーションMTG
大きな機能追加、変更 プロジェクトレビュー
エンジニアリング AndroidデベロッパーMTG
デザイナーMTG・気になったデザインの共有 ・デザインをお互いにレビュー ・デザイナーのあり方についてなど議論
・それぞれの進捗報告 ・最新情報共有 ・ライブラリ選定の相談など
・メンバーの進捗を共有 ・開発の優先順位の整理など ・Prottの方向性などを議論
・全員でお互いのプロジェクトをレビュー ・各職種からの情報共有
UI・ビジュアル
Prott 全体に関わること ProttイテレーションMTG
大きな機能追加、変更 プロジェクトレビュー
エンジニアリング AndroidデベロッパーMTG
デザイナーMTG・気になったデザインの共有 ・デザインをお互いにレビュー ・デザイナーのあり方についてなど議論
・それぞれの進捗報告 ・最新情報共有 ・ライブラリ選定の相談など
・メンバーの進捗を共有 ・開発の優先順位の整理など ・Prottの方向性などを議論
・全員でお互いのプロジェクトをレビュー ・各職種からの情報共有
プロジェクトレビュー
適切な人にフィードバックをもらう
Prottを必ず使う
みんなが見ている場で共有
実機で触って動くプロトタイプを使うことで
より質の高いレビューが受けられる
適切な人にフィードバックをもらう
Prottを必ず使う
みんなが見ている場で共有
隣に座っていても
重要なことはSlack上でも会話する
チームが見ている チャンネルに共有することで
フィードバックや 意見をもらえる
適切な人にフィードバックをもらう
Prottを必ず使う
みんなが見ている場で共有
４ まとめ
コラボレーションが超重要
・同じ視点、同じ場所
・Material Design Guidlinesは共通言語
まとめ①
まとめ②
効率的にゴールを目指す
・高速にスプリント
・繰り返しプロトタイピング
・適切な人・場所・タイミングでフィードバックもらう
４Design is as important as Technology
