Webデザイナーだけど初めてのiPhoneアプリを7日間で開発した手順と利用ツール

2015年7月24日
カテゴリー ツール

初めてのiPhoneアプリを7日間で開発した手順|リリースもできた

初めてのiPhoneアプリを7日間で開発しました。まったくの未経験でしたが、App storeでリリースまでちゃんとできたので、その開発過程の裏側と途中で利用した数多くの便利なツールやリンクをまとめてみます。

もちろんリリースしたアプリも紹介しますよ。

プログラミングに関する知識が完全にゼロな人には、やっぱりハードル高めかもしれませんが、Web制作やブログのカスタマイズ経験があり、アイデアをシンプルにまとめられれば、思っているよりずっと簡単にできます。

アイデア出しのところから流れに沿って実況するので、iPhoneアプリの開発にチャレンジしたいって人は、ぜひ読んでみてください。

目次

iPhone アプリ開発からリリースまでの流れ概要

iPhone アプリ開発からリリースまでの流れ概要

最初に、開発からリリースまでの7日間を駆け足で振り返ってみます。厳密に言うと、アプリが完成したあと、App Storeで正式に配布されるまでには、審査があり、それに1週間ほどかかっています。その期間を除いた7日間です。

1日目:準備
iPhoneアプリの開発は初めてなので、だいたいの流れを知るために検索&情報収集に費やしました。
2日目:マインドマップで企画
どんなアプリを作るか決め、開発スケジュールを具体的に計画しました。とにかく「アプリのリリース」を目標として定め、「持ってる知識とスキルの1割増くらいで作れるものを」、「1週間で完成させる」、「マネタイズも含めて考える」という3つを約束に企画を練り込みました。
3日目:Photoshopでデザイン
アプリに使う画像をデザインしました。アプリ内で動く画像だけでなく、アイコンやスクリーンショットなど、iPhoneの画面やApp Storeのカタログに並ぶ画像も作る必要があります。
4日目:Monacaでプログラミング
アプリとして動かすためのプログラミングを始めました。プログラミングを進めた環境はMonacaです。Monacaだと、ブラウザ上でHTML、CSS、JavaScriptによって開発を進められるので、プログラミングが苦手なWebデザイナーさんでもアプリ開発を楽しめます。
5日目:iOS Developer Programへの登録
開発したプログラムをアプリとしてiPhoneへインストールするために必要になります。有料で年間8,400円です。
6日目:アプリをビルド
プログラムをiPhoneにインストールするため、アプリの形にすることをビルドと言います。正式にApp Storeで配布する前に、自分のiPhone用にビルドして、動作を確認しました。
7日目:App Storeでリリース
アプリを一般に向けて配布するために、Appleへ審査申請&アプリのアップロードをします。その後1週間ほどでApp Storeに並びました。やった!

流れはこんな感じでした。開発環境にXcodeは使ってません。詳しくは後述しますが、Monacaを選んでるので、いわゆる普通の流れとは異なる部分があるかもしれません。

それでは、以下、一日ずつ詳細を思い出して書いてみます。

1日目:準備

1日目については、ドヤ顔で語れることがなにもないです><
開発の流れをつかむため、Pocketに溜めてた記事を掘り起こし、読んだくらいです。

Pocketは、あとで読みたい記事をスクラップしておけるWebサービスです。PCでスクラップした記事をiPhoneでも読めるし、ネット環境がないオフラインでも読めるので便利です。

スクラップした中で、今回もっともお世話になったのはこの記事でした。

2日目:マインドマップで企画

マインドマップで企画

マインドマップを描きながら、どんなアプリを作るか(というより”作れるか”)を考えました。

マインドマップは、「アイデアを出す&整理する」を同時に進められる思考術です。手描きで進めることもできますが、僕はMacで動くソフトを使ってます。

マインドマップを使って企画する方法は過去に一度記事にしました。興味があればぜひ読んでみてください。

