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

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

Slide 5

Slide 5 text

アプリを所有していなくても 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 ...

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 グループ毎拡大・縮小することで floatや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

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