ajike switch

webデザイナーのためのスマホアプリ制作入門

webデザイナー(ここではコーディングスキルがある人を指します、webページデザイナーではないのでご注意ください…)でもスマートフォンなどのアプリを制作することができます。
今回は、特徴や構築方法などを説明いたします。

アプリの種類

同じようなアプリでも、構築のされ方(技術)によって種類が下記のようにわかれます。

ネイティブアプリ

雑に言ってしまえば従来からある普通のアプリです。
iOS・Androidなどをそれぞれネイティブコード(Objective-Cなど)を書いて開発します。
ガチのプログラミングが必要で確実にプログラマーがいないとどうにもなりませんね。
動作が早い、デバイスの機能をフル活用できるなど利点がありますが、iOSとAndroidでは違う言語が必要で開発工数がかかる、UIを凝りにくいなどの難点もあります。
制作したアプリは、iTunesなどの各公式サイトで配布します。

webアプリ

HTML5、CSS3、Javascriptで制作したデザインビューをブラウザ上で動かすアプリです。
公式ストアなどで配布したりインストールする必要がないため気軽につくれて公開できます。
ブラウザで動作するので、1ソースで異なるOSに対応することができます。
ただブラウザベースのため通信を必要とします。

ハイブリッドアプリ

web技術(WebView)を用いるネイティブ形式のアプリです。
技術的には、HTML5、CSS3、Javascriptで制作したデザインビューを、PhoneGap等のフレームワークを使用してネイティブコードに変換します。
webアプリをフレームワークを使うことでスマホなどのアプリに変換するイメージです。
ビルド(アプリ化)のタイミングでそれぞれの形式に変換されますが、アプリのもととなるhtmlなどのソースは1つですませることができます。
それをiTunesなどの各公式サイトで配布します。
webアプリとは違い、ファイルはローカルに配置するためオフライン対応だったり、ネイティブ機能をJavaScript APIで実装可能だったりします。
(ネイティブ機能は、使用するフレームワークによって差異があります)

特徴や、メリット・デメリット

webアプリ ハイブリッドアプリ ネイティブアプリ
技術
(言語)
HTML、CSS、JS HTML、CSS、JS Objective-C、Javaなど
インストール 不要 必要 必要
起動 ブラウザ経由 アプリを実行 アプリを実行
プラットフォーム クロスプラットフォーム クロスプラットフォーム OS依存
通信 必須 不要
(内容による)
不要
(内容による)
デバイス機能
(ブラウザのAPI対応状況などに依存)
処理速度
開発・運用工数

今回のテーマである、webデザイナーのスマホアプリ制作ですが、基本的にはハイブリッドアプリで制作を進めるという考えになります。
表を見るとハイブリッドアプリは、ネイティブアプリとwebアプリのいいところを合わせつつも、アプリそのもの(処理速度など)でいうと、ネイティブアプリには敵わないといったような位置づけになるかと思います。

制作方法

次はweb技術で制作できるフレームワークに注目していきます。
今回は代表的なものをあげさせていただきます。

PhoneGap

PhoneGap
制作アプリでお馴染みの、Adobeにより公開されているハイブリッドアプリ制作のためのフレームワークです。こちらは、オープンソースとしてCordovaという名前でも公開されていています。
制作イメージとしては、HTML+CSS+Javascriptでwebアプリを作って、PhoneGapでビルド(アプリ化)することで制作出来てしまいます。
CSSやjqueryなどを使えるので、コーディングが出来る人であれば工数をかけず、UIをこだわったアプリを容易に作成できるのが魅力です。
また、ネイティブAPIへのアクセスが可能なので出来ることの幅も広いかと思います。
ただ、ビルドするための設定など普段環境構築をしない人には戸惑いもあるかもしれません。
そこで更にハードルを下げて開発ができるのが、次で説明するmonacaです。

monaca(PhoneGap)

monaca
書いてあるとおりPhoneGapをベースに開発されたプラットフォームです。
基本的に、PhoneGapで出来ることは可能ですし、monaca独自のサービスもあり、Onsen UIというUIフレームワークが使用できたり、バックエンドの機能も提供されています。
何よりも、ブラウザ上のIDEや管理画面でコーディング(あまりお勧めしませんが…)からビルドまでできてしまうため、PhoneGapを使用するのと違い、
「えと、XcodeインストールしてSDK…んん!?ターミナルも使うの??…えー…」
みたいなことにならず簡単に制作できるかと思います。

Titanium Mobile

Titanium Mobile
Appcelerator社によるアプリケーションの開発環境です。
ただ、Javascriptで開発していくので、デザインコーディングできます!、jquery使えます!だけなwebデザイナーとなると結構ハードルが高いかと思います。
しかし、ネイティブなプログラミング言語で構築したような動作速度だったり、モバイル広告との相性が良く導入しやすかったりするので、Titanium Mobileに挑戦する利点は大いにあります。

最後に

とりあえずコーディングができる人であれば、まずはmonacaで挑戦していけばいいかと思います。
ただしハイブリッドアプリの特徴を考えたものにしないと、満足な仕上がりにならない場合もあるため、その点は考えなければいけない部分ですね。
これらの特徴はアプリ制作の提案時にも役立つものだと思いますので、是非特徴を知っていただければと思います。

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×