企画を進めるうえで、三つの約束を自分としました。途中でブレることなく一直線にゴールを目指すためです。おかげで、アレもコレもと欲張るのを避けられました。

  • いま持ってる知識とスキルの1割増くらいで作れるものを
  • 一週間で作る
  • マネタイズまで含めて考えること

これが三つの約束です。それぞれの根拠をちょっと詳しく語ってみます。

三つの約束(・`ω・)

1.いま持ってる知識とスキルの1割増くらいで作れるものを
いま持ってる知識とスキルの1割増くらいで作れるもの

なぜかというと、なにより今回の目標は「アプリをリリースする!」 そう決めたからです。

そりゃ、本音はもっと世間を賑わすようなアプリにチャレンジしてみたかったですよ。でも、それには知識とスキルがまったく及びません。先立って、ものすごい量の勉強が必要になります。勉強している途中で、「勉強すること」が目的に代わってしまいそうです。

それに、いままでかなり長い間「アプリを作ってみたいなー」と考えてました。振り返るとゲンナリします。大抵のやりたいことは「やりたいなー」と考えているうちに達成できます。いつかいつかと先延ばしするのはもう止めようよ自分。

てことで、「アプリをApp Storeに並べる。」それを目的地として、開発からリリースまでの道のりを一度歩いて体験するのだ!と心に決めたわけです。経験に勝る知恵なし、ということで、勉強に大きく時間を割くよりも、とにかく一回リリースしてみることが重要だと考えました。

2.一週間で作る
一週間で作る

始めるまではお尻が重くても、いざ取りかかると脇目も振らず没頭しちゃうって人、けっこういますよね。僕もそうです。

でも、本業を邪魔するほど熱くなるのは避けないと色々な人に迷惑をかけます。それに、本業もよく似たことをやってます。一日中、コンピューターと向き合うのは避けたいところ。なので、アプリ開発には1日多くても3時間と決めました。

プラス、熱しやすいは冷めやすい。そんな性格なので、わずか一日3時間でも毎日同じことをすれば飽きてしまいます。よって、開発期間は1週間と定めました。

『今持ってるスキルと技術の1割増 x 一日3時間 x 1週間 = 開発できるアプリ』

この公式に当てはめて、実現できそうなアプリを考えることにしました。

3.マネタイズまで含めて考える
一週間で作る

マネタイズとは、収益化の方法です。もっと簡単に言えば、お金を稼ぐ方法です。

本気で稼いでやろうと意気込んだわけではなく、将来的に、一つの案件としてアプリ開発に関わりたいと考えてるので、マネタイズまで含めて企画しました。

リアルな案件で、クライアントさんが求めてくるのは常に「結果=利益」です。試合でヒットを打ちたければ、素振りでも、毎回ピッチャーが投げる球筋をイメージしてバットを振れ、っていいますよね。それと同じように、本番の案件をイメージし備えておくことが重要だと考えました。

アプリを収益化する方法に今まで手を出したことがなかったので、ぜひこの機会を活かそうと思ったわけです。

アプリをマネタイズする方法としてすぐ思いつくのは以下の3つでしょうか。

  • 有料アプリ
  • アプリ内で課金
  • 広告

有料アプリは説明するまでもなく、ダウンロード時にお金がかかるアプリです。

アプリ内で課金は、ダウンロードは無料ですが、アプリを楽しむ途中で、ゲーム攻略に役立つアイテムや、アプリをさらに便利にできる追加の機能を買ってもらう方法です。パズドラの魔法石やラインのスタンプなどが例として挙げられます。

この二つの方法はアプリのクオリティがモノをいいます。お金を払ってまで欲しいレベルを、今回のアプリで達成するのは難しいだろうと諦め、広告による収益化を選びました。

広告には、表示回数に応じて収益が発生する方法もありますが、クリックされることで収益が発生する方法を選びました。表示回数に対してどれくらいクリックする人がいるのか知りたかったからです。

広告は、Monacaに導入のマニュアルが用意されていたので、nendを選びました。

アプリで稼げるnendの詳細を見てみる

収益を最大化するには、できるだけ数多く起動してもらう必要があります。一ヶ月にわずか一回よりも、一週間に一回、それよりも毎日、そしてそれよりも毎時間、という具合に起動する回数が多いほど、広告がクリックされる機会は増えます。

それで、アプリの機能を毎日の生活習慣に結びつけることを考えました。毎日の生活の中で繰り返す行動をアプリの機能にヒモづけることができれば、たくさん起動してくれるはずという期待です。

こうして三つの約束を守りながら企画をすすめた結果できたのがこのアプリです

これが作ったアプリ | 禁煙は貯金だ!

禁煙は貯金だ

我慢したタバコの本数をお金に換算してくれます。

ブラウザで試せるサイトを特設しました。どんな挙動をするのか試してみてください。なお、Win環境では動作確認をしておらず、特にIEでは挙動がおかしいかもしれません。一応Chrome推奨です。

アイデアの出発地点は、先にも挙げた「生活習慣にヒモづけられる機能を」というところです。アプリの起動回数を最大限に増やしたいからです。

僕もヘビースモーカーでした。今は禁煙に成功しましたが、昔は一日20本を毎日欠かさず吸ってました。一日の中で20回も繰り返す行動なんて、他にはそうそうありませんよね。

特に禁煙中は、日頃吸ってる本数以上に「タバコ吸いてぇー」となります。吸いたくなる数が増えるほど、アプリの起動回数も増え、広告がクリックされる機会が高まります。

本当は他にも、画面を横向きにすると毎日の貯金額をグラフにして表示する機能や、facebookやtwitterと連動し毎日の貯金額を自動的にシェアできる機能などもあればいいなあ、と思ったのですが、実装するには、僕のスキルがヘボすぎて、断念しました。最初に打ち立てた三つの約束を優先したわけです。

機能がシンプルすぎるので、飽きられやすいと思い、ちょっとした工夫を加えてみました。「いいえ」のあとの画像を、くじ引きの原理で8種類用意しました。8種類中一枚がランダムに選ばれ、そのうち一枚は当たり画像です。いつも同じ画面が表示されるより随分マシになったのではと思っています。

それと、広告付近にユーザーの目線を誘うため、「いいえ」ボタンが他の部分より遅れてふわっと現れるようにもしてみました。

このようなアプリを作ろうと考えをまとめたところで、二日目は終了しました。文字として書き起こすとめちゃくちゃ長くかかったように見えますね。でも、実際は約束どおり3時間で済ませました。

マインドマップを利用してアイデア出しとまとめる作業を同時に進めました。最終的にまとまったマインドマップも参考になれば、と載せておきます。

アプリの企画で作ったマインドマップ

3日目:photoshopでデザイン

デザイン

もうすでに見ていただいたように簡単なデザインですから、時間はかかってません。使ったのはPhotoshopです。イラストレーターはまったく使い方を知らないんですよね。でも、Photoshopなら使い慣れているので、イメージさえ先に固められれば、形にするのは割と速い方だと思います。

といってもグラフィックデザインを本業にしている人には敵いません。過去にまとめた記事を見てみてください。溜息が出るくらいものすごいです。

上の動画もそうですが、普段から色々とクオリティ高いデザインを見ておくと、イメージ創出からデザイン完成までのスピードを速められます。インスピレーションの多くは、過去の記憶によって助けられます。アプリ関連で記憶にストックさせておくのにおすすめのサイトを挙げておきます。

必要な画像について

僕のアプリはiPhoneだけを対象に作りました。その場合、必要な画像は以下のものです。

  • アプリのアイコン(120 x 120)
  • App Storeようのアイコン(1024 x 1024)
  • アプリの起動画面(640 x 1136、640 x 960、それぞれ1枚ずつ)

アプリの機能と対象デバイスによって他に用意すべき画像があります。以下のリンク先で確認できます。公式ページです。

英語だと厳しい、という人は下記も参考にしてみてください。ただ、必要な画像の仕様が変わることもあるので、最終的には公式情報を確認することを強くおすすめします。

アプリの画面をデザインするとき、一つ注意したいのが広告スペースの確保です。マネタイズに広告を利用する場合は、あらかじめそのスペースを空けておきましょうね。

この記事(クライアントよ、お前の依頼の大変さを思い知れ!これが「デザイン修正」だ! | gori.me)が面白いです。これは、クライアントさんからの要望について憤りを表していますが、デザインサーさん自ら、自分の首を絞めるってこともありがちです。注意しましょう。

おっと、忘れてましたが、デザインに使用した画像は全部「123rf」という画像サイトで購入しました。有料の画像サイトは他にも色々とありますよね。それも一緒に載せておきます。

4日目:Monacaでプログラミング

デザインが完成したら、次はいよいよプログラミングです。プログラミングを進める環境と使用言語は次のものを選びました。

  • プログラミング環境:Monaca
  • 使用言語:HTML、CSS、JavaScript

この環境と言語の組み合わせは、iOSアプリを開発する本筋のやり方とは違い、基本はAppleから配布されているXCodeを開発環境 x Objective-Cっていう言語の組み合わせで進めるみたいです。

みたいです、と自信なさげなのは、XCode&Objective-Cという聞き慣れない言葉の響きに恐れをなし、調べることをよくしてこなかったからなのですが、そんな僕に神のお告げのような記事が舞い降ります。

「ブログが作れる程度の知識ぃ〜ホントかよ?」と思い見てみると、ChromeやSafariなどブラウザ上で開発を進められ、使う言語もWeb制作に携わる人なら普段から慣れ親しんでいるHTML、CSS、JavaScriptだけでOKだというではありませんか。

よし、これならできるかも!

もっとも、僕のJavaScriptのレベルは、英会話でいうなら、辞書を片手になんとかレストランでオーダーできるくらいです。htmlとcssは日常会話程度なら難なく可能。でも、謎解き系の映画をみるには通用しないくらいです。

それでも、実際、イメージしていた機能をすべて実装できたのは、確かにMonacaがブログを作れる程度の知識でアプリ開発できる環境であったことと、この僕が、ネット上を検索するのと他人のコードをサンプリングすることが得意だったからです。要は、人様の力と知恵を頼りまくった、ってことですね。感謝してます!

以下、機能を実装するためお世話になった、html、css、JavaScriptの関する記事を紹介しておきます。

5日目:iOS Developer Programに登録

デザイン

プログラミング完了後はいち早くiPhoneへインストールしたいところですが、その前に、アプリ開発者として iOS Developer Program(iOS 開発者プログラム)への登録が必要になります。

登録画面のほとんどが英語なので、じつは、プログラミングする工程よりもハードルが高いんじゃないか、という悲鳴も聞こえてきそうです。登録の流れを順番通りに教えてくれる記事が検索するとたくさん見つかるので、それを見ながら、ひと手間ずつゆっくり進めていくのがいいでしょう。

僕はMonacaのサイトを参照しました。

そういえば、登録の手順を終え、実際にアカウントが有効になったあとメールが送られてくるのですが、それにけっこう時間がかかりました。待ってる間に、この日は終了。次の日、ついにプログラムをアプリの形にしすることに!

6日目:アプリをビルド

デザイン

iOS Developer Programでアカウントが有効になれば、開発したプログラムをiPhoneにインストールできるアプリの形に変身させることができます。これをビルドといい、目的別に以下の3つがあります。

  • デバッグビルド:自分で楽しむ/テストするためだけのビルド。
  • テストビルド:App Storeで配布はしないが、複数の人でテスト/楽しむためのビルド。
  • リリースビルド:App Storeで配布するためのビルド。

正式にApp Storeで配布する前に、自分のiphoneで動作を確認したかったので、デバッグビルドをしました。デバッグビルドは、MonacaとiOS Developer Program、両方の管理画面を行き来しながら進めます。(Xcodeで開発を進める場合、この辺も大きく違いそうですね)

Monacaにおけるデバッグビルドの手順は以下のURLで詳しく説明されてます。ビルドについての詳しい解説も載ってますよ。

7日目:App Storeでリリース

リリース

デバッグ完了、ついにApp Storeへ正式にアプリを申請する日がきました!そのためには、リリースビルドが必要になります。

リリースビルドもMonacaとiOS Developer Program、両方の管理画面を行き来することでできます。リリースビルドを含め、今後の流れは以下のようになります。

1.リリースビルド
App Storeで配布できる形式のアプリを作ります。
2.iTunes Connectでアプリを登録する
配布する前に必要な手続きを専用のサイト(iTunes Connect)でします。
3.アプリのアップロード
リリースするアプリをアップロードします。
4.Apple社によるアプリの審査
機能や内容をAppleが審査します。審査には1週間ほどかかります。
5.リリース
審査が通ればApp Storeに並びます。世の皆様がiTunesでダウンロードできるようになります。

実は、この流れが開発期間中において一番厄介でした。初耳の専門用語がオンパレード。幸いなことに、ひと手間ごとに画像付きの詳しい解説が、Monacaのサイトに用意されていたので、なんとか済ませられました。

審査にかかったのは丁度1週間でした。一発で通るとは思ってなかったので、通過の知らせが届いたときは本当に嬉しかったです。記念のスクリーンショットは上のやつです。

リリース後の成果

晴れてApp Storeにアプリが並んだあと、いったいどれくらいの成果があったのか気になるところですよね。

ダウンロード数や、最初に企画したマネタイズはどの程度うまくいったのか、それぞれ以下に記します。

ダウンロードは、リリース後4日間で90回でした。まったく宣伝していないので、正直、もっと少ないと思ってました。ブログを開設したときのアクセスは一日0人がひたすら続いたので。

ダウンロード数やランキングを調べられる無料のWebサービスがいくつかります。GrowingAppの方は、僕の環境ではなぜか動かず、App Annieを使いました。

マネタイズの方は…まあうまくいくわけないですよね。ダウンロードの数がそもそも充分な収益を得るほど多くはないですし。結果としては、4日間で564回の広告表示、5回のクリックによる収益は45円でした。一日平均11円です (ノ_-。) 収益源は、最初にも紹介しましたが「nend」です。

アプリで稼げるnendの詳細を見てみる

本来はこのあと、ダウンロード数や広告による収益を最大化するため、色々な施策に取り組んでいくことが求められます。アプリのクオリティを高めるためのバージョンアップも欠かせません。

でも!
今回のミッションの目的は「アプリをリリースする」ことだったのです。それを達成できたので、充分満足しています。

まとめ

アプリの開発は、思っていたより簡単でした。高望みをしなかったから、というのもありますが、それでも初めてのことにチャレンジするのはワクワクしました。

あ、ちなみに現在、アプリの配信は停止してます。今度は、XCodeによる開発にトライして、もうちょっといい感じのアプリを目指したいと思ってるので、そのときまたお知らせします。それではこの辺で。

ほな、ごゆるりと〜

こちらもcheck!ついに再開!ウェブさえのHP作成サービスはこちら

シェアしてくれると嬉しいです!(コメントも喜ぶよ

あなたにはこんな記事もおすすめ!
ん?最新情報を見逃さない方法!?
わざわざブログに来なくても、自動的にウェブさえの更新情報を受け取ることができます。「お、いいね!」と思われた人は、SNSのアカウントをフォローするか、RSSリーダーへ登録、どれでも都合のいい方法で受け取ってくださいね! しばらく休止していたウェブさえマガジンも最近再開しました。メールで受信できます。受信は無料で、いつでも解約できるので気軽に登録してみてください。
ウェブさえマガジン
  • facebook
  • twitter
  • google

コメントも大歓迎!

Top