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

2018年5月11日
カテゴリー ツール

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

初めてのiPhoneアプリを7日間で開発しました。

ウェブサイトの企画・制作が本業の僕にとって、アプリの制作はまったくの未経験。そのくせApp storeでリリースするところまで達成できたのは、

  • アプリ作成に挑む前の「気の持ちよう」
  • 技術不足を補ってくれるツール

この2つのおかげだと思っています。

アプリの制作に挑戦し、途中で挫折してしまう失敗の原因に多いのは、身の丈に合わない難しすぎるアプリを作ろうとしてしまうことです。

僕の場合は、とにかくアプリを完成させることをゴールとして設定。開発期間を短縮してくれそうなツールがあれば利用することをアリとしました。

その結果、わずか1週間で初めてのアプリの制作を終えられたのです。

アプリをApp Storeからリリースしたことが「ある」と「ない」の差は自分にとっては大きく、ゼロから1にできたことへの達成感は今でも心に残っています。(この記事はアプリをリリースした時期からしばらく経ちまとめました)

今回は、そんな僕のアプリの開発過程の裏側と途中で利用した数多くの便利なツールやリンクをまとめました。

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

プログラミングに関する知識が完全にゼロな人にとって、いきなりアプリのリリースを目指すのはやっぱりハードル高めかもしれません。

アプリ制作のため基本的な技術を身につけられる書籍やiOS11アプリ開発オンライン講座のようなオンラインレッスンで学習用のアプリを2つ3つ作っておきましょう。今回僕が作ったレベルのアプリなら、それくらいのスキルでじゅうぶん作成できると思います。

最初のアイデア出しのところから流れに沿って開発過程を振り返っていきます。今こそ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デザイナーさんにMonacaはおすすめの開発環境です。

5日目:iOS Developer Programへの登録
開発したプログラムをアプリとしてiPhoneへインストールするために必要な登録です。

有料で年間8,400円でした。登録費用はこの記事を執筆した時期のものです。

6日目:アプリをビルド
プログラムをiPhoneにインストールするため、アプリの形にすることをビルドと言います。

正式にApp Storeで配布する前に、自分のiPhone用にビルドして、動作を確認しました。

7日目:App Storeでリリース
アプリを一般に向けて配布するために、Appleへ審査申請&アプリのアップロードをします。

その後1週間ほどでApp Storeに並びました。自分の作ったアプリがApp Storeに現れるのには感激しますよ。

開発7日間の流れはこんな感じでした。

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

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

1日目:準備

1日目については、偉そうにドヤ顔で語れることがなにもありません。

アプリを開発する流れを掴むため、それまでPocketに溜めてた記事を掘り起こし、読んだくらいです。

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

同じようなサービスでEvernoteもありますね。アプリにしたいネタやデザインの参考などメモっておけます。

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

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

マインドマップで企画

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

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

マインドマップを使って企画する方法をまとめた記事が以下のリンク先です。

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

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

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

