先週末に京都で開催されたグラフィック関係の勉強会に参加させていただきました。
グラフィック系の勉強会に参加することはあまり無いので大変勉強になりました。
第1回 D2D WEBグラフィックツール今昔 ～デザインワークフローの転換～
https://d2draft.doorkeeper.jp/events/40613
concrete5のテーマを制作している方に出会えたり、デザインで独立しようとする方に出会えたり、出会いや学びの多い勉強会で、京都まで足を運んだ甲斐がありました。
感想
デザイン界隈では当たり前なことかもしれませんが、以下のIllustratorの機能を活用することでよりWEBへの親和性を高めるという話は大変勉強になりました。
・スウォッチ
・段落スタイル
・文字スタイル
・グラフィックスタイル
上記機能を活用することで、
- デザインの表現をモジュール化(部品化)してチーム内・会社内での共有することで生産性を高めること。
- お客様とのコラボレーションツールを使ってコミュニケーションコストを下げ、成果物の精度を高めること。
- Adobe CC からそういった共有化やコラボレーションツールとの連携が強化されていること。
IllustratorやPhotoshop、更にそれを取り巻く環境がこんなにも進化しているとは。と感じた勉強会でした。
[コラボレーションツール]
・アボカド
https://avocode.com/home/
・ゼッペリン
https://zeplin.io/
スライド
杉山さんのブログにスライドがアップされていました。
D2D WEBグラフィックツール今昔 デザインワークフローの転換 v1.0 Note 2016/4/2（土）
#1 Illsutratorでのウェブデザインワークフロー例の紹介
http://prezi.com/mojhh25kig3u/?utm_campaign=share&utm_medium=copy
#2 Photoshop,Illsutrator,アセット管理のワークフロー例の紹介
https://docs.google.com/presentation/d/1ipdFr4nN0gbHdiJvKLV2LVcISAvMGbrmXSbCvfNaA-8/edit#slide=id.g1289d4a935_2_156
#3 Sketch,Experience Design,コラボレーションサービスのサマリー
スライド：webdesign-workflow.pdf
以下、当日にメモした内容です。
#1 Illsutratorでのウェブデザインワークフロー例の紹介
川井昌彦さん
Cherry Pie Web
http://www.cherrypieweb.com/
Fireworksを相当古いバージョンの頃から使っていて、最近ではIllustratorとPhotoshopでWEBデザインをしているとのこと。
Fireworksを未だに愛用している私からすると、まさに私が進む道を照らしてくれた内容でした。
なぜIllustratorを使うのか？
・元々はFireworksを使っていた
・写真はPhotoshop、ロゴ・地図はIllustratorで作ってた
・Fireworks開発中止の連絡があってからIllustratorがFireworksの代わりになった
理由：元々紙のデザインを作っていたから
・IllustratorはHTML+CSSとの親和性が高い
・画像がリンクで配置できる（画像も、ドキュメントの解像度に依存しない）
・スタイル機能は、外部CSSの考え方に近い
・アピアランスは、CSSで表現できる
・画像の書き出しだけでなく、HTMLで表現する部分のデザインも出来る
サンプルサイト
非公開のためURL掲載できませんが以下の内容で構築されておりました。
・WordPressで構築
・レスポンシブ
・Bootstrapベース
・多言語（日本語・英語・中国語・韓国語）
Illustratorデータを紹介（CC2015）
・お客様にデザインを見せる必要があるのでモックアップをIllustratorで毎回作る。
・アートボードを2つ作る
・PC用、スマホ用
→ スマホ用はレイアウトを確認するのみ。書き出しにはPC用を使用する。
・Bootstrap用の背景を設置（960px幅）
→ これに合わせてデザインを作成していく
・レイヤー
・ヘッダーレイヤ
→ 多言語ボタンは国旗のみ書き出している
→ 翻訳ボタンという【グラフィックスタイル】を作っていて、CSSを書き出して？いる
→ 多言語サイトなので、画像ファイル名のサフィックスに_jaJPなどを設定している
・各ページのレイヤ（全ページを一つのアートボードにレイヤを分けて設置している）
→ 別々のファイルにしてしまうとスタイルが共有できないため
→フッター・バナー・グローバルメニュー・スライドショーなども各レイヤに配置してある。
→ あるページはスライスを一つも書き出していない。
→ でもお客様に見てもらうためにテキストを流し込んである
→ 見出しなどは【段落スタイル】を設定していてCSSと連動している
→ フォントファミリーにはメイリオを設定していて実際にブラウザで見える画面と同様に確認してもらっている
→ HTMLの構造を意識したデザイン
→ 使う画像は高解像度の画像をリンクしてはっている。
制作時に注意していること
・イラレの設定をWEBデザインに適した設定にしておく
→ 新記事にプロファイルをウェブにしている。
・配置画像は、すべてPSDにしてリンク
埋め込まない、画像補正等はすべてPhotoshopで行う
・画像で書き出す部分とHTML+CSSにする部分はパッと見てわかるようにする。
・レイヤを活用してわかりやすく
・HTMLにする部分は「文字組みアキ量設定」を適用しない
・スウォッチ、段落スタイル、文字スタイル、グラフィックスタイルを積極的に使う
・スライスは一つのレイヤーにまとめる（重なるスライスの前後面を操作しやすい）
・レイヤーはHTMLの入れ子を意識してまとめる
#2 Photoshop,Illsutrator,アセット管理のワークフロー例の紹介
完山 祐毅（もとやま ゆうき）さん
motoyamayuki.com
http://motoyamayuki.com
無駄なくスマートな制作をされているなぁと感じる内容でした。
画像アセットの話とかProttの話とか、名古屋の田舎者には衝撃的でした。
制作フロー
・Illustratorはprottでワイヤーフレームを作る
・Illustratorでデザイン制作
・Plottoでお客さんに確認
Illustratorでデザイン
・アートボードでページ管理
→デザインが完成した時に、PNGでページ全体を書き出し→アートボード毎に作成にチェックをして書き出し
→クライアントに確認してもらいやすい
・シンボルでモジュール化
→ グローバルナビをシンボルとして登録
→ シンボルを編集するとすべてのアートボードの部品が変わる
→ 登録したいものを選択してシンボルに放り込むと登録できる
・グローバルカラー
→スウォッチ→色選択→編集するとすべての色が変わる
→色はスウォッチから設定する
→スウォッチメニュー→新規スウォッチ→グローバルにチェックを入れる
・AdobeStock
→AdobeStockで素材を探す
→ダウンロードするとIllustratorのライブラリに表示される
→カンプ状態で保存してクライアントOKが出たら購入する
Prottでクライアント確認
Prott
https://prottapp.com/ja/
・Prottで新規プロジェクト作成
・リンクを設定していく
・シェア→URLをクライアントに送る
・Prottで改善されるといい点
ページ内リンクには対応していない。
ページの背景が勝手に設定される
Photoshopでパーツ書き出し（画像アセットを活用）
・イラレファイルをコピーしてparts.aiとして保存
・書き出したい画像やアイコンだけを一つのアートボードにまとめる
・アイコンはグループ化しておく
・Photoshop形式にして書き出し
→ スクリーン・レイヤーを保持を選んでおくこと
・Photoshopでファイルを開く
→ レイヤー名をファイル名に設定 header.pngなど
・ファイル→生成→画像アセット
parts-assetsフォルダに各画像が書き出される
・Photoshopのスクリプト「LayersRenamer」を使うと一括でレイヤー名を設定出来る
・Photoshopを保存すると自動で画像が書き出される
・logo.png8にするとPNG-8
・logo.jpg10にすると100％の圧縮率で保存
・logo.jpg,logo.gifとするとJPGと画像が生成される
・RETINA用に@2x的な書き出しも出来る
→ 画像はスマートオブジェクトにしておく必要がある
・Adobe Layer Nameスクリプトを使うと上記のレイヤー名に変更可能
Gyazoで確認
Gyazo
https://gyazo.com/ja
→ ソフトを立ち上げてエリアを選択すると画像がサーバにアップされる
→ その画像をクライアントに送って確認してもらう
→ オンラインで注釈をつけたり出来る
JPEGminiで画像ファイルを圧縮
http://www.jpegmini.com/
#3 Sketch,Experience Design,コラボレーションサービスのサマリー
D2D主催者
杉山 敦さん
pictron.net
http://pictron.net
Illustrator、Photoshopを製品単体で使うのではなく、他のサービスとコラボレーションして使う方法なんて考えたことなかったし、できるとも思っていませんでした。
杉山さんのセッションを聞いて、これからのデザインは、自分で煮詰めるものからオープンに知恵を出し合ってするものに変わっていくんだなと感じました。
avocode(アボカド)やzeplin(ゼッペリン)のように、デザイン業界のGithub！的なサービスがこれから更に増えていくんだろうなぁ。
聞くのに必死過ぎてメモが不完全ですみません。
デザインの未来を感じられるセッションでした。
データ構造の公開とコマンドラインインターフェースの実装
新たにデータフォーマットに対応した
コラボレーション
プロトタイピング
バージョニング
オープンAPIによる連携
Sckech
Photoshop
slack
Photoshop CC 2015の話
画像アセットは書き出し機能ではない
Generatorテクノロジーという概念
BracketsでPhotoshopの画像を表示させながら連携できる
SlackでPhotoshopデータを共有出来る
Extract機能がある物同士は連携できるっぽい
Sketchの話
https://www.sketchapp.com/
いい点
・動作が早い
・グラフィックデータが軽い
・有用なプラグインが開発されている
・データ、APIがオープンで連携サービスが多い
・書き出しの階層化はスマート
→ 書き出しの設定を複数出来る。1倍書き出しと2倍書き出し（RETINA用）をまとめて出来る
微妙な点
・ビットマップ編集は途上
・パスツールに慣れが必要
・Windows版がない
・結局Adobeは必要
プラグイン
SketchGitプラグイン
→ Gitとの連携が容易（プレビュー用のデータも自動で作ってGitにアップしてくれる）
→ 過去との差分も見やすい
→ 変更をウォッチして自動的にGitにアップするツールがあったりするがデザインの性質上おすすめできない
CRAFTプラグイン(無料)
https://www.invisionapp.com/craft
レイアウトの繰り返しなどを自動化してくれる
PhotoshopCCにも入れれる
コラボレーションサービス
・Adobe Experience Design CC
CRAFTの影響を結構受けているみたい
・アボカド avocode.com
https://avocode.com/home/
Sketch、イラレで作ったデータをアップする
ローカルアプリと連携することで書き出しが出来る
LESSやSASSにも対応している
コメント機能などがあり、コラボレーションしやすい
バージョン管理もしてくれる
・ゼッペリン zeplin.io
https://zeplin.io/
Sketchで作ったデータを入れるとオンラインでPNGやSVGで書き出しできる
LESSやSASSにも対応している
Invite機能をつかえばコラボレーションしやすい
・ウエイク
https://wake.com/
上記と似たサービス
プロトタイピングツール
・インビジョン inVision
https://www.invisionapp.com/
→ 画面上でメンバー間でやり取りできる
・marvel
https://marvelapp.com/
・Prott
https://prottapp.com/ja/
・Adobe Experience Design CC
http://www.adobe.com/jp/products/experience-design.html
セッションまとめ
これからの制作環境はオープンで繋がることがキー
でもツールが進化したからと言ってアイデアをだしてはくれない
デザインをサポートしてくれる自分にとって楽な技術を選択しましょう。
長々としたメモですみません。
勉強会の後の懇親会も楽しかったです。京都また行きたい！
ありがとうございました！
![[WordCamp Osaka 2018] Gutenbergで作るランディングページ 改定版](https://i0.wp.com/onocom.net/blog/wp-content/uploads/2018/06/cddd3f0f60b2f023d6baf9c7cdcc7122.png?resize=825%2C510)
