CrowdWorks Designer Blog

クラウドワークスのデザイナーが書くブログ。深いような、そうでもないような知識、体験、考察をお届けします。

デザインツールFramerもくもく勉強会を開催しました&コミュニティ開設のお知らせ

こんにちは。デザイナーの上田です。

普段、皆さんはどんなプロトタイピングツールを使っているでしょうか?世の中には様々なプロトタイピングツールがありますが、それぞれ使い方や得意とすることが違っていて、キャッチアップしていくのも一苦労ですよね。

クラウドワークスでも色々なツールを試していて、次はFramerを試してみようということになりました。そして、せっかくなら社外の方たちと一緒にさわってみよう!ということで「もくもく勉強会」というイベントを開催しました。

crowdworks-udg.connpass.com

Framerとは

f:id:ueda1023:20170908172802p:plain

Framer - Design, code and collaborate.

Framerは、Sketchライクなデザインツールとコードエディタを組み合わせたようなプロトタイピングツールで、プログラム(CoffeeScript)を書くことでアニメーションや画面遷移を作っていきます。

プログラムを書かなければいけないので、デザイナー(非エンジニア)にはややとっつきにくいのですが、プログラムだからこそ、作れるものの自由度がとても高く、細かい動きもかなり作り込める点が特徴です。

イベントの様子

f:id:ueda1023:20170908174924j:plain

イベントでは、それぞれもくもく作業をする前に、まずは簡単なプロトタイプをつくる公式のチュートリアルにみんなで取り組みました。Framerはチュートリアルやサンプルが充実してるのもポイントです(全部英語ですが…)。

f:id:ueda1023:20170908174938j:plain

我々も参加してくださった方々もFramerを初めてさわる方ばかりで、試行錯誤しながらも、協力し合いながら進めていきました。なんとか書いたプログラムがサンプル通りに動くところまで辿り着けました。

f:id:ueda1023:20170908175059j:plain

チュートリアルが終わった後は、「もくもく会」です。もくもく会とは、“それぞれ各自もくもくと勉強したり作業したり本を読んだりするだけの会”(もくもく会ポータルより) のことです。各自、黙々と作業します。

f:id:ueda1023:20170908175138j:plain

チュートリアルで作ったプロトタイプをいじってみたり、別のサンプルをさわってみたり。とても可能性を感じるツールなのですが、日本語の情報が少なく、使いこなすまでには苦労しそうです。

懇親会も開きました

f:id:ueda1023:20170908175224j:plain

約1時間の作業の後、懇親会も開きました。Framerを使ってみての感想や、他のプロトタイピンツールについての情報交換など、とても有意義な時間が過ごせたと思います。ご参加いただき本当にありがとうございました!

Framer Japan コミュニティ開設のお知らせ

ここでお知らせです。このイベントをきっかけとして、このたび、日本のFramerユーザー向けに、「Framer Japan」というコミュニティを開設しました!(※ Framerの許諾を得た上で開設しています)

懇親会での「Framerは日本語の情報が少ない!」という話から、イベント後も情報共有していける場を作っていこうということで、使い方の相談・質問や、イベント情報の共有ができればと思います。Framerを既に使っている方も、これから使ってみたいと思っている方も、どうぞご参加ください!

Framer Japan