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

2016年7月23日（土）に、大阪のOBPアカデミアで行われた勉強会、「第2回 D2D WEBグラフィックツール デザインワークフローの転換」に参加しました。
第1回はスピーカーとして参加したのですが、今回は一参加者としての参加です。

（参考）第1回 D2D WEBグラフィックツール今昔 ～デザインワークフローの転換～ でお話してきました

Sketchに辿り着いた話と、制作フローにおける各ツールの連携

最初のセッションは、第1回でもスピーカーとして登場された京都のWebデザイナー完山さんです。
確か前回は、IllustratorでレイアウトしてProttでプロトタイプ作成という話をされたはずですが、なんと、前回のD2Dのあとで主催の杉山さんに感化されてツールを「Sketch」に乗り換えたのだそうです。

同じイラレ使いだと思っていたのに、いきなりの裏切りかよ！（笑）

完山さんが個人的に必須と考えられているWebデザインツールの機能は下記の3つです。

• アートボード
• シンボルでモジュール化
• グローバルカラー

これはまったく同感で、これを満たすツールとして私は「Adobe Illustrator」を使用しているし、前回までは完山さんも使用されていたのですが、「Sketch」はこの機能を満たしているのに加え、

• 軽い
• Web制作に特化している
• 画像のエクスポートが楽
• 意識しない自動保存

といった部分が優れていることが、乗り換えの理由になったそうです。
Illustratorも自動保存機能や最新のバージョンで加わったアセット機能があるわけですが、最も違いが出るのは「軽さ」でしょう。
これは、機能がWebに特化されていることによるプログラム動作の軽さと共に、機能が絞り込まれていることで制作時に余計な機能に気を取られない気分的な軽さもあると思います。

制作ワークフローは、斎1回の時にお話しされたワークフローに対して、一見「Illustrator＋Photoshop」の部分が「Sketch」に置き換わったような感じに見えますが、私の感覚としては従来「Fireworks」が担っていた部分を「Sketch」に置き換えているというふうにとれました。
Fireworksが忘れられない私にとっては、非常に魅力的なツールだと言えます。

CRAFTプラグインによる効率的なダミーコンテンツの制作、プロトタイピングツールProttとの連携といった、Sketchを中心としたワークフローも非常に使いやすそうです。

しかし、残念なことにSketchはWindows版がリリースされていません。
どんなに魅力をアピールされても現状では導入できないということで、非常に悔しい思いが募ったセッションでした。
それだけ、完山さんによるSketchアピールが魅力的だったとも言えますけれど。

完山さんのスライドはこちらをご覧ください。
https://dl.dropboxusercontent.com/u/22613663/d2d/d2d_designworkflow_vol2_motoyama.pdf

10年前から変化ナシ？！新技術を使えなくてもなんとかなるさ！基本の制作ワークフロー

2つ目のセッションは高橋（飯田）美幸さん。
Photoshopを駆使してランディングページやキャンペーンページなどを制作する際のワークフローを紹介していただきました。

一般的にこういう勉強会でのセッションって新しいツールやテクニックを紹介されるようなものが多いのですが、高橋さんのセッションは、あえて新しいことをせずに慣れたツールを使い、クリエイティブ自体に力を集中されているようでした。
高橋さんのワークフローは、華麗な包丁さばきで見た目も味も素晴らしい和食を創っていく料理人をみているようで、私の普段のやり方はなんだか、平野レミさんとか家事えもんみたいに思えました。（私は平野レミさん好きですよ、念のため）

これは、どちらが良いということではなくて、CMSなどを用いてテキスト中心で多ページのサイトを構築するような場合と、美しいグラフィックで目を引くようなサイトを構築する場合は、おのずとベストな手法が違ってくるということだと思います。
多くのページを効率よく制作していくとか、多くのデバイスに対応させるとかといった目的がある場合は、ツールやワークフローが制作物のクオリティを上げることにつながることも多いのですが、グラフィックデザイン自体のクオリティを上げるのは、その前の「リサーチ」とか普段からの「インプット」などツール以前の問題なのかなぁと感じました。

