【個人開発】色彩検定1級合格のデザイナーが本気で「色彩検定の色名アプリ」を作った話


# 作ったもの

色彩検定の学習アプリ

## iOSアプリ

https://apps.apple.com/jp/app/iroben/id6502425637

## Androidアプリ

https://play.google.com/store/apps/details?id=site.iroben.iroben&pcampaignid=web_share


# 使用したもの
◾️フレームワーク
* vue.js
* sass

◾️パッケージ管理
* npm

◾️ツール
* figma
* phothosop
* Git
* Xcode
* Transporter

◾️プラットフォーム
* firebase
* monaca

◾️その他
* Apple Developper
* Apple Store Connect
* Google Play Console


# 費用
◾️総額
¥59,082（自費）

◾️内訳
* Appleへの申請代：¥15,535
* Googleへの申請代：¥4,017
* Android クローズドテスト外注代：¥12,500
* Figma有料プラグイン代：¥860
* monaca Proプラン代：¥12,000（契約継続中）
* Php Stormエディタ有料プラン代：¥12,870（契約継続中）
* その他雑費：¥1,300

ちなみに広告を貼っていないため、売上は¥0です💸
![スクリーンショット 2024-06-18 11.21.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/597959f8-090d-b896-31d3-e599d329929b.png)


# 期間
4ヶ月〜6ヶ月間
仕事終わりや休日に細々と...

# アプリ開発の流れ
## 【1】ターゲット層の調査

色彩検定の受験者は女性が多く、
年齢は20代〜40代がボリュームゾーンということがわかりました。

◾️内訳
１）2級の受験者、3級の受験者
* 男性2~3割:女性7~8割
* 20代〜40代

２）1級の受験者
* 男性4~5割:女性5~6割
* 20代〜50代


実際に試験会場に足を運んだ際の所感としても
上記のデータ通りの印象を感じています。


## 【2】ペルソナ設定
![スクリーンショット 2024-06-17 11.25.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/949c84ea-3992-1350-adda-16f5fc4ccc5c.png)



## 【3】コンセプト設定

### サービス理念

irobenの目指すべきサービス像は以下です。
・勉強していることを忘れるようなサービス
・学習アプリでありながら”遊び”を彷彿とさせるサービス

### マインドマップ

irobenと関連するキーワードを洗い出し、
その言葉が持つイメージを軸にさらにイメージを膨らませます。

◾️目的
・新しいアイデアの発見
・自分の思考や固定観念を視覚化

![スクリーンショット 2024-06-17 13.25.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/9142eb6d-e4e4-605e-8356-a3a59a28740a.png)

![スクリーンショット 2024-06-17 13.10.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/9a27926c-033d-d275-5bdc-9dedcb2ca26c.png)


### SD法
irobenの目指すべき方向性を定めます。

◾️目的
・アイデアの持つ心理要素の測定
・意味構造の視覚化

![スクリーンショット 2024-06-17 12.55.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/674fbc5d-2cb3-f352-d062-4facb04837b8.png)

### ポジショニングマップ

他社と比較し、ポジショニングを考えます。

◾️目的
・市場の全体像の理解
・「iroben」の立ち位置の明確化

![スクリーンショット 2024-06-17 12.54.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/acc48132-9ccd-1673-91a1-fa665d942830.png)

### イメージの可視化
既存のサービスや人物で、近い印象のものを探してまとめます。

◾️目的
・アイデアの整理と可視化
・方向性の確認

ちなみに私は「任天堂」「ディズニー」をはじめとした
明るくて親しみのあるブランドでまとめました。
（irobenにそのイメージが反映されているはず、です）

![スクリーンショット 2024-06-17 14.08.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/937a19c1-d66d-cd8a-2cca-6b50c264ddb8.png)
※著作権の関係上ボカシを入れています

## 【4】WF作成

![スクリーンショット 2024-06-17 13.43.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/ec08b55e-4e4e-f8ea-1e24-8caf02b66636.png)

機能、導線、画面構造のようなサービスを形作るのに必要な要素をまとめます。
ここでサービスの全容が立体的に見えてきます。

## 【5】UI/UX・デザイン

### UI/UX

![スクリーンショット 2024-06-17 16.08.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/e1aa92f8-b947-6f0c-d886-bc70ad73fe39.png)

目指したのは、**「勉強していることを忘れてしまいそう」なユーザー体験**。

そのため、ビジュアルは遊び心のあるものに。
ゲームやテーマパークを連想させる世界観にすることを目指しました。

さらにシンプルなUIと画面遷移も欠かせません。

例えば、メインメニューのUI。
ワイヤーフレーム時点ではタブメニューを検討していましたが、
画面遷移のネスト化を極力避けたかったので、
ハンバーガーメニューに変更しています。

【旧案】

