webdesign-workflow.key.pdf

by Atsushi Sugiyama

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

PhotoshopCC2015

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Sketch

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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