LOGzeudon

名古屋で働いているWebデザイナーのブログです

D2D「WEBグラフィックツール今昔〜デザインワークフローの転換~」に参加してきました

京都コワーキングスペースcoto(コト)さんにて開催されたイベントに参加してきました。学んだことのメモを兼ねて記事にします。

d2draft.doorkeeper.jp

ちなみに私は会社のルールでIllustratorからPhotoshopに乗り換えた、Illustrator好きのデザイナーです。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に変換するときに一部の要素が消えてしまうことがありますが、困った時はこちらの記事を参考にしています。

chi-design-ooo.com

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

杉山敦さん(pictron.net)のセッション。

ブログ|D2D WEBグラフィックツール今昔 デザインワークフローの転換 v1.0 Note 2016/4/2(土) | pictron web planning ピクトロン・ウェブプランニング

デザインツール?を選ぶ上で必要な考え方や、様々なツール(サービス)の今を実際の画面や体験談を交えながら共有いただきました。

事例に挙げられていたサービス
  • デザイン制作ツール
    • Sketch(Mac版のみ)
    • Illustrator
    • Photoshop
  • (制作者間の)コミュニケーションツール
    • avocode
    • zeplin
    • クエイク?(見つけられず…)
    • (あともう一つあったような…)
  • プロトタイピングツール
  • その他
    • 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など別のツールを再検討して見たいと思います。

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