2015.07.25 HTML5fun & マカベン勉強会発表スライド

1. Webデザインのトレンド、SVGの基本＆
活用法。SVGのメリットと事例を基礎か
ら学ぶ。
2015年7月25日（土）
マカベン × HTML5fun HTML5 基礎から学んで、最新のライブラリを覚えよう！！

2. 自己紹介

3. 自己紹介
● 越水大輔（33歳）
● 営業からWeb制作に転身
● 現在フリーランス
● アイドットデザイン
● マークアップ多め

4. 自己紹介
アイドットデザイン
絶賛ブログ更新中です！
http://idotdesign.net
Web制作情報
Webマーケティング情報
福岡のイベント情報

5. 自己紹介
Facebookページもあります。
IT勉強会・イベント情報
ありましたらお知らせ下さい。
今日のスライドも公開します。

6. 本日の目標

7. 本日の目標
「SVG…？聞いたことはあるけど、
業務に忙しくてフォローしきれてない。。
CSSフレームワークとか、Gitとかメタ言語
とかタスク管理ツールとか、覚えることが
多すぎておれはもう疲れ（ry」

8. 本日の目標

9. 本日の目標
この夏はSVGで勝つ（自信

10. SVGってなに？

11. SVGてなに？
Scarable Vector Graphics
スケーラブル ベクター グラフィックス

12. SVGてなに？
Scarable Vector Graphics
スケーラブル ベクター グラフィックス
拡大可能なベクター画像のこと

14.
ラスター画像

15.
ラスター画像 ベクター画像

16. SVGの特徴

18. SVGの特徴
● ベクター形式のXML文書
● HTMLと似たような「タグ」で構成されている
● 画像でありながらマークアップ言語でもある
● 80個のタグ https://developer.mozilla.org/ja/docs/Web/SVG/Element

19. ブラウザの対応状況
● Firefox 1.5〜
● Chrome 1〜
● Safari 3〜
● iOS Safari 2〜

20. ブラウザの対応状況
● Firefox 1.5〜
● Chrome 1〜
● Safari 3〜
● iOS Safari 2〜
● IE9〜
● Android 3〜

21. ブラウザの対応状況
● Firefox 1.5〜
● Chrome 1〜
● Safari 3〜
● iOS Safari 2〜
● IE9〜
● Android 3〜
利用が広がってきている！

22. Web制作者（マークアップ）のスキルセット
● HTML
● CSS
● JavaScript

23. Web制作者（マークアップ）のスキルセット
● HTML（文書構造の意識）
● CSS・メタ言語（Sass, Less）
● JavaScript
● CMS
● レスポンシブ・マルチデバイス対応

24. Web制作者（マークアップ）のスキルセット
● HTML（文書構造の意識）
● CSS・メタ言語（Sass, Less）
● JavaScript
● CMS
● レスポンシブ・マルチデバイス対応
+
● SVG New!

25. WHY？
● 表現の幅の広さ
（アニメーション、CSS装飾、アクセシビリティの
担保）
● マークアップ言語で覚えた強みを活かせる
● デザインとエンジニアリングの橋渡し
（インタラクション、UI）

26. WHY？
● 表現の幅の広さ
（アニメーション、CSS装飾、アクセシビリティの
担保）
● マークアップ言語で覚えた強みを活かせる
● デザインとエンジニアリングの橋渡し
（インタラクション、UI）

27. SVGのメリット

28. SVGのメリット
リッチなテキスト表現が可能に。
グラデーションやパターンなどでの装飾が容易に。
参考リンク：http://editors.ascii.jp/m-kobashigawa/svgdemo/01/1.html

29. SVGのメリット
曲線や斜めの線を活かしたUI表現
● 地図などのリンク範囲を設定
参考リンク：http://editors.ascii.jp/m-kobashigawa/svgdemo/01/2.html四角ベースだったWebデザイン…

30. SVGのメリット
Flashライクなモーフィングアニメーション
参考リンク：http://editors.ascii.jp/m-kobashigawa/svgdemo/01/3.html

31. SVGのメリット
ベクター形式なので拡大してもギザギザしない。高
解像度ディスプレイにも対応できる。

32. SVGのメリット
ベクター形式なので拡大してもギザギザしない。高
解像度ディスプレイにも対応できる。
● レスポンシブWebデザインに有効！
● スマホ＆タブレット（解像度関係なし！）

33. SVGのメリット
アクセシビリティ
XML文書なのでテキスト情報を画像に持たせるこ
とができる。

34. SVGのメリット
アクセシビリティ
各SVG要素に<title>と<desc>の設定が可能。

35. SVGのメリット
アクセシビリティ
だけどスクリーンリーダーが読み取ってくれない。

36. SVGのメリット
アクセシビリティ
roleとaria-labelledbyで対応する。

37. SVGのメリット
アクセシビリティ
参考スライド
HTML5とSVGで考える、
これからの画像アクセシビリティ
http://www.slideshare.net/ssuser99dc16/html5fun-
svg-accessibility
SVGでのアクセシビリティがわかりやすくまとめられてい
ます。

38. SVGの実装例

39. SVGの実装例
テキストアニメーションのデモ
● http://tympanus.net/Tutorials/AnimatedTextFills/index.html
アニメーションする円グラフのデモ
● http://wheelnavjs.softwaretailoring.net/examples.html

40. SVGの実装例
企業での導入事例
● スターバックス http://www.starbucks.com/
● ニューヨーク・タイムズ http://www.nytimes.com/
● 日本経済新聞社 http://www.nikkei.com/

