モバイルアプリはIonicでHTMLプロトタイプが早いかも

またまたIonicを推してみる記事です。

プロトタイピングやモックアップ、どうしてますか？

アプリやサイトを作る際のプロトタイピングはどうしていますか？
他の場所でどのように行っているかも気になりますが、クオックスでは

1. HTMLでモック作成→プロジェクトに組み込み
2. 画像ソフトでカンプ作成→プロトタイピングツールで遷移を確認→画像パーツを書き出して組み込み

…のパターンが多いです。
2.のように画面をきっちりデザインするのも良いのですが、ものによってはHTMLで動かしながら固めていった方が良いこともあります。

Ionicをテンプレートとして使う

HTMLプロトタイプも一から作ると手がかかるのでテンプレートを使うと楽です。
Ionicに用意されたコンポーネントは数多く、iOS・Android・WindowsPhoneそれぞれデフォルトのスタイルが当たっているので、テンプレートとして最適です。
そんなわけでちょこっと作ってみました。

iOS

Android

カードやリスト、アイコンも最初から揃っているので、ざっくり作れます。
追加の要素や細かくスタイル変更したいところはCSSを触ればOKです。

スタイルを細かく見ていくと、OSごとのデザインガイドをどのように反映しているか、どんな要素や余白を使えば「らしく」見えるかもつかめてきます。
もちろんOSごとの違いをなくしたい場合もCSSを調節することで好きなようにできるので、日頃CSSに触れているなら難しいことではありません。

コードを書かず要素を置いていくだけで設計できるIonic Creator、アプリ共有のIonic Viewとかのサービスもあります。（使ったことはありませんが便利なようです）

そのまま動くようにプログラミング＆パッケージングも

• このプロトタイプをベースに、AngularやTypeScriptを使って本格的に作り込める
• アプリとしてパッケージングもできる
• デザイナーでも途中でスタイル修正が難しくない
• アイコンやスプラッシュも一気に書き出ししてくれる機能がある

などなど、アプリを作るのに非常に便利です。

Ionicの各コンポーネントはOSごとのデザインガイドにきっちり沿っているので自由度の高いデザインにしようとすると相当手がかかりますが、アプリらしく見せたい・基本のパーツをすぐ使いたい場合にはサクッと仕上げて動きをチェックすることに集中できます。
やろうと思えば動的なテンプレートの使い分けもできるので、HTMLモックにありがちな「表示条件ごとにモック作ってたら同じようなページが大量生産されていた」なんてことも防げます。