第26回リクリセミナー「天下分け目のベクター祭り SVGじゃ! Illustratorを持てい!」参加レポート

Publish2015/11/30(月)

2015年11月28日に行われた「第26回リクリセミナー「天下分け目のベクター祭り SVGじゃ! Illustratorを持てい!」」の参加レポートです。
Twitterのハッシュタグは「#resem26」です。
くぼきさんがまとめてくれたTogetterはこちら。
第26回リクリセミナー「天下分け目のベクター祭り SVGじゃ! Illustratorを持てい!」
第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つのポイント

ポイントとしては

  1. 画像内にデータを内包
  2. 再利用性
  3. アニメーション

の3つ

画像内にデータを内包

SVGはイメージを表示させるだけではなくテキストデータを内包できるので、アクセシビリティを確保することができるというのは大きいです。
スクリーンリーダーにも対応できている(role属性とaria-labelledbyはいるけど)というのはメリットとしてかなり大きいですね。
要素ごとにtitleをつけることができるのもSVGだけですし。

再利用性

同じドキュメント内で要素を使いまわせるのはすごくいいです。
使い回すことで、コード量を圧縮できることもできるというのも表示の高速化にとっていいメリットになるでしょうし。
あと、SVG Spritesというアプローチとかもすごくワクワクする感じですよね。

アニメーション

SVGはアニメーションができるのも特徴として大きいです。
メディアクエリとopacityを組み合わせる形のような、アニメーションではないけど効果的な演出ができるとかもそうですし。
アニメーションを実装するのはjsの知識が必要だったりするので導入の敷居が高いかなと思っていましたが、直で書くよりライブラリを利用すると便利ということも紹介されててそれならできるかもしれないという発見もありました。
snap.svg
velocity.js
Greensock
SVGのファイルサイズやコードを少なくするために、「アンカーポイントを少なくする」「アピアランスを多用しない」「コードの小数点を削る」という3つに気をつけようというのも納得です。
後半につれて難しさがぐんぐん上がっていく内容ではありましたが、かなり楽しんで聞くことができました。

ここがポイントアクセシビリティの事も考えるならSVG!

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

最後はあわゆきさんと松田さんに加えて、Sketch代表の我らがくぼきさん、三階ラボのお二方とアドビの轟さんによる6人のトークセッションでした。
このトークセッションがすごく面白くて、楽しい内容でした。
感じたのは話すみなさんのベクターへの愛
この熱気は会場にいないと伝わりませんが、すごくアツいセッションでした。
以下多くなるので箇条書き

  • Sketchとprottの連携は面白そう。今やってるあの案件で導入しよう。
  • Projet Comet楽しそう。Sketch+prottを一つにした感じなので、とりあえずサインアップはしておこう。
  • 三階ラボさんの実績紹介やばすぎる。仕事の質・量ともに国内最高レベル。イラレの使い方が神がかっているので「変態(褒め言葉)」と呼ばれている理由は納得。
  • あのレベルの仕事量になると、効率化はやはり重要になるので、アプローチの方法として非常に参考になった。
  • HTMLのDOMをイメージしてデザインする松田さんも相当変わっていると思う。好感はすごく持てるけど。
  • 将来への可変性と流用性。ベクター=資産という考え方は素敵。
  • 言語化できる要素はすべてSVGで
ここがポイント三階ラボさんの実績の中身を見るという超貴重な体験で脳が痺れる

まとめと余談

今回通して感じたのはIllustratorというかベクターの話でした。
SketchのデモやProjectCometのデモもありましたし、単にツールの紹介と使い方にとどまる内容ではありませんでした。
今後どうしていこうかという部分はもちろん、今すぐ取り組むことも分かったので非常に有意義でした。
中でもやはり圧巻だった「三階ラボさんの実績のインパクト」は頭から離れません。
あのレベルの仕事をするということもそうですし、今自分に何が足りないのか、作る人としての自分のあり方とかそういう部分を掘り起こして考えるきっかけになりました。
若干凹む気分もありますが(すごすぎる物を見せられるとそこまでできない自分に自己嫌悪になる感じ)、ポジティブに捉えて頑張っていこうと思えるすごくいい内容でした。
いつも思いますが、リクリって本当に楽しい
毎回参加するたびにいろいろと考えさせられます。
余談ですが、プレゼントのあいこじゃんけんで2016年のAdobe卓上カレンダーが当たりました(笑)
これまでこれ系のプレゼント当たった試しなかったので、かなりうれしい気分になりました。
当たってもらったカレンダー
もらったカレンダーがこちら。
また次回もリクリには必ず参加しようと思います。
いつも運営大変な中がんばっておられる主催の小山さん、スタッフで参加されている皆様、登壇されたみなさん、参加者のみなさん、素敵な空間をありがとうございました!

記事の著者:ふにすでぐち

ふにすでぐち

1978年生まれ。企業のWeb活用をテーマに、Webサイトの運用を中心とした戦略的な企画立案、サポートやWebサイトの構築などを行っています。
5年間のWeb制作会社勤務後、2年間のフリーランスで「フニス」として活動後に法人化し、2012年7月「ふにす株式会社」を設立。
Web活用の情報や考え方などを発信するブログ「ふにろぐ」を不定期で更新しています。
2015年11月より大阪府高槻市に「ふにすWeb相談所」を開設。
地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。
また、不定期で大阪を中心にWeb運用やブログなどをテーマにしたイベント「ふにセミWS」を開催しています。
サイトの運用や活用にお困りの方はお気軽にご相談ください。
お問い合わせはこちら

LINEでWebに関する質問にお答えしています。

ふにすでは、LINEでWebに関するご質問にお答えしています。Webに関するあんなことやこんなこと、今さら聞けない疑問などなんでもご相談ください。LINEアプリでQRコードを読み取ると友達登録のリンクが表示されますので、試しに登録してみてください。

ふにろぐとは?

でぐち

ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。
このブログでは主にサイトの運営をしている企業のご担当者様向けに、「サイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。
その他には僕自身の考え方なども書いています。

このブログについて

ふにす株式会社

ふにす株式会社は大阪の高槻にある「Webを起点に会社の成長を応援するパートナー」をモットーに、Webにまつわるいろいろな問題を解決する、サポートをする会社です。
ホームページでお問い合わせを増やしたい、もっとたくさんの人に見てもらいたいなど、ホームページ/Webサイトを活用したい方向けの活動を行っています。
また、ホームページの作成や、外部パートナーとしての運用サポートなど、幅広くWebにまつわる諸々のことをおこなっております。

ブログ内検索

サービス

ふにすWeb相談所

ホームページの運用お得情報

ホームページ/Webサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。

Webサイトの運用に関する情報

お問い合わせ

ホームページを成功させたいとお考えの方はお気軽にご相談ください。
ご相談は、下記の中からお好きなものを選んでいただければ大丈夫です。

  • メールで問い合わせる
  • チャットワークで問い合わせる
  • Facebookで問い合わせる
  • Twitterで問い合わせる

LINE@でも相談を受け付けています。
QRコードから友達登録を行って、メッセージを送ってください。

LINE@

最新記事

カテゴリ別記事一覧

月別記事一覧