2014年12月8日にアップルストア銀座で開催された、Appleのイベント「Hour of Code」シリーズの中の「Inspired to Code」から、Flask LLPのお二人の講演メモです。
アップルのサイトより → Apple Store – Hour of Codeワークショップ
メモは箇条書きで書いております。
主な内容
プログラミングやUIデザインの出会いを語る。
- Flask LLPを立ち上げたきっかけ
- iOSアプリ「FitPort」のアイデアが生まれるストーリー
Flask LLP
ウェブサイト: フラスク（Flask LLP）- iPhone/iPadアプリ開発会社
- 小川秀子さん （お）
- 堀内敬子さん （ほ）
（※ 念のため記しておきますが、堀内敬子さんは同姓同名の女優さんとは別の方です。）
はじめに – アプリを作りたいと思った経緯
お: 堀内さん、どうしてiPhoneアプリを作りたいと思ったのですか？
ほ: 以前はWebデザインをやっていた。ウェブを見ているうちに、サイトよりもアプリやウェブサービス……「見る」より「使う」もののデザインが好きになってきた。ある日iPhoneのアプリの仕組みに感銘を受け、自分でも作りたい（デザイン）したいと思った。
お: 私はエンジニアなので、iPhoneを手に持つとなにか作りたいという気持ちになる。ウェブはある程度UIの規則が固まりつつあるが、iPhoneアプリはまだはっきりしたもの（ルール）がない。そんな状況で作れるのは面白そうだと思った。
Flask について
これまで7つのアプリをリリース。
Flaskより
- Desk Clock Calender
- FreshPantry
- PicTack
- PopWeight
- Timelet
- Timesheet
- FitPort
最新リリースのFitportでは、各メディアで好評を得た。
FitPort
iOS公式のHealthKit（ヘルスケアアプリ）と連携し、HealthKitにある健康データをきれいに表示させるアプリ。カジュアルなビジュアル表現。
Health Kitの発表があった時に、私達はわくわくした。
Health Kitリリース当日の提供を目指した。
発表からリリースまで2ヵ月しかない。当時はまだまだ情報も少ない。
お：（なぜ開発を決断したか？）先行者メリットを狙った。リスクもあったが「私達だからできるんじゃないの」と思った。ライバルもいるけど、2ヵ月だとすごくたくさん出てくるとも思わない。
ほ: わたしもこれはチャンスだと思った。
UIについて
ほ: 没になったUIデザイン案はたくさんある（特に配色面・フォントとか）でき上がったUI案は小川さんに見せる。でも小川さんには「その情報は本当に見たいものなのか？」と冷静にダメだしされる。
小川さんにとってuIで印象的なのは？
お: 一番見たい項目がドーンと大きく表示されるというデザイン案が（堀内さんから）出たとき、これだ！と思った。実際外に持ち歩いてみると、使いやすさ、使いづらさが分かる。画面の半分を占めるくらいの重要な情報の表示は「これだ」と思った。
ほ: たくさんの情報をぎゅーっと一画面に入れるよりは、一番大切なものを大きく見せたのがよかった。そこで突き抜けた感があった。
背景について。
ほ: デザイン開発中はずっと白背景にしていたが、アプリ申請の当日に突然黒（ダークグレー）の背景色に変更した。結果、スクリーンショットも見栄えがするし、実際触っていても使いやすい。アプリへの愛が高まる。
ストーリーボードについて
「ストーリーボード」を用いて画面のデザイン、レイアウトをする。（筆者注 : Xcodeか？と思ったがイベント中はソフト名が聴き取れなかった、後で調べたらおそらくXcodeの「ストーリーボード」機能でほぼ間違いない。というか、Appleの公式イベントなので、よそのソフトウェアは基本的には出さないか。また、このイベントは具体的な技術用語はほとんど聴き取れなかった。）
堀内さんもストーリーボードを用いる。
お: レイアウト面もエンジニアが担当するケースも多いと思うが、デザイナーに作ってもらった方がより緻密なデザインができるのではないだろうか。
ストーリーボードでのデザインは堀内さん、内部の実装は小川さんが担当する。（この後に触れるが、最初のざっくりとしたプロトタイプは小川さんがつくる）
開発作業の流れ（小川さん）
まず大まかな画面構成を考えたあとに、エンジニアの私がストーリーボードの大枠も含めて、プロトタイプ（実際に動くもの）を3日程度で作る。
操作の流れをしっかり見えるものを優先して作る。とにかく動くものを短期間で素早く作る事が大事。
円グラフ、棒グラフの色や太さなど、最初に小川さんが大まかに定義した後、堀内さんにビジュアルの細部面を投げる。
ストーリーボードを堀内さんに渡した後、小川さんが内部実装作業を行う。
ずっと二人で並行作業を続けていった。
二人の作業比率
今までのアプリ
エンジニア（小川） : デザイナー（堀内） = 7:3
FitPortの時は……
エンジニア（小川） : デザイナー（堀内） = 4:6
ほ: ストーリーボードの作業は慣れると変更が簡単にできるため、時間をかけて納得ができるまで作業ができる。大変だけど、とても楽しんで納得ができるまでやり込んだ。先に述べた申請当日の変更も、ストーリーボードが楽に作業できるから可能だった。
リリース後の話
Apps with HealthKit integration start appearing in App Store following iOS 8.0.2 fixes | 9to5Mac
9to5Macですぐにニュースになった。HealthKitの記事の一部として。（HealthKitを使ったアプリがAppStoreに出てきたという趣旨の記事）
私達の狙いとしていた申請と同時のリリースをしたから、海外のいくつもの大きな有名ITサイトで紹介された。
その日は寝れませんでした。
なぜできたか？
- チャレンジ – 謎の多かったHealthKitへのチャレンジ
- タイミング – 注目されようという想い
- UIのこだわり – 見た目だけではないアプリの本質的な部分や、シンプル性の追求
UIのこだわりによって、わかりやすく伝わりやすい形になったので、ニュースメディアに取り上げられやすくなったのではないか。
各ニュースサイトで紹介。AppStoreでBest New Appsとして紹介。各国のヘルスケア特集でも紹介。フジテレビのめざましテレビでも紹介。
プログラミングを勉強したい人へメッセージ
小川さん
プログラミング言語は情報が色々転がっているので、簡単なものでは2〜3週間でできると思う。プログラムを書くのは簡単な事。
アプリ開発はそれ以外に難しい事がある。
プログラムを学んだのは社会人の頃。その頃は知識が足りないと思って、デザインや人間工学も学習した。
システム開発の会社だったので、作る物の業務の内容を勉強するのが大切。
システムを作るということは要件をどのように整理して、表現するのか、というものつくりである。プログラムはそれを実現するための手段でしかない。
「書く」以外にも、「整理」する、「表現」するということは大事。
表現するという部分に関しては、アプリ開発は手段や選択肢がたくさんある。難しいけれどそこに良さがある。
FitPortでは、画面が切り替わる際に、アニメーション表現でユーザーが覚えやすい形で切り替わる。
画面が切り替わるアニメーションの表現は私がお気に入りな表現のところ。
画面が切り替わってもユーザーが覚えやすく分かりやすいUI。
アニメーションはデザインラフの時点ではイメージしにくいところだが、とても効果を発揮する表現。
堀内さん
デザインやプログラミングだけでなく、想像力や観察力、発想の転換なども大切になってくる。
- 想像力
- 観察力
- 発想の転換
→ こだわりにつながる。
現在AppStoreではたくさんのアプリがある。
アイデアは思いついたとしても、たいていは他で実現されたものも多い。しかし、アイデアというのは全く同じではなく、他の人、よその所との違いも絶対あると思う。
その人ならではの何かこだわりを入れる事が、アプリ・プロダクトの価値に繋がると思う。
FitPortはシンプルなアプリ。そのシンプルにたどり着くまでに、たくさんの試行錯誤をしてきた。
貴方の「信じる価値」にこだわる事で、アプリはできると思う。（小川さん: 信じる価値に共感してくれる人はきっといる）
アプリ開発に一人でも多くの人がチャレンジしてほしい。
（以上、トークセッション終了）
Q&A
質問: 二人だけで作る事で、良かった所はありますか？
以前は趣味で作っていたところがあった。二人でよかったと思う点は、素直な意見を相手から貰える。おたがいに歯に衣着せぬ意見を言い合える。
質問: 1. フリーランスではなくLLPなのは？ / 2. 普段どういうものを見たり、意識したりしている？
お: Flask設立のきっかけは……二人でやっているので、AppStoreの表示で出る「開発者名」を個人名ではなく企業名（組織名）でやりたかった（二人でやるのでどちらか片方の個人名だけというのは避けたかった）。企業名だと信頼性が増す。
ほ: デザインは、いいアプリを知りたくなったらアメリカのランキングを見たりする。海外の方がデザインレベルが高い。アプリ以外だとDribbbleとかを見る。
お: 私もDribbbleやPinterestを見て、インスピレーションやアイデアを得る。
質問: 今回から何故ストーリーボードをデザイナーが弄ろうかと思ったか？
ほ: いままでもちょっとずつストーリーボードを触っていたが、Flaskで本格的に触った。
お: Flaskは初めにデザインのアイデアがなかったので、堀内さんに細かいところまでお願いしようと思っていた。そこでストーリーボードを本格活用してもらおうかと思った。
ほ: iOS8向けの仕様になって、ストーリーボードが使いやすくなった。大きなサイズの変更とかも簡単にできるようになった。
感想
アップルからの発表ではコード(Code)に関するイベントだと思っていったので、プログラミング面の話が出てくるのかと思っていましたが、蓋を開けてみると意外にもUI面に関するお話が多めだったような印象でした。
開発ヒストリーのお話としては、とても興味深く聴けた内容でした。
話の内容としてはHealthKit発表というやってきた「チャンス」をしっかり確実にものにしたという感じのストーリーでしたが、「チャンス」を確実にものにするには、プログラミングやデザインのスキルの研鑽や実績など、それまでの積み重ねが必要なのかもと思いました。