業界未経験者がスマホアプリを作るまでに考えたこと・調べたこと・やったこと

#はじめに
### **本記事について**
本記事はReact Native(Expo)を用いて[Omoidata日記](https://apps.apple.com/jp/app/omoidata-%E6%97%A5%E8%A8%98/id1467571569)というスマホ用日記アプリを業界未経験者の私が独学で作るまでに考えたこと、参考にしたサイト、使ったツールなどをまとめたものです。
アプリの概要設計、デザイン（プロトタイピング）、開発、公開までのセクションに分けてそれぞれ紹介いたします。

![作ったアプリ: Omoidata日記](https://paper-attachments.dropbox.com/s_057FC326A1543567A94F063219EEF32EEAC34799DA63CE2F422DB86A3C3A5264_1568511011615_omoidata.png)


### **目的**
プログラミング初心者の方々は、周りにアプリを作った事がある知人も少なく、Progateやドットインストールで基本を学んだのち、どのようにオリジナルアプリを作れば良いか手がかりが少ないと思います。
そこで、合格体験記のように私のアプリ制作の流れをシェアすることで、「アプリ制作ってどうやるのか全くわかんね！＼(^o^)／」という状態から「何をすべき（考える・調べる）かの輪郭はわかる」という状態への昇華を目的としています。

### **対象読者**
**「プログラミングの初歩的な知識があり、作りたいスマホアプリのアイデアがあるけれど、アプリ制作のやり方がわからない方」**

今回は対象読者を「作りたいアプリのアイデアがある方」としています。
そのため、アイデアの創出方法などには触れていません。
また、React Native製アプリを引き合いに出して説明していますが、ハイブリッドアプリ限定でなく、ネイティブアプリ制作の方にも参考になるような記事を目指して書いています。

# 目次
- 基本的な考え方
    - Done is better than perfect!
    - 自分が欲しいものを作る
    - データを残しておく
- 概要設計
    - 人気のアプリをダウンロードしてスマホアプリのイロハを感じる
    - 競合アプリをダウンロードしてコアな機能を整理する
    - 作りたい機能に近しいアプリをダウンロードして考えを整理する
    - UIのイメージをより明確にする
    - コンポーネントライブラリーを確認しておく
- デザイン
    - Adobe XDの使い方を学ぶ
    - XDで参考資料を整える
    - XDで画面を作ってみる
    - 細かいデザインについて
- 開発
    - Google検索をする
    - 公式のドキュメントを読む
    - オープンソースのコードリーディングをする
    - Q&Aサイトを利用する
    - 開発の前に…
    - その他Tips
- 公開まで
    - プライバシーポリシー・利用規約
    - ストア用スクリーンショット
    - アイコン
    - サポートURL
 
# 基本的な考え方

開発やデザインなどの実装の話の前に、アプリ制作をする上で持っていた方がよいと思う考え方を３つほど記載いたします。

## 1. Done is better than perfect!

個人開発界隈で擦り切れるほど聞かれる言葉で、もはや語ることはありませんが、やはり初めてアプリ開発をする場合はこのメッセージよりも大切な態度はないと思うので記しておきます。

## 2. 自分が欲しいものを作る
> [“最悪自分のための最高のサービスになってもいいじゃないですか”](https://blog.nabettu.com/entry/single-develop)
> [引用元] [**個人開発のモチベーションが続かない、作り終わらない。原因と対策を考えてみた。**](https://blog.nabettu.com/entry/single-develop)

初めて作ったアプリを多くの人に使ってもらうのは難しいです。実際、私が作ったOmoidataも決して多くの人に使って貰えている訳ではありません。だからこそ、自分が欲しいものを作りましょう！
**自分が使いたいようにいくらでも改造出来るオリジナルツール**です。そんなツールがあるとしたら、それってワクワクしませんか？

## 3. データを残しておく
![](https://paper-attachments.dropbox.com/s_057FC326A1543567A94F063219EEF32EEAC34799DA63CE2F422DB86A3C3A5264_1568460498181_+2019-09-14+20.27.59.png)


画像のように**参考にしたページをブックマークでフォルダ分けして管理しておく**のをオススメします。
個人開発では、公式のドキュメントから、技術ブログまで、参考ページは数多く、一時的に保存しておく情報も多くなりがちです。
情報を参照したいときに、何十もあるブックマークから該当のページを探すのは一苦労です。
楽をするためにもすぐに開けるように管理しておきましょう。

アプリを作り終えた後に、技術記事やこういった記事を書く際にもアウトプットが楽になります。

# 概要設計

今回の記事では対象読者を「アプリのアイデアがある方」としているため、すでに頭の中に「こんなアプリを作りたいなぁ」という多少のイメージはあると思います。
この項目では、持っているイメージを具体的なアプリのデザインに落とし込めるように、**アプリにどんなコンポーネントや画面があるのか**を考えていきます。

## 1. 人気のアプリをダウンロードしてスマホアプリのイロハを感じる

まずは**現在人気のアプリをストアでダウンロードして触ってみましょう。**
普段使っていないアプリを使うことで自身のアプリ開発への刺激にもなりますし、イメージの段階では考えもしていなかった機能やデザインが思い浮かぶこともあります。

![Applivの人気アプリ一覧](https://paper-attachments.dropbox.com/s_057FC326A1543567A94F063219EEF32EEAC34799DA63CE2F422DB86A3C3A5264_1568900200611_+2019-09-19+22.34.38.png)


次項から直接関わりのあるジャンルのアプリを調べていくので、ここでは[**Appliv**](https://app-liv.jp/ranking/)**の人気アプリの中から気になるカテゴリを１０個ほど選んで、それぞれベスト１０にあるアプリから３つ、計３０個ほどダウンロードして触ってみましょう。**
その際に、素敵だなと思うUIがあったら**画面をスクショ**しておきましょう。あとでデザインの際に参考にします。

## 2. 競合アプリをダウンロードしてコアな機能を整理する

前項で色々なアプリを触ってみて、機能やデザインのイメージは固まってきたでしょうか？
ここからは**自身のアプリのイメージをさらに固めるためアプリに必要不可欠な要素を整理しましょう。**

例えば、私が作ったOmoidataは日記アプリですが、皆さんは日記アプリに必要不可欠な機能や画面にはどんなものがあると思いますか？
それを考えるときに、紙を用意して色々と書き出して整理するのも良いかもしれません。
ですがここでは、**ストアで競合アプリ（Omoidataの場合は日記アプリ）を１０個ほどダウンロードして、それぞれのアプリに重複する機能や画面を確認しましょう！**基本的にダウンロードするアプリはストアの**検索上位の１０個**で良いです。

競合アプリを１０個ほどダウンロードして使ってみると、必要不可欠な機能や画面がわかってくると思います。日記アプリでいえば「記事を書く画面」「記事を読める画面」「記事に写真を乗せる機能」「カレンダー機能」このあたりが必要不可欠になるかと思います。

また、この際に機能や画面だけでなく、**「画面下のタブ」や「画面上のタブ」にどんな要素が置かれているのか**も確認しておきましょう。基本的にタブにはコアな機能が並びますので、整理しておくことで、アプリのイメージをより固めることが出来ます。

もちろん、これらのアプリを確認する際に素敵だなと思うUIがあれば是非スクショに撮っておきましょう。

## 3. 作りたい機能に近しいアプリをダウンロードして考えを整理する

必要不可欠な機能や画面がわかったら、次はアプリのスパイスになる機能や画面を考えていきましょう。
Omoidataの場合は「タグ機能」「人もタグのように管理できる機能」「気持ちを登録できる機能」「それらを数値や図表で管理する機能」が欲しいと考えていました。

そこで、それぞれの機能がどのようなデザインになるのかを考えるために**「欲しい機能と近しい機能」を持つアプリをダウンロード**しましょう。

たとえば、「タグ機能」というのは日記だけの話ではありません。
クックパッドのようなレシピサイトでもタグは使われていますし、Todoistのようなタスク管理アプリでもタグが使われています。「図表で管理する機能」も、Studyplusのような学習アプリや、MoneyForwardなどの会計管理アプリでも使われています。

このように**自分が実装したいと考えている機能と似たような機能を持つアプリを各機能ごとに５つ程度ダウンロードしましょう。**そして、それらがどのようなUIで実現されているのかを参考に自身のアプリのイメージを整理しましょう！
この際も後ほどデザインで参考にするために素敵なUIはスクショを撮っておきましょう。

## 4. UIのイメージをより明確にする

上記までの過程でアプリに必要な機能や画面のイメージがだいぶ明確になってきたと思います。
具体的なデザインについてはデザインの項目で作っていきますが、上記までの段階でまだイメージが固まっていない画面がある時は、特定の画面ごとに検索をして参考画像を増やしていきましょう。

この段階ではアップストアからアプリをダウンロードするのではなく、[Pinterest](https://www.pinterest.jp/)や[Dribbble](https://dribbble.com/)などの素晴らしいデザインをまとめてくれているサイトを参考にしましょう。

具体的には、上記のサイトで「UI Sign up」「UI Profile」のように画面のキーワードを含めて検索します。

![Pinterestで「UI Sign up」で検索](https://paper-attachments.dropbox.com/s_057FC326A1543567A94F063219EEF32EEAC34799DA63CE2F422DB86A3C3A5264_1568461388124_+2019-09-14+20.42.39.png)


こちらも良いと思った画面は画面ごとにどんどんスクショを取っておきましょう。

実際にダウンロードしたアプリのスクショと、Pinterestなどで調べたデザインのスクショは、**各機能（タグ機能の参考）や各画面（設定画面など）ごとに１０枚以上**はスクショを撮っておくのを推奨します。

---
以上、概要設計の項目では数多くのアプリやデザインを見てきました。
これらの一連の作業でアプリにどんな画面が必要かは決まったでしょうか？
アプリに必要な画面が決まったら次からはいよいよデザインに入ります。

## 5. コンポーネントライブラリーを確認しておく

「いよいよデザインに入ります」とほんの数行前に書きましたが、その前にちょっと寄り道です。笑

全ての作業を一人で行う個人開発において有用なライブラリーというのは絶対に活用していきたいものです。そこで、下記のような**写真付きでおすすめのコンポーネントライブラリーをまとめてくれている記事を、デザイン作業に入る前に確認しておく**と良いです。


- [2018年 React Nativeで真剣なアプリを開発するなら、絶対使うライブラリー！](https://kokensha.xyz/reactnative/react-native-production-ready-library-2018/)
- [React Native おすすめコンポーネント一覧v2](https://qiita.com/YutamaKotaro/items/dac047715896dc11e555):

例えば特定のカレンダーライブラリーを使うとしたら、カレンダーのデザインというものも自ずと定まっていくことになります。そのため、事前に確認しておくことで、デザインのイメージを固めることや、無駄なデザインに時間を使うことも避けられます。
今回はReact Nativeの記事を紹介しましたが、アプリ制作をする際に使う言語のコンポーネントライブラリーを事前に色々見てみてください。

# デザイン

みんな大好きデザインの段階です。
アプリ制作を志す方の中でもデザインは得意な方、苦手な方が分かれる分野だと思いますが、今回は苦手な方でもある程度良いデザインが出来る方法を紹介します。

## 0. Adobe XDの使い方を学ぶ

今回はプロトタイピングツールとしてAdobe XDを使います。
使ったことがある方や、他のツールを使っている方はこの項目を飛ばしてください。
使ったことが無い方は無料で使えますので是非[公式サイト](https://www.adobe.com/jp/products/xd.html)からダウンロードしてお試しください。

Photoshopなどのツールもそうですが、デザインソフトは極めようと思ったらきりがないので、プロトタイピングに必要な最低限の知識を身につけるコースとして、[チュートリアル](https://helpx.adobe.com/jp/xd/tutorials.html)の「XDの基本を学ぶコース」をやるのをおすすめします。

もし、もう少し細かく知りたい場合は[ディレクターがワイヤーフレーミングにAdobe XDを導入してみた。【デザイン編】](https://note.mu/jellybelly/n/n53344b786514)、[ディレクターがワイヤーフレーミングにAdobe XDを導入してみた。【プロトタイプ編】](https://note.mu/jellybelly/n/n2f93ff02858a)を見ると、ショートカットキーや細かいTipsなども紹介されていてより理解が深まります。

## 1. XDで参考資料を整える

基本的な使い方がわかったら次はオリジナルアプリのプロトタイピングに移りましょう！と、いきたいところですが、その前準備をします。笑

まず、前回の概要設計の段階で参考になるデザインを沢山スクショしたと思います。それらをXDに取り込んで**機能や画面ごとに分類して並べておきましょう**。

![](https://paper-attachments.dropbox.com/s_057FC326A1543567A94F063219EEF32EEAC34799DA63CE2F422DB86A3C3A5264_1568462518552_+2019-09-14+21.01.46.png)


各機能・画面ごとにこれらの作業が出来たら前準備は終了です。
追加していく中で特定の項目の参考画面が足りないと感じたら前項で紹介したPinterestなどで適時キーワード検索をかけて追加しておきましょう。

## 2. XDで画面を作ってみる

いよいよここからオジリナルアプリの画面を作っていきます。
オリジナルアプリのプロトタイピングではXDの公式チュートリアルにも出てきた[**UIキット**](https://www.behance.net/gallery/55462459/Wires-wireframe-kits-for-Adobe-XD)**やこちらの**[**Free wireframe kits for Adobe XD**](https://www.behance.net/gallery/66495471/Free-wireframe-kits-for-Adobe-XD?tracking_source=search-all%7Cui%20kits)**をベースに画面を作っていく**のでこれらの画面も別枠で開きます。

![](https://paper-attachments.dropbox.com/s_057FC326A1543567A94F063219EEF32EEAC34799DA63CE2F422DB86A3C3A5264_1568516351903_wire.png)


これらのキットには上記の画像のようにいくつもの画面が種類別に分けられています。
そこで、自身が作りたい画面と近しい画面をキットからコピーし、先程の参考画面を沢山並べたXDの画面にキットの素材を貼り付けましょう。これで、これから作業するUIキットが（下記Gif中赤枠で囲っているもの）素晴らしいデザインに囲まれたような状況になりました。

あとはその状況のまま、周りの素晴らしいデザインを参考にUIキットから必要なコンポーネントをコピペするなどとにかく手を動かして画面を作っていきます。

![](https://paper-attachments.dropbox.com/s_057FC326A1543567A94F063219EEF32EEAC34799DA63CE2F422DB86A3C3A5264_1568521846554_xddemo.gif)


本来ならばペーパープロトタイピングなどで０から画面構想を練った後にXDなどでプロトタイプのデザインを作るプロセスが適切です。

しかし、デザイン初心者にとって完全に０からデザインを作っていくのは大変難易度の高いことであり、初めてアプリを作る段階でそれが必要だとは私は思いません。

そこで、上記のようにUIキットをベースとしてデザインを始め、**目に入る位置に素晴らしいデザインを配置することで、常にそれらと自作のものを見比べることができ、滑稽なデザインを作ってしまうリスクを減らすことが出来る**環境での作業になります。

デザインをパクるのは駄目なことです。しかし、概要設計の段階で沢山のアプリを見てきた中でお気づきだと思いますが、**アプリのUIにはいくつかのお決まりのパターン**というものがあります。そこで、周りの素晴らしいデザインを参考にしながら、そのお決まりのパターンに沿ってデザインを進め、余白やコンポーネントのサイズ感など、実際に手を動かしながら自身のアプリに最も沿うデザインを模索していきましょう。

## 3. 細かいデザインについて
- アイコン
    [Font Awesome](https://fontawesome.com/icons?d=gallery)などで必要なものを探して使いましょう。
    プロトタイピングの段階では取り急ぎということでGoogleで画像検索をして適当なアイコンを持ってくるなどの方法も考えられますが、アイコンに釣られて周りのデザインも変わってくることがあるため、はじめから本番環境で使うアイコンを使った方が結果的に開発が早くなると思います。
    
- 配色
    配色はデザインセンスが反映される難しい分野です。
    なので初めてアプリを作る段階では**自分の感覚に頼るのではなくメソッドで対応**した方が良いです。
    
    ・ 配色の決め方
    [配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド](https://note.mu/tiekey/n/nf1152c5daebf)
    上記の記事でインターフェイスデザイナーの方が説明してくださっているので参考にしてみてください。
    
    ・ メインカラーの決め方
    上記記事ではメインカラーをグーグルの検索フォームから主観で決めておりますが、最初は「**ピンクといってもどのピンクがイケてるピンクかわからない**」と、主観で決めるのは難しいですよね。
    そこで、[Colors of the Year](https://www.w3schools.com/colors/colors_trends.asp)のような各年の流行りの色などをまとめているサイトから気になる色を選ぶのも一つの方法です。
    
    また、[ColorDrop](https://colordrop.io/popular/)のような何百種類もの素敵な配色パターンを紹介しているサイトを人気順にソートして、上位のものから気になる色を選ぶのも一つの方法です。
![](https://paper-attachments.dropbox.com/s_057FC326A1543567A94F063219EEF32EEAC34799DA63CE2F422DB86A3C3A5264_1568550294125_colorof.gif)

- フォント
最初はこだわる必要はないと思いますが、ちょっとこだわるぐらいなら[Google Fonts + 日本語](https://googlefonts.github.io/japanese/)で十分です。
フォントが重要なアプリを作るなど、フリーフォトで色々試したい方は[ためしがき](https://tameshigaki.jp/)も一覧性があり選びやすいです。

![](https://paper-attachments.dropbox.com/s_057FC326A1543567A94F063219EEF32EEAC34799DA63CE2F422DB86A3C3A5264_1568509542961_.png)

# 開発

**調べながらやるしか…ない。**
デザインまでのプロセスでは具体的なツールなどを色々と挙げてきましたが、開発に関しては「調べながらやるしかない」となんとも短絡的な考えになってしまってごめんなさい。笑

アプリを初めて作るという方は
・Progateやドットインストールでのチュートリアルを終えた
・QiitaでTodoアプリ制作などのチュートリアルをやってみた
などの段階の方が多いかと思います。その場合、「調べるとはそもそもどうやって？」という方も多いと思うので私がどのように調べているかを簡単に紹介します。

私は今回のアプリをReact native × Expoという開発環境で行ったので、参照リンク等はこれらをもとに説明します。ご自身がアプリ制作をする際に使う言語やフレームワークに読み替えてください。

基本的に調べる際に用いるのは下記4つの方法だと思います。

## 1. Google検索をする

**迷った際はまずはググりましょう。**
たとえばスマホのカメラロールの画像をアプリに取り込みたいとなったら「React Native Expo カメラロール」などで検索をすればQiitaの記事や個人ブログ、[Stack Overflow](https://stackoverflow.com/questions)などで説明をしてくださっている記事が出てきます。

いくつかの記事を読んでみて、やりたいことが実現できそうにない場合は、検索ワードを**英語にして検索する範囲を拡大**してみたり、一連の記事で**分からなかった部分を再度キーワードを変えて検索**してみるなど、少しずつ理解を深めていく形で開発を進めていきましょう。

また、React NativeやExpoなどの新しめの言語やフレームワークを使う場合は**検索ツールから「一年以内」など検索期間を縮めて検索**するのをオススメいたします。ある程度期間が空いている記事だと仕様が大幅に変更になっている可能性あります。
上記の過程で自分のやりたいことの実現方法がある程度わかった場合はいざ実装です。
その際に、できれば次項で紹介する公式ドキュメントにも目を通したほうが良いと思います。

## 2. 公式のドキュメントを読む

実践に即する形を考えると「まずはググる」かな？と思いましたので第二項目になりましたが、基本的には使っている言語やフレームワークの**公式ドキュメントを読むことが一番大切**だと思います。私も開発中はほぼ[Expoの公式ドキュメント](https://docs.expo.io/versions/v34.0.0/)とにらめっこでした。笑

読むと言っても勿論、最初から最後まで全部を読むのではなく、**知りたい情報だけを調べる態度**で臨みます。
たとえば前項ではカメラロールに関して調べていました。いくつかの記事を読んでみると、どうやらExpoでカメラロールを使う場合はimagePickerやPermissionsなるものが必要だということが分かりました。そこで公式ドキュメントの検索フォームで「imagePicker」や「Permissions」と入力して、それぞれの該当部分の理解を深めるという形で参考にします。

Expoなどの比較的新しいツールは頻繁にバージョンアップで仕様が変更されることがあるので、ドキュメントを読むときは**必ず自身が使っているバージョンのドキュメント**を読みましょう。
自分が使っているバージョンが古くなっていることに気づかず、公式通りに実装しているのに実現できない？なんで？という罠にハマることもあるかもしれません。

## 3. オープンソースのコードリーディングをする

公式ドキュメントや技術記事などを見ても解決出来ない場合は、他のエンジニアの方が公開されているオープンソースのコードリーディングをしましょう。はじめての方はいきなりハードルが上がったと思うかもしれませんが、技術記事を読むのと大して変わりはありません。

![](https://paper-attachments.dropbox.com/s_057FC326A1543567A94F063219EEF32EEAC34799DA63CE2F422DB86A3C3A5264_1568687678328_oss.png)


たとえば、Omoidataのタグ画面を作るとしましょう。「タグ機能なんてどうやって作るんだろう？」と思うかもしれませんが、UIを見ればわかるように「Todo機能」となんら変わりはありません。

あとは、[Github](https://github.com/)で「React Native Expo Todo」のような形で検索をすれば、数多くの参考になる
プロジェクトが出てきます。ライセンスなどをしっかりと確認した上で、それらを参考にしながら実際に手を動かしてアプリを作っていきましょう。

## 4. Q&Aサイトを利用する

どうしてもわからない場合は[Stack Overflow](https://stackoverflow.com/questions)や[terateil](https://teratail.com)などのQ&Aサイトや、言語・フレームワークの公式Forumなどに質問をするという手もあります。ただ、調べてもどうしてもわからない場合は答えが帰ってこない場合もあるので、何日も回答を待つよりは、違うやり方で出来ないかを模索する方が良いかもしれません。

こういったサイトはどちらかというと「全く実装のやり方がわからない」という場合ではなく、「実装は出来るけれどベストプラクティスが知りたい」などの場合の方がより適切に利用出来る気がします。

## 開発の前に…

調べながら作るということですが、ドットインストールやProgateを終えたばかりの人がいきなり「さあ開発です！」となっても、中々開発の流れなどをつかめないですよね。
そのため、個人開発を始める前に一度[Udemy](https://www.udemy.com/)などの動画講座サイトで自身が使う言語のサービス開発講座を受けておいた方が良いです。

具体的なコンテンツ名は控えますが、言語名やフレームワーク名で検索して出てきた中から、評価が高く、ある程度最新のバージョンに対応していて、自身が作りたいものに近しいものを作っている講座を１つ、２つ受けておくと開発の流れがつかめて良いと思います。

## その他Tips

項目を作るまでもないのですが、個人的にモチベーション管理で大切だと思うことを２つほど残しておきます。


- **サンプル画像やスプラッシュ画面は自分の好きな画像を使う**

アプリ起動時のスプラッシュ画面や、ユーザーアイコンなどのサンプル画像は開発中に１万回ぐらい見ることになります。例えばExpoの標準スプラッシュ画面は下記の白地に味気ない四角形の画像です。

![](https://paper-attachments.dropbox.com/s_057FC326A1543567A94F063219EEF32EEAC34799DA63CE2F422DB86A3C3A5264_1568690252840_splash.png)


この画面がアプリをリロードする度に表示されます。………ねえ？笑

もうお分かりだと思いますが、私はこの画像を入れ替え、開発中は乃木坂46の画像にしていました。これと同じように、ユーザーアイコンの画像や、サンプルタグの名称なども好きな芸能人や好きな言葉などを使うことをオススメします。

些細なことですが、こういう態度は孤独な個人開発ではとても大切です。


- **他者を開発に巻き込む**

私はやらなかったのですが、やっておけばよかったなと思うのがこちらです。
Twitterで[＃プログラミング学習](https://twitter.com/search?q=%EF%BC%83%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%AD%A6%E7%BF%92&src=typed_query)のタグを付けて進捗をつぶやいたり、[みんちゃれ](https://minchalle.com/)でプログラミング学習のグループに参加するなど他者を巻き込む仕組みを作ると挫折する可能性を低めることが出来ると思います。

----------
# 公開まで

公開までに必要なものはiOS、Androidともにアプリケーション以外にもいくつかあります。

・[【iOS12.2対応】2019年最新版、iOSアプリ申請時に必要な情報まとめ](https://www.bravesoft.co.jp/blog/archives/4840)
・[2019年最新版、Androidアプリ申請時に必要な情報まとめ](https://www.bravesoft.co.jp/blog/archives/4723)

上記サイトで必要な項目や項目別アドバイスなどをまとめてくださっているので詳しくはそちらをご確認ください。

私の方ではiOSアプリを例に、用意する際に手こずりそうなものを４点ピックアップして紹介します。

## 1. プライバシーポリシー・利用規約

ストア申請で用意する必要があるのはプライバシーポリシーのみですが、利用規約に関しても一緒に触れます。
起業家や法務担当でなく、アプリやサービスを初めて作る場合はこの分野は人生で初めての経験で何から手を付けて良いか不安ですよね。

基本的な方針としてはテンプレートを無料で紹介してくださっているサイトが複数あるので、それらを参考にまとめる形になります。


- [Webサイトの利用規約](https://kiyaku.jp/)
- [【ひな形付】web・アプリ利用規約の書き方と９つのポイントを解説](https://topcourt-law.com/terms_of_service/user_policy)
- [プライバシーポリシーの雛形（ひな形）【作り方はコピペして穴埋めするだけ】](https://blog-tip.com/wordpress/privacy-policy-template/)
- [【コピペでOK】プライバシーポリシーの書き方|AdSense・Analytics対策](http://liberty-life-blog.com/wordpress/privacy-policy/)

内容としては、データ保存がユーザーのローカル端末のみ（もしくは、iCloudドライブなどユーザー自身がクラウドサービスに保存する形）で完結するか、サービス上のサーバーで運営者が管理するかによって複雑度が相当変わってきます。

私は当初、日記の内容をFirestoreとFirebase Storageに保存する形にしていたので、利用規約とプライバシーポリシーをがっつり作りましたが、その後、ユーザー端末内（と、ユーザーが自身で選んだクラウドサービス）のみで完結する形にしたので２つともテンプレート中心の簡素な感じになりました。

また、申請時にプライバシーポリシーのURLを記載する欄がありますが、**グーグルドキュメントで作ってその共有リンクを貼り付ける形でも問題ありません**。

## 2. ストア用スクリーンショット

スクリーンショットはアプリをインストールして貰う上で一番大切な項目の一つです。
アプリを一生懸命作り込んでも、スクリーンショットが微妙だとインストールもして貰えません。
しっかりと作り込みましょう。


- 端末の画像に関して

スクショは大まかに**iPhoneなど端末画像にアプリ画面を乗せる場合**と、**アプリ画面のみ乗せる場合**の二つに分かれると思います。
端末画像を乗せる画像は「iphone free mockup」など「mockup」というキーワードで検索をすると様々なPhotoshopやXD形式のものが見つかりますので、ライセンスを確認した上でそれらを利用ください。

またPhotoshopの編集などに慣れていない場合は[MockUPhone](https://mockuphone.com/#ios)のような**スクショ画像をアップロードするだけで選択した端末に画像を埋め込んでくれるサービス**もあるので、画像編集が苦手な方はそれらを使ってみてください。


- サンプル画像について

開発時のTipsとして好きな人達の画像を使うと書きましたが、ストア申請時には勿論それらは使えません。笑
![](https://paper-attachments.dropbox.com/s_057FC326A1543567A94F063219EEF32EEAC34799DA63CE2F422DB86A3C3A5264_1568706440223_.jpg)


私は上記のような人物画像は[ぱくたそ](https://www.pakutaso.com/)からお借りしました。

見て頂ければわかりますが、素敵なモデルの方ばかりでアプリが映えます。
モデルの方の名前表記についてなど風景画像などと違い特別な規約がありますので、[利用規約](https://www.pakutaso.com/userpolicy.html)をしっかりお読みなってからご利用ください。

風景などの画像はいくらでもフリー素材が出てくると思うので割愛します。
（ちなみに画像左下の犬は実家で飼っている愛犬です）

## 3. アイコン

私は自作しましたが、こだわりがなければ[Hatchful](https://hatchful.shopify.com/ja/)が良いかと。

![](https://paper-attachments.dropbox.com/s_057FC326A1543567A94F063219EEF32EEAC34799DA63CE2F422DB86A3C3A5264_1568707354052_+2019-09-17+17.01.24.png)


ほんの数分で上記のようなおしゃれなアイコンが簡単に作れます。

## 4. サポートURL

サポートURLはアプリ申請時に使うAppStoreConnectでは下記のように説明されています。

> App のサポート情報へのURLを入力してください。このURLは App Store に表示されます。

この文言からはサポート対応ができる何らかのサイトを作ってそのURLを貼り付けるような印象を受けますが、実際は**個人のTwitterのURLでも申請上は問題ありません**。

Twitterならユーザーとのやり取りも出来ますし、[質問箱](https://peing.net/ja/)や[マシュマロ](https://marshmallow-qa.com/)を使えばTwitterアカウントを持っていないユーザーでも匿名で質問を送ることが出来ます。特にアプリ専用のウェブサイトなどを作らないのであれば、初期はこちらの対応で十分かと思います。何度も繰り返しますが、Done is better than perfectです。

# 終わりに

ずいぶんと長い記事になってしまいました。
ここまで読んでくださった方、大切な時間をありがとうございます。

私自身、業界未経験者であり、まわりにアプリ制作に関して相談できる友人などがいなかったため本当に手探りで進んだ個人開発でした。笑
この記事がそういった方の指針の一つにでもなれれば良いなと思っています。

また個人開発というのは大変希望に溢れたアウトプットだとも残しておきたいです。
私がOmoidataを公開したところ、Twitterで「スタートアップへの参画の打診」を頂けたり、開発中に学んだことを技術記事として公開したところ「記事の執筆依頼」を頂けたりと、個人開発に関する些細なアウトプットから小さいながらも色々な繋がりが生まれています。
本気で取り組めば、面白い未来が広がるという点に関して、全ての出来事で肯定はできないかもしれませんが、個人開発は確実にそうだと今の私は断言出来ます。

みなさんも、是非世の中に素敵なアプリケーションやサービスを発信してくださいね。
Happy hacking!