Your SlideShare is downloading. ×
0
Webデザインのトレンド、SVGの基本＆ 活用法。SVGのメリットと事例を基礎か ら学ぶ。 2015年7月25日（土） マカベン × HTML5fun HTML5 基礎から学んで、最新のライブラリを覚えよう！！
自己紹介
自己紹介 ● 越水大輔（33歳） ● 営業からWeb制作に転身 ● 現在フリーランス ● アイドットデザイン ● マークアップ多め
自己紹介 アイドットデザイン 絶賛ブログ更新中です！ http://idotdesign.net Web制作情報 Webマーケティング情報 福岡のイベント情報
自己紹介 Facebookページもあります。 IT勉強会・イベント情報 ありましたらお知らせ下さい。 今日のスライドも公開します。
本日の目標
本日の目標 「SVG…？聞いたことはあるけど、 業務に忙しくてフォローしきれてない。。 CSSフレームワークとか、Gitとかメタ言語 とかタスク管理ツールとか、覚えることが 多すぎておれはもう疲れ（ry」
本日の目標
本日の目標 この夏はSVGで勝つ（自信
SVGってなに？
SVGてなに？ Scarable Vector Graphics スケーラブル　ベクター　グラフィックス
SVGてなに？ Scarable Vector Graphics スケーラブル　ベクター　グラフィックス 拡大可能なベクター画像のこと
　 ラスター画像
　 ラスター画像 ベクター画像
SVGの特徴
SVGの特徴 ● ベクター形式のXML文書 ● HTMLと似たような「タグ」で構成されている ● 画像でありながらマークアップ言語でもある ● 80個のタグ　https://developer.mozilla.org/ja/docs/Web/S...
ブラウザの対応状況 ● Firefox 1.5〜 ● Chrome 1〜 ● Safari 3〜 ● iOS Safari 2〜
ブラウザの対応状況 ● Firefox 1.5〜 ● Chrome 1〜 ● Safari 3〜 ● iOS Safari 2〜 ● IE9〜 ● Android 3〜
ブラウザの対応状況 ● Firefox 1.5〜 ● Chrome 1〜 ● Safari 3〜 ● iOS Safari 2〜 ● IE9〜 ● Android 3〜 利用が広がってきている！
Web制作者（マークアップ）のスキルセット ● HTML ● CSS ● JavaScript
Web制作者（マークアップ）のスキルセット ● HTML（文書構造の意識） ● CSS・メタ言語（Sass, Less） ● JavaScript ● CMS ● レスポンシブ・マルチデバイス対応
Web制作者（マークアップ）のスキルセット ● HTML（文書構造の意識） ● CSS・メタ言語（Sass, Less） ● JavaScript ● CMS ● レスポンシブ・マルチデバイス対応 　　+ ● SVG　New!
WHY？ ● 表現の幅の広さ （アニメーション、CSS装飾、アクセシビリティの 担保） ● マークアップ言語で覚えた強みを活かせる ● デザインとエンジニアリングの橋渡し （インタラクション、UI）
WHY？ ● 表現の幅の広さ （アニメーション、CSS装飾、アクセシビリティの 担保） ● マークアップ言語で覚えた強みを活かせる ● デザインとエンジニアリングの橋渡し （インタラクション、UI）
SVGのメリット
SVGのメリット リッチなテキスト表現が可能に。 グラデーションやパターンなどでの装飾が容易に。 参考リンク：http://editors.ascii.jp/m-kobashigawa/svgdemo/01/1.html
SVGのメリット 曲線や斜めの線を活かしたUI表現 ● 地図などのリンク範囲を設定 参考リンク：http://editors.ascii.jp/m-kobashigawa/svgdemo/01/2.html四角ベースだったWebデザイン…
SVGのメリット Flashライクなモーフィングアニメーション 参考リンク：http://editors.ascii.jp/m-kobashigawa/svgdemo/01/3.html
SVGのメリット ベクター形式なので拡大してもギザギザしない。高 解像度ディスプレイにも対応できる。
SVGのメリット ベクター形式なので拡大してもギザギザしない。高 解像度ディスプレイにも対応できる。 ● レスポンシブWebデザインに有効！ ● スマホ＆タブレット（解像度関係なし！）
SVGのメリット アクセシビリティ XML文書なのでテキスト情報を画像に持たせるこ とができる。
SVGのメリット アクセシビリティ 各SVG要素に<title>と<desc>の設定が可能。
SVGのメリット アクセシビリティ だけどスクリーンリーダーが読み取ってくれない。
SVGのメリット アクセシビリティ roleとaria-labelledbyで対応する。
SVGのメリット アクセシビリティ 参考スライド HTML5とSVGで考える、 これからの画像アクセシビリティ http://www.slideshare.net/ssuser99dc16/html5fun- svg-accessibility...
SVGの実装例
SVGの実装例 テキストアニメーションのデモ ● http://tympanus.net/Tutorials/AnimatedTextFills/index.html アニメーションする円グラフのデモ ● http://wheelnavjs.s...
SVGの実装例 企業での導入事例 ● スターバックス　http://www.starbucks.com/ ● ニューヨーク・タイムズ　http://www.nytimes.com/ ● 日本経済新聞社　http://www.nikkei.com/
SVGの使い方
SVGの使い方・実装方法 illustratorで作るのがカンタン！ 文字データの場合はアウトライン化する。 1. 「保存」または「別名で保存」 2. ファイル形式を.svgで選択 保存時のオプション設定はAdobeのページを参考に。 参考：S...
SVGの使い方・実装方法 illustratorからコピペでもOK！ Ctrl(command) + C Ctrl(command) + V
SVGの使い方・実装方法 Web表示で使いやすいものを4つを紹介 ● img要素 ● object要素 ● CSSのbackground ● HTML5でインラインSVGを記述する
SVGの使い方・実装方法 img要素で参照 IE対応のCSS
SVGの使い方・実装方法 object要素
SVGの使い方・実装方法 CSSのbackground
SVGの使い方・実装方法 HTML5にインラインSVGで記述する
SVGの使い方・実装方法 HTML5にインラインSVGで記述する
SVGの使い方・実装方法 HTML5にインラインSVGで記述する
SVGの使い方・実装方法 HTML5にインラインSVGで記述する この部分だけ使えばOK！
SVGの使い方・実装方法 ● img要素 ● object要素 ● CSSのbackground ● HTML5でインラインSVGを記述する
SVGの使い方・実装方法 ● img要素 ● object要素 ● CSSのbackground ● HTML5でインラインSVGを記述する 各方法やブラウザによっても注意点やフォールバックの方法が 異なる。
SVGの使い方・実装方法 参考スライド SVG MANIAX - CSS Nite After dark7 http://www.slideshare.net/ssuser99dc16/svg-maniaxcss-nite- after-dar...
ここまでがざっくりとした概要
応用やアニメーションのために SVGの細かな構造も知っておきたい。
インラインSVGを書いてみる
インラインSVGを書いてみる
インラインSVGを書いてみる viewBoxの概念 SVGの座標系は特定の単位を持たない。 viewBoxとwidth、heightで1座標単位の大きさを決 定する。
インラインSVGを書いてみる 図形の塗りと線 ● rect ● fill ● stroke
インラインSVGを書いてみる 図形の塗りや線はstyle属性でも表現可能。 ● style="" ● プロパティと値を：でつなぐ。 ● 値の最後に；
インラインSVGを書いてみる 塗りやスタイルの設定をグループ化する。 ● <g>でグループ化 ● <g></g>のなかにある要素にまとめてスタイル 指定できる。 ● 特定の要素だけ別のスタイルを指定したい場合 は直接記述
インラインSVGを書いてみる グラデーションを設定する ● <defs>で要素のidと結びつける ● <linearGradient>でグラデーション ● <stop />で色と場所を指定 ● x1,y1,x2,y2で始発点・終了点を指定
インラインSVGを書いてみる 直線・円・楕円を作成する ● <line>　直線 ● <circle>　円 ● <ellipse>　楕円
インラインSVGを書いてみる 複雑な線を引く ● <polyline> ● <polygon> ● <path>
インラインSVGを書いてみる テキストを表示させてみる。 ● <text>
インラインSVGを書いてみる 作成した図形をアニメーションさせる ● 要素のなかに<animate>を記述する ● dur=""でアニメーションの間隔 ● begin=""で何秒後に開始するか設定
インラインSVGを書いてみる ドットインストール SVG入門 http://dotinstall.com/lessons/basic_svg
役立つツール・ライブラリ
役立つツール・ライブラリ LAZY LINE PAINTER 線画アニメーションのjQueryプ ラグイン http://lazylinepainter.info/
役立つツール・ライブラリ SVG PORN SVGで作られたWebサービス ・ツールのロゴコレクション http://svgporn.com/
役立つツール・ライブラリ Textures.js SVGでテクスチャも作成でき る！ http://riccardoscalco.github.io/textures/
役立つツール・ライブラリ SVG Loaders SVGアニメーションで作られた ローディングアイコン。 JavaScript、CSS不要です。 http://samherbert.net/svg-loaders/
役立つツール・ライブラリ SVG Morpheus SVGアイコンのモーフィングア ニメーション作成するための JavaScriptライブラリ。 http://alexk111.github.io/SVG- Morpheus/
役立つツール・ライブラリ PicSVG jpg、gif、png画像をベクターに 変換するサイト http://picsvg.com/
基本をおさえた後は 便利なツールでどんどん楽をし ましょう！
さらに幅広い表現を可能にする SVG ● 画像にマスクやフィルターをかける。 ● 線画アニメーション などなど…
Web制作者（マークアップ）のスキルセット ● HTML（文書構造の意識） ● CSS・メタ言語（Sass, Less） ● JavaScript ● CMS ● レスポンシブ・マルチデバイス対応 　　+ ● SVG　New!
差別化を図るチャンスかも？
チュートリアル記事、 まとめて後日公開します。 m(_ _)mしばしお待ちを アイドットデザイン http://idotdesign.net
ありがとうございました！
SVGの基本＆活用法。SVGのメリットと事例を基礎から学ぶ。
SVGの基本＆活用法。SVGのメリットと事例を基礎から学ぶ。
SVGの基本＆活用法。SVGのメリットと事例を基礎から学ぶ。
SVGの基本＆活用法。SVGのメリットと事例を基礎から学ぶ。
Upcoming SlideShare
Loading in...5
×

