第26回リクリセミナー「天下分け目のベクター祭り SVGじゃ！ Illustratorを持てい！」に参加して、ちょっと嬉しくなりました

みなさん、こんにちは。川井昌彦です。
好きなAdobeは Fireworks です（笑）

というわけで、2015年11月28日に大阪で行われた、第26回リクリセミナー「天下分け目のベクター祭り SVGじゃ！ Illustratorを持てい！」に参加してきました。

インターネットがありとあらゆるデバイスで表示されるようになり、従来の小さな点の集合で画像を表示するラスター形式（JPEGなど）だけでは限界を感じてきたところで、座標と方向で図形を描くベクター方式（SVGなど）が注目され始めています。
そして、ベクター形式を扱うソフトウェア「Adobe Illustrator」をWebデザインツールとして使用する流れも出てきました。

私は元々DTP出身という事もあり、Illustratorは5.5（CSじゃありませんよ、無印の5.5です）からずっと日常的に使用しています。
WebデザインツールとしてはFireworks（こちらは、バージョン1から）を使用していたのですが、CS6を最後に新規開発が終了した後、多くのデザイナーがPhotoshopに移行するのをしり目に、IllustratorでのWebデザインを始めました。
2014年5月のWordBench神戸「デザイン教えて君」でデザインについての話をさせていただいたときに、「今後のWebデザインはIllustratorが主流ですよ」って言いきったものの、PhotoshopにばかりWebデザイン機能を追加してきているAdobeの方向性に疑問をもっていましたが、私の方向性が間違ってなかったんだと確信することができたのが、本日のセミナーでした。

まだピクセルで消耗してるの？（仮）- 始めよう、IllustratorですっきりWebデザイン –

最初のセッションは、寿司ゆきで大人気の、あわゆきさんです。
WebデザインツールとしてPhotoshopが多く使われている現状にあって、ベクターが扱えるIllustratorが如何にWebデザインに適しているのかということをわかりやすく話していただきました。

Illustratorデータは様々な要素をすべてUIから「数値」としてとることができるので、コーディングの時にすごく便利です。
グラデーションもシャドウなどの効果も透明度も、アピアランスで設定しておけばそのままCSSに反映できます。
また、ボタンやアイコンのバリエーションも、シンボル・スウォッチ・グラフィックスタイルなどでわかりやすく管理ができます。
これらはHTML／CSSと構造が似ていて、そのままコーディングに生かすことができます。

なんとなく感覚的に感じていたことをハッキリとした言葉としてとらえることができて、「そういうことか！」と心の中で思う事しきりでした。

IllustratorをWebデザインツールとして使用するうえでの設定や操作のポイントについても解説がありました。

• ピクセルプレビューを使いつつピクセルグリッドに整合は使わない
• 拡大縮小時に線幅や効果は追従させない
• キー入力設定は 0.5px にする
• パスファインダーはoption（alt）付きで複合シェイプに元のパスを残す
• 複製・移動・回転にはアピアランスを使う
• シンボルと9スライスを活用する
• 定規の原点は絶対動かさない
• バウンディングボックスに頼らない（使わないという事ではない）
• 変形パネルを常に見て数値に小数点がつかないようにする

こういったことを心がければ、単にコーディングしやすいだけでなく、修正に強く、ずっと使えるデータになります。
実践的で、とても使えるTipsばかりでした。

Webにおいて「テキスト」は非常に大きなウェイトを占めています。
ですから、DTPをやってた人ならわかるんじゃないかと思うのですが、感覚的に「Photoshopでテキストメインのコンテンツを扱う」っておかしい気がしていたんです。
Webデザインを画像処理ツールで行うなんて、そもそもの考え方として間違っているのではないか・・・そういう悶々とした想いがあったのですが、あわゆきさんのセッションで、そんな気持ちがパーッと晴れて嬉しくなりました。

今日からは堂々と「WebデザインならIllustratorでしょ！」って胸を張って語ることができそうです。

SVG MANIAX in Osaka

2つ目のセッションは、株式会社まぼろしの松田さんによる、SVGのお話です。
タイトルにはMANIAXとありますが、初心者でもわかりやすい、とても基本的なところからの解説でした。

