知っておくと得をする(かもしれない)SVGの基礎とviewBox！ – WP ZoomUP #58

  • 投稿日
  • 更新日
  • 著者 MurakamiNaoko
  • カテゴリー レポート

勧告から15年以上を経て、ようやく脚光を浴びはじめた遅咲きの画像フォーマット「SVG」。 マルチデバイス対応が当たり前となった今、アクセシビリティやパフォーマンス、コンテンツファーストといった、ビジュアルそのものとはまた別の視点での「デザイン」が重要視されるようになってきました。「画像」もそのひとつで、ベクターグラフィックであり汎用性の高いSVGの利用が表現の幅を広げてくれるようになりました。

SVGならではの特徴、利点、基礎的概念を包括的に知っていただいたうえで、使いこなすためにもっとも重要な概念「viewBox」について解説してくださいました。

WP ZoomUP の概要、参加方法、運営者情報はこちらにまとまっています。

セッションでは、SVGの基礎の基礎からWordPressでの活用事例や注意点、そしてアニメーションまで、豊富なデモとサンプルコードを用いて幅広く教えてくださいました。

今回は、座標系の中の特定要素をfransformの基準にできる「transform-box」プロパティについても詳しくご解説いただきました（YouTube 1:13:05）。2021年2月現在、日本語で一番詳しい transform-box の説明かも?!ということで、これまでたくさんの要素をアニメーションさせるのに苦労されていた方は必見です！

これからSVGを始めたい方や、アニメーションをより良くより楽に表現されたい方にとってご覧いただきたい内容です。参加者以外への資料配布はございません。ぜひ動画にてチェックしてみてください。

  • スクリーンショット。「大丈夫。俺たちには」と書かれている。
  • スクリーンショット。「transform-box プロパティがある」と書かれている。

開催概要

セッション

【登壇者ご紹介】

松田 直樹 さん

株式会社まぼろし

ゲーム業界にて企画開発に従事した後、ウェブ業界に転身。ウェブサービス・アプリ、管理画面等の情報・構造設計、UI設計を得意として数多くのデザインを手がける。SVGが好き。 主な著書に 『これからのWebサイト設計の新しい教科書』（MdN・共著）、 『Web制作者のためのIllustrator＆ベクターデータの教科書』（インプレス・共著）、 『Webサイト、これからどうなるの? キーワードから探るWeb制作の未来像』（MdN・共著） などがある。

ご厚意により無償でご出演いただきました。ありがとうございます！！

セッションの内容

  • SVGはどう使われている？
  • SVGの特徴・メリット
  • WordPressとSVG
  • viewBox
  • transform-box

スライド

今回は参加者外へのスライド公開はありません。参加登録された方は、connpassからの案内メールにダウンロードURLがございます。ご確認ください。

動画

Zoomチャット・UDトークログを見る

記念撮影

スクリーンショット。Zoomに映る参加者が笑顔で手を振っている
参加者の皆さんと最後に記念撮影という名のスクリーンショットを撮りました！

参加者の皆さんの感想

説明が細かくて比較アニメーションを多用していてすごくわかりやすかったです。松田さんのファンになりました！

図の解説も含め、おはなしの内容がとてもシンプルでわかりやすく、なるほど！と驚きも多く、楽しく聞くことができ、学ぶことが多かったです

座標について理解ができました。そしてtransform-box！！！！

WP ZoomUP からのお願い

WP ZoomUPの運営費をWP ZoomUPのグッズ購入で運営費を応援していただけたら嬉しいです。よろしくお願いします！

WP ZoomUP の今後をフォローしよう！

次回予告

SVG WordPress