• GIZMODO
  • FUZE
  • DIGIDAY
  • gene
  • gene
  • cafeglobe
  • MYLOHAS
  • Glitty
  • roomie
  • machi-ya
  • GIZMODO
  • DIGIDAY
  • gene
  • cafeglobe
  • MYLOHAS
  • Glitty
  • machi-ya
  • roomie

長谷川賢人  - ,,,,,,,  06:00 PM

世界から注目を浴びたアプリ制作の裏側、そして後輩に伝えたいこと:「Flask」のApple Store銀座店トークイベントより

世界から注目を浴びたアプリ制作の裏側、そして後輩に伝えたいこと:「Flask」のApple Store銀座店トークイベントより

141213flask_talk_4.jpg


Hour of Code」という世界的な運動をご存知ですか。非営利団体「Code.org」によって運営されており、コンピュータプログラミングの基礎を学べるワークショップを通じ、世界180カ国以上で、数千万人の生徒が参加した実績を持ちます。ワークショップは誰でも開催でき、受講者の対象年齢は4歳から104歳。あまねく「学生」にコンピューターを学ぶ機会を提供しています。

Code.orgは2014年12月8日~14日を「Computer Science Education Week」と呼ぶ強化月間に定め、世界各地でイベントを開催中。この運動を支援する企業も多く、その中にはあのAppleもいます。子どもたちがプログラムを学ぶクラスを開講したり、デベロッパーを招いてトークイベントを行ったりと、世界中にある446のApple Storeでワークショップが開催されています。


141213flask_talk_2.jpg


そのワークショップの1つとして、2014年12月7日にApple Store銀座店で開かれたトークイベントに足を運びました。登壇したのはアプリ開発企業「Flask」のプログラマーである小川秀子氏と、UIデザイナーの堀内敬子氏。Flaskは小川氏と堀内氏がアプリを開発・リリースするために立ち上げたLLP(有限責任事業組合)で、これまでには『FitPort』や『Timesheet』といったアプリを手がけてきました。

FitPortはiOS 8から搭載された、ユーザーの健康情報を集約する「HealthKit」の機能をいち早く利用したアプリとして、アメリカの有名Techメディア「9to5Mac」や日本のテレビ番組にもピックアップされるなど、多くの注目を集めました。

「社会人になってからプログラムをはじめた」という小川氏と、「デザイナーがアプリ制作で受け持てる割合が増えた」という堀内氏。プログラマーとデザイナーだけの2人会社だからこそできるアプリ制作の現場を聞くことができました。


フリーランスではなく「Flask」を立ち上げた理由


141213flask_talk_1.jpg

(左)UIデザイナー・堀内敬子氏 (右)プログラマー・小川秀子氏


もともと別々の会社で働いていたという両氏。2010年頃、ウェブデザインを中心に仕事をしていた堀内氏が、iPhoneを見て「指で操作できて使える」ことに魅力を感じ、Twitterで「iPhoneアプリをつくりたい」とツイート。これをきっかけに、2人の関係がはじまります。ちょうど小川氏も「エンジニアなので、iPhoneという新しいデバイスを目の当たりにしたら、とにかく何か作りたくなっていた」というタイミングだったとか。

その後、2人はフリーランスとなり、歯に衣着せぬ意見を言い合いながら、アプリ開発にかける時間を増していきます。2013年8月にFlaskを設立。フリーランスのままではなく起業を選んだ理由は「App Storeに載るとき、販売元としてどちらかの個人名を載せたくなかったんです。2人の形として開発者名を残したかったし、企業である方がダウンロードしてくれる人の信頼感にもつながるかなと思いました」とのこと。


申請直前に、Fitportは背景色を白から黒に変えた


141213flask_talk_3.jpg

Fitportは、iPhoneの「ヘルスケア」アプリに保存されたデータを、
わかりやすく表示するダッシュボードアプリ


Flaskにとって大きな転機となったのは、前述の「HealthKit」との出会い。2人は「この機能の可能性にわくわくしました。私たちは運動をしているタイプではないけれど、そんな私たちだからこそ気軽に使えるフィットネスアプリが欲しいと思ったんです。そして、リスクはあったけれど、新機能でアプリもそう多くないだろうから、ライバルはまだいない。私たちにとってはチャンスだと感じました」と、Fitport制作のきっかけを振り返ります。

「HealthKit」がAppleから提供開始されるのと同時リリースを狙って開発に着手。決定から申請まで、およそ2カ月ほどでアプリを作り上げる決断をします。

堀内氏はたくさんのデザイン案を作りますが、多くのボツを重ねていきます。その中でも大きくUIが変わったのは、要素を「詰める」のではなく「削って」、画面の半分を占めるほどに重要な項目を大きく表示したこと。そして、背景色を白から黒に変更したことだったそう。しかも、背景色を変更したのはアプリを申請する当日だったといいます。


141213flask_talk_6.jpg

スクリーンに写っているのは、すべて不採用になった案


それまでのアプリ制作の経験から「ダークな背景は売れない」という悩みがありながらも、「最後にどうしても気持ちが抑えきれなくなった」という堀内氏。結果としてみれば、白から黒にして親密さが増し、スクリーンショットも見栄えがするようになり、なおかつ何より自分たちが楽しくてアプリへの愛が高まったのだとか。

無事に「HealthKit」の解禁日にリリースを果たすと、すぐに「9to5Mac」に記事が掲載。内容は「HealthKitを使ったアプリがもう出てきた!」というもので、まさに2人の読み通りの結果でした。それからも、アメリカを中心に多くのメディアに掲載が続き、逆輸入の形で日本の『めざましテレビ』でも放映されたのだとか。

