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

作ったもの

色彩検定の学習アプリ

iOSアプリ

Androidアプリ

使用したもの

◾️言語

• vue.js
• sass

◾️ツール

• 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です💸

期間

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

アプリ開発の流れ

【1】ターゲット層の調査

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

◾️内訳
１）2級の受験者、3級の受験者

• 男性2~3割:女性7~8割
• 20代〜40代

２）1級の受験者

• 男性4~5割:女性5~6割
• 20代〜50代

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

【2】ペルソナ設定

【3】コンセプト設定

サービス理念

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

マインドマップ

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

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

SD法

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

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

ポジショニングマップ

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

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

イメージの可視化

既存のサービスや人物で、近い印象のものを探してまとめます。

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

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

※著作権の関係上ボカシを入れています

【4】WF作成

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

【5】UI/UX・デザイン

UI/UX

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

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

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

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

【旧案】

【新案】

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

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

デザイン

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

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

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

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

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

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

コスト

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

理由

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

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

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

引用元：ヘルプセンター

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

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

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

リジェクトが続きました。
原因は、単純に私のApple Store Connectへの理解不足。
「指示通り修正してもリジェクト」という事象が発生しました。

ミスの経緯

1. Transporterでバージョン1.0.0の.ipaファイルを上げる
2. 審査ボタンを押下
3. リジェクトが発生
4. 対象箇所を修正
5. 修正後のバージョン1.0.1の.ipaファイルを作成
6. Transporterでバージョン1.0.1の.ipaファイルを上げる
7. 審査ボタンを押下
8. ２度目のリジェクト
　（修正が反映されていないキャプチャが添付されて連絡が来る…なぜ…？）

原因

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

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

なぜそう思ったかというと、
「6.」のあと、画面にファイルを選択するエリア（※赤枠）が
表示されていなかったためです。

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

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

解決方法

1. Transporterで修正済みの.ipaファイルを上げる
2. デリバリーボタン押下
3. Apple Store Connectで修正後のビルドファイルを選択
※ビルドファイル選択エリアがない場合は、リロードを繰り返してみてください
4. ビルドするバージョンを選択。
　ここが過去のバージョンのままになっていないか確認するべし

5. 審査に提出

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

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

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

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

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

そのおかげもあり、リリース後のクラッシュ率は0%を記録しています。

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

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

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

策1「公式X「iroben」の活用」

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

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

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

※他メッセージについては、noteにも一部掲載しています

策2「noteの活用」

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

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

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

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

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

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

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

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

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

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

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

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

【最後に】あとがき

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最後に...

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

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

iOSアプリ

Androidアプリ

公式note

公式X