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.
Framerで動くモックアップを簡単作成
こもりまさあき 2014 6.19 / CPI x CSS Nite x 優クリエイト「After Dark」(11)
Getting started prototyping with Framer
自己紹介
こもりまさあき
1972年生まれのフリーランス。1990年代前半に都内のDTP系デザイン会社にてア
ルバイトをはじめる。大学卒業後そのまま正社員となり、入出力業務、デザイン
業務、ネットワーク関連業務に並行して従事。2001年、会社を...
今日お話しすること
• プロトタイピングツールあれこれ
• Framerでできること
• Framerの基本的な使い方
• Sketch × Framer(デモ)
プロトタイピングツールあれこれ
Webサイトやスマートデバイス向けのコンテンツ制作、
ワイヤーフレームや画面イメージを作っただけでは
どうしても動作イメージがわきにくい
プロトタイピングとは、プロトタイプを作ること。
ワイヤーフレームの時点から...
Framerでできること
カンプから書き出した画像を使って、
動くモックアップを簡単に作れるのがFramer
動作確認は、Webブラウザ。
ローカルでもリモートからでも確認が可能
使い方はいろいろ
カンプの画像を使うだけではなく、
直接HTMLやテキストを書くこともできる
複雑な動きがいらないなら、
あらかじめ用意されてる機能だけで作れる
http://bit.ly/ad11med
JavaScriptだけど、難しくない
imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/
icon.png"})
imageLayer.center(...
レイヤーのインスタンスを作る
imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/
icon.png"})
imageLayer.center()
ima...
レイヤーを指定して、どうしたいかを記述
imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/
icon.png"})
imageLayer.center(...
アニメーションには、オプション指定も可
imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/
icon.png"})
imageLayer.center(...
クリックやドラッグのイベントで発火させる
imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/
icon.png"})
imageLayer.center...
書き方がわからないときは?
日本語のリソースは少ないので…、
examples.framerjs.com を参考にしましょう
Framer Examples: http://examples.framerjs.com/
Framerの基本的な使い方
Framerの実体は、JavaScriptのみ。
配布ファイルをダウンロードして、すぐに始められる
http://framerjs.com/
Framerの構成要素
解凍してできた「Project」内のファイルが基本構成。
app.jsに自分のコードを書いていけばよい
index.html
app.js
framer/framer.js
images/
GitHub版はコンパイルが必...
app.jsに書いてみよう
demoLayer = new Layer({
x: 0,
y: 0,
width: 640,
height: 1136,
backgroundColor: "red"
})
demoLayer.draggable ...
もう少し追加してみる
childLayer = new Layer({width:128, height:128,
image:"images/Icon.png"})
demoLayer.addSubLayer(childLayer)
chil...
Framer Generator
Framer Generatorは、OS X専用アプリ。
Photoshopを開きながらの作業が可能
書き出すパーツは、レイヤーグループに
公式サイトに記述はないが、
最新β版でSketchファイルにも対応済
...
Framer Generatorで書き出した場合
画像が書き出されるだけでなく、
JSONファイルにレイヤー名や親子関係などの情報が保存される。
画像へのアクセスは、レイヤー名で
var PSD = Framer.Importer.load("...
ローカルサーバを起動する
「サーバのこととかわからない!」という方は、
インストールするだけのAnvilを使うのが一番簡単(無償)
Sketch × Framer
では、Sketchのファイルを使ってデモをおこないます
Framerのリソース
• Framer Examples http://examples.framerjs.com/
• Prototyping with Framer http://framer.camp/
• Framer-templat...
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
Upcoming SlideShare
Loading in …5
×

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

8,995 views

Published on

~ Getting started prototyping with Framer.

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

Published in: Design
  • Be the first to comment

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/

×