Cherry Pie Web > ブログ > 技術記事 > 第1回 D2D WEBグラフィックツール今昔～デザインワークフローの転換～でお話してきました

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

2016年4月8日

—

（2016年4月14日　関連リンクを追記しました）

2016年4月2日（土）に、京都のコワーキングスペースkotoで行われた勉強会、「第1回 D2D WEBグラフィックツール今昔～デザインワークフローの転換～」でスピーカーとして参加させていただきました。

この勉強会は、D2DRAFTのイベントとして、ピクトロンウェブプランニングの杉山さんが言いだしっぺで開催されました。

今回は、Webデザイン制作ワークフローという事で、コーディングの前段階の話になります。
ビジュアル制作の話です。
この段階の話って、意外にオープンに話をする機会って無いですよね？
セミナーや参考書やブログ記事などをみても、結局は機能の説明になってしまっていて、それを実際に自分の作業に活かすにはどうすればいいのかピンと来なかったりしているんじゃないでしょうか？

「とりあえずFireworksやっとけ」みたいな感じだったWebデザインツールも、Fireworksの開発が終了し、最新のMacOSでは動作しなくなるということで、他のツールへの乗り換えを迫られています。
代替ツールとしては、Photoshop、Illustrator、Sketch などがありますが、本当に代替として使えるのかは相性もあるので使ってみないとわからないし、かといって、いろいろ試しているほどの余裕も無かったりします。
また、プロトタイピングツールだのコラボレーションツールだのといった新しいツールの話を聞いても、それが自分にとって何の役に立つのかわからないし、なんとなく今のやり方で間に合っているし、なんて思う事も多いのです。

そんな混沌とした状況を少しでもなんとかできればということで、とりあえず手持ちの知識を出し合おうという事で開催されたのが、今回の勉強会です。

当日の内容につきましては、杉山さんのブログに、簡潔かつポイントを押さえたレポートが掲載されています。
D2D WEBグラフィックツール今昔デザインワークフローの転換 v1.0 Note 2016/4/2（土） | pictron web planning ピクトロン・ウェブプランニング

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

今回の勉強会の最初のセッションは、私が務めさせていただきました。
内容はこちらに任されましたので、実案件で使用したIllustratorデータを見ながら、私がどのようにIllustratorでWebデザインをやっているのかをお話させていただきました。
当日のスライドはこちらです。（事情があって実データは公開できませんのでご了承ください）

今回のセッションでは、セミナー的な話をするというよりも、私が普段どういう感じでデータを作っているのかと言う話をしましたので、セッション直後の会場の雰囲気は少しポカーンとした感じでした。（笑）
その反応がちょっと心配だったのですが、セッション後のフリーディスカッションの時に、具体的な制作方法や考え方についての質問があり、少し安心しました。

Illustratorの構造は、HTML+CSSと親和性が高い

私はFireworksユーザーだったのですが、今はIllustratorでWebのビジュアル部分を制作しています。
その理由として一番大きかったのは、Illustratorのデータ構造が、HTML+CSSに似ていると考えたからです。
画像が「リンク」で配置できてデータ自体は軽くできる事、スタイル機能やグローバルカラーが、外部CSSと考え方が似ていることなどがポイントでした。

今回実例に出した案件は、WordPressで構築したサイトで、レスポンシブデザイン、bootstrapを採用、多言語（日本語・英語・中文簡体・中文繁体・韓国語）というものです。
これをパーツ単位ではなく、ページ全体のレイアウト制作までIllutratorで行いました。
「画像の書き出し」だけではなく、「HTMLで表現する部分まで含めたデザイン」を行っています。

ポイントは、HTMLの構造とレイヤー構造を対応させることと、cssとスタイル機能を対応させることです。

私がビックリしたのは、Illustratorを使用している方でも、「グローバルカラー」、「スタイル」、「シンボル」を使っておられない方が多いという事です。
私は、Illustratorを使用する最大の理由がこれらの機能だと思っているんです。
というか、これらの機能を使わないでIllustratorを使うと言うのは、携帯電話で電話帳機能を使わないで毎回ダイヤルしているくらいの感覚ですね。
「スタイルを、cssのclassに対応させてデザインしている」という説明をして、スタイルを変更すると適用されている部分が一気に変わるという操作を実際に行うと、「なるほど」とわかっていただけたようでした。

