高田馬場のスターバックスで声をかけられ、ookamiに参加

僕は高知県生まれの19歳です。生まれてから10年間は日本に住んでいて、その後8年間フランスで生活をし、また日本に帰ってきました。現在は武蔵野美術大学に所属しながら、ookamiでPlayer!の開発に携わっています。

2014年の9月に日本に来てすぐ、高田馬場のスターバックスでフランスのクライアント向けにデザインをしていたところ、ookamiの創業者の伊藤さんにいきなり声をかけられました（笑）。

すごくフレンドリーで、話が盛り上がって。話してみると、スタートアップでアプリ開発をしているということで、早速プロトタイプを見せてもらいました。すると本当にまだ出来たばかりの感じで（デザイナーが入っているのかな？）、と思いました。すると「明日から来てくれないかな？」って言われて（笑）。それが始まりでした。

13歳でデザインを始め、日本のデザインを学ぶために来日

僕がPhotoshopやIllustratorを使ってグラフィックデザインを始めたのは、13歳の時です。その後14歳からWebデザインを始め、まずはHTMLとCSSを書いてみて「面白いな」と感じ、JavaScriptも書くようになりました。

デザインの中でも、とりわけ日本の伝統的なデザインが好きでした。例えば、無印のような「Simple is best」もすごく好きだったので、それを学ぼうと思って日本に来たんですね。

ookamiに入る前は、モバイルアプリのUI/UXデザインに関しては未経験でした。ただ、iPhone3Gを買った時から「App Storeに自分がデザインしたアプリを出したい」という夢を持っていたので、スターバックスで声をかけられた時、丁度良い機会だと思ったんですね。

Prott、Sketch、Flinto for Macを使い、プロトタイプを作成

現在は、スマホでスポーツを楽しめる「Player!」というアプリのデザインをしています。Player!のデザインプロセスは、まずプロトタイピングツール「Prott」でラフスケッチを作り、それをバージョン管理ツールの「GitHub」で共有します。

▼ラフスケッチをもとにProttでプロトタイプを作る

その際、「このUIはこういう構造で、こういう問題を解決するために作っています」という意図もあわせてしっかりと伝えます。

そしてメンバーにフィードバックをもらい、修正した後に「Sketch」でデザインに落とします。そしてそのデザインに「Flinto for Mac」というプロトタイピングツールでインタラクションを施し、メンバーを中心に触って動きを確認してもらいます。

▼Flinto for Macでインタラクションも確認できるプロトタイプを作る

そこで課題が見つかればまたそれを解決するデザインを作り、プロトタイピングを繰り返します。問題がすべて解消されたところで、やっとエンジニアが実装を始めます。

このように、実際の開発に入る前にUI/UXの設計をしっかりとして、プロトタイプに落とし、無駄な開発が発生しないようにしています。

実は、ookamiに入るまで、チームでプロダクトを作った経験はありませんでした。自分ひとりでコードを書いていたので、GitHubも使ったことはなくて。ookamiに入ってからは、エンジニアの中村さんがGitHubの使い方やチーム開発について教えてくれました。

チームで開発するようになって気が付いたのは、自分の頭の中に入っているイメージやインタラクションをチームメンバーに伝える重要性です。

僕は日本語、フランス語、英語、が話せるのですが、特に日本語に関しては100％ではありません。だからこそ、完成したデザインに誤解が起こらないようにチームに共有する方法を工夫した結果、今のプロセスになりました。デザインプロセスの中で使うツールは、使ってみて良い悪いをGitHubで共有した上で最高のものを選定しています。

Flinto for Macで、ネイティブアプリのインタラクションを確認

Prott→Sketch→Flinto for Macというプロセスでデザインをしていますが、その中でもFlinto for Macは、ネイティブアプリで理想のデザインを作るための素晴らしいツールです。コードなしでインタラクションやアニメーションを、簡単に表現することができます。

以前は「Framer Studio」というコードを書いてプロトタイプを作るツールを使っていたのですが、すごく時間がかかっていました。コードを書かなければいけないので、デザインを作るよりも「このバグをどうするんだ」っていう問題が起きてしまって（笑）。他にも「Pixate」というインタラクションを表現できるプロトタイピングツールも使ったんですが、オプションが沢山あって難しすぎて…48時間で使うのをやめました。

Flinto for Macを使うようになったのは、2015年の9月頃です。Flintoであればプロトタイプを作るコストもかからないし、パフォーマンスも安定しています。コードを書かなくても、とてもComplexで難しいUXも作れるんです。最高のツールだと思います。Sketchにプラグインもあるので、Sketchで作ったデザインをFlintoにそのまま移せるのもすごく良いです。

▼Sketchで作ったデザインをFlinto for Macに移せる

以前はインタラクションを表現するために、Adobe after effectsやApple Motionを使ったり、CSSで書いていたのでとても時間がかかっていました。Flintoであれば、プロトタイプのソースファイルをエンジニアも開くことができ、動き方もすべて数値で設定されているので、デザイナーとエンジニアが意思疎通をするプロセスがすごく短くなりました。

▼動き方もすべて数値で設定できるFlinto for Mac

Flinto for Macを使うと、ビジョンを形にできる

Player!というアプリのデザインにおいては、ユーザーに「自分はスポーツ選手にはなれないけど、なったつもりで一緒に参加できる」ような気持ちになってもらえるよう心がけました。

その実現のため、Player!には「ライブ」という機能があり、スポーツをリアルタイムで見ながら、その試合に関するコメントを書き込むことができます。今後はコメントを書き込めるだけではなく、アプリ上でリアルタイムに動画を配信できるようになれば、ユーザー体験が大きく向上すると思っています。ただ、ビジョンを形にするまでには時間がかかります。そのような期間にPlayer!の長期ビジョンを示すために、Flinto for Macは重宝しています。

▼Flinto for Macでビジョンを形に

実際のスタジアムって暗いじゃないですか。選手には光が当たっていますが、周囲は暗いので、それを表現するためにダークなインターフェースにしています。このプロトタイプでは、まだ実装されていない機能も色々と表現しています。

このプロトタイプを使って、ビジネスサイドのメンバーが投資家と話をしたり、動画の取得の提携交渉をしたりしています。今のプロダクトがこう変化していく、というロードマップを見せるために、とても役立っていますね。

100人の「いいな」より1人の「大好き！」を目指す

このように最高のプロセスを追求してアプリのデザインをしていった結果、App StoreのBEST OF 2015に選出されました。ookamiに入った時からの目標だったので、達成できてとてもよかったです。

Player!のデザインを日々ブラッシュアップしていく中でも、変わらないことがあって。それは100人の人が「いいな」と思ってくれるよりも、1人の人が「大好き！」と思ってくれることを目指していることです。大好きと言ってくれる人が大切なので、そういった人にフォーカスして作っていきたいですね。このような気持を忘れずに、スポーツを21世紀のテクノロジーでレボリューショナライズさせていきたいです。