まずはSVGを扱う上で重要な「ViewBox」の話。
SVGでは、表示サイズ（width、height）と座標系（viewbox）を指定しますが、この2つの関係をしっかりとらえておくことが重要なのですが、ここでハマってしまう方が多いようです。
松田さんの解説では、viewboxはIllustratorでいえばアートボードということでしたが、私は「シンボル」と思えばいいのかなと思いました。
例えばシンボル自体は200pxで作って、配置するときは100pxに縮小したり300pxに拡大したり、縦横比を変形させたり・・・（でも、元のシンボルサイズは変わらない）という感覚です。
シンボルの元のサイズが「viewbox」、それを配置した際のサイズが「width, height」ということですよね。

次は、SVGの埋め込み方法についてです。
imgタグ・objectタグ・CSSでの指定といった「外部参照」もあるが、最もSVGの特性を生かせるのが「インラインSVG」だという事で、インラインSVGにした場合の特長を開設していただきました。
その特長、私にとってはちょっとした衝撃でした。

• SVGの中身はXMLであり、テキストを埋め込むことでアクセシビリティを確保できる。
• XMLなので各要素にもテキストが入れられる。（例えば、グラフの各要素にテキストを入れるなど）
  しかもスクリーンリーダーに対応させられる。
• 要素をモジュール化（シンボルのようなもの）することで同じ文書内で再利用できるのでファイルサイズが小さくでき、インスタンスごとにバリエーションが付けられる。

さらに、要素のモジュール化を活かして「SVG sprites」なんてことができるのが凄い。
これは、SVG内の各要素にタグを付けておき、HTMLからタグで要素を読み出せるというものです。
スライスとか書き出しとかしなくていいってことですよね？　もう、ワークフロー自体が変わってしまいそうです。

そして、SVGアニメーション。
SMIL（廃止予定）、CSS（扱いにくい）もありますが、SVG DOMという方式が良さそうです。
SVGがテキストベースであることを活かして、JavaScriptで属性を操作するのですが、SVG DOMはjQueryでは扱えないので、SVG用ライブラリを使うのが良いとのこと。
Adobe製の「snap.SVG」というライブラリが、jQueryライクで使いやすいようです。
そして、前のセッションで紹介されたあわゆきさんのイクラのお寿司のデータを使って、イクラがマウスでドラッグできるようにしたり、パスに沿って動くようにしたりといったデモをしていただきました。
デモでは簡単に扱っておられましたが、元データで扱いやすいデータ構造にしておくことが重要なんじゃないかと思います。

そして、実はIllustratorのオブジェクトをコピーしてテキストエディタにペーストすると、インラインSVGとしてペーストされるんですね。
XMLベースなので、エンジニアがコードで内容を変えられるところが大きなメリットです。
ちなみに、Dreamweaver CS5.5以降ではインラインSVGのタグや属性にコードヒントが出ますよ。

セッションの最後には、セミナー参加の際に募集された質問に答えていただくコーナーがありました。
Android対応やレスポンシブにするときのコツなどを教えていただきましたが、その中で私が重要だなと思ったのが、SVGを作るうえで心がけるポイントです。

• アンカーポイントを減らす
• アピアランスを多用しない（現状では分割されて重くなる→将来的に改善されるかも）
• 小数点以下の桁数を抑える
• SVGOMG（Webサービス）で最適化する
• フィルターは最小限に抑える
• レイヤー構造を綺麗にする
• レイヤー名を日本語にしない

勝ち鬨を上げよ！ベクター侍 大坂評定

本日の最後はトークセッション。
あわゆきさん、松田さんに加え、ベクターツールとして注目されているSketchの日本での第一人者である窪木さん、Illustratorといえば外せない三階ラボの長藤さんと宮澤さん、スペシャルゲストとしてAdobeの轟さんと、豪華な顔ぶれとなりました。

そして、なぜかトークセッションと言うよりLT大会に・・・先日の「WordBench京都」を思い出すような展開ですが（笑）、これがまた内容が濃くて凄い内容です。

窪木さんからは、Sketchのデモ。
私は初めて見たのですが、非常に良いツールだなと思いました。Prottとの連携もいい感じです。
Adobeのツールを必要としていない方には、最適のツールですね。

続いては、Adobe轟さんによる、Project Comet のデモ。
WebのUIデザインと画面遷移のプロトタイピングを行うツールなのですが・・・あまりの凄さに会場が息を呑みました。
まずは軽さ。100を超えるアートボードがあってもすいすいと動きます。
そして、パーツを使いまわしてどんどんデザインを作っていくことができるのですが、無駄が無くかゆいところに手が届く使い勝手は、もう、今すぐ使いたいと思わせるものでした。
こちらのページから登録しておくと、ベータ版が使えるようになったら連絡してくれるそうです。

