読者です 読者をやめる 読者になる 読者になる

naMemo

うぇっぶやアプリやデザインに興味深々なキモオタのメモ

Flinto×Cookpad〜プロトタイピング開発のいま〜 に行ってきた

プロトタイピング UI

プロトタイピングツールFlintoのイベントに行ってきたので、イベント内容と、今後活かせそうなことなどをメモ程度に書く http://connpass.com/event/22125/

イベントの流れ

  • FlintoのデザイナーであるNathan Manousosさん、エンジニアの奥井さんが来日して登壇。Flinto for Macについてお話
  • 合わせてクックパッドのデザイナー池田さんがFlintoの活用事例をご紹介
  • 最後に奥井さん×池田さんの対談&質疑応答

Flinto For Mac

  • デザイナーのためのプロトタイピングツール
  • 画面遷移から、ジェスチャーに応じたインタラクティブなアクションまで作れる
  • ルーセルのようなスクロールビューの動きも作れる
  • サイドバイサイドでプレビュー見ながらプロトタイピングできる(このへんはPrincipleもできたきがする)
  • Sketchとの連携が強そう。プラグインを入れてFlintoにまるっと画像をもってこれるらしい(ちゃんとつかってない...)
  • 昔はブラウザのみのツールだったようだが、先日Macアプリをリリース
  • 日本語対応した https://www.flinto.com/ja/mac
    • メールサポートが日本語で受けられる
    • 奥井さんが日本語ローカライズに携わってる(というか奥井さんがやってるw)

イベント内容

クックパッドでのFlinto活用事例

  • クックパッドでは、必ず企画がきて、プロトタイピングして、実装している。プロトタイピングは紙でやったりFlintoつかったり。
  • Flintoをつかってプロトタイピングする利点
    • アプリの体験が、アプリらしい動きでそのままつくれる。細かいUIやトランジッションが表現できる
    • プレビューがほぼリアルタイム
    • オフラインでもつかえる
  • 事例:チャットヘッド的なUI(写真撮り忘れた〜〜)
  • 動画に書き出してyoutubeにアップしてgithubで共有しているっぽかった(この辺の共有方法、ちゃんと質問しにいけばよかったかも)

奥井さん×池田さんの対談

  • Flintoをつくったきっかけ
    • echofonつくってたときに、デザイナーを探していて、Nathanにお願いしていた。そのとき、Nathanさんは静的な画面のデザインしかみせられないことにフラストレーションを感じていたそうだ。
    • そこで、最初はechofonの開発時、デザインの意図を伝えるために、FlintoのWeb版をつくった
    • 自分たちの身の回りの課題を、サービスに。
  • 最初はWebツールだったが、なぜネイティブに?
    • ブラウザで作れる動きは限界がある。レイヤーベース、ジェスチャーベースのトランジッションなど色々なことがしたかった。
  • ユーザが欲しいといった機能はつけていく。Twitterやメールは常に見てる(かなりCSからの意見を重視して開発している印象だった)
  • FlintoのプロトタイプをFlintoでした?
    • リリースの3ヶ月前からできるように。
  • 仕事のやりかた
    • 奥井さん、Nathanさんの二人でコワーキングスペースでやってるが、今はほぼリモート
    • アメリカだと、リモートで仕事をするにはどうしたらよいか、ということを常に考えているらしい。ここは日本と大きく異なる。
  • 凝ったプロトタイプを実装するのは、エンジニアが大変という課題がある。
    • 奥井さん的には、エンジニアが苦労するのを狙ってる。エンジニアは、限界を乗り越えてがんばってUIをつくってほしい
    • デザイナーもエンジニアも新しい表現をつくるためにがんばってほしい。画面遷移ベースのUIだと、それしかできない表現で完結してしまう。
  • Flintoでつくったものをどうエンジニアに渡すべきか?トランジッションのコード書き出しなどはできないのか?
    • 今のところ考えていないが、例えばjsonで書きだして、このライブラリとこのライブラリつかってこういう値にしてください程度のことはできるようにしたい。完全書き出しはしない。
  • プロトタイプを作って渡すまでがデザイナーの仕事とおもっていてはだめ。理想は、プロトタイプは、ごみ。
  • 他のプロトタイプツールがたくさん出ているけど...
    • ユーザビリティを考えるとき、魔法が使えたらこの機能をどう実装する?ということを常に考えている
    • 他社を気にすると後追いになる、いつまでもおわらない、ので無視
  • 最終的な目標は、アプリ全体をプロトタイプしてもらうこと。アプリケーション全体が見通せれば見通せるほどより良い開発になるのでは?と考えている
  • flintoでつくったものを共通のコミュニケーションとするのが理想
  • デザイナーがアプリを作りたいと思った時に最初に開くのがFlintoであって欲しい

参加してみて

  • Flinto自体はとてもおもしろそうなツールで個人的には使ってみたいが、仕事では既存のUI改修のような案件が多いので、画面遷移ぐらいしか動きがなく、プロトタイピングしても意味がないような気がする(むしろプロトタイピングする時間がもったいない)
  • 上記のこともあり、プロトタイピングがどういう場面で役に立つのか気になった。新規サービス立ち上げ、UIリニューアルのとき、特殊なインタラクションの機能追加をするとき?
  • ただ「こんなUIのアプリつくりたいなー」というデザイナーの妄想を具現化できるのはすばらしいと思う。デザイナーもエンジニアも、時間のなさとか、実装の難しさといった理由で新しい表現を諦めがちだけど、(奥井さんもおっしゃってたが)限界を超えて新しい表現に挑戦することもやっていくべきだよなーと思った。
  • 自分たちのフラストレーションをサービスにする、カッコイ!

余談

イベントとは全く関係ないが、他社のデザイナーさんやエンジニアさんと話す機会があり、かなり刺激になった。 お話したデザイナーさんの会社では、デザインレビューをgithub上でしているらしく、面白いレビュー方法だなあと思った。 私の会社ではチャットツールに投げたり、最終的な成果物をConfluenceにまとめたりしているが、変更履歴の可視化が面倒な時があるし、チャットだとあとで見直したいときにログがすぐ流れる。 (ただ、UIデザインの場合、ひとつのPSDファイルをみんなで編集することってあまりないので、あんまりgitの恩恵に預かれないかも...) とりあえず個人リポジトリで試しにやってみようかと思う。