最近、「PhotoshopからSketchに乗り換えて良かった」というブログ記事を多く見かけるのですが、そこで挙げられているポイントのほとんどがIllustratorにもある（しかもIllustratorのほうが優れている）機能なので、先にIllustrator使ってほしかったなぁと思う事も多いのですよね。

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

続いては、京都在住のフリーランスWebデザイナー完山（もとやま）さんによる、アセット管理を中心としたワークフローとツールの紹介のセッションです。
制作の流れだけでなく、クライアントとのやりとりについてもわかりやすくお話していただきました。

当日のスライドは下記のリンクからご覧ください。
Photoshop,Illustrator アセット管理のワークフロー

完山さんのワークフローの特徴的な点は、「Illustratorでレイアウトした後でPSD（Photoshopデータ）に書き出す」というところです。
私のワークフローとは逆の流れですし、DTP系の方にはちょっと理解できない流れだと思いますが、Photoshopの画像アセット機能を使いたいという事と、PSD形式でないと他のツールと連携が難しいというところから来ているのだと思います。
（この点は、次の杉山さんのセッションで詳しく説明がありました）

Illustratorでページレイアウト

Illustratorでのページレイアウトでは、ページごとにアートボードを作成し、共通パーツは「シンボル」を使用します。
この方法だと、アートボード全部を俯瞰して制作できる点と、書き出しの際にアートボードごとに書き出せるというメリットがあります。
アートボードがページに対応しているというのが、プロトタイプの作成時に活きてきます。
これは「なるほど」と思いました。私も次の案件で採用してみようと思います。

Prottでプロトタイプ作成

アートボードごとにPSDに書き出されたデータは、プロトタイピングツールのWebサービス「Prott」にアップロードします。
Prottでは、PSDの任意の場所から他のページへのリンクが非常に簡単に設定でき、ページ遷移のシミュレーションを行えるので、URLをクライアントに教えて実際の動きを確認してもらったりコメントをつけてもらうことができます。

これまででも、Foreworksの標準機能でリンクを設定してページ遷移のシミュレーションができました（リンクが機能するPDFとして書き出せる）し、Acrobatを使えば、PSDを読み込んでPDFとしてまとめ、ページ間にリンク設定することができましたが、お世辞にも使いやすいものではありませんでした。
それらに対しProttは、チームやクライアントとの共有がしやすいこと、コメントがつけられること、スマホアプリがあること、UIが優れていて使いやすいことなど、様々なメリットがあります。
日本の会社によるサービスなのも、クライアントが参加しやすくて良い点かと思います。

Photoshopの画像アセット

画像の書き出しは、Photoshopに最近搭載されて話題の「画像アセット」で書き出します。
複数画像やサイズ変更も設定できるので、Retina対応やスマホ用にサイズを変えて一括で書き出すことができます。
レイヤー名がファイル名やオプションを示すので、レイヤー名を便利にリネームするスクリプトを使用すると良いそうです。
また、書き出された画像は、「JPEGmini」というツールで画質をほとんど落とさずにファイルサイズを減らすことができます。

Gyazoで画面の確認をスムーズに

他に、クライアントとの確認用に「Gyazo」というWebサービスを使用されているそうです。
さくっとキャプチャしてすぐにシェア出来てコメントをつけたりできるので、メール添付などに比べてスピード感が圧倒的に違います。
動画もキャプチャできるのが凄いですね。
ちなみに、Gyazoの運営会社 NOTA Inc. は京都にあり、あの「紙copi」を開発した方の会社のようです。

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

3つ目のセッションは、杉山さんによる様々なサービスの紹介と制作ワークフローについてです。

当日のスライドは下記のリンクからご覧ください。
WEBグラフィックツール今昔～デザインワークフローの転換～

