機能より先に、名前を決めて開発してみました!——niji code 開発ノート
※当サイトには広告(Google AdSense等)およびアフィリエイトリンク(Amazonアソシエイト等)が含まれる場合があります。詳細は免責事項とプライバシーポリシーをご確認ください。
【読了時間:約18分 / 要約のみなら3分】
この記事で分かること(3行まとめ)
- 「機能より先に名前を決めた」 という個人開発の順序転換の実体験
- アプリの名前を決めたら、機能開発の方向性まで決まった
- アイコンの配色を決める過程で、「QR」というアルファベット2文字が思わぬところに連れていってくれた
個人開発をするとき、名前ってどのタイミングで決めますか?
私は今まで「機能を作ってから名前を考える」ことが多かったのですが、今回は 開発を始めるときに名前を決めて、そのあとに機能を作る という順序でやってみました。
特に意識してこのフローを試してみたというよりは、Flutter プロジェクトを初期設定するときに ディレクトリ名(プロジェクト名)が必要になる ので、そのタイミングで名前まできちんと考えた結果です。
名前を「niji code」と決めた結果、機能開発の内容まで一貫したコンセプトで広がりました。——この点は、実際に経験して面白いと思ったポイントです。
今回は、このように、iOS アプリ「niji code」(QR / MicroQRコードを生成・読み取りできるアプリ)の開発を通じて感じたことを実体験としてまとめました。
最終形の niji code アイコン。ここに辿り着くまでにも試行錯誤があった(後述)
結論:名前を決めた順番が、そのあとの機能を決めた
QRコード生成のアプリを作ろう、そう思い立った後、詳細なコンセプトや機能よりも 「niji code」というアプリ名 を、まず決めました。
何個か候補があったのですが、QRコードの「二次元コード」というキーワードにマッチしてしっくり来たからです。
このアプリ名の 「niji」 が「虹」を連想させたことで、10色のテーマ機能が生まれ、アイコンの配色も決まりました。
二次元コードのアプリ名を冠しているので、せっかくだし——と、Aztec や DataMatrix といった QRコード以外の二次元コードも読めるようにしています。
名前がアプリのコンセプトを決め、コンセプトが機能を決める。
——小さな個人開発で、決定が一人だからこそよりこの順序が効いたのかもしれませんが、名前が決めたことで軸がぶれずに開発を進めることができました。
そもそも「niji code」って何?
niji code は、私が個人で開発した iOS アプリ です。QRコード / MicroQRコードのスキャン・生成・履歴管理ができます。スキャンは Aztec(英語)や DataMatrix といった、QRコード以外の二次元コードにも対応しています。
- App Store: niji code
- データはすべて端末内、アカウント登録なし、広告なし
- iOS 16.0 以降
- 技術スタックは Flutter(Android 版も近いうちに公開予定)
きっかけ:QRコードを編むために作り始めた
このアプリの動機は、実は「QRコードを編む」ところから始まっています。
QRコードをアナログな編み物で表現したら面白いかも!と、いろんな編み方(技法)で QRコードを編む試作をしていました(手編みのQRコードが本当に読めるのかを検証した記事もあります)。棒針、かぎ針、アフガン編み、ビーズ編み、ミサンガ編み——と方法を変えながらサンプルを増やしていくうちに、この編み方で読めるかを小さく検証するためには、QRコードよりセル数が小さい MicroQRコードが試作に便利 と気付きました。
MicroQRコードは、QRコードの小型版です。通常のQRコードは最小でも 21×21 セル(最小単位である白と黒の小さな正方形)で構成されますが、MicroQR は 11×11 セル からになり、1辺のセル数が約半分になります。
そのぶん入れられる文字数は減ります。ただ編み物では、このセル数の差がそのまま編むコストになります。1セルを 2目×2段 で編むとすると——
| セル数 | クワイエットゾーン※ | 編む目数 × 段数 | |
|---|---|---|---|
| 通常のQRコード(最小) | 21 × 21 | 左右上下に4セル | 58目 × 58段 |
| MicroQR(最小) | 11 × 11 | 左右上下に2セル | 30目 × 30段 |
※ QRコードは他の情報と識別するために読み込むにはクワイエットゾーンと呼ばれる周辺の余白が必要になります。
目数×段数でいえば 3,364 → 900。編む量が約4分の1 です。「この編み方で読めるか」を手軽に確かめるにはMicroQRが向いていました(実寸は編み図ジェネレータの記事に書いています)。
ところが、MicroQR を生成しよう・スキャンして確認しようと思っても、MicroQRコードに対応したアプリがほとんどない——。
QRコード自体を扱うアプリはたくさんあるのですが、App Store で「MicroQR」「マイクロQR」と検索しても、対応をうたうアプリはわずかしかありませんでした。
実際に試したのは3つです。
有料のものを2つ買いましたが、どちらも思ったように使えませんでした。もう1つは無料で広告もなく良かったのですが、MicroQR を生成はできてもスキャンができませんでした。編んだものが読めるかを確かめたかったので、機能として足りませんでした。
「自分が欲しいのに、安全に使えるアプリがない」
——もしかしたら 自分以外にも同じ悩みを持っている人がいるんじゃないか? と思ったのがアプリ開発のきっかけです。
副次的な思惑としては、このアプリを使って QRコードを編んでみる人が少しでも増えたら嬉しいな、というのもありました。
なお、簡単な編み図として ブラウザで動くジェネレータ も公開しているので、アクセスして編んでみてください!
まず名前を決めた
Flutterアプリを新規で作るとき、最初にやることは プロジェクトの初期化 です。ここでディレクトリ名(プロジェクト名)が必要になります。
といっても、プロジェクト名がそのままアプリ名になるわけではありません。プロジェクト名とアプリ名が違っていても動きます。揃えておくと管理が楽になる、という程度の話です。ただ、手戻りは避けたいので、ここで決めておきたい!
このような理由から、アプリ名を先に決めることにしました。
「QR ツール」「MicroQR ジェネレーター」的な機能名でも良かったのですが、 以前、プロダクト開発系の記事で「サービス名が初期段階でバシッと決まると開発しやすい」と読んだ記憶がありました。それを思い出し、愛着のある名前にしてみよう!と思ったのです。
寄り道:プロダクトの命名には型がある
候補を出す前に、命名の型を整理してみました。
| パターン | 例 | 特徴 |
|---|---|---|
| 機能記述型 | QR Scanner、Note App | 直感的だが、他と埋もれやすい |
| 造語型 | Kodak、Xerox | 個性が出るが、意味の説明が要る |
| 語呂合わせ型 | Airbnb(air bed + breakfast) | 元の言葉を活かしつつ意味の広がりを持たせる |
| メタファー型 | Twitter(小鳥のさえずり) | 概念を借りて世界観を作る |
| 頭字語型 | IBM、SAP | 短くて覚えやすいが、意味は薄い |
余談ですが、有名なプロダクトの命名由来を辿ってみると、けっこう面白いエピソードが出てきます。
面白いのは Slack です。“Searchable Log of All Conversation and Knowledge” の頭字語とされていますが、開発チーム自身が「先に名前があって、頭字語は後から逆算した」という説も併記しています。英単語 slack が持つ「たるみ・余裕」と「怠惰」の含意も、命名の時点で意識されていたそうです。
このように、Slackは頭字語型とも、メタファー型とも言え、複数の型を掛け合わせる場合もあります。
今回は、QRコードを扱うアプリなので、「二次元コード」の “二次” を音で拾った語呂合わせ型にしました。
AI と壁打ちして候補を並べる
Claude・Claude Code・ChatGPT に「Flutter アプリのプロジェクト名候補を出してほしい」と壁打ちして、6 案が並びました。
niji_code— 「二次コード」の語呂合わせgrid_scan— QR の本質(グリッド)+スキャン機能ami_code— 「編む+code」code_grid— コード+グリッドqr_studio— 生成も読み取りもできる「スタジオ」感code_lab— megusunuLab との親和性
QRコードを編むためのサポートツールが開発の動機でもあり、ami_code(編む+code)も良いな——と愛着はあったのですが、動機が編み物なだけで、アプリがやること自体は編み物と関係ありません。生成とスキャンと履歴だけです。名前と機能がかけ離れると、直感的ではないな、と早い段階でボツにしました。
この中から niji_code を選んだ理由
決め手は、複合的でした。
- 語呂:「二次コード」の日本語感 + 覚えやすさ
- 拡張性:QR 以外の二次元コード(DataMatrix など)に対応を広げても名前が破綻しない
- 国際性:海外でも違和感のないローマ字
- ドメインが空いていた(将来取得するかもしれない)
- バンドルIDやアプリケーションIDが空いていた(実務的な決め手)
どの理由が大きいとかはあまりないですが、比較的しっくり来たものをドメインやバンドルIDで調べて、ハイフンや接頭・接尾語を入れなくても利用できそう、となったのが強いていうと決め手になりました。
なかなか決めた理由を、綺麗に明文化して語るのはむずかしいのですが、プロダクト名の決まり方ってこういう感じが多いのでは?と思います。
表示名は niji code に
もう少し悩むことがありました。ストアに出す表示名を小文字・大文字どちらにするか、です。
例えば、NijiCode NIJI CODE niji code など、大文字・小文字の組み合わせでどう表現するかによって印象が変わりますよね?
今回は、3つめの niji code にしました。理由は、小文字だと丸みが出ることと、そして「niji code」って書くと i と j の ”・” が並ぶのが可愛い な、と思ったからです。
「code」としたのも似た理由です。「reader」「scanner」だと、できること(コト)を名前にすることになります。「code」ならモノそのもの。コードに向き合うツール として広く構えられる気がしました。
niji と code で4文字ずつ並ぶのも、なんとなく見た目の収まりが良いのもポイントでした——結果として、あとから Aztec や DataMatrix を足せたので、この選択は当たりでした。
MVP を作った
名前が決まったら、すぐに実装に入りました。
まずは動くものを作らないと始まらないので、Flutter で最低限の機能を実装しました。
- QR / MicroQRコードのスキャン
- QR / MicroQRコードの生成
- スキャン履歴・生成履歴の保存
MVP 時点の 3 タブ構成。左からスキャン結果、生成、履歴。下部のタブバーで切り替えられる。
3 タブ構成のシンプルなアプリで、これで 「使える状態」 にはなりました。動機だった「MicroQR を生成して、履歴管理する(編んでる間に何度も作り直さなくていい)」もこの段階で満たせました。
MVP としてはここで完成。次の段階として、名前の方向性から自然に広がった追加機能 を作っていくことになります。
入れなかったもの
niji code には、入れないことを選んだもの があります。
- 広告 — 個人開発の無料アプリでよくあるバナーも全画面広告も出さない
- アカウント登録 — サーバーサイド一切なし
- データのクラウド保存(データの保存はすべて端末内) — 履歴もスキャン画像も端末外に出さない
- アクセス解析 SDK — 使い方を集計しない
ただ、これは「ブランディングのために削った」というより、自分が使うために作ったので、最初から要らない と判断したからです。
QRコードを編むために MicroQR を生成したかっただけなので、そこに広告が出たら自分が煩わしい。すぐスキャンしたいのにログインを求められるのも面倒。復元するまでのデータでもない——。
正直、公開するにあたり広告を入れるか、は悩みましたが、そこまで需要が多いアプリでもないですし、入れるコストと利用時の不快さを天秤にかけて、入れなくてもいいとしました。
この判断の副産物として、作りもシンプルになります。サーバを持たないので、運用の手間も増えません。
月々の費用としてサーバ代などかかるとなると、個人開発で続けていくには継続が困難になるので、極力シンプルに進めた方がいいです。
“Focusing is about saying no.” (フォーカスするとは、ノーと言うことだ)
——Steve Jobs(Apple Worldwide Developers Conference 1997)
この言葉が頭にあるものの、個人開発は「入れない」判断が崩れやすくもあります。
止める人がいないので、「マネタイズしたい」「データがあれば改善できる」と思えば、色々なツールや機能を自分一人の判断で入れることができてしまいます。
これに関しては、名前よりも 最初の動機 のほうが有効でした。
「自分が欲しいのに無いから作る」
この動機から外れるものは、そもそも入れない——その軸で開発を進めました。
【時間がない方へ】 ここまでで、何を作って何を作らなかったかの全体像がわかります。ここからは、なぜ名前を先に決めると機能まで決まるのかを深掘りします。要点だけ知りたい方は「まとめ」へどうぞ。
【深掘り】名前が発想を広げた
「niji code」と名前を先に決めていたおかげで、そのあとの機能開発の発想が自然に広がって いきました。
まず:「niji」が「虹」を連想させた
niji_code という名前は、「二次コード」の “二次” から取っただけでしたが、口に出してみると自然に 同音異義語の「虹」 を連想します。日本語で「niji」と聞いて虹を思わない人はほぼいないと思います。
「せっかく虹と繋がりのある名前なんだから、アプリのどこかで 虹の要素 を使えないだろうか?」
これが、次の発想の入り口でした。
次に:ユーザーの色を選べるようにしたい
虹=多色、というイメージから思いついたのは、ユーザーが好きな色でアプリを使えるようにする ことでした。
QRコードを読む・作るという機能自体はシンプルで、日常的に使うツールです。だったら、気分によって色を変えられたら楽しい かもしれない。ホーム画面のテーマみたいに、その日の気分で選べたらワクワクするかもしれない。
そこで、虹の 7 色を拡張した 10 色(赤・橙・黄・緑・青緑・青・藍・紫・桃・墨)を用意して、ユーザーが好きな色を選べる ようにする、という方向が固まりました。
niji code の設定画面。10色のパレットから好きな色を選ぶこともできるし、「毎回ランダム」を ON にしておくと起動ごとに色が変わる。
さらに:デフォルトは「ランダム」にした
「10 色から選べる」機能を作っても、多くのユーザーは “選ばずにデフォルトのまま” 使うだろう な、とも思いました。
しかし、それだと「虹」の遊び心が伝わりません。せっかく色を用意しているのに、そこに気付いてもらえない——。
そこで、デフォルトを「起動ごとにランダムで 1 色が選ばれる」設定 にしました。理由はいくつかあります。
- ユーティリティ的なアプリでも、おみくじ的な遊び要素があった方が楽しい
- 自分では普段選ばない色で気分が変わったりするのも面白い
- 色が変わるのを気付けるくらい アプリを使い続けてほしい
- (正直、“よく使う人” 以外は色が変わった違和感に気付かないかもしれない——それでもまあいいか)
と、いう感じの遊び心のあるおまけ機能になりました。
気付いたこと:名前が思考の順序を作った
リリースを終え、開発を振り返ってみると「niji」という名前でなかったら、そもそも「色」というテーマに辿り着いていなかった のではと思います。
もし名前が「QRツール」だったら、「QRコードを読む・作る」の機能だけで、色のバリエーションを持たせようとは絶対に思わなかったはずです。
【深掘り】アイコンの色決めの試行錯誤
寄り道:アプリアイコンにも型がある
アイコンにも型があります。10種類に分類している記事もありますが、ここでは代表的な6つに絞って、アプリアイコンの例を出してみます。
| パターン | 例 | 特徴 |
|---|---|---|
| ワードマーク | LINE | ブランド名をそのまま見せる |
| レターマーク | Google の G、X | 頭文字だけを使う |
| 具象マーク | Instagram(カメラ)、Apple のりんご | 実在するものを単純化する |
| 抽象マーク | Slack の菱形、Nike のスウッシュ | 具体物ではない図形。幾何学的でモダンな印象になる |
| マスコット | Duolingo のフクロウ、Evernote の象 | 親しみやすさ・愛着を狙う |
| エンブレム | Starbucks(2011年まで) | 枠の中に名前を入れる |
niji code は 具象マークにしました。QRコードの模様そのものが「これは QR のアプリ」と伝わります。これにグラデーションを加えて「niji(多色)」を表すことにしました。
最初の 3 案:素直な単色 or 虹色
最初に試した 3 案。左から Indigo(藍単色)、Green(Wells の緑寄せ)、Rainbow(虹)。
- Indigo:QRコード = 情報 = 青、という素直な連想。無難だがつまらない
- Green:Wells 合同会社のブランドカラー(
#7CB342)に寄せた案。統一感は出るけど、niji code は個人開発でもあるので寄せすぎるのも違うと判断 - Rainbow:「niji なんだから虹色だろう」で作った案。左下の紺から右上の赤まで、7 色を綺麗にグラデーション
Rainbow の発想は「アプリ名 = 虹 = 虹色のアイコン」でわかりやすいとは思ったのですが、いざ作ってみるとダサい。等分のグラデーションじゃなく変えてみたり、少しくすませたりもしたんですが、なんというか、懐かしのワードアートの域を超えることができませんでした。
デザイナーでもないエンジニアが7色を綺麗に使うのは、土台無理なのでしょう。諦めました。
転換:藍→赤で簡略化してみた
色をいっぱい使いすぎるからダサいんだろう、と思い至り、7色全部並べるのをやめて、両端の2色に絞ってみました。
深い青から鮮やかな赤へ。これは前より締まった感覚があったんですが、まだダサい。
それに加え、デザイナー的な理論や手法を身につけていないので、2色を選んでも、なぜその2色なのかを自分で説明できませんでした。
「Q」始まりの色 × 「R」始まりの色
ここで、ふと思いつきました。
「 QRってアルファベット 2 文字だし、これを 色の名前で表現 できないだろうか?」
Q で始まる色、R で始まる色を探す——まず候補を挙げるところから始めました。
- Q: Quartz、Queen Blue、Quicksilver、Quinacridone
- R: Rose、Ruby、Rust、Rose Red
いくつか組み合わせて 4 案を試作しました。
Q→R の 4 案。左上 Quartz→Rose、右上 Queen Blue→Ruby、左下 Quicksilver→Rust、右下 Quinacridone→Rose Red。
どうですか?どれが一番良さそうですか?
ちなみに、私がボツにした3案の理由はこんな感じでした。
- Quartz→Rose:甘すぎる
- Quicksilver→Rust:地味。Rust は最近の言語や人気ゲームの名前でもあるので面白いなと思ったものの、色としてはやっぱり地味
- Quinacridone→Rose Red:まとまっているし落ち着いていていいけれど、一味足りない気がした
最終的にしっくりきたのが、Queen Blue(#436B95)→ Ruby(#E0115F) でした。
- コントラストが強く、ホーム画面で目立つ
- 深い青と鮮やかな赤の対比がしっくりきた
- 名前の響き(格式ばった Queen Blue と直球の宝石名 Ruby)も面白いと思った
最終案を眺めていて、気づいたこと
最終案を選んでから気づいたのですが、Queen Blue(藍に近い青)と Ruby(赤)は、虹のスペクトルの中で対極に近い位置にある色 です。
「Q と R の色を組み合わせてみよう」というのが先で、結果として虹の両端付近の色になっているのに気づく。「niji」というコンセプトをこねくり回した結果、最終的に決定したアイデアもそのコンセプトに無意識に収束しました。開発を振り返って、一番面白いなと思ったポイントです。
まとめ:名前が、作るものを決めていた
開発の流れ。10色テーマも Queen Blue → Ruby も、辿るとこの名前から枝分かれしています
- 名前 → コンセプト → 機能 の連鎖は、個人開発の規模でも効いた
- 「niji」がなければ、10色テーマもアイコンの配色も生まれていない
- ただし「入れない」と決められたのは、名前ではなく 最初の動機 のおかげだった
ダウンロード数はまだ寂しいものですが、私自身がまず便利に使えているので、良いアプリ開発ができたのでは?と思っています。起動するたびに人知れずテーマの色が変わるのも気に入っています。
もちろん、名前を先に決めたら必ずうまくいく、という話ではありません。このアプリ名にしていなかったら、テーマ機能のような「遊び」は入れていないと思います。
小さな個人開発でしたが、どんな名前にするかが、その後の “何ができるか” まで決めていました。
アプリのダウンロード
『niji code』は App Store で無料公開しています。
MicroQRコードの生成に対応した数少ないアプリです。編み図に QR を組み込みたい・小さなスペースに QR を埋め込みたい場合に、ぜひ使ってみてください。