SVGの基本＆活用法。SVGのメリットと事例を基礎から学ぶ。

81

Published on

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

Published in: Internet
0 Comments
3 Likes
Statistics
Notes
no profile picture user

  • Be the first to comment

No Downloads
Views
Total Views
81
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds
Report content
Flagged as inappropriate Flag as inappropriate
No notes for slide

Transcript of "SVGの基本＆活用法。SVGのメリットと事例を基礎から学ぶ。"

  1. 1. Webデザインのトレンド、SVGの基本＆ 活用法。SVGのメリットと事例を基礎か ら学ぶ。 2015年7月25日（土） マカベン × HTML5fun HTML5 基礎から学んで、最新のライブラリを覚えよう！！
  2. 2. 自己紹介
  3. 3. 自己紹介 ● 越水大輔（33歳） ● 営業からWeb制作に転身 ● 現在フリーランス ● アイドットデザイン ● マークアップ多め
  4. 4. 自己紹介 アイドットデザイン 絶賛ブログ更新中です！ http://idotdesign.net Web制作情報 Webマーケティング情報 福岡のイベント情報
  5. 5. 自己紹介 Facebookページもあります。 IT勉強会・イベント情報 ありましたらお知らせ下さい。 今日のスライドも公開します。
  6. 6. 本日の目標
  7. 7. 本日の目標 「SVG…？聞いたことはあるけど、 業務に忙しくてフォローしきれてない。。 CSSフレームワークとか、Gitとかメタ言語 とかタスク管理ツールとか、覚えることが 多すぎておれはもう疲れ（ry」
  8. 8. 本日の目標
  9. 9. 本日の目標 この夏はSVGで勝つ（自信
  10. 10. SVGってなに？
  11. 11. SVGてなに？ Scarable Vector Graphics スケーラブル　ベクター　グラフィックス
  12. 12. SVGてなに？ Scarable Vector Graphics スケーラブル　ベクター　グラフィックス 拡大可能なベクター画像のこと
  13. 13. 　 ラスター画像
  14. 14. 　 ラスター画像 ベクター画像
  15. 15. SVGの特徴
  16. 16. SVGの特徴 ● ベクター形式のXML文書 ● HTMLと似たような「タグ」で構成されている ● 画像でありながらマークアップ言語でもある ● 80個のタグ　https://developer.mozilla.org/ja/docs/Web/SVG/Element
  17. 17. ブラウザの対応状況 ● Firefox 1.5〜 ● Chrome 1〜 ● Safari 3〜 ● iOS Safari 2〜
  18. 18. ブラウザの対応状況 ● Firefox 1.5〜 ● Chrome 1〜 ● Safari 3〜 ● iOS Safari 2〜 ● IE9〜 ● Android 3〜
  19. 19. ブラウザの対応状況 ● Firefox 1.5〜 ● Chrome 1〜 ● Safari 3〜 ● iOS Safari 2〜 ● IE9〜 ● Android 3〜 利用が広がってきている！
  20. 20. Web制作者（マークアップ）のスキルセット ● HTML ● CSS ● JavaScript
  21. 21. Web制作者（マークアップ）のスキルセット ● HTML（文書構造の意識） ● CSS・メタ言語（Sass, Less） ● JavaScript ● CMS ● レスポンシブ・マルチデバイス対応
  22. 22. Web制作者（マークアップ）のスキルセット ● HTML（文書構造の意識） ● CSS・メタ言語（Sass, Less） ● JavaScript ● CMS ● レスポンシブ・マルチデバイス対応 　　+ ● SVG　New!
  23. 23. WHY？ ● 表現の幅の広さ （アニメーション、CSS装飾、アクセシビリティの 担保） ● マークアップ言語で覚えた強みを活かせる ● デザインとエンジニアリングの橋渡し （インタラクション、UI）
  24. 24. WHY？ ● 表現の幅の広さ （アニメーション、CSS装飾、アクセシビリティの 担保） ● マークアップ言語で覚えた強みを活かせる ● デザインとエンジニアリングの橋渡し （インタラクション、UI）
  25. 25. SVGのメリット
  26. 26. SVGのメリット リッチなテキスト表現が可能に。 グラデーションやパターンなどでの装飾が容易に。 参考リンク：http://editors.ascii.jp/m-kobashigawa/svgdemo/01/1.html
  27. 27. SVGのメリット 曲線や斜めの線を活かしたUI表現 ● 地図などのリンク範囲を設定 参考リンク：http://editors.ascii.jp/m-kobashigawa/svgdemo/01/2.html四角ベースだったWebデザイン…
  28. 28. SVGのメリット Flashライクなモーフィングアニメーション 参考リンク：http://editors.ascii.jp/m-kobashigawa/svgdemo/01/3.html
  29. 29. SVGのメリット ベクター形式なので拡大してもギザギザしない。高 解像度ディスプレイにも対応できる。
  30. 30. SVGのメリット ベクター形式なので拡大してもギザギザしない。高 解像度ディスプレイにも対応できる。 ● レスポンシブWebデザインに有効！ ● スマホ＆タブレット（解像度関係なし！）
  31. 31. SVGのメリット アクセシビリティ XML文書なのでテキスト情報を画像に持たせるこ とができる。
  32. 32. SVGのメリット アクセシビリティ 各SVG要素に<title>と<desc>の設定が可能。
  33. 33. SVGのメリット アクセシビリティ だけどスクリーンリーダーが読み取ってくれない。
  34. 34. SVGのメリット アクセシビリティ roleとaria-labelledbyで対応する。
  35. 35. SVGのメリット アクセシビリティ 参考スライド HTML5とSVGで考える、 これからの画像アクセシビリティ http://www.slideshare.net/ssuser99dc16/html5fun- svg-accessibility SVGでのアクセシビリティがわかりやすくまとめられてい ます。
  36. 36. SVGの実装例
  37. 37. SVGの実装例 テキストアニメーションのデモ ● http://tympanus.net/Tutorials/AnimatedTextFills/index.html アニメーションする円グラフのデモ ● http://wheelnavjs.softwaretailoring.net/examples.html
  38. 38. SVGの実装例 企業での導入事例 ● スターバックス　http://www.starbucks.com/ ● ニューヨーク・タイムズ　http://www.nytimes.com/ ● 日本経済新聞社　http://www.nikkei.com/
  39. 39. SVGの使い方
  40. 40. SVGの使い方・実装方法 illustratorで作るのがカンタン！ 文字データの場合はアウトライン化する。 1. 「保存」または「別名で保存」 2. ファイル形式を.svgで選択 保存時のオプション設定はAdobeのページを参考に。 参考：SVG 形式で書き出す方法 （Illustrator CC）https://helpx.adobe.com/jp/illustrator/kb/5710.html
  41. 41. SVGの使い方・実装方法 illustratorからコピペでもOK！ Ctrl(command) + C Ctrl(command) + V
  42. 42. SVGの使い方・実装方法 Web表示で使いやすいものを4つを紹介 ● img要素 ● object要素 ● CSSのbackground ● HTML5でインラインSVGを記述する
  43. 43. SVGの使い方・実装方法 img要素で参照 IE対応のCSS
  44. 44. SVGの使い方・実装方法 object要素
  45. 45. SVGの使い方・実装方法 CSSのbackground
  46. 46. SVGの使い方・実装方法 HTML5にインラインSVGで記述する
  47. 47. SVGの使い方・実装方法 HTML5にインラインSVGで記述する
  48. 48. SVGの使い方・実装方法 HTML5にインラインSVGで記述する
  49. 49. SVGの使い方・実装方法 HTML5にインラインSVGで記述する この部分だけ使えばOK！
  50. 50. SVGの使い方・実装方法 ● img要素 ● object要素 ● CSSのbackground ● HTML5でインラインSVGを記述する
  51. 51. SVGの使い方・実装方法 ● img要素 ● object要素 ● CSSのbackground ● HTML5でインラインSVGを記述する 各方法やブラウザによっても注意点やフォールバックの方法が 異なる。
  52. 52. SVGの使い方・実装方法 参考スライド SVG MANIAX - CSS Nite After dark7 http://www.slideshare.net/ssuser99dc16/svg-maniaxcss-nite- after-dark7-svgmatsuda 各ブラウザにおける注意点などがまとめら れています。
  53. 53. ここまでがざっくりとした概要
  54. 54. 応用やアニメーションのために SVGの細かな構造も知っておきたい。
  55. 55. インラインSVGを書いてみる
  56. 56. インラインSVGを書いてみる
  57. 57. インラインSVGを書いてみる viewBoxの概念 SVGの座標系は特定の単位を持たない。 viewBoxとwidth、heightで1座標単位の大きさを決 定する。
  58. 58. インラインSVGを書いてみる 図形の塗りと線 ● rect ● fill ● stroke
  59. 59. インラインSVGを書いてみる 図形の塗りや線はstyle属性でも表現可能。 ● style="" ● プロパティと値を：でつなぐ。 ● 値の最後に；
  60. 60. インラインSVGを書いてみる 塗りやスタイルの設定をグループ化する。 ● <g>でグループ化 ● <g></g>のなかにある要素にまとめてスタイル 指定できる。 ● 特定の要素だけ別のスタイルを指定したい場合 は直接記述
  61. 61. インラインSVGを書いてみる グラデーションを設定する ● <defs>で要素のidと結びつける ● <linearGradient>でグラデーション ● <stop />で色と場所を指定 ● x1,y1,x2,y2で始発点・終了点を指定
  62. 62. インラインSVGを書いてみる 直線・円・楕円を作成する ● <line>　直線 ● <circle>　円 ● <ellipse>　楕円
  63. 63. インラインSVGを書いてみる 複雑な線を引く ● <polyline> ● <polygon> ● <path>
  64. 64. インラインSVGを書いてみる テキストを表示させてみる。 ● <text>
  65. 65. インラインSVGを書いてみる 作成した図形をアニメーションさせる ● 要素のなかに<animate>を記述する ● dur=""でアニメーションの間隔 ● begin=""で何秒後に開始するか設定
  66. 66. インラインSVGを書いてみる ドットインストール SVG入門 http://dotinstall.com/lessons/basic_svg
  67. 67. 役立つツール・ライブラリ
  68. 68. 役立つツール・ライブラリ LAZY LINE PAINTER 線画アニメーションのjQueryプ ラグイン http://lazylinepainter.info/
  69. 69. 役立つツール・ライブラリ SVG PORN SVGで作られたWebサービス ・ツールのロゴコレクション http://svgporn.com/
  70. 70. 役立つツール・ライブラリ Textures.js SVGでテクスチャも作成でき る！ http://riccardoscalco.github.io/textures/
  71. 71. 役立つツール・ライブラリ SVG Loaders SVGアニメーションで作られた ローディングアイコン。 JavaScript、CSS不要です。 http://samherbert.net/svg-loaders/
  72. 72. 役立つツール・ライブラリ SVG Morpheus SVGアイコンのモーフィングア ニメーション作成するための JavaScriptライブラリ。 http://alexk111.github.io/SVG- Morpheus/
  73. 73. 役立つツール・ライブラリ PicSVG jpg、gif、png画像をベクターに 変換するサイト http://picsvg.com/
  74. 74. 基本をおさえた後は 便利なツールでどんどん楽をし ましょう！
  75. 75. さらに幅広い表現を可能にする SVG ● 画像にマスクやフィルターをかける。 ● 線画アニメーション などなど…
  76. 76. Web制作者（マークアップ）のスキルセット ● HTML（文書構造の意識） ● CSS・メタ言語（Sass, Less） ● JavaScript ● CMS ● レスポンシブ・マルチデバイス対応 　　+ ● SVG　New!
  77. 77. 差別化を図るチャンスかも？
  78. 78. チュートリアル記事、 まとめて後日公開します。 m(_ _)mしばしお待ちを アイドットデザイン http://idotdesign.net
  79. 79. ありがとうございました！

  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×