Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
webdesign-workflow.key.pdf
Search
Atsushi Sugiyama
August 01, 2016
0
1.1k
webdesign-workflow.key.pdf
Atsushi Sugiyama
August 01, 2016
Tweet
Share
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
Practical Orchestrator
shlominoach
186
10k
Designing Experiences People Love
moore
138
23k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Being A Developer After 40
akosma
87
590k
Docker and Python
trallard
42
3.1k
Six Lessons from altMBA
skipperchong
27
3.5k
Site-Speed That Sticks
csswizardry
2
190
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Into the Great Unknown - MozCon
thekraken
33
1.5k
Transcript
WEBグラフィックツール ~デザインワークフローの転換~
ピクトロンウェブプランニング 杉山 敦 http://www.pictron.net concrete5 wordpress kintone ラムゼイ・ルイス サッカー レムコールハーン パラダイス J.A.M
アースダイバー 横尾忠則 pictron2009 杉山 敦
これからのデザインワークフローを 考える上でのアプリやサービスの傾向 データ構造のオープン化と コマンドラインインターフェイスの実装
デザインワークフローのための コラボレーションサービス プロトタイピングサービス で標準化されつつある3つのアイコン
アプリを所有していなくても 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 ...
では、これからデザイナーも ruby,gulpやcliを使いこなして 自動化を行うべきなのか?
cliやAPIを使って構築された多くの メソッド(アプリ・サービス)が提供される 新たにデータフォーマットに対応した コラボレーション プロトタイピング アプリ、サービスが数多くリリース
PDCAサイクルを円滑に進めるための オープンAPIによる連携 コラボレーション プロトタイピング バージョニング
PhotoshopCC2015
アセットは“書き出し機能”ではない Generatorテクノロジーという概念 PSD-cli PSD.rb Extract Dreamweaver Brackets Adobe cloud
PSD-cli PSD.rb Extract Dreamweaver Brackets Adobe cloud アドビでは、4 月 14
日に、CC Assets Web サービスの「Extract」 タブおよび Brackets の拡張機能が 2016年6月に終了
Extract Illsutarotor2015.3からアセット書き出しに対応 ピクセルグリッドの問題は相変わらず マスクやライブ多角形などで、描画がない領域も書き出す
Adobe Cloudを使うと バージョニングやカンバセーションが可能 バージョニング カンバセーション Slackで共有
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を自動生成してコミットします。
プラグイン Sketch Gitやってみた
プラグイン Sketch Gitやってみた コミットする際に、プレビューPNGを生成してアップしてくれる 使えない 圧倒的に遅く、サクサク感がない 差分は目視、間違い探しのクイズみたい マージできないGitのそもそも意味が...
New in Sketch 39 レスポンシブデザインのワークフローのための新機能 Smart Resizing コーディングをイメージして使える新機能
New in Sketch 39 Smart Resizing Shops Shops Pin to
Cornor Pin to Cornor Float in Place 各グループのリサイズの属性で コーディングをイメージしたリサイズに
New in Sketch 39 Smart Resizing stretch Float in Place
グループ毎拡大・縮小することで floatやabsoluteをイメージした編集
New in CRAFT プラグインCRAFTでのダミーデータを読込機能にJSON対応が追加 JSONなどからフロントエンドでUIを実装するデザインプロセスのためのツール URLやダウンロードした JSONを読込 配列で表示
New in CRAFT プラグインCRAFTでのダミーデータを読込機能にJSON対応が追加 JSONなどからフロントエンドでUIを実装するデザインプロセスのためのツール 読み込んだデータをデザイン上のオブジェクトに割り当て リピートさせ ると自動的に 配列のデータ を割り当て
New in Sketch 39 Smart Resizing 今までのグラフィックソフト: グラフィックをどう作るか?→ウェブにどう書き出すか? Sketch: UIデザインに必要なグラフィック、編集機能は何か?
New in Sketch 39 コラボレーションツール(開発中) Sketch Cloud (Beta)
Sketchのような描画機能とinVisionのようなプロトタイピングができるアプリ。 どちらの機能も今は出遅れている印象、徐々に機能追加 Adobe Experience Design Sketchのような描画機能 プロトタイプ
2016年7月Preview5がリリースで徐々に機能追加(あくまでBeta) Adobe Experience Design ズームツール ズームツールなかったんかい! 前のアートボード history.back()的な SketchやPowerPoint、Excel、InDesign などの他のツールからコピー(Cmd+C)
してAdobe XDにペースト(Cmd+V)で きます。
Adobe Cloudでのプロトタイプ共有 Adobe Experience Design ブラウザで確認、カンバセーションやバー ジョニングなどはまだ未実装
まもなく追加予定の機能 Adobe Experience Design グラデーション まだないんかい! 韓国語UI 関係ないんちゃうん! XDに関するアンケートでこれがCloudに 込みになるのかは、まだ不透明。
カンバセーションツールと合わせて別料金 にするのも画策中?
コラボレーションサービス バージョニング
zeppelin.io Sketchのデータをブラウザから直接レイヤーを選択して書き出す。スタイルも取り出せる。 プラグインで任意のタイミングで同期 SketchのExport設定が そのまま反映 コラボレーション 好きな位置にコメント 書き出し形式を選べる やり取りを Slackに流せる
zeppelin.io Sketchのデータをブラウザから直接レイヤーを選択して書き出す。スタイルも取り出せる。 プラグインで任意のタイミングで同期 テキストをプレーンで 取り出せる マージン、幅、高さなどを算出、書き出しのCSSにも反映 カラーパレットを作成 共通の変数をless,Sassなどで書き出しに反映 Beta対応
avocode.com Sketch,PSDのデータを連携したアプリから直接レイヤーを選択して書き出す。スタイルも取り出せる。 バージョニング コラボレーション 好きな位置にコメント やり取りを Slackに流せる
avocode.com Sketch,PSDのデータを連携したアプリから直接レイヤーを選択して書き出す。スタイルも取り出せる。 書き出し形式を選べる テキストをプレーンで取り出せる マージン、幅、高さなどを算出、書き出しのCSSにも反映 アプリがなくてもレイヤーから抽出できる スタイルを抽出
プロトタイピングツール コラボレーション
invisionapp.com Sketch,PSDのデータのアートボードをページとして認識しクリッカブルマップの容量でプロトタイプを作る。 コラボレーション機能もある。 画面の任意の位置でコメント プロトタイプで画面遷移を作成 やり取りを Slackなどに流せる バージョニング
これからのデザイン制作環境は オープン・カンバセーションを前提に 共有やトライ&エラーの工数を減らし 自分にとっての制作効率があがる ワークフローの組み合わせを選択 まとめ