京都開催の勉強会に参加してきました。
第1回 D2D WEBグラフィックツール今昔 ～デザインワークフローの転換～ - D2DRAFT | Doorkeeper

ちなみに私は、Illustrator好きのWebデザイナーです。最近、会社のルールでIllustratorからPhotoshopに乗り換えました。Fireworksは古いデータをいじる以外で、ほとんど操作したことがありません。

感想

登壇者・参加者の皆さんと、いろいろなデザインワークフローを共有できるとても貴重な機会でした。

• デザインをどんな手順で、どのツールで作っているのか（今回はIllustrator多め）

• デザインカンプ作成からクライアントとのコミュニケーションまでの流れ

登壇されている皆様が個人で活動されているからか、チームでの制作フローの話はあまりなかったです。Web制作の実作業を効率化するノウハウが中心でした。

また、プロトタイピングツールや、デザイナーとエンジニア間のコミュニケーションツールの最新事情も。今後のデザインツール選択を検討する上で参考になる勉強会でした。

各セッションの内容

Illsutratorでのウェブデザインワークフロー例の紹介

川井昌彦さん（Cherry Pie Web）のセッション。
Illsutratorでのウェブデザインワークフロー例の紹介 by Masahiko Kawai on Prezi

ある案件での実際の要件やデザインデータを見せていただきながら、川井さんがどのようにデザイン制作しているのか詳しくご紹介いただきました。

• 全ページを一つのファイル、一つのアートボードに収め、レイヤーの表示で管理

• スマホ用のデザインは別のアートボードに作成、ただしあくまで表示の確認だけに使い、コーディングのベースはPC用デザイン

• レイヤー、スウォッチ、段落スタイル、文字スタイル、グラフィックスタイル、それぞれネーミングや分類がかなり丁寧

データの段落スタイルと文字スタイルを、HTML・CSSと同様に入子の関係にしている、というのが新鮮でした。

Photoshop,Illsutrator,アセット管理のワークフロー例の紹介

完山祐毅さんのセッション。
スライド｜Photoshop,Illustrator アセット管理のワークフロー

実際のデータをお見せいただきながら、Illustrator、Prott、Photoshop、Gyazoを活用した制作フローをご紹介いただきました。完山さんがご自身を面倒くさがりとおっしゃっていて、それも含めて自分の制作フローに近いやり方をされていたので、共感しながら聞いていました。

• デザイン制作は基本的にIllustratorで行い、必要な箇所の画像書き出しはaiデータをpsdデータに変換してPhotoshopで

• 全ページを一つのファイルで、アートボードで分けて管理（スタイルなどの管理が楽、確認用画像が一括で書き出せるなど便利）

• 共通パーツはシンボル化して管理

• コミュニケーションツールとしてProttを活用

以下、知らないことがたくさんあってありがたかったです。

• 共通パーツ、自分は外部リンク化していたがシンボル化するという手段もある（データが肥大化しないならば、ファイル数が減るので便利だ）

• グローバルカラー！（知らなかった…）

• Photoshopの画像アセット機能にはオプションがある（pngとjpg同時に書き出す等）

• psd書き出し設定でオプション「レイヤー保持」を選択すれば、グループ化しておいたところがフォルダになる

• Photoshopのレイヤー名をまとめて変更・一括リネームできるスクリプト「Group Layer Renaming」を併せて使うと便利

• AdobeStock、配置したサンプル画像は購入するとすぐ置き換わり便利らしい

• Gyazoが瞬時に画面スクショ共有できて便利

ちなみに、aiデータをpsdに変換するときに一部の要素が消えてしまうことがありますが、困った時は私はこちらの記事を参考にしています。
Humore design webaiからpsdデータ書出しでレイヤー統合される理由と回避法（オーバープリント等）

Sketch,Experience Design,コラボレーションサービスのサマリー

杉山敦さん（pictron.net）のセッション。
D2D WEBグラフィックツール今昔 デザインワークフローの転換 v1.0 Note 2016/4/2（土） | pictron web planning ピクトロン・ウェブプランニング

実際の画面や体験談を交えながらツールの活用方法を共有いただきました。

• デザイン制作ツール： Sketch（Mac版のみ）、Illustrator、Photoshop

• コミュニケーションツール：avocode、zeplin、クエイク

• プロトタイピングツール： invision、Prott、marvel、Design Experience（現在Preview版、Macのみ）

• Brackets｜Adobeライブラリと連携するエディタ？実際の動きを拝見した限りとても便利そう

• Craft｜プロトタイプ作成に便利なプラグイン。SketchでもPhotoshopでも使える

• Sketch Git｜Gitでバージョン管理できるようになるプラグイン

また、ツールを選ぶのに必要な考え方や概念も教えていただきました。

• 画像アセット機能はGeneratorテクノロジーという概念がベース（参考｜generatorの設計と使い方）

• データが軽量であることがSketchの強みの一つだが、それが他のツールとの連携で大きな効果を発揮している

• コミュニケーションツールがあれば、Sketchを持っている・いない等の環境差を埋めてコーディングを進めることもできる

• ツール選びではその仕組みがオープンであるかどうか。Slackなどのような多様なツールと連携の可否などが鍵

• ツールがアイデアを出してくれるわけではないので、作る側が必要なツールを取捨選択することが大事

杉山さんとしては現状、制作ツールの中ではSketchに軍配があがるそうです。ただ、他の制作者やクライアントとのデータやり取りではAdobeはほぼ必要になってしまうので、Sketchだけで良いとはいかないとのこと。

ツールは今後も変化していくので、いろいろ調べて試しながら良い方法を模索していきたいところ。今回は材料としてとても勉強になりました。

その他（ディスカッションタイムや質問など）

• fireworksデータをpsdに変換するとき、点線は消えてしまう？のでラスタライズしておく必要がある

• Photoshopのデザインモード…当初は使い物にならなかった（すぐに落ちた）が現在はそこそこ使えるようになってきている？

• コミュニケーションツールをSlack連携すると、修正箇所の確認といったチームでの工程がスムーズになる

まとめ

じゃあ自分はどうするのか

個人的に、Experience DesignやAdobeのエコシステム？の今後が気になっています。IllustratorやPhotoshop、あるいは他のサービス（ツール）とどう連携していくのか、その変化によって制作フローも大きく変わるのかもしれません。
ただ、いつそうなるのか、そもそもExperience Designが普及していくのか、まだわかりません。

今回の話を聞いたからと言って、PhotoshopからIllustratorやSketchに変えましょう！と会社に提案するには心許ないところ（個人的にはIllustratorが良いですが…）。そもそも、ロゴやアイコンの作成など特定の用途でIllustratorと使い分けていますし、得手不得手はあれど、今回に関してはPhotoshopでも代用できることは多いように感じました。

まずはコミュニケーションツールやプロトタイピングツールをチームに導入してみんなで使い、「これがああできたらいいのにな」という声があった時に、Sketchなど別のツールを再検討して見たいと思います。

懇親会も楽しかったです。色々な学びの場を提供していただき、ありがとうございました。