blog.tdksk.com

design / tech

「動く」プロトタイプを作るということ（HTML/CSS/JS で作るモバイルアプリプロトタイプ編）

2014-01-10

（この記事の内容は 2013/11/21 に社内ブログへ投稿したものです）

最近、デザイナーとして果たすべき役割みたいなことを自分なりに考えていて、その中でもプロトタイピングについてよく考えています。色々と自分で試しているうちに思ったことを少しずつ書いていこうと思います。 今回は、ついこの前モバイル(iOS)アプリのプロトタイプを HTML/CSS/JS で作ったことに関して書きます。

モバイルアプリにおけるプロトタイピングの重要性

プロトタイピングには色々なレイヤーのものがあるけれど、モバイルアプリでは特に「動く」プロトタイプが重要だと思っています。Web アプリなどと比べモバイルアプリは利用可能シーンが圧倒的に増える、つまりどこでどのように使うかがユーザ体験に大きく影響するため、実際の生活の中に組み込んで試す必要があるからです。紙や PC 上に写っているものからだけでは価値が判断しづらいことが多い気がしています。

何を使ってプロトタイプを作るか

プロダクトの内容によるのでなんとも言えないのですが、いくつか選択肢を挙げた上で今回のケースを述べます。

まず、Flinto は多くのケースで役に立つと思います。コストが低いのにアウトプットの質が高く、また、ホームスクリーンにアイコンを置いてネイティブアプリ風に起動できるので実際の利用シチュエーションを想像することがしやすいです。

そんな素晴らしい Flinto ですが、画面遷移がなく一画面でのインタラクションが核となる種類のアプリには向かないことと、機能面での価値の検証がしづらいということがあります。今回僕の作りたかったアプリは、一画面のツール系のもので、毎日データを蓄え毎日使わないと価値が分からないものだったため、Flinto でのプロトタイピングはできませんでした。となると実際に iOS なら Objective-C でプロトタイプを作るほうが良さそうな気もしますが、僕の場合慣れていないこともありどうしてもある程度の形にするまで時間がかかり、検証のためのサイクルが遅くなってしまいます。

そういった背景のもと、今回はより速く最低限の機能と見せ方の面が融合した「動く」ものを作りたかったため、HTML/CSS/JS, Node.js, MongoDB を使ってプロトタイプを作ることにしました。このようなツールを選んだ理由は下記の通りです。

  • レイアウト、UI エレメントが速く構築できる
  • 簡単なアニメーションをすぐに作れる （CSS3 Animation, JS）
  • 簡単に試せる（変更の反映も速いし、様々な端末でも簡単に確認できる）
  • アイコンフォントが簡単に使える
  • 便利な描画系ライブラリがたくさん（Canvas, SVG まわり）

今回は画像を使わなかったのですが、Photoshop でパーツを作る場合は Framer.js を用いるとフロントエンド実装が速くできそうです。

実際にやってみてどうだったか

  • 予想通りそれなりに速く作れた

    • フロントエンドは問題なかったが、バックエンドも実装するとやはり少し複雑になる印象
      • Hoodie を使うと楽になるかも
      • 簡単なデータ永続化なら Cookie とかでも良いかも
      • フロントエンドだけで良いなら Dropbox を使って簡単に共有できる
    • 本実装と違う枠組みで作ったためコードを捨てる前提で速く書ける
      • コードの再利用や保守を考えなくて良い
      • HTML/CSS/JS のデバイス対応やパフォーマンスなどをあまり気にしなくて良い
      • 一方でこのような書き方ばっかり続けていたらちゃんとした Web アプリが作れなくなりそうな気も…

  • iOS ではネイティブっぽい質感になった

    • meta タグを数行追加して Safari から Add to Home Screen すればネイティブアプリっぽい起動感になる
    • CSS3 アニメーションの表現力はそれなりにある

  • 個人で開発する場合でも、プロトタイピングするのが良さそう

    • アイディアがあっても、それが本当に価値のあるものかわからないままだと開発のやる気がでない
    • アイディアを達成するためのある部分だけでもプロトタイプを作ると、自分で確認できるだけでなく他人からもフィードバックがもらいやすくてやる気がでる
    • 細かくプロトタイプを作ることで本当に必要な機能・必要な見せ方がわかってくるので、最終的な完成品が洗練される

あとがき

普段趣味で1人で何か作るときはいきなりコードを書き始めることが多いのですが、チームにおいてだけでなくてもプロトタイピングは良いかもと思ったのは自分にとっては発見でした。

まだまだ iOS 開発の知識が乏しいのでそのあたりは頑張って強化したいですし、Objective-C + Storyboard でもっと速く作れるようになればそっちのほうが良いかもしれません。ですが、Web アプリというアプローチでのプロトタイピングも利点はありそうなので、その方向でももう少し模索してみようかと思っています。この辺はまだ決定打となるツールがなさそうなので、需要があるのなら自分で切り開いても良い分野なのかなとも思いました。何か良いツール知っている方いたらぜひ教えてください。