最近のWeb制作の流れは、様々なツールを横断的に使用して、チームやクライアントと情報を共有しながら進めていくようになっています。
従来は、デザインデータを見るためにはアプリケーションを用意するか、閲覧用に書き出すことが必要でしたが、アプリを所有していなくてもデータにアクセスできるようにすることで、コラボレーションしやすくする流れが出てきています。

注目すべき3つのアイコン Photoshop、Sketch、Slack

最近、Adobe Creative Cloudの様々なアプリで、「Extract」という機能を良く見かけると思います。
これは「単なるデータ書き出し」ではなく、「アプリを立ち上げなくてもデータにアクセスできる技術（Generatorテクノロジー）」だと考えることが、今後の流れを考えるうえで重要になってきます。
つまり、他のサービスやアプリが、PSDデータのレイヤーに直接アクセスして、スタイル・位置や大きさなどの情報・テキストなどを取り出すことができるようになっているのですね。

「Sketch」は最近注目されているベクターグラフィックツールですが、PSDよりも多くのサービスからアクセス可能になっています。
使い勝手などの評判も良いのですが、残念ながらWindows版がありません。
しかし、他のサービスからデータにアクセスできるので、デザイナー以外はWindowsでも問題ありません。

「Slack」はチャットサービスですが、このようなデータや他の多くのサービスと連携できるために、情報を集約させることができます。
これがあればメールはいらないと言われるくらいのサービスですが、日本語対応はしていません。

コラボレーションツールとプロトタイピングツール

これらをうまく組み合わせた「クラウドサービス」も、いろいろ出てきています。

PSDやSketchを読み込んで、データを取り出したり、共有したり、コメントしたりする「コラボレーションサービス」
ページ遷移などを簡単に作成して確認できる「プロトタイピングサービス」

これらのサービスのうち代表的なものについて、杉山さんが実際に使用されて紹介していただきました。
上記に示したスライドでも、それぞれのサービスの特徴をまとめていただいています。

プロトタイピングツールとしては、最近発表された「Adobe Experience Design」についても言及がありました。
このツールは、昨年末に私が参加した「リクリセミナー」で紹介され、デモの凄さに参加者が息を呑んだ「Project Comet」の正式版です。
リクリセミナーの様子は、こちらの記事にレポートを書かせていただいています。
Adobeの轟さん、頑張っておられるんでしょうか？　こうして形になってきて、私は大変うれしいです。
第26回リクリセミナー「天下分け目のベクター祭り SVGじゃ！ Illustratorを持てい！」に参加して、ちょっと嬉しくなりました

まとめ

今回は第1回という事もあり、特に結論を出すのではなく、様々な意見を出し合って今後につながっていけばいいという考えで開催されました。

セッション後のフリーディスカッションや懇親会で参加者の方々とお話しする中で私が感じたのは「ツールやサービスの進化に、制作者が全然ついていけてないのではないか」ということでした。
私は登壇者と言う立場で参加しましたが、完山さん、杉山さんのセッションで出てきたツールやサービスの多くは使ったことがなく、名前すら初めて知るようなものもありました。

普段の業務に追われている中では、まず何かを改善しようと思わないでしょうし、改善するにしてもどこにポイントがあるのかわからないのではないかと思います。
そんなときに、他の方のワークフローを見たりすることで、自分の制作ワークフローの中にある改善点に気づいたり、見直そうというキッカケになりました。

私が個人的に気になっているのは、Adobeが「Photoshopにあらゆる機能を詰め込みすぎ」ということです。
PhotoshopだけでWebデザインをやるのは、どう見ても無理があります。
現状、Generatorテクノロジーの中核に「PSD」が置かれているのも納得できません。Photoshopをゴリ押ししすぎです。
本来ならその立場にいるのは「PDF」なんじゃないかと私は思っているのですが。

自分が登壇したからというわけではありませんが、思った以上に面白かった勉強会でした。
今後、2回、3回と続けていくことで、D2DからWeb制作ワークフローの新しい形が見えてくるといいなと思いました。