webdesign-workflow.key.pdf

Transcript

1. WEBグラフィックツール ～デザインワークフローの転換～
2. ピクトロンウェブプランニング　杉山　敦 http://www.pictron.net concrete5 wordpress kintone ラムゼイ・ルイス サッカー レムコールハーン パラダイス J.A.M アースダイバー 横尾忠則 pictron2009 杉山　敦
3. これからのデザインワークフローを 考える上でのアプリやサービスの傾向 データ構造のオープン化と コマンドラインインターフェイスの実装
4. デザインワークフローのための コラボレーションサービス プロトタイピングサービス で標準化されつつある３つのアイコン
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 ．．．
6. では、これからデザイナーも ruby,gulpやcliを使いこなして 自動化を行うべきなのか？
7. cliやAPIを使って構築された多くの メソッド（アプリ・サービス）が提供される 新たにデータフォーマットに対応した コラボレーション プロトタイピング アプリ、サービスが数多くリリース
8. PDCAサイクルを円滑に進めるための オープンAPIによる連携 コラボレーション プロトタイピング バージョニング
9. PhotoshopCC2015
10. アセットは“書き出し機能”ではない Generatorテクノロジーという概念 PSD-cli PSD.rb Extract Dreamweaver Brackets Adobe cloud
11. PSD-cli PSD.rb Extract Dreamweaver Brackets Adobe cloud アドビでは、4 月 14 日に、CC Assets Web サービスの「Extract」 タブおよび Brackets の拡張機能が 2016年6月に終了
12. Extract Illsutarotor2015.3からアセット書き出しに対応 ピクセルグリッドの問題は相変わらず マスクやライブ多角形などで、描画がない領域も書き出す
13. Adobe Cloudを使うと バージョニングやカンバセーションが可能 バージョニング カンバセーション Slackで共有
14. Sketch
15. ポジティブ ・ネイティブで新規開発されたため動作が速い ・グラフィックデータが軽い ・有用なプラグインが開発される ・データ、APIがオープンで連携サービスが多い ・書き出しの階層化はスマート ネガティブ ・ビットマップ編集はまだ途上 ・パスツールに慣れが必要 ・windows版がない ・仕事の都合上Adobeは結局必要
16. プラグイン CRAFT https://www.invisionapp.com/craft Photoshopと両方のプラグインが同時に使えます。 写真やテキストをダミーで適当に入れてくれます。 写真はunsplashからジャンル指定で適当に探してくれます。
17. プラグイン git-sketch-plugin https://github.com/mathieudutour/git-sketch-plugin sketchのメニューからgitを使えます。 sketchのファイル形式はわからないため プレビューのPNGを自動生成してコミットします。
18. プラグイン Sketch Gitやってみた
19. プラグイン Sketch Gitやってみた コミットする際に、プレビューPNGを生成してアップしてくれる 使えない 圧倒的に遅く、サクサク感がない 差分は目視、間違い探しのクイズみたい マージできないGitのそもそも意味が．．．
20. New in Sketch 39 レスポンシブデザインのワークフローのための新機能 Smart Resizing コーディングをイメージして使える新機能
21. New in Sketch 39 Smart Resizing Shops Shops Pin to Cornor Pin to Cornor Float in Place 各グループのリサイズの属性で コーディングをイメージしたリサイズに
22. New in Sketch 39 Smart Resizing stretch Float in Place グループ毎拡大・縮小することで floatやabsoluteをイメージした編集
23. New in CRAFT プラグインCRAFTでのダミーデータを読込機能にJSON対応が追加 JSONなどからフロントエンドでUIを実装するデザインプロセスのためのツール URLやダウンロードした JSONを読込 配列で表示
24. New in CRAFT プラグインCRAFTでのダミーデータを読込機能にJSON対応が追加 JSONなどからフロントエンドでUIを実装するデザインプロセスのためのツール 読み込んだデータをデザイン上のオブジェクトに割り当て リピートさせ ると自動的に 配列のデータ を割り当て
25. New in Sketch 39 Smart Resizing 今までのグラフィックソフト： グラフィックをどう作るか？→ウェブにどう書き出すか？ Sketch： UIデザインに必要なグラフィック、編集機能は何か？
26. New in Sketch 39 コラボレーションツール（開発中） Sketch Cloud (Beta)
27. Sketchのような描画機能とinVisionのようなプロトタイピングができるアプリ。 どちらの機能も今は出遅れている印象、徐々に機能追加 Adobe Experience Design Sketchのような描画機能 プロトタイプ
28. 2016年7月Preview5がリリースで徐々に機能追加（あくまでBeta） Adobe Experience Design ズームツール ズームツールなかったんかい！ 前のアートボード history.back()的な SketchやPowerPoint、Excel、InDesign などの他のツールからコピー（Cmd+C） してAdobe XDにペースト（Cmd+V）で きます。
29. Adobe Cloudでのプロトタイプ共有 Adobe Experience Design ブラウザで確認、カンバセーションやバー ジョニングなどはまだ未実装
30. まもなく追加予定の機能 Adobe Experience Design グラデーション まだないんかい！ 韓国語UI 関係ないんちゃうん！ XDに関するアンケートでこれがCloudに 込みになるのかは、まだ不透明。 カンバセーションツールと合わせて別料金 にするのも画策中？
31. コラボレーションサービス バージョニング
32. zeppelin.io Sketchのデータをブラウザから直接レイヤーを選択して書き出す。スタイルも取り出せる。 プラグインで任意のタイミングで同期 SketchのExport設定が そのまま反映 コラボレーション 好きな位置にコメント 書き出し形式を選べる やり取りを Slackに流せる
33. zeppelin.io Sketchのデータをブラウザから直接レイヤーを選択して書き出す。スタイルも取り出せる。 プラグインで任意のタイミングで同期 テキストをプレーンで 取り出せる マージン、幅、高さなどを算出、書き出しのCSSにも反映 カラーパレットを作成 共通の変数をless,Sassなどで書き出しに反映 Beta対応
34. avocode.com Sketch,PSDのデータを連携したアプリから直接レイヤーを選択して書き出す。スタイルも取り出せる。 バージョニング コラボレーション 好きな位置にコメント やり取りを Slackに流せる
35. avocode.com Sketch,PSDのデータを連携したアプリから直接レイヤーを選択して書き出す。スタイルも取り出せる。 書き出し形式を選べる テキストをプレーンで取り出せる マージン、幅、高さなどを算出、書き出しのCSSにも反映 アプリがなくてもレイヤーから抽出できる スタイルを抽出
36. プロトタイピングツール コラボレーション
37. invisionapp.com Sketch,PSDのデータのアートボードをページとして認識しクリッカブルマップの容量でプロトタイプを作る。 コラボレーション機能もある。 画面の任意の位置でコメント プロトタイプで画面遷移を作成 やり取りを Slackなどに流せる バージョニング
38. これからのデザイン制作環境は オープン・カンバセーションを前提に 共有やトライ＆エラーの工数を減らし 自分にとっての制作効率があがる ワークフローの組み合わせを選択 まとめ