ツールということでは「Adobe Bridge」を多用されていました。
私も手持ちの材料を整理したり一括処理をするときに使うのですが、一般的にはあまり活用されていない印象があります。
BridgeはPSDファイルやAiファイルがプレビューできたり作成バージョンなどの情報もわかりますし、直接アクションが使えたりとか効率化の面から見ても、Adobeのアプリ同士をつなぐツールとして非常に使い勝手が良いので、みなさんもぜひ使ってほしいです。

個人的には、Windows使いなところに親近感を覚えました。
そういえば当日の参加者も、意外にWindows率が高かったように思います。

高橋さんのスライドはこちらをご覧ください。
http://www.pictron.net/d2d/20160723/all.pdf

動くサイトにプログラムが必要な時代は終わった。デザイナー歓喜のAnimate CCとSpineの紹介

3つ目のセッションは、宇都宮ウエブ制作所の宇都宮頼子さん。
おなじといっしょという子育てブログをご存知の方も多いかもしれませんね。

宇都宮さんのセッションはAnimateCC、かつてFlashと呼ばれて一世を風靡したアニメーションツールを駆使したサイト制作のお話です。

私のサイトを以前からご覧になっていただいている方や、昔からの知り合いの方はご存知かもしれませんが、私は「Flash2」からFlashを使っていたんです。
東京にいたころはFlashのコミュニティ「F-SITE」に毎回参加していましたし、今の私があるのもFlashのおかげと言っても過言ではないと思っています。
ですから、名前こそAnimateCCに変わってしまいましたが、いわゆるFlashの話をしてくれる方がいらっしゃるというだけで嬉しいのです。

なお、Flashムービー（swf）は、iOSだけでなく最近はChromeでもデフォルトでは動作しなくなってしまいましたが、少し前のバージョンからAnimateCC（FlashCC）は、HTML5のCanvasとCreateJSでの書き出しに対応しているので、新規に作成する場合は特に問題になることはありません。
IEでもよほど古いバージョンでなければ動作しますし、特に「ブラウザ間の差異がない」というのは、制作者としては非常にありがたい環境です。

今回ご紹介いただいた宇都宮さんのワークフローは、

1. PhotoshopやIllustratorでイラストを作成
2. Spineでアニメーションパーツを作成
3. AnimateCCでアニメーションを仕上げ
4. HTML・CSSを整形

という流れになっています。
Flashをお絵かきツールとして使っていた私の感覚とは違い、AnimateCC（Flash）は動きをつけるためのツールとして使用されています。

ここでポイントになるのが「Spine」というツールです。
このツールは、画像をメッシュで分割し、ボーン（骨組み）を追加して動かすことができる機能を持っています。
Photoshopのパペットワープのようなものですが、パペットワープは変形させるだけなのに対し、Spineはその変形過程がアニメーションになります。

実際に制作されたサイトを見ていただいたほうがわかりやすいですね。
こちらのサイトのメインになっているアニメーションをご覧になってください。
「もっと陶芸に“遊び”を！」 陶芸家 芸林 晶子 GEIRIN AKIKO

手は静止画で描かれています。
これを、Spineを使ってメッシュとボーンで丸めたり広げたりするアニメーションにします。
作ったアニメーションを、連番.png に書き出してAnimateCCに取り込み、細かな動きをつけておられるそうです。

ベクターのイラストを作成してアニメーションにするという従来の手法ではなく、アナログタッチのイラストや写真などをアニメーションにできるというのが魅力的だし、実際に作ってみると非常に面白いです。

昔のFlashもそうでしたが、アニメーション制作において非常に直感的に動きをつけることができるのがAnimateCCの魅力です。
ちょっとしたアニメーションを作るのに、grantやgulpなどで仮想環境を用意してJavaScriptのライブラリを入れてスクリプトを書いて・・・みたいな本質的ではない作業や、ちょっとした動きの変化を数値で指定するといったことなどを、ツールが自動化してくれるというのは誰にとってもメリットだと思います。

