Framerで動くモックアップを簡単作成

6,899 views

Published on

~ Getting started prototyping with Framer.

※このスライドは、2014年6月19日のCSS Niteで話した内容です。
http://cssnite.jp/afterdark/cpi/vol11/

Published in: Design

Framerで動くモックアップを簡単作成

  1. 1. Framerで動くモックアップを簡単作成 こもりまさあき 2014 6.19 / CPI x CSS Nite x 優クリエイト「After Dark」(11) Getting started prototyping with Framer
  2. 2. 自己紹介 こもりまさあき 1972年生まれのフリーランス。1990年代前半に都内のDTP系デザイン会社にてア ルバイトをはじめる。大学卒業後そのまま正社員となり、入出力業務、デザイン 業務、ネットワーク関連業務に並行して従事。2001年、会社を退職しそのままフ リーランスに。案件ごとに業務内容や立ち位置が異なることが多く、職能・職域 的な肩書きはなし。『基礎から覚える、深く理解できる。 Webデザインの新しい 教科書』(共著・MdN刊)をはじめ、執筆多数。2014年からはWeb制作者向けに 必要な情報を早く届けたい、との想いから電子書籍の執筆・販売を開始。現在、 その第一弾となる『Sketch 3 Book for Beginner』が好評発売中。 @cipher @cipher
  3. 3. 今日お話しすること • プロトタイピングツールあれこれ • Framerでできること • Framerの基本的な使い方 • Sketch × Framer(デモ)
  4. 4. プロトタイピングツールあれこれ Webサイトやスマートデバイス向けのコンテンツ制作、 ワイヤーフレームや画面イメージを作っただけでは どうしても動作イメージがわきにくい プロトタイピングとは、プロトタイプを作ること。 ワイヤーフレームの時点から、カンプができてから、 人によって使う段階が異なるため、ツールは山のように…
  5. 5. Framerでできること カンプから書き出した画像を使って、 動くモックアップを簡単に作れるのがFramer 動作確認は、Webブラウザ。 ローカルでもリモートからでも確認が可能
  6. 6. 使い方はいろいろ カンプの画像を使うだけではなく、 直接HTMLやテキストを書くこともできる 複雑な動きがいらないなら、 あらかじめ用意されてる機能だけで作れる http://bit.ly/ad11med
  7. 7. JavaScriptだけど、難しくない imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/ icon.png"}) imageLayer.center() imageLayer.states.add({ second: {y:100, scale:0.6, rotationZ:100}, third: {y:300, scale:1.3}, fourth: {y:200, scale:0.9, rotationZ:200}, }) imageLayer.states.animationOptions = { curve: "spring(500,12,0)" } imageLayer.on(Events.Click, function() { imageLayer.states.next() })
  8. 8. レイヤーのインスタンスを作る imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/ icon.png"}) imageLayer.center() imageLayer.states.add({ second: {y:100, scale:0.6, rotationZ:100}, third: {y:300, scale:1.3}, fourth: {y:200, scale:0.9, rotationZ:200}, }) imageLayer.states.animationOptions = { curve: "spring(500,12,0)" } imageLayer.on(Events.Click, function() { imageLayer.states.next() })
  9. 9. レイヤーを指定して、どうしたいかを記述 imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/ icon.png"}) imageLayer.center() imageLayer.states.add({ second: {y:100, scale:0.6, rotationZ:100}, third: {y:300, scale:1.3}, fourth: {y:200, scale:0.9, rotationZ:200}, }) imageLayer.states.animationOptions = { curve: "spring(500,12,0)" } imageLayer.on(Events.Click, function() { imageLayer.states.next() })
  10. 10. アニメーションには、オプション指定も可 imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/ icon.png"}) imageLayer.center() imageLayer.states.add({ second: {y:100, scale:0.6, rotationZ:100}, third: {y:300, scale:1.3}, fourth: {y:200, scale:0.9, rotationZ:200}, }) imageLayer.states.animationOptions = { curve: "spring(500,12,0)" } imageLayer.on(Events.Click, function() { imageLayer.states.next() })
  11. 11. クリックやドラッグのイベントで発火させる imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/ icon.png"}) imageLayer.center() imageLayer.states.add({ second: {y:100, scale:0.6, rotationZ:100}, third: {y:300, scale:1.3}, fourth: {y:200, scale:0.9, rotationZ:200}, }) imageLayer.states.animationOptions = { curve: "spring(500,12,0)" } imageLayer.on(Events.Click, function() { imageLayer.states.next() })
  12. 12. 書き方がわからないときは? 日本語のリソースは少ないので…、 examples.framerjs.com を参考にしましょう Framer Examples: http://examples.framerjs.com/
  13. 13. Framerの基本的な使い方 Framerの実体は、JavaScriptのみ。 配布ファイルをダウンロードして、すぐに始められる http://framerjs.com/
  14. 14. Framerの構成要素 解凍してできた「Project」内のファイルが基本構成。 app.jsに自分のコードを書いていけばよい index.html app.js framer/framer.js images/ GitHub版はコンパイルが必要: https://github.com/koenbok/Framer/
  15. 15. app.jsに書いてみよう demoLayer = new Layer({ x: 0, y: 0, width: 640, height: 1136, backgroundColor: "red" }) demoLayer.draggable = true; demoLayer.draggable.speedX = 0;
  16. 16. もう少し追加してみる childLayer = new Layer({width:128, height:128, image:"images/Icon.png"}) demoLayer.addSubLayer(childLayer) childLayer.center() childLayer.animate({ properties: { rotationZ: 180 }, curve: "spring(1500,12,10)", delay: 2 })
  17. 17. Framer Generator Framer Generatorは、OS X専用アプリ。 Photoshopを開きながらの作業が可能 書き出すパーツは、レイヤーグループに 公式サイトに記述はないが、 最新β版でSketchファイルにも対応済 Sketchプラグイン単体はコンパイルが必要: https://github.com/bomberstudios/sketch-framer-3
  18. 18. Framer Generatorで書き出した場合 画像が書き出されるだけでなく、 JSONファイルにレイヤー名や親子関係などの情報が保存される。 画像へのアクセスは、レイヤー名で var PSD = Framer.Importer.load("imported/images"); PSD.layerName.animate({ ••• }) Framer Generatorで書き出したJSONを読み込むため、ローカルでサーバを起動する必要がある
  19. 19. ローカルサーバを起動する 「サーバのこととかわからない!」という方は、 インストールするだけのAnvilを使うのが一番簡単(無償)
  20. 20. Sketch × Framer では、Sketchのファイルを使ってデモをおこないます
  21. 21. Framerのリソース • Framer Examples http://examples.framerjs.com/ • Prototyping with Framer http://framer.camp/ • Framer-templates https://github.com/tisho/framer-templates • Shortcuts for Framer 3 https://github.com/facebook/shortcuts-for-framer • Cactus for Mac http://cactusformac.com/ • Browser-Sync http://browsersync.io/ • Clear Browser http://www.aliceturtle.com/clear-browser/

×