Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

デザインツール戦争とMaterial Theme Editor

365 views

Published on

2018年6月9日に開催されたABC2018Springの講演資料。
濫立するデザインツール、プロトタイプツールの選び方。
先日Googleから発表されたMaterial Theme Editorを使ってみた結果の共有。

Published in: Design
  • Be the first to comment

  • Be the first to like this

デザインツール戦争とMaterial Theme Editor

  1. 1. デザインツール戦争と Material Theme Editor 山本麻美 / ABC2018 Spring
  2. 2. 今日のおはなし • 機能で考えるツール選び • Plugin for Sketch • 実験:Material Theme Editorで
 Google+をつくってみる • Galleryを使ってみる
  3. 3. 山本麻美 1997年からフリーランス Web制作、ケータイサイト制作など 2010年 Androidの会に行ったことがきっかけで スマートフォンアプリのUIデザインに特化。 企画段階からプロジェクトメンバーとして参加 することがほとんど。 東洋美術学校、ロクナナワークショップ 講師
  4. 4. ロクナナワークショップ 毎月1回
 開催中 https://67.org/ws/workshop/detail/135sketch.html
  5. 5. 機能で考える ツール選び
  6. 6. 主なUIデザインツール どれにすれば
 いいの?
  7. 7. プロトタイピング, Spec共有 どれにすれば
 いいの?
  8. 8. 状況で判断するといい アイデアを
 素早く視覚化し たい 複数デザイナー で進めたい 開発チームに
 Spec共有
 したい 画面遷移図
 欲しい
  9. 9. ところでSpecって何だ? UI実装情報 のことです
  10. 10. ツール選びのポイント Adobeだから。
 噂になってるから。
 調べるの面倒。 プロジェクトの問題を 解決できるのは
 どれ?
  11. 11. デザインツール機能比較 コンポー ネント Win版 特色 Sketch ◎ × 高度なComponent設計、
 豊富なプラグインや連携ツール。 XD ○ ○ Adobe製品間の連携が容易。
 プロトタイプ、Spec共有ができる。 figma ○ ○ 複数デザイナーでコラボしながら デザインを進められる。 InVision Studio ○ ○ 簡単にインタラクションが作れる。
 まだ正式版ではないので未知数。 相当 ざっくり
  12. 12. プロトタイピングツール機能比較 チーム
 向き 進行
 管理 使い
 やすさ 特色 Prott ◎ × ○ ワイヤーフレーム、画面遷移 図を作成できる InVision ◎ ○ かなり多機能 XD ◎ × ◎ デザイン上でプロトタイプを作 成、共有できる Sketch ◎ × ◎ デザイン上でプロトタイプを作 成、共有できる かなり ざっくり
  13. 13. Spec共有ツール機能比較 コメント
 orメモ 画像
 書出し 単位
 pt/ dp 特色 Zeplin ◎ ◎ ○ カラーパレットの管理もできる InVision ○ ○ × 時々カラーコードが勝手に
 変わるorz XD ○ × ○ 現在Beta Gallery ○ × ○ 画像assets名を表示できな い とても ざっくり
  14. 14. ケースその1 既存アプリの全面リニューアル。
 構成は概ね決まっている。
 画面遷移図が必要。
  15. 15. ケースその2 新規プロジェクト。まずは構成や仕様を決めたい。
 Sketchあまり使ったことないけど、Illustratorなら学 生の頃から使ってた。
  16. 16. ケースその3 デザイナーを確保できない。
 見劣りしないAndroidアプリを作りたい。
 Material Theme Editor
  17. 17. Plugin for Sketch
  18. 18. Material Theme Editorとは Material Design のテンプレート
 出たー! Sketchを使った
 MDツールだね、
 こりゃ。
  19. 19. Material Theme Editorを使いこなすために Style Symbol Resizing Library Sketchの基本的かつ特徴的な機能を知っておく必要がある
  20. 20. Symbolを複数ファイルで使える Library 20
  21. 21. Symbolを複数人で共有できる Library 21
  22. 22. Preferences Libraries 作ったSymbolを ライブラリとして登録 複数ファイルで Symbolを読み込める 22
  23. 23. ライブラリが更新されると ライブラリ更新の お知らせが出る 確認して 更新できる 23
  24. 24. Material Theme Editorで Google+を
 作ってみる 実験
  25. 25. これ、写経してみよう!
  26. 26. Theme Editorからテーマ選ぶ
  27. 27. テーマを選択
  28. 28. Libraryに登録された
  29. 29. Libraryに登録された
  30. 30. Symbolを選択
  31. 31. アートボード上に配置してゆく
  32. 32. アイコン数 Screen shot Sketch カード FAB テキストの有無 1 2 3 4
  33. 33. アイコンの数1 Icon1,2 を非表示に
  34. 34. よし!
  35. 35. カード 横幅を広げた SymbolにResizingの 設定がされているので 横幅を変えても レイアウトが崩れない!
  36. 36. クリック
  37. 37. 修正した
  38. 38. テキストと画像の 上下を入れ替えた
  39. 39. action部分を
 修正するには..
  40. 40. Shareはあるけど
 Commentがない!
  41. 41. 足りないアイコンは
 ダウンロード
  42. 42. 全種類ある
  43. 43. うんざりせず、検索すれば良い command +2で
 拡大表示する 1 2 3 検索する それらしい
 レイヤーを
 選択
  44. 44. だいぶ
 似てきたね!
  45. 45. 色を変えよう クリックして 3秒くらい 待つ
  46. 46. やっと出た
  47. 47. 色を選ぶ
  48. 48. 通知が出る
  49. 49. Updateする!
  50. 50. アイコンを変更する
  51. 51. 色を変更する
  52. 52. ふー。
 あと
 ひといきだ!
  53. 53. Symbolを変更する アイコン+テキスト
 のやつに変更する
  54. 54. アイコン+テキスト
 のやつに変更する よし!
  55. 55. 色を変えようとすると… うっ
  56. 56. テキストを変えようとすると… 一体どれなの
 わからない…
  57. 57. フォントが違う問題
  58. 58. Fontを変更する
  59. 59. Fontを変更する フォントを変更
  60. 60. Libraryの更新 更新する
  61. 61. Libraryの更新をすると.. あーっ。。。
  62. 62. めげずに直した
  63. 63. なんとか完成した! http://bit.ly/2Jo8Cz3 このSketchファイルを
 ダウンロードできます
  64. 64. Galleryを
 使ってみる
  65. 65. GET STARTED!
  66. 66. Mobile app コメント書ける iOS版もある
  67. 67. GalleryへUploadする
  68. 68. Comment
  69. 69. Comment 便利! ココをクリック 1 囲む 2 コメントする 3
  70. 70. Inspect 位置やサイズ テキストのコピー Zeplinのよう な画像名
 (Sketchの
 スライス名)
 を表示してくれる
 機能はない。
  71. 71. Guidelineへ 選択した各要素 のガイドライン
 ページへリンク
  72. 72. Referenceへ 選択した各要素 のReference
 ページへリンク
  73. 73. 変更点 @fkm どのコンポーネントを どうカスタマイズしたか 伝えてくれればおk
  74. 74. カスタムデザインの場合 Reference
 ページへリンクは
 当然ありません。 Reference欄
 は無い
  75. 75. テーマアイコン名の表示? って書いてあるけど..
  76. 76. Properties アイコン名が
 表示されない.. なぜだろう? あれれ..
 アイコン名は?
  77. 77. Googleの人 今後そうなるんじゃ
 ないかな え!
  78. 78. Share 特定の人にシェアする
 こともできる 早い段階で
 他の人に見せる にはいいかも。
 無料だし
  79. 79. まとめ • ツール選びは適切に。 • Material Theme Editorは
 Sketchプラグインというよりも、
 むしろコレを動かすためにSketchを利用。 • 豊富なだけに探すの大変。 • 自由にカスタマイズするには向かない気がする。

×