webdesign-workflow.key.pdf

Transcript

1. WEBグラフィックツール
   ～デザインワークフローの転換～
   

   View Slide

2. ピクトロンウェブプランニング　杉山　敦
   http://www.pictron.net
   concrete5 wordpress kintone
   ラムゼイ・ルイス
   サッカー
   レムコールハーン
   パラダイス
   J.A.M アースダイバー
   横尾忠則
   pictron2009 杉山　敦
   

   View Slide

3. これからのデザインワークフローを
   考える上でのアプリやサービスの傾向
   データ構造のオープン化と
   コマンドラインインターフェイスの実装
   

   View Slide

4. デザインワークフローのための
   コラボレーションサービス
   プロトタイピングサービス
   で標準化されつつある３つのアイコン
   

   View Slide

5. アプリを所有していなくても
   cliからデータやレイヤーにアクセス/アウトプットできる
   PSD-cli
   PSD.rb
   npm install -g psd-cli
   psd path/to/my_psd_file.psd -c
   npm uninstall gulp-sketch --save-dev
   gulp.task( 'sketch:slices', function(){
   ．．．
   sketchtool -v
   sketchtool export pages file.sketch
   ．．．
   

   View Slide

6. では、これからデザイナーも
   ruby,gulpやcliを使いこなして
   自動化を行うべきなのか？
   

   View Slide

7. cliやAPIを使って構築された多くの
   メソッド（アプリ・サービス）が提供される
   新たにデータフォーマットに対応した
   コラボレーション
   プロトタイピング
   アプリ、サービスが数多くリリース
   

   View Slide

8. PDCAサイクルを円滑に進めるための
   オープンAPIによる連携
   コラボレーション
   プロトタイピング
   バージョニング
   

   View Slide

9. PhotoshopCC2015
   

   View Slide

10. アセットは“書き出し機能”ではない
    Generatorテクノロジーという概念
    PSD-cli
    PSD.rb
    Extract
    Dreamweaver
    Brackets
    Adobe cloud
    

    View Slide

11. PSD-cli
    PSD.rb
    Extract
    Dreamweaver
    Brackets
    Adobe cloud
    アドビでは、4 月 14 日に、CC Assets Web サービスの「Extract」
    タブおよび Brackets の拡張機能が 2016年6月に終了
    

    View Slide

12. Extract
    Illsutarotor2015.3からアセット書き出しに対応
    ピクセルグリッドの問題は相変わらず
    マスクやライブ多角形などで、描画がない領域も書き出す
    

    View Slide

13. Adobe Cloudを使うと
    バージョニングやカンバセーションが可能
    バージョニング
    カンバセーション
    Slackで共有
    

    View Slide

14. Sketch
    

    View Slide

15. ポジティブ
    ・ネイティブで新規開発されたため動作が速い
    ・グラフィックデータが軽い
    ・有用なプラグインが開発される
    ・データ、APIがオープンで連携サービスが多い
    ・書き出しの階層化はスマート
    ネガティブ
    ・ビットマップ編集はまだ途上
    ・パスツールに慣れが必要
    ・windows版がない
    ・仕事の都合上Adobeは結局必要
    

    View Slide

16. プラグイン
    CRAFT
    https://www.invisionapp.com/craft
    Photoshopと両方のプラグインが同時に使えます。
    写真やテキストをダミーで適当に入れてくれます。
    写真はunsplashからジャンル指定で適当に探してくれます。
    

    View Slide

17. プラグイン
    git-sketch-plugin
    https://github.com/mathieudutour/git-sketch-plugin
    sketchのメニューからgitを使えます。
    sketchのファイル形式はわからないため
    プレビューのPNGを自動生成してコミットします。
    

    View Slide

18. プラグイン
    Sketch Gitやってみた
    

    View Slide

19. プラグイン
    Sketch Gitやってみた
    コミットする際に、プレビューPNGを生成してアップしてくれる
    使えない
    圧倒的に遅く、サクサク感がない
    差分は目視、間違い探しのクイズみたい
    マージできないGitのそもそも意味が．．．
    

    View Slide

20. New in Sketch 39
    レスポンシブデザインのワークフローのための新機能
    Smart Resizing
    コーディングをイメージして使える新機能
    

    View Slide

21. New in Sketch 39
    Smart Resizing
    Shops
    Shops
    Pin to Cornor
    Pin to Cornor Float in Place
    各グループのリサイズの属性で
    コーディングをイメージしたリサイズに
    

    View Slide

22. New in Sketch 39
    Smart Resizing
    stretch
    Float in Place
    グループ毎拡大・縮小することで
    floatやabsoluteをイメージした編集
    

    View Slide

23. New in CRAFT
    プラグインCRAFTでのダミーデータを読込機能にJSON対応が追加
    JSONなどからフロントエンドでUIを実装するデザインプロセスのためのツール
    URLやダウンロードした
    JSONを読込
    配列で表示
    

    View Slide

24. New in CRAFT
    プラグインCRAFTでのダミーデータを読込機能にJSON対応が追加
    JSONなどからフロントエンドでUIを実装するデザインプロセスのためのツール
    読み込んだデータをデザイン上のオブジェクトに割り当て
    リピートさせ
    ると自動的に
    配列のデータ
    を割り当て
    

    View Slide

25. New in Sketch 39
    Smart Resizing
    今までのグラフィックソフト：
    グラフィックをどう作るか？→ウェブにどう書き出すか？
    Sketch：
    UIデザインに必要なグラフィック、編集機能は何か？
    

    View Slide

26. New in Sketch 39
    コラボレーションツール（開発中）
    Sketch Cloud (Beta)
    

    View Slide

27. Sketchのような描画機能とinVisionのようなプロトタイピングができるアプリ。
    どちらの機能も今は出遅れている印象、徐々に機能追加
    Adobe Experience Design
    Sketchのような描画機能 プロトタイプ
    

    View Slide

28. 2016年7月Preview5がリリースで徐々に機能追加（あくまでBeta）
    Adobe Experience Design
    ズームツール
    ズームツールなかったんかい！
    前のアートボード
    history.back()的な
    SketchやPowerPoint、Excel、InDesign
    などの他のツールからコピー（Cmd+C）
    してAdobe XDにペースト（Cmd+V）で
    きます。
    

    View Slide

29. Adobe Cloudでのプロトタイプ共有
    Adobe Experience Design
    ブラウザで確認、カンバセーションやバー
    ジョニングなどはまだ未実装
    

    View Slide

30. まもなく追加予定の機能
    Adobe Experience Design
    グラデーション
    まだないんかい！
    韓国語UI
    関係ないんちゃうん！
    XDに関するアンケートでこれがCloudに
    込みになるのかは、まだ不透明。
    カンバセーションツールと合わせて別料金
    にするのも画策中？
    

    View Slide

31. コラボレーションサービス
    バージョニング
    

    View Slide

32. zeppelin.io
    Sketchのデータをブラウザから直接レイヤーを選択して書き出す。スタイルも取り出せる。
    プラグインで任意のタイミングで同期
    SketchのExport設定が
    そのまま反映
    コラボレーション
    好きな位置にコメント
    書き出し形式を選べる
    やり取りを
    Slackに流せる
    

    View Slide

33. zeppelin.io
    Sketchのデータをブラウザから直接レイヤーを選択して書き出す。スタイルも取り出せる。
    プラグインで任意のタイミングで同期
    テキストをプレーンで
    取り出せる
    マージン、幅、高さなどを算出、書き出しのCSSにも反映
    カラーパレットを作成
    共通の変数をless,Sassなどで書き出しに反映
    Beta対応
    

    View Slide

34. avocode.com
    Sketch,PSDのデータを連携したアプリから直接レイヤーを選択して書き出す。スタイルも取り出せる。
    バージョニング
    コラボレーション
    好きな位置にコメント
    やり取りを
    Slackに流せる
    

    View Slide

35. avocode.com
    Sketch,PSDのデータを連携したアプリから直接レイヤーを選択して書き出す。スタイルも取り出せる。
    書き出し形式を選べる
    テキストをプレーンで取り出せる
    マージン、幅、高さなどを算出、書き出しのCSSにも反映
    アプリがなくてもレイヤーから抽出できる
    スタイルを抽出
    

    View Slide

36. プロトタイピングツール
    コラボレーション
    

    View Slide

37. invisionapp.com
    Sketch,PSDのデータのアートボードをページとして認識しクリッカブルマップの容量でプロトタイプを作る。
    コラボレーション機能もある。
    画面の任意の位置でコメント
    プロトタイプで画面遷移を作成
    やり取りを
    Slackなどに流せる
    バージョニング
    

    View Slide

38. これからのデザイン制作環境は
    オープン・カンバセーションを前提に
    共有やトライ＆エラーの工数を減らし
    自分にとっての制作効率があがる
    ワークフローの組み合わせを選択
    まとめ
    

    View Slide