CPI x CSS Nite x 優クリエイト 「After Dark」（11）フォローアップ こもりさん | CSS Nite公式サイト

2014年6月18日 、KDDIウェブコミュニケーションズセミナールーム（麹町）で開催したCPI x CSS Nite x 優クリエイト 「After Dark」（11） のフォローアップとして、こもり まさあきさんの『Framerで動くモックアップを簡単作成』セッションのスライドなどをシェアします。

今回Framerを紹介したのは、主にヴィジュアル面を制作されるデザイナーさんでもほんの少しコードを書いてもらうと意図した動きを実装したモックアップを作って、クライアントや次のステップの担当者に自分の意図するものを伝えやすいかな？というところにあります。

他のモックアップツールは、「画面全体を登録して、その中でボタンの位置を指定して次の画面に遷移させる」といった使い方も多く、実際には「画面内の一部だけが変わるんだけど…」とか「パッと変わるんではなく、ほわっと出てくる感じで変わるんだよね」みたいなことは多々あるんじゃないかと思うのです。そういったときに、このFramerであれば、画面内の一部を別に書き出すことで個別の指定が可能になります。

普段コードを書く機会のない方にはちょっと難しいかな？とも思ってはいたのですが、アンケートの結果を見ても「JavaScript難しそう」という声が多かったように思います。でも、安心してください。当日はひょうひょうと書いてたように見えるこもりも、実際にはそんなにJavaScriptには詳しくもないので。

JavaScriptを書くと言っても、ああいった画面遷移などは割と決まった動きになることも多くFramerを使えば高度な記述は求められません。「画像をどこの位置に表示するか」「クリックしたときに動かすのか」「ドラッグが止まったら動かすのか」「他のアニメーションが終わったら次のアニメーションを実行するのか」みたいなことなら、あらかじめ用意された変数やファンクション（機能）を書くだけです。ちょっとJavaScriptをたしなんでる方はお気付きのように、jQueryのプラグインの実行オプションを書くのに非常に似ているかと思います。

最後の質問でもあったように、これを実際のサイトで利用できるかというとそのままでは使うことはできないでしょう（使えなくはないですが）。それをベースに専門のエンジニアに作ってもらう、最終的なコードが流用可能な製品品質のものを作りたければ最初から別のものを使うといったことになります。Framerは現時点ではあくまでもWebサイトやWebアプリ、スマートデバイス向けのアプリのデザインカンプをもとにしてプロトタイピングをするものだと考えていただいた方が良いかと思います。

今回セッション中で紹介したファイル、デモファイルなどは下記にまとめておきました。GitHubにあげてますので、右下にある「Download ZIP」のボタンでダウンロードしてください。中にいろいろファイルが入ってますが、app.jsが実際の指定ファイルでコメントをいれてあります。.sketchは元ファイルになります。レイヤーの作り方などのご参考までに。

https://github.com/gaspanik/cssnite-ad11-follow

CSSNiteAfiterDark-11-komori from CSS Nite on Vimeo.