41. SVGの使い方

42. SVGの使い方・実装方法
illustratorで作るのがカンタン！
文字データの場合はアウトライン化する。
1. 「保存」または「別名で保存」
2. ファイル形式を.svgで選択
保存時のオプション設定はAdobeのページを参考に。
参考：SVG 形式で書き出す方法 （Illustrator CC）https://helpx.adobe.com/jp/illustrator/kb/5710.html

45. SVGの使い方・実装方法
illustratorからコピペでもOK！
Ctrl(command) + C Ctrl(command) + V

46. SVGの使い方・実装方法
Web表示で使いやすいものを4つを紹介
● img要素
● object要素
● CSSのbackground
● HTML5でインラインSVGを記述する

47. SVGの使い方・実装方法
img要素で参照
IE対応のCSS

48. SVGの使い方・実装方法
object要素

49. SVGの使い方・実装方法
CSSのbackground

50. SVGの使い方・実装方法
HTML5にインラインSVGで記述する

51. SVGの使い方・実装方法
HTML5にインラインSVGで記述する

52. SVGの使い方・実装方法
HTML5にインラインSVGで記述する

53. SVGの使い方・実装方法
HTML5にインラインSVGで記述する
この部分だけ使えばOK！

54. SVGの使い方・実装方法
● img要素
● object要素
● CSSのbackground
● HTML5でインラインSVGを記述する

55. SVGの使い方・実装方法
● img要素
● object要素
● CSSのbackground
● HTML5でインラインSVGを記述する
各方法やブラウザによっても注意点やフォールバックの方法が
異なる。

56. SVGの使い方・実装方法
参考スライド
SVG MANIAX - CSS Nite After dark7
http://www.slideshare.net/ssuser99dc16/svg-maniaxcss-nite-
after-dark7-svgmatsuda
各ブラウザにおける注意点などがまとめら
れています。

57. ここまでがざっくりとした概要

58. 応用やアニメーションのために
SVGの細かな構造も知っておきたい。

59. インラインSVGを書いてみる

60. インラインSVGを書いてみる

61. インラインSVGを書いてみる
viewBoxの概念
SVGの座標系は特定の単位を持たない。
viewBoxとwidth、heightで1座標単位の大きさを決
定する。

62. インラインSVGを書いてみる
図形の塗りと線
● rect
● fill
● stroke

63. インラインSVGを書いてみる
図形の塗りや線はstyle属性でも表現可能。
● style=""
● プロパティと値を：でつなぐ。
● 値の最後に；

64. インラインSVGを書いてみる
塗りやスタイルの設定をグループ化する。
● <g>でグループ化
● <g></g>のなかにある要素にまとめてスタイル
指定できる。
● 特定の要素だけ別のスタイルを指定したい場合
は直接記述

65. インラインSVGを書いてみる
グラデーションを設定する
● <defs>で要素のidと結びつける
● <linearGradient>でグラデーション
● <stop />で色と場所を指定
● x1,y1,x2,y2で始発点・終了点を指定

66. インラインSVGを書いてみる
直線・円・楕円を作成する
● <line> 直線
● <circle> 円
● <ellipse> 楕円

67. インラインSVGを書いてみる
複雑な線を引く
● <polyline>
● <polygon>
● <path>

68. インラインSVGを書いてみる
テキストを表示させてみる。
● <text>

69. インラインSVGを書いてみる
作成した図形をアニメーションさせる
● 要素のなかに<animate>を記述する
● dur=""でアニメーションの間隔
● begin=""で何秒後に開始するか設定

70. インラインSVGを書いてみる
ドットインストール
SVG入門
http://dotinstall.com/lessons/basic_svg

71. 役立つツール・ライブラリ

72. 役立つツール・ライブラリ
LAZY LINE PAINTER
線画アニメーションのjQueryプ
ラグイン
http://lazylinepainter.info/

73. 役立つツール・ライブラリ
SVG PORN
SVGで作られたWebサービス
・ツールのロゴコレクション
http://svgporn.com/

74. 役立つツール・ライブラリ
Textures.js
SVGでテクスチャも作成でき
る！
http://riccardoscalco.github.io/textures/

75. 役立つツール・ライブラリ
SVG Loaders
SVGアニメーションで作られた
ローディングアイコン。
JavaScript、CSS不要です。
http://samherbert.net/svg-loaders/

76. 役立つツール・ライブラリ
SVG Morpheus
SVGアイコンのモーフィングア
ニメーション作成するための
JavaScriptライブラリ。
http://alexk111.github.io/SVG-
Morpheus/

77. 役立つツール・ライブラリ
PicSVG
jpg、gif、png画像をベクターに
変換するサイト
http://picsvg.com/

78. 基本をおさえた後は
便利なツールでどんどん楽をし
ましょう！

79. さらに幅広い表現を可能にする
SVG
● 画像にマスクやフィルターをかける。
● 線画アニメーション
などなど…

80. Web制作者（マークアップ）のスキルセット
● HTML（文書構造の意識）
● CSS・メタ言語（Sass, Less）
● JavaScript
● CMS
● レスポンシブ・マルチデバイス対応
+
● SVG New!

81. 差別化を図るチャンスかも？

82. チュートリアル記事、
まとめて後日公開します。
m(_ _)mしばしお待ちを
アイドットデザイン
http://idotdesign.net

83. ありがとうございました！