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

Framerで動くモックアップを簡単作成
こもりまさあき 2014 6.19 ／ CPI x CSS Nite x 優クリエイト「After Dark」（11）
Getting started prototyping with Framer

自己紹介
こもりまさあき
1972年生まれのフリーランス。1990年代前半に都内のDTP系デザイン会社にてア
ルバイトをはじめる。大学卒業後そのまま正社員となり、入出力業務、デザイン
業務、ネットワーク関連業務に並行して従事。2001年、会社を退職しそのままフ
リーランスに。案件ごとに業務内容や立ち位置が異なることが多く、職能・職域
的な肩書きはなし。『基礎から覚える、深く理解できる。 Webデザインの新しい
教科書』（共著・MdN刊）をはじめ、執筆多数。2014年からはWeb制作者向けに
必要な情報を早く届けたい、との想いから電子書籍の執筆・販売を開始。現在、
その第一弾となる『Sketch 3 Book for Beginner』が好評発売中。
@cipher @cipher

今日お話しすること
• プロトタイピングツールあれこれ
• 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.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()
})

レイヤーのインスタンスを作る
icon.png"})
imageLayer.center()
})
}
})

レイヤーを指定して、どうしたいかを記述
icon.png"})
imageLayer.center()
})
}
})

アニメーションには、オプション指定も可
icon.png"})
imageLayer.center()
})
}
})

クリックやドラッグのイベントで発火させる
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版はコンパイルが必要: https://github.com/koenbok/Framer/

app.jsに書いてみよう
demoLayer = new Layer({
x: 0,
y: 0,
width: 640,
height: 1136,
backgroundColor: "red"
})
demoLayer.draggable = true;
demoLayer.draggable.speedX = 0;

もう少し追加してみる
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
})

Framer Generator
Framer Generatorは、OS X専用アプリ。
Photoshopを開きながらの作業が可能
書き出すパーツは、レイヤーグループに
公式サイトに記述はないが、
最新β版でSketchファイルにも対応済
Sketchプラグイン単体はコンパイルが必要: https://github.com/bomberstudios/sketch-framer-3

Framer Generatorで書き出した場合
画像が書き出されるだけでなく、
JSONファイルにレイヤー名や親子関係などの情報が保存される。
画像へのアクセスは、レイヤー名で
var PSD = Framer.Importer.load("imported/images");
PSD.layerName.animate({
•••
})
Framer Generatorで書き出したJSONを読み込むため、ローカルでサーバを起動する必要がある

ローカルサーバを起動する
「サーバのこととかわからない！」という方は、
インストールするだけのAnvilを使うのが一番簡単（無償）

Sketch × Framer
では、Sketchのファイルを使ってデモをおこないます

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/

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

More Related Content

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