セッション中、私は、しばらく忘れていた「Flashで初めて絵が動いた時の感動」を思い出して、とてもワクワクしました。

そういえば・・・セッションタイトルには「動くサイトにプログラムが必要な時代は終わった」とありますが、Flashが出てきた当時は動くサイトにプログラムは必要なかったんですよね。
Flashというツールで、デザイナーが画面上で絵を描いて、マウスで動かしたり変形したりして、直感的にアニメーションが作れたんです。
しかも、ベクターグラフィックですから多様な画面サイズに対応でき、フォントが埋め込めるので文字の表現力とアクセシビリティを同時に実現でき、ブラウザ間での差異も無い。
まさに今のWebが求めていることをすでに何年も前に実現していたのがFlashアニメーションだったのに・・・そう思うと、残念でなりません。

宇都宮さんのスライドは、こちらをご覧ください。

様々なサービスと融和するツール、　Skecth新機能、デザイン制作ワークフローのこれから

最後のセッションは、今回の勉強会の言い出しっぺである、ピクトロンウェブプランニングの杉山敦さんです。
第1回でも同様のテーマで様々なサービスやツールをご紹介いただき、非常に面白かったセッションでしたが、今回は第1回のダイジェストを基本に、そこからさらに進化したサービスやツール、特にSketchの新機能を中心にお話ししていただきました。

Sketchの新機能の中では、レスポンシブデザインのための新機能「Smart Resizing」が非常に魅力的でした。
Gitプラグインはちょっと・・・という感じでしたが、CRAFTプラグイン、コラボレーションツールなども面白そうです。
ただ・・・Windows版がない（リリース予定も無さそう）のは私にとっては致命的です。

AdobeがおそらくSketchに脅威を感じて開発してるんじゃないかと思われるプロトタイピングツール「Adobe XD」についてもご紹介いただきました。
まだまだ開発途中のものですから機能不足ですが、注目度も高く、かなりの頻度で新機能が追加されています。
Adobe XDも現在Windows版はありませんが、2016年中のWindows10対応が予定されているので、こちらは非常に興味があります。

第1回から杉山さんが通して話をされているのは

• アプリを所有していなくてもコマンドラインからデータやレイヤーにアクセスできる方向に向かっている
• だからといってデザイナーもコマンドラインを使えというのではなく、この流れに対応したアプリやサービスをうまく使っていけばいい
• コラボレーション・プロトタイピング・バージョニングと

といったところです。

杉山さんのスライドはこちらです。

なお、杉山さんのスライドの中で「AdobeCCのWebサービスにおいて、Extractが2016年6月に終了」と書かれていますが、ユーザーからの要望に応えて2016年8月に復活しました。
Adobeによれば、利用者が少ないから終了させたらしいので、否定的な意見ばかりでなく、肯定的な意見を言うのもユーザーとしては大事なんだなと思いました。

復活したAdobe CC Extract! その終了から再開までの経緯 | それいけ！フロントエンド

まとめ

SketchとAdobeXDを中心に、Webデザインワークフローの進化はますます進んでいるように思います。
ただ、今回のセッション全体を通して思ったのは、新しいものを追いかけるだけでなく、自分の価値を高めるワークフローを手に入れることが重要なのだなと言うことです。
完山さん、高橋さん、宇都宮さん、それぞれの方のアプローチの違いは、それぞれに興味深く、大変刺激になりました。
そして、それらを俯瞰して考察し、わかりやすく解説できる杉山さんは、やはり凄いというか、私と同年代なだけに「この歳で本当によく勉強しておられるな」と感心するばかりでした。

私の目下の注目は、Bracketsを内蔵し、SASSにネイティブで対応し、ExtractによるAdobeツールとの連携を強化して、再びWeb制作ワークフローの中心に返り咲こうとしているAdobe Dreamweaverの動向です。
新機能が盛り込まれたバージョンが正式リリースされれば、非常に大きなインパクトを与えることは間違いないと思っています。

デザイナー目線でデザインワークフローについて語られるこの勉強会、第3回の開催は未定ですが、開催されたら、ぜひ参加したいと思っています。