Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

モックアップやプロトタイプづくりを 加速させる。それが 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。 松田直樹

    Be the first to comment

    Login to see the comments

  • aikoyusa

    Sep. 1, 2014
  • sakiemuneyasu

    Sep. 10, 2014
  • yuko141

    Sep. 19, 2014
  • mersy

    Oct. 10, 2014
  • jinktmt

    Oct. 15, 2014
  • TakahisaMino

    Oct. 16, 2014
  • applebeat

    Oct. 18, 2014
  • AyuneTanisugi

    Oct. 21, 2014
  • kazuyukikumakura

    Nov. 6, 2014
  • miwako_PT

    Jan. 5, 2015
  • kazuyukikumakura1

    Jan. 21, 2015
  • tomokoihira

    Jan. 25, 2015
  • kentarohori

    Feb. 2, 2015
  • hidekitomari

    Mar. 6, 2015
  • yonetaso

    Mar. 7, 2015
  • wataamee

    Mar. 30, 2015
  • keitakawamoto

    Apr. 30, 2015
  • ssusercb0e69

    Oct. 12, 2015
  • aghome

    Nov. 11, 2015
  • wkrn

    Dec. 11, 2015

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

Views

Total views

12,385

On Slideshare

0

From embeds

0

Number of embeds

275

Actions

Downloads

21

Shares

0

Comments

0

Likes

63

×