そしてラスボス、三階ラボさんの登場。
なんと実際の案件で制作されたIllustratorデータを見せていただけました。
朝の番組で使用されているテロップの何百種類ものパターンをどう管理するかなど、とにかく質も量も圧倒的でツールの限界を超えていたりするので効率化が重要なポイントになるわけですが、様々なアイデアで解決されていて目が離せませんでした。
登壇者の方々から「変態」と呼ばれていましたが、私からも最上級の褒め言葉として「変態ですね」と申し上げたいと思います。

トークセッションの最後では、WebデザインにIllustratorやSketchを使ったほうがよい人、使う利点についてそれぞれの方から述べられていました。

• データから数値が取れるので、エンジニアに近い人に使いやすい
• IllustratorやSketchのデータ構造はHTMLと構造が似ている（Photoshopは少し違う）
  コーディングを考えてデータを作ることができる
• ベクターデータはビットマップデータにできるが、逆はできない
  そのため 8K、16Kなどが出てきても、資産として使い続けられる
• テキストデータを内包できる
• スケールできる
  劣化しない
  拡大するだけでなく、軽くすることもできる
  容量制限のあるデバイスにも対応できる

ただ、こうして考えると、ビットマップデータとベクターデータを両方扱えて、大きなビットマップデータをシンボルとして劣化させずに扱うことができた Fireworks というツールが、いかに優れていたのかという事を思わずにはいられません。AdobeがFireworksを切り捨てた判断は正しかったのでしょうか？
実は先ほどのトークセッションの中で、Adobeの轟さんに対して「Project Comet はSketchを潰しにかかってるんですか」といった質問があったのですが、「Sketchの登場で、Adobeが本腰を入れ始めてくれた」との答えがあり嬉しく思いました。
巨大になって、縦割りの良くない面が出てきているように思える最近のAdobeですが、まだ期待はできそうです。

アフターパーティーも大盛況

セミナー後は、近くの居酒屋でアフターパーティーが行われました。
こちらも参加人数がとても多く、ほんの一部の方としか交流ができませんでしたが、他の会社や違った業務での取り組み方や苦労話なども聞くことができたりして、明日からの励みになりました。
Adobeの轟さんには「Project Comet 期待しています」とお伝えさせていただきました。
私と「好きなAdobe」と「嫌いなAdobe」が共通していて、これまで出会ったAdobeの方の中で一番共感が持てた方でした。
Photoshop勢に負けず、ほんと頑張ってほしいです。

---

Webの世界は本当に流れが速く、昨日の常識が明日には非常識となってしまいます。
その中で新しいものに飛びつくのは必ずしも正しいことではありませんが、少なくともこれからしばらくはベクターデータが重要になり、IllustratorがWebデザインにとって欠かせないツールとなることは間違いないように思います。

今回のセミナーでは、私が「これからのWebデザインツールとして、Illustratorが来る！」と言い続けたことが間違いではなかったと思えたと同時に、まだまだ知らないことがいっぱいあるなと痛感しました。
そして、時代を乗り切ろうとする思いが登壇者やスタッフの方々はもちろん参加者の方々からも感じられて、とても有意義なセミナーでした。
セミナーに関係されたみなさん、ありがとうございました。

---

最後に、今回のセミナーのじゃんけん大会での戦利品をご紹介しておこうと思います。

この記事を書いた人

川井 昌彦

FAシステムメーカー、国内最大手印刷会社製版部、印刷・ウェブ制作会社を経て、家庭の事情で実家に帰省して独立
現在はフリーランスと制作会社シニアディレクターのマルチワーク
ウェブ制作のほぼ全般を見渡せるディレクター業務が主だが、デザイン・コーディングも好き

1997年ブログ開設
WordPressコミュニティには2011年から参加
WordCamp Kansai 2016 セッションスピーカー
WordCamp Tokyo 2023 パネルディスカッションパネラー
WordBench京都、WordBench神戸、WordPress Meetup八王子など登壇多数

最新の投稿

• 日記2024年12月14日永遠に心に残る映画のラストシーン
• 技術記事2024年10月6日WordPressでカスタムフィールドや繰り返しフィールドを使うなら「Lazy Blocks」がオススメ！
• 技術記事2024年5月5日クラシックテーマ制作者の私がブロックテーマ制作で悩んだこと
• 技術記事2024年4月14日クエリ―ループブロックで結果なしの時にブロックごと非表示にする方法