Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」

昨今、Webデザインのツールとしても注目を浴び始めているベクターツール。老舗の Illustrator はもちろん、新参の Sketch 3 などもすでにWebデザインツールとして十分な実績を得ています。
もちろんデザインカンプを作るツールとしても優秀なこれらですが、モックアップづくりなどの中間成果物においてもベクターは僕らの味方です。ベクター、ひいては SVG の時間短縮的に効率的な活用法をご紹介します。

  • Identifiez-vous pour voir les commentaires

モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」

  1. 1. モックアップやプロトタイプづくりを 加速させる。それが SVG。 松田直樹
  2. 2. CCO, Web Designer 松田直樹
  3. 3. なにかと話題の SVG
  4. 4. 10年前から
  5. 5. SVG(ベクター)なツールが充実してきた Illustrator CC 2014 Sketch 3
  6. 6. Illustrator CC なら
  7. 7. なんと Illustrator CC なら
  8. 8. 画像の「書き出し」いらず
  9. 9. SVG ならコピペで OK ⌘ + C ⌘ + V
  10. 10. コピペで SVG のコードを お好きなエディタに貼り付け
  11. 11. Sketch 3 ではできない
  12. 12. コードドリブン で プロトタイプを作ることあるじゃないですか?
  13. 13. そんなときに便利なので ちょっとデモ
  14. 14. ということは こんなことまで
  15. 15. CSSにSVGのコードを直接貼り付けて 背景画像を指定 Base 64 にしなくてもいい background: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"> <circle fill="orange" cx="50" cy="50" r="50"/> </svg> ');
  16. 16. 他にも
  17. 17. Edge Reflow にもそのままコピペできる
  18. 18. (余談)
  19. 19. テキストが含まれると テキストだけしかコピーされない ⌘ + C ⌘ + V PIZZA
  20. 20. ちゃんと使うときは ちゃんとコードを整形しよう
  21. 21. いらない部分は削除 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In --> <svg version="1.1" xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink xmlns:a=http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/ x=0px y=0px width=67.7px height=63.5px viewBox=0 0 67.7 63.5 style=enable-background:new 0 0 67.7 63.5; xml:space=preserve
  22. 22. width, height の指定は適宜削除 !-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In -- svg version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink xmlns:a=http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/ x=0px y=0px width=67.7px height=63.5px viewBox=0 0 67.7 63.5 style=enable-background:new 0 0 67.7 63.5; xml:space=preserve
  23. 23. レイヤー名に日本語使うと 修正必須 g id=ハンバーガー_1_ path class=st0 d=M38.1,0h-8.5C17.9,0,2.1,9.5,2.1,21.2v2.1c0,1.2,0.9,2.1,2.1,2.1h5 9.3c1.2,0,2.1-0.9,2.1-2.1v-2.1C65.6,9.5,49.8,0,38.1,0z M2.1,59.3c0,2.3,1.9,4.2,4.2,4.2h55c2.3,0,4.2-3z/ path class=st1 d=M4.2,46.6h59.3c2.3,0,4.2,1.9,4.2,4.2c0,2.3-.9,55,0,53.1,0,50.8C0,48.5,1.9,46.6,4.2,46.6z/
  24. 24. とにかく
  25. 25. とで HTML ベースのプロトタイピングに 超便利です
  26. 26. SVG MANIAX - CSS Nite After dark7 http://www.slideshare.net/ssuser99dc16/svg-maniaxcss-nite-after-dark7-svgmatsuda
  27. 27. ありがとうございました モックアップやプロトタイプづくりを 加速させる。それが SVG。 松田直樹

×