WEBグラフィックツール今昔
∼デザインワークフローの転換∼
ピクトロンウェブプランニング 杉山 敦
http://www.pictron.net
pictron2009
concrete5
ラムゼイ・ルイス
J.A.M
wordpress
杉山 敦
kintone
レムコールハーン
パラダイス
サッカー
横尾忠則
アースダイバー
これからのデザインワークフローを
考える上でのアプリやサービスの傾向
データ構造の公開と
コマンドラインインターフェイスの実装
アプリを所有していなくても
cliからデータやレイヤーにアクセス/アウトプットできる
PSD.rb
PSD-cli
sketchtool -v
sketchtool export pages file.sketch
．．．
npm uninstall gulp-sketch --save-dev
gulp.task( 'sketch:slices', function(){
．．．
npm install -g psd-cli
psd path/to/my_psd_file.psd -c
ではこれからデザイナーも
gulpやcliを使いこなさなければ？
gulpのビルド環境
をどうするかだよ
ね∼
プログラマ
ガ、ガルプ？
あ∼、あれ．．．
ビールに合うよね
デザイナー
cliやAPIを使い作られた多くの
メソッドが提供される
新たにデータフォーマットに対応した
コラボレーション
プロトタイピング
アプリ、サービスが数多くリリース
コラボレーション
プロトタイピング
バージョニング
PDCAサイクルを円滑に進めるための
オープンAPIによる連携
デザインワークフローのための
コラボレーションサービス
プロトタイピングサービス
で標準化されつつある３つのアイコン
PhotoshopCC2015
アセットは 書き出し機能 ではない
Generatorテクノロジーという概念
PSD.rb
Extract
Dreamweaver
Adobe cloud
Brackets
PSD-cli
Extractアイコンがあるアプリだと
PSDのデータをアプリから直接レイヤーを選択して書き出して任意のフォルダへ
Adobe CloudでExtractを使うと
PSDのデータをブラウザから直接レイヤーを選択して書き出す。cloudフォルダでDropboxのように同期。
スタイルも取り出せる。
Slack で共有
書き出す形式も選べる
Adobe CloudでExtractを使うと
バージョニングやカンバセーションも可能
カンバセーション
バージョニング
Sketch
ポジティブ
・ネイティブで新規開発されたため動作が速い
・グラフィックデータが軽い
・有用なプラグインが開発される
・データ、APIがオープンで連携サービスが多い
・書き出しの階層化はスマート
ネガティブ
・ビットマップ編集はまだ途上
・パスツールに慣れが必要
・windows版がない
・仕事の都合上Adobeは結局必要
プラグイン
CRAFT
https://www.invisionapp.com/craft
Photoshopと両方のプラグインが同時に使えます。
写真やテキストをダミーで適当に入れてくれます。
写真はunsplashからジャンル指定で適当に探してくれます。
プラグイン
git-sketch-plugin
https://github.com/mathieudutour/git-sketch-plugin
sketchのメニューからgitを使えます。
sketchのファイル形式はわからないため
プレビューのPNGを自動生成してコミットします。
プラグイン
他にも多くのプラグイン
http://www.sketchappsources.com/plugins-for-sketch.html
Sketch Toolbox
http://sketchtoolbox.com/
でプラグインを楽に管理できます。
コラボレーションサービス
バージョニング
zeppelin.io
Sketchのデータをブラウザから直接レイヤーを選択して書き出す。スタイルも取り出せる。
プラグインで任意のタイミングで同期
コラボレーション
好きな位置にコメント
SketchのExport設定が
そのまま反映
やり取りを
Slackに流せる
書き出し形式を選べる
zeppelin.io
Sketchのデータをブラウザから直接レイヤーを選択して書き出す。スタイルも取り出せる。
プラグインで任意のタイミングで同期
テキストをプレーンで
取り出せる
マージン、幅、高さなどを算出、書き出しのCSSにも反映
カラーパレットを作成
avocode.com
Sketch,PSDのデータを連携したアプリから直接レイヤーを選択して書き出す。スタイルも取り出せる。
コラボレーション
好きな位置にコメント
バージョニング
やり取りを
Slackに流せる
avocode.com
Sketch,PSDのデータを連携したアプリから直接レイヤーを選択して書き出す。スタイルも取り出せる。
マージン、幅、高さなどを算出、書き出しのCSSにも反映
アプリがなくてもレイヤーから抽出できる
書き出し形式を選べる
テキストをプレーンで取り出せる
スタイルを抽出
プロトタイピングツール
？？
コラボレーション
invisionapp.com
Sketch,PSDのデータのアートボードをページとして認識しクリッカブルマップの容量でプロトタイプを作る。
コラボレーション機能もある。
プロトタイプで画面遷移を作成
画面の任意の位置でコメント
やり取りを
Slackなどに流せる
バージョニング
Adobe Experience Design
Sketchのような描画機能とinVisionのようなプロトタイピングができるアプリ。
どちらの機能も今は出遅れている印象だが、これからは未知数
Sketchのような描画機能
プロトタイプ
まとめ
これから制作環境は
オープンでつながる事がキー
でも．．ツールが進化したからと言って
アイデアを出してくれる
わけではない
デザインをサポートしてくれる
自分にとって楽な技術を選択
© Copyright 2024 ExpyDoc
