ワークフローについて考える

Pocket

最近、Fireworksから卒業するべく、なるべくIllustratorを触るようにしているのですが、ワークフローを変えてみたときって、「他の人って、ここの部分どうしてるんだろう…」とか「他の人のデータやワークフローを見てみたいなー」とか思いますよね…?

そんなモヤモヤしていたときに、ちょうどD2Dさんのイベント「第1回 D2D WEBグラフィックツール今昔 ~デザインワークフローの転換~」が京都コワーキングスペースcotoさんであったので、さっそく土曜日に行ってきました。

IllustratorとWebデザインとで相性がいい所

今回はIllustratorで実際デザインしたものを見せてもらったのですが、そこで、Webと相性が良い機能がいくつか紹介されていました。

  • カラーはグローバルスウォッチにする
    これで、色を変更しても一括変換をできる
  • 全ページ共通要素(ヘッターやフッター要素など)はシンボル化する
  • 画像は埋め込みではなく、リンクで配置
  • 段落スタイル・文字スタイル・グラフィックスタイルを積極的に使う
  • CSSで表現できるものをアピアランスで表現
    (なるべく画像は使わない)

他の方のAiの使い方をみて感じたこと

自分との使い方と比べてみて、明らかに違うなと思ったのがいくつかありました。

  • レイヤー数が多い
  • ガイドをきちっと引いてる
  • 段落スタイルと文字スタイルをうまく利用している

レイヤー数が多い

レイヤー数が多いというか、私がただ、2レイヤー(背景とコンテンツ)だけですましてたので、それに比べると多いなという印象でした。
HTMLの入れ子を意識しつつ、きれいにレイヤー分けされているのを見て、レイヤー綺麗な人いいな…と思いました。

ガイドをきちっと引いてる

ガイドの引き方って結構個性がでるところですよね。
Bootstrap用のガイドで12分割してて、きっちりしてる!と思いました。
私も以前、960 Grid Systemを使いつつ、ガイドを引きまくっていたのですが、ガイドがあるとそれに沿ってしかデザインできない気がして、最近では引くとしても2本くらい(960pxを中央にどんとおくだけ)しか引いてなかったりします…
なんで、この2本を引くのかというと、タブレットで表示するとき、どうしても見せたいコンテンツは960px内に入れたらいいのではないだろうかと思い、目安で引いてます。(デザインするときはほぼ非表示にしてます)

段落スタイルと文字スタイルをうまく利用

段落パネルと文字スタイルは使おうと思いつつ、どう使えばいいのか、いまいち分かってなかったので勉強になりました。

段落スタイル
見出し、本文、キャプションなど部分的に使うもの
CSSで言うblock要素(p、h1、h2、h3など)

文字スタイル
太字・イタリック・差し色・下線などピンポイントで使うもの
CSSで言うinline要素(span、strong、emなど)

「文字スタイル」は[文字]パネルでの設定を、「段落スタイル」は[段落]パネルでの設定というわけでもないので、はじめはちょっと混乱しますよね・・・。
文字スタイルは、段落スタイルよりも優先されるので、段落スタイルを変更しても文字スタイルはそのままだったりします。

ちなみに「グラフィックスタイル」については、一つのテキストボックスに、一つの設定しかできないので、文字組というより、アピアランス用になります。

紹介されていたツール

今回、勉強会で紹介されていたツールについて、ざっと書き出してみました。
参考サイトも合わせて書いておくので、どういうツールか気になる方はそちらをどうぞ。

InVision

InVision

Prott

Prott

Marvel

Marvel

Slack

Slackチャットツール。
他のツールと連携が豊富なので、作業者同士のやりとりだったり、何か自動化させて連絡するときに便利。
(ただ、日本語版がないのでお客さんとのやりとりであれば、 SlackよりChatWorkの方がチャットツールとしては良さそう…)

Zeplin

ZeplinSketchで作成したデザインファイルを元に、コメントやスタイルガイドなどを共有できる。
お客さんとというよりは、デザイナー×コーダー間のためのツール。
これで無料とはすごい!Mac, Win, Linux対応、デザインの指示書やスタイルガイドを簡単に作成・共有できる -Zeplin

Adobe Experience Design(XD)

Adobe Experience Design

Adobeから最近リリースされた、Webデザインに特化したツール。
UIを制作する「Designモード」と、画面遷移や画面遷移エフェクトなどを設定+プレビューができる「Prototypeモード」の2つのモードがある。
アドビの新しいUXデザインツール、Adobe XD (Preview 1) 登場!使い方をクイックに解説

Brackets

Brackets
HTML、CSS、JavaScript用コードエディター。
(※PHPなどほかの言語も一応ハイライトできるっぽい)

エディター上でPSDファイルを開ける。(Aiは出ないのかな…)
PSDデザインカンプからのコーディングに超便利!Extract for Brackets
WordPress開発が捗りそうなBracketsおすすめ拡張40個まとめ

Craft

Craft

UIデザインでよく使うであろうパーツ(ダミー)を挿入するツール。PhotoshopとSketch3に対応。
ダミー作成に超便利!Sketch 3に機能を追加するInVision Craftを試してみた。

Avocode

Avocode

PhotoshopやSketchで作ったデザインデータに対し、CSSやスライス出力してくれたり、ブラウザ上でPSDを表示できる便利ツール。
正式版がリリースしたAvocodeの便利な使い方をご紹介

いろんな便利ツールがあるけれど…

これを使えば、作業工数が減る!」というというよりは、「これを使ってもっとコミュニケーションを円滑に取ろう!」というツールかなと思います。

便利なツールはいろいろ出てきてはいるものの、それを使えばデザインスキルが格段に上がるわけではないですしね…。

デザインツールについて
今後Webでデザインするのであれば、「Illustrator」と「Sketch」が自分には合ってるように感じました。

Illustratorについては、高解像度の端末や印刷物などを視野にいれてのこともありますが、何より自分は、アイコンやイラスト、フォント周りに力を入れていけたらなと思っているので、Illustratorがメインかなと感じています。

Sketchの方は、Fireworksを使っていた人はSketchはすごく馴染みやすいと聞いたのと、他のツールと連携できる+Photoshopより軽いことから、将来的には使っていけたらと考えています。
ただ、Macしか出てないというのは、やはりひっかかりますね…。
XDについては、気になる機能はありつつも、もう少し様子見といったところでしょうか。

最後に

いろんなツールを紹介していただく中で、最近、自分の制作環境がある時期からほとんどアップデートできてなかったなと反省しました。
新しいツールは仕事で使ってみない限り、なかなか覚えないので、どんどん使える隙を伺いつつ試していきたいです。

追記
当日デザインワークフローについてお話ししてくださった杉山さんが、ブログにて詳細記事をあげてくださっているので、気になる方はそちらもどうぞ。
2D WEBグラフィックツール今昔 デザインワークフローの転換 v1.0 Note 2016/4/2(土)

中の人について

matsui
大阪でwebのお仕事をしています。
ブログでは最近学んだことや、勉強会に参加したことを書いてます。