この成功を2人は、「謎の多かったHealthKitという機能にいち早くチャレンジし、解禁と同時のタイミングでリリースを狙い、さらにHealthKitの良さがより伝わるようにシンプル性を突き詰めたUIにこだわった」という3点にあると振り返っています。


プログラマーとデザイナーが並走するための「Storyboard」


141213flask_talk_5.jpg

Fitportを完成に導いた「Storyboard」を見ながら


アプリの申請直前でも大幅な変更を決断できたのは「Storyboard」というツールを活用できたからだと堀内氏。Storyboardは、プログラムコードを書いてアプリ設計の変更をするのではなく、パーツの配置や画面遷移の切り替え指定などを視覚的に設定できるツール。プログラミングに精通していないデザイナーでも、細かなUIデザインについて、実際に調整を重ねられることがStoryboardのメリットです。

Flaskの作業比率は「エンジニア7:デザイナー3」だった従来からすれば、Storyboard採用以降は「エンジニア4:デザイナー6」というところまで変わったのだといいます。プログラマーである小川氏は作業工程について、「まずはStoryboardを含めて、私が3日でプロトタイプを作ります。基本のメイン画面と操作の流れが動くだけの状態にまで素早く持っていきます。私はここがプログラマーの腕の見せどころだと思っています(笑)。プロトタイプのタイミングではデザインもまだ固まっていませんが、Storyboardで線の太さや色の変更などを設定できるように『仕掛け』をしておいて、デザイナーである堀内に渡しています」と話します。

そこからはプログラムとデザインを並行作業して、完成にまで持っていきます。小川氏は「デザイナーの自由度が高まると、開発の最後の最後まで粘れるという良さがある」と言い、堀内氏も「Storyboardはこだわわりたいところを納得できるまでやれるので楽しい。Fitportの背景色変更もStoryboardがなくては実装できなかった」とツールの有用性を認めます。そして何より、「ギリギリまでできるのも、2人である私たちならではのこと」。


コードを書けるようになった、その先にあるもの


トークイベントの終盤、Flaskの2人から、これからプログラミングやアプリ開発をしてみたい人にメッセージが贈られました。


小川氏:アプリ開発に挑戦したい、プログラミングやってみたい人は、プログラム言語自体はインターネットに情報があるし、数週間で書けるようにはなれて、実際にやってみると思ったより簡単だなとも思えるはず。ですが、プログラムを書くのは簡単だけれど、アプリ開発で難しいのは『それ以外』のところにあります

私はもともとシステム開発をしていて、社会人になってからプログラムをはじめました。そこで感じたのは、実はデザインや人間工学といった、作るものの業務の内容を知ることが大切だということです。たとえば、Fitportでは画面が切り替わるときに、画面を切り替えても動線がぶれないようにしており、それがアプリの気持ちよさにつながっています。いかに要件を整理して、ものづくりをするかが大切で、プログラムはツールでしかない。私がいつも悩んでいるのは表現する、整理することの大変さです。でも、アプリ開発はたくさんの選択肢があり、良さがあります。こういうことを頭に入れて、楽しいアプリを作っていってください。


堀内氏:アプリをつくるのは、創造力、観察力、発想の転換が大事になってきます。今でもたくさんのアプリが存在していて、思いついたアイデアはほとんどが実現されているはずです。ただ、まったく同じものはなく、絶対に違いがあります。もっと付き合いやすく、美しく、その人ならではのこだわりを入れられたら、それが『勝ち』につながる

Flaskのアプリはシンプルを心がけているけれど、辿り着くまでにはたくさん消し、捨てて、選んでいるんです。コードもデザインも、シンプルにたどり着いて、『見やすい、わかりやすい、なんとなく使っていて気持ちいい』が大事で、それが私たちのアプリの価値になっている。アプリを作りたい人は『自分の信じる価値』にこだわってほしいし、そういうアプリがApp Storeにも増えてほしいです。


最後に、2人のインスピレーションの素を聞いてみました。小川氏は「どのような画面にするか迷ったら、DribbblePinterestを見ることが多いです。そちらの方がインスピレーションが湧きますね」。堀内氏は「アメリカのAppランキングを見ます。アメリカのアプリはデザインレベルが高いものが多いです。それ以外なら、私もDribbbleを見たりでしょうか」と教えてくれました。今回のトークイベントは、後日Podcastで配信される予定です。


Hour of code
Computer Science Education Week
Apple Store - Hour of Codeワークショップ|Apple

(長谷川賢人)

  • ,,,, - By

    友清哲

    LIKE

    今度のFIREは「炭になる」直前まで豆を焼いているらしい。コーヒーは「焙煎」でどう変わるのか、詳しく聞いてみた

    Sponsored

    今度のFIREは「炭になる」直前まで豆を焼いているらしい。コーヒーは「焙煎」でどう変わるのか、詳しく聞いてみた

    今度のFIREは「炭になる」直前まで豆を焼いているらしい。コーヒーは「焙煎」でどう変わるのか、詳しく聞いてみた

    商品名を明かさずに100万本を無料配布するという、あまりにも大胆なキャンペーンが話題を集めた新しい「KIRIN FIRE」。 キャンペーン期間中、 中身を知らずに飲んだ人々の感想が、「#ジャッジしてみた」というハッシュタグとともにネット上に拡散していたことを、覚えている人も多いのではないでしょうか。 9月14日より、全国7都市で「100万本シークレットサンプリング」が行われました。 培ってきたブ  11:00 AM

MORE FROM LIFEHACKER

powered by
    
    
    
  

Kotaku

Recommended

© mediagene Inc.