![スクリーンショット 2024-06-17 15.53.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/5394a860-3a19-f014-a09d-fa6ae2e7f62a.png)

【新案】

![スクリーンショット 2024-06-17 15.53.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/b9a05437-b97f-d929-d497-41eda58ee138.png)

irobenは非常にカラフルな画面が持ち味ですので
機能が埋もれないようにする必要があります。

メインビジュアルとUIのバランスを見て、
お互いが調和する色み・形・サイズを選定していきました。

![スクリーンショット 2024-06-17 16.11.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/7f0f19bb-2c05-35bd-d6a6-5acaf5ce32c8.png)



### デザイン

自分への挑戦の意味も込めて、
「今まで作ったことのないデザインを作る」というのが裏テーマでした。

色彩検定の勉強時間から見積もると、
「iroben」の利用期間は”短期的”なことが推測されます。

だからこそ私は
「ユーザーの印象に残るインパクトあるデザイン」
を目指したかったです。

先進的だけど尖りのない・・・
良い塩梅になるよう、調整を繰り返し
サービスの印象を定めて行きました。


# 【番外編】困難だったこと

## ①「Androidの審査のハードルが高い」

### コスト
◾️費用：約12,500円（外注代）
◾️期間：約3週間〜1ヶ月
→初回審査だったので、結構時間がかかりました。
（内部テスト＋クローズドテスト＋製品版申請の３つのステップを踏んでいます）

### 理由
以下の要件を満たさないと
Andoroidアプリはストアに出品できなくなりました。

* 20人以上のテスターを集める
* 14日以上連続でオプトインしてクローズドテストを実施


>重要: テスターには、14 日間以上連続でクローズド テストにオプトインする必要があることを強調します。

引用元：[ヘルプセンター](URL "https://support.google.com/googleplay/android-developer/answer/14151465")

半年前（'23年/11月）に規約が変更されていました。

個人開発の身ですと、
自力で20人分のAndroidを集めるのは至難の業でした・・。
そのため私は外注様にテストを依頼致しました。

## ②「iOSアプリのリジェクトが続く」

リジェクトが続きました。
原因は、単純に私の[Apple Store Connect](https://appstoreconnect.apple.com/login)への理解不足。
「指示通り修正してもリジェクト」という事象が発生しました。

### 原因

修正後のバージョンを選択せず、そのまま審査に提出したため。

Transporterで修正済みの.ipaファイルを上げれば、
Apple Store Connect側で自動的に修正後の.ipaファイルが
上書きされると思っていました...

なぜそう思ったかというと、
画面にファイルを選択するエリア（※赤枠）が表示されていなかったためです。
![スクリーンショット 2024-06-11 12.48.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/c9824822-15ba-0994-0908-52a88103518a.png)

しかしこの赤枠エリアの表示には若干のラグがあるようで
少し待機した後に画面のリロードを繰り返すと
表示される・・・という現象に気が付きました。

私のように初めて利用するユーザーは、
陥りやすいミスになるもしれませんので
自戒の意味も込め
以下に解決方法の全体を記載します。

### 解決方法

1\. Transporterで修正済みの.ipaファイルを上げる
2\. デリバリーボタン押下
3\. Apple Store Connectで修正後のビルドファイルを選択
※ビルドファイル選択エリアがない場合は、リロードを繰り返してみてください
4\. ビルドするバージョンを選択。
　ここが過去のバージョンのままになっていないか確認するべし
 ![スクリーンショット 2024-06-11 13.00.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/972cdfb7-ae7f-6214-4797-1a97485157a3.png)
5\. 審査に提出


## ③「実装に時間がかかる」

数年前はVue.jsを書いていましたが、
今ではデザイン作業が中心となり
ご無沙汰しておりました。

プログラミングは楽しいのですが、
やはり得意な人と比べて時間はかかると自覚しております。

それでも今回挑戦した理由は、
「jsが好きだから、好きという気持ちを形にしたい」
という気持ちがあったからです。

また、「事故のないサービス」を実現するため
私は何度も何度も見直し、テストを徹底しています。

そのおかげもあり、リリース後のクラッシュ率は0%を記録しています。
![スクリーンショット 2024-06-25 9.04.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/85939ee3-834c-896c-f67b-43f67b7f65ca.png)


## ④「アプリDL数が伸びない」

このセクションだけでもう1記事作れるくらい、長いトンネルです。
（まだトンネルの中）

私が行った策で、効果的だった２つをご紹介します。


### 策1「[公式X「iroben」](https://x.com/iroben_official)の活用」

Xでアカウントを開設し、色彩検定受験者のメリットとなるような投稿をしています。

全然更新されていないと「死にコン（＝死んだコンテンツ）かな？」と思われてしまうため、
「生きたサービスですよ」ということを強くアピールするべく毎日投稿&ユーザーのフォローを怠りません。

泥臭い作業ではありますが、RpやDMで直接感想いただけるので今ではそれがモチベーションになり、楽しんで運用しています。

![IMG_8245.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/d7094967-7b1b-300b-ca82-6559de7be21c.jpeg)

![IMG_8247.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/377c910d-501d-f476-b5a0-e6872023d73d.jpeg)

![スクリーンショット 2024-06-17 9.40.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/5cfad610-e111-3cd4-9890-096877f2a7a3.png)

※他メッセージについては、[note](https://note.com/saba_uni_toro_/n/n16d199f0a28b)にも一部掲載しています

https://x.com/iroben_official


### 策2「[note](https://note.com/saba_uni_toro_/n/n16d199f0a28b)の活用」

これがなかなか反響良かったです。
noteさんから注目記事にも選んでいただきました。

![スクリーンショット 2024-06-17 9.04.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/cce96ab9-a64e-d258-0878-a7c992747d18.png)

ユーザーの方からコメントもいただき、感無量でした。

![スクリーンショット 2024-06-17 9.26.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/9dabdfd7-9bda-1572-2d09-c1ad5c7a91aa.png)

![スクリーンショット 2024-06-17 9.27.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/2b6d528a-6963-f85a-1ecb-596e0399efd1.png)

![スクリーンショット 2024-06-17 9.27.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/6f556374-4ad2-2337-e3bd-e908092deaf3.png)

おかげで、ダウンロード数も以前より（少しですが）上がりました。

https://note.com/saba_uni_toro_/n/n16d199f0a28b

Xにしてもnoteにしても、宣伝する際は
**質の良いメディアを形成した上で** 発信することが重要です。

根気が必要なところですが、関連メディアも開発したアプリと同じ熱量で
大切に育てていく必要があります。


## ⑤「体力にリミットがある」

当たり前ですが、1人でできることには体力的にも時間的にも限りがあり、
ひいてはサービス全体の品質にも影響します。

1人で切り盛りする個人開発の厳しい現実を知りました。

リリースするまでも、した後も、本当にエネルギーが必要です。

サービスを生み、育てるということは持久戦なのだと身をもって学びました。

そのため、これから個人開発に挑戦する！という方がいましたら
どうかペース配分はお間違えのない様に・・・とお伝えしたいです。

リリースした後もまだまだ走らないといけないので
たっぷり力を蓄えておいてください。


# 【最後に】あとがき

長々とここまでお読みいただき、ありがとうございました。
ここから先はポエムになります。（飛ばしていただいて大丈夫です）

デザイナーである私が、なぜ個人開発を行うことになったか
その理由を以下に記載しております。

==================

**①『誰かの役に立つサービスを作ることへの憧れ』**

色彩検定の勉強中、私は暗記カードを作るのがとても面倒だと感じました。

またある時は「間違えた色で落書きしてみたい」など思い、
色々思うところがあった自分は、試験勉強用にプログラムを作りました。

そのおかげもあり、1,2,3級全ての色名問題は全問正解しており
これを知った方が「こういうのあればもっと楽に学習できたのにな」と言ってくれました。
彼女もまた、過去に色彩検定を受験したことのある方でした。

この時「このプログラムを元に何かできないか？」と思い、
製品化を決意いたしました。

**②『一貫してサービスを作ることで、開発者として総合的な視点を養いたい欲求』**

「デザイナーだからデザインのことだけしておけばいい」というのも
一つの考えとして尊重しておりますが、
私はデザイン”だけ”をしていきたいというよりは
「万人から愛される、シェアのトップを掴めるサービスを作りたい」という気持ちがあります。

<font color="red">質の良いサービスというものは、さまざまな工程が緻密に組み合わさり
はじめて花開くもの</font>です。

そのため、私は多様な視点を持つことの必要性を感じ、
一貫して1人でサービスを作ることに致しました。

**③『若手へのモチベーションになれば...という望み』**

私の勤め先は内製の技術力が課題です..

技術力というのは１日にしてならず、
また、いつも恵まれた案件に関われるとも限りません。

そこで、社内の若手の方に
「デザイナーだけど、アプリリリースしてみました」と言うと
「自分もできるかもしれない！」「挑戦してみよう！」と言う気持ちに
なってらもえるのではないかと考えました。

==================

最後に...

色んな想いを馳せ、どのフェーズも何度も何度も考え直して、
やっと出来たのが「iroben」です。

0から1を生み出すことの難しさと、楽しさを存分に肌で味わった半年間でした。


### iOSアプリ
https://apps.apple.com/jp/app/iroben/id6502425637


### Androidアプリ
https://play.google.com/store/apps/details?id=site.iroben.iroben&pcampaignid=web_share

### 公式note
https://note.com/saba_uni_toro_/n/n16d199f0a28b

### 公式X
https://x.com/iroben_official