第26回リクリセミナー「天下分け目のベクター祭り SVGじゃ！ Illustratorを持てい！」参加レポート
Publish2015/11/30(月)
2015年11月28日に行われた「第26回リクリセミナー「天下分け目のベクター祭り SVGじゃ！ Illustratorを持てい！」」の参加レポートです。
Twitterのハッシュタグは「#resem26」です。
くぼきさんがまとめてくれたTogetterはこちら。
第26回リクリセミナー「天下分け目のベクター祭り SVGじゃ！ Illustratorを持てい！」
今回は以下3つのセッションで、14:00から17:30までみっちりベクターを堪能する内容でした。
- まだピクセルで消耗してるの？（仮）- 始めよう、IllustratorですっきりWebデザイン –
- SVG MANIAX in Osaka
- 勝ち鬨を上げよ！ベクター侍 大坂評定
あと、最初に断っておきますが、僕は普段Illustratorはほとんど使いません。
ベクターツールと言えばSketchと思っているのですが、普段使っていないIllustratorのことを他の人がどう考えてどう使っているんだろうという事を知ろうというのが今回の一番の目的です。
なので、書く内容はあまり「Illustratorが好き」っていうのは前に出ませんので、その点はご理解ください。
ちなみに、今回は最前列左端というこれまで座った事ない位置から聞いてたんですが、全体を見渡す事ができるポジションで、ここはいいなと思ったのはここだけの話です。
「まだピクセルで消耗してるの？（仮）- 始めよう、IllustratorですっきりWebデザイン – 」
最初のセッションは寿司ゆきが大人気のあわゆきさんのセッションです。
ベクターを使う理由とか、なぜ今Illustratorなのかといった導入部分的な内容でした。
話の内容も初心者にもわかりやすく伝える感じで作ってあって「すっ」と頭に入ってくる内容でした。
あと、大事なところをきちんと強調して話されてたのも聴きやすいポイントだったのかなと思います。
以下は個人的なメモ兼感想。
ベクターを扱う理由としては、
- 数値で管理や把握を行える
- SVGの普及の恩恵を受ける事ができる
- データが劣化しない
- 再利用性と効率性の面
- デジタル以外での使用
というのは納得でした。
これはIllustratorに限らず、Sketchでもそうですね。
一つ一つの理由もすごく納得できるし、説明されてた内容もすごく共感できる内容でした。
基礎部分の次は設定編で、ふだんIllustratorを使わない僕からすると、「そういう設定をして使ってるのか」というのがわかって新鮮でした。
設定編でピクセルプレビューの話をしていた部分で、「ベクターで使うのにピクセルを気にする必要あるの？」という部分とかはすごくよくて、ピクセルを意識する事で「にじまない」「ずれない」「ファイルサイズを軽く」を実現できるという部分はすごく納得できました。
なるほど、確かにそこまで細かく設定できるならIllustratorでWebデザインを行えるというのも納得です。
あと、「デジタルでやっている以上、ピクセルは大事」っていうのは名言だなと思います。
複合シェイプとかシンボルとかアピアランスの話も、便利に使える機能としてすごく優秀だと思います。
この辺はSketchでもあるんですけど、やっぱり便利です。
最後のデモではいくらがどんどん増えるやつとか、すしのシャリの部分の実現方法とか、具体的でわかりやすいデモだったので、見ていて楽しい感じになりました。
「SVG MANIAX in Osaka」
2つめのセッションはまぼろしの松田さんのセッション。
松田さんといえばSVG、SVGといえば松田さんという感じのまさにSVGの第一人者という存在の松田さんの話はやはりわかりやすい内容でした。
例えば「viewBox属性」の話の下りとかは特にそうで、「表示サイズ（width,height）」≠「座標系(viewBox)」という図式とかがわかりやすい表現だと思って見てました。
SVGのコードを理解していく上で重要な、各要素の特徴とかがわかりやすく説明してもらってすごくいい感じでした。
SVGにもいろいろあるけど、話を聞いてみて思ったのはやっぱり「インラインSVG」だないうこと。
実際にお客さんのサイトでも採用してますし、取り組み方の方向性が話を聞いて好きだという事も再確認できました。
インラインSVGを使いたくなる3つのポイント
ポイントとしては
- 画像内にデータを内包
- 再利用性
- アニメーション
の3つ
画像内にデータを内包
SVGはイメージを表示させるだけではなくテキストデータを内包できるので、アクセシビリティを確保することができるというのは大きいです。
スクリーンリーダーにも対応できている（role属性とaria-labelledbyはいるけど）というのはメリットとしてかなり大きいですね。
要素ごとにtitleをつけることができるのもSVGだけですし。
再利用性
同じドキュメント内で要素を使いまわせるのはすごくいいです。
使い回すことで、コード量を圧縮できることもできるというのも表示の高速化にとっていいメリットになるでしょうし。
あと、SVG Spritesというアプローチとかもすごくワクワクする感じですよね。
アニメーション
SVGはアニメーションができるのも特徴として大きいです。
メディアクエリとopacityを組み合わせる形のような、アニメーションではないけど効果的な演出ができるとかもそうですし。
アニメーションを実装するのはjsの知識が必要だったりするので導入の敷居が高いかなと思っていましたが、直で書くよりライブラリを利用すると便利ということも紹介されててそれならできるかもしれないという発見もありました。
snap.svg
velocity.js
Greensock
SVGのファイルサイズやコードを少なくするために、「アンカーポイントを少なくする」「アピアランスを多用しない」「コードの小数点を削る」という3つに気をつけようというのも納得です。
後半につれて難しさがぐんぐん上がっていく内容ではありましたが、かなり楽しんで聞くことができました。
「勝ち鬨を上げよ！ベクター侍 大坂評定」
最後はあわゆきさんと松田さんに加えて、Sketch代表の我らがくぼきさん、三階ラボのお二方とアドビの轟さんによる6人のトークセッションでした。
このトークセッションがすごく面白くて、楽しい内容でした。
感じたのは話すみなさんのベクターへの愛。
この熱気は会場にいないと伝わりませんが、すごくアツいセッションでした。
以下多くなるので箇条書き
- Sketchとprottの連携は面白そう。今やってるあの案件で導入しよう。
- Projet Comet楽しそう。Sketch+prottを一つにした感じなので、とりあえずサインアップはしておこう。
- 三階ラボさんの実績紹介やばすぎる。仕事の質・量ともに国内最高レベル。イラレの使い方が神がかっているので「変態（褒め言葉）」と呼ばれている理由は納得。
- あのレベルの仕事量になると、効率化はやはり重要になるので、アプローチの方法として非常に参考になった。
- HTMLのDOMをイメージしてデザインする松田さんも相当変わっていると思う。好感はすごく持てるけど。
- 将来への可変性と流用性。ベクター＝資産という考え方は素敵。
- 言語化できる要素はすべてSVGで
まとめと余談
今回通して感じたのはIllustratorというかベクターの話でした。
SketchのデモやProjectCometのデモもありましたし、単にツールの紹介と使い方にとどまる内容ではありませんでした。
今後どうしていこうかという部分はもちろん、今すぐ取り組むことも分かったので非常に有意義でした。
中でもやはり圧巻だった「三階ラボさんの実績のインパクト」は頭から離れません。
あのレベルの仕事をするということもそうですし、今自分に何が足りないのか、作る人としての自分のあり方とかそういう部分を掘り起こして考えるきっかけになりました。
若干凹む気分もありますが（すごすぎる物を見せられるとそこまでできない自分に自己嫌悪になる感じ）、ポジティブに捉えて頑張っていこうと思えるすごくいい内容でした。
いつも思いますが、リクリって本当に楽しい。
毎回参加するたびにいろいろと考えさせられます。
余談ですが、プレゼントのあいこじゃんけんで2016年のAdobe卓上カレンダーが当たりました（笑）
これまでこれ系のプレゼント当たった試しなかったので、かなりうれしい気分になりました。
もらったカレンダーがこちら。
また次回もリクリには必ず参加しようと思います。
いつも運営大変な中がんばっておられる主催の小山さん、スタッフで参加されている皆様、登壇されたみなさん、参加者のみなさん、素敵な空間をありがとうございました！