三つの約束(・`ω・)

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

この目標を立てた理由は、今回のゴールが何より「アプリをリリースする!」ということだったからです。

そりゃ、本音はもっと世間の話題になるようなアプリの制作にチャレンジしてみたかったですよ。でも、それには知識とスキルが全然不足してます。

あらかじめ、ものすごい量の勉強が必要になりますよね。今回の目的はアプリのリリース。アプリ開発のスキルアップではありません。

いままでかなり長い間「アプリを作ってみたいなー」と考えてました。振り返ると、〇〇する詐欺みたいでゲンナリします。

大抵のやりたいことは「やりたいなー」と考えているうちに達成できます。いつかいつかと先延ばしするのはもう止めようよ自分。

ということで、「アプリをApp Storeに並べる。」それが目的地となりました。

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

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

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

本業を邪魔するほどアプリ開発に夢中になってはいけません。色々な人に迷惑をかけますからね。

それに、本業もよく似たことをやってます。日中はウェブ制作、終業してからアプリの開発。これだと一日中、コンピューターと向き合うことになります。

好きでやっていることがストレスに変わるのは嫌です。なので、アプリ開発は1日長くても3時間と決めました。

熱しやすいは冷めやすい。そんな性格なので、1日わずか3時間でも毎日同じことをすれば飽きてしまいます。よって、開発期間は最大で1週間。7日以内に終わらせことにしたのです。

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

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

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

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

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

リアルな案件で、クライアントさんが求めてくるのは常に「結果=収益」です。

試合でヒットを打ちたければ、素振りでも、毎回ピッチャーが投げる球筋をイメージしてバットを振らなければいけません。同じように、本番としてアプリの案件が回ってきたときをイメージし、備えておくことが重要だと考えたわけです。

アプリを収益化する方法に今まで手を出したことがなかったので、本当に良い機会でした。

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

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

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

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

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

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

広告は、nendを選びました。

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

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

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

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

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

禁煙は貯金だ

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

ブラウザで試せるサイトを特設しました。どんな挙動をするのか試してみてください。

なお、Win環境では動作確認をしておらず、特にIEでは挙動がおかしいかもしれません。一応Chrome推奨です。

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

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

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

本当は他にも、画面を横向きにすると毎日の貯金額をグラフにして表示する機能や、facebookやtwitterと連動し毎日の貯金額を自動的にシェアできる機能などもあればいいなあ、と思いました。

でも、実装するには、僕のスキルがヘボすぎて、断念しました。最初に打ち立てた三つの約束を優先したわけです。

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

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

このようなアプリを作ろうと考えをまとめたところで、二日目は終了しました。

文字として書き起こすとめちゃくちゃ長くかかったように見えますね。でも、実際は約束どおりの1日3時間の範囲で終わることができました。

マインドマップで、アイデア出しとアイデア整理の作業を同時に進めました。最終的にまとまったマインドマップも載せておくので、参考にしてみてください。

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

3日目:photoshopでデザイン

デザイン

もうすでに見ていただいたようにアプリの画面は簡単なデザイン。時間はかかってません。

使ったのはPhotoshopです。イラストレーターはまったく使い方を知らないんですよね。でも、Photoshopなら、普段のウェブデザインで使い慣れています。イメージさえ先に固めることができれば、形にするのは割と早い方だと思います。

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

上の動画もそうですが、普段から色々とクオリティ高いデザインを見ておくと、イメージ創出からデザイン完成までのスピードを速められます。

インスピレーションの多くは、過去の記憶によって助けられます。普段からアプリのUIについて意識的に「使って」「見る」ことを意識しています。

必要な画像について

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

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

iPhoneの機種やiOSのバージョンが上がるに連れて画像の種類やサイズは変わってくるでしょう。アプリの機能と対象デバイスによって他に用意すべき画像もあります。以下のリンク先で確認できます。公式ページです。

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

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

デザインに使用した画像は有料のストックフォトを利用しました。画像の有料サイトは色々とありますよね。

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

デザインが完成したら、次はいよいよプログラミングです。

プログラミングを進める環境と使用言語は次のものを選びました。

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

この環境と言語の組み合わせは、iOSアプリを開発する本筋のやり方とは違います。基本はAppleから配布されているXCodeを開発環境に「Objective-C」や「Swift」という言語の組み合わせですよね。

本職がウェブ制作の僕にはわりとハードルの高いチャレンジになりそうでした。

そこで代用できるアプリ制作の方法を調べていると出会ったのがMonacaです。ブログが作れる程度の知識でアプリも作れる、というような情報にもぶつかり、半信半疑でさらに調べてみると、ChromeやSafariのようなブラウザ上での開発が可能。

必要なプログラミング言語も、Web制作に携わる人なら普段から慣れ親しんでいるHTML、CSS、JavaScriptでけでOKとのこと。

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

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

それでも、実際、イメージしていた機能をすべて実装できたのは、確かにMonacaが「ブログを作れる程度の知識でアプリの開発ができる」環境であったからです。

つまづくところは、ウェブ制作でも同じ、ネット検索で答えを探すことで乗り越えました。

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

5日目:iOS Developer Programに登録

デザイン

プログラミング完了後はいち早くiPhoneへインストールしたいところです。

はやる気持ちを抑えて、その前にアプリ開発者として iOS Developer Program(iOS 開発者プログラム)への登録が必要になります。

登録画面のほとんどが英語なので、じつは、プログラミングする工程よりもハードルが高いんじゃないか、という悲鳴も聞こえてきそうです。

登録の流れを順番通りに教えてくれる記事が検索するとたくさん見つかるので、それを見ながら、ひと手間ずつゆっくり進めていくのがいいでしょう。

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

次の日、ついにプログラムがアプリの形に変形します。

6日目:アプリをビルド

デザイン

iOS Developer Programでアカウントが有効になれば、開発したプログラムをiPhoneにインストールできるアプリの形に変身させることができます。

これをビルドといい、目的別に以下の3つがあります。

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

正式にApp Storeで配布する前に、自分のiphoneで動作を確認したかったので、デバッグビルドをしました。

デバッグビルドは、MonacaとiOS Developer Program、両方の管理画面を行き来しながら進めます。Xcodeで開発を進める場合、この辺も大きく違いそうなのでご注意を。

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サービスとしてApp Annieを使いました。

マネタイズの方は…まあうまくいくわけないですよね。

ダウンロードの数がそもそも充分な利益を得られるほど多くはないですし。結果としては、4日間で564回の広告表示、5回のクリックによる収益は45円でした。

一日平均11円です (ノ_-。) 収益源は、最初にも紹介しましたが「nend」です。

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

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

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

もし、これから初めてのアプリ作成に挑戦したい人がいれば……

とにかく早めにひとつ、アプリを作ってしまいましょう。

アプリ開発に必要なプログラミングのスキルは、追求すると広さも深さも際限がありません。たまにアプリ開発を目指す方が綴るブログ記事が目に入ることがあるのですが、多くの方が途中で挫折してしまってます。

勝手ながら、挫折の原因をブログ記事から探ってみると、初心者のうちからハイレベルなアプリを目指していることに問題があるようです。

芽が咲くまでの下積み時代が長すぎると、途中でめげちゃいます。最初に小さくてもいいので花を咲かせましょう。

簡単なものでも手元のスマホで自分が作ったアプリが動くと感動します。その感動が学習意欲を刺激し、次のさらに高度なアプリの開発へと背中を押します。

今回、僕の作ったくらいのアプリなら、本を1冊読めば作れちゃう人もいるでしょう。

作りながら教われるプログラミングスクールへ通うのもひとつの方法です。といっても、授業料の高い長期のスクールへ行く必要はありません。

最近はオンラインで勉強したいスキルだけを効率的に教えてくれるスクールが増えてますよね。例えばオンライン学習サイトのUdemyでは、「〇日でできるアプリ開発」のようなコースがたくさん見つかります。以下はその例です。

もう少し本格的に基礎から順番に身につけたいなら「CodeCamp」も良さそうですよね。

本だとわからないところが出てくるたび、悶々としながら自力で答え探しが必要ですが、スクールならすぐ先生に質問できます。

プログラミングを学習する過程では、プログラミングスキルはもちろんですが、わからないことやうまくいかないことの原因を自力で突き止め解決するためのスキルも磨く必要があります。

といっても、初めから自分だけの力で壁を乗り越えることを求められすぎたら、楽しさを見つける前に疲れちゃいますよね。スクールに行けば、とりあえずは、最初のいくつかのアプリが作れるまでは先生が導いてくれます。

長々と学習期間が続き、勉強だけで終わってしまいそうな人は、スクールを試してみるのもいいかもしれません。

まとめ

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

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

ほな、ごゆるりと〜

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

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

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

コメントも大歓迎!

Top