Coloratio(カラティオ)で色をもっと身近に楽しもう。身の回りにあるものや暮らしの中にある「好きなもの」を色だけで表現するカラーパレットアプリです。画像から色を抽出して選択できるので、色の知識がなくても誰でも簡単に配色作りを楽しめます。配色数は2~5色の範囲で、そして配色比率も5%単位で自由にカスタマイズが可能です。登録した配色に基づいて、実際にその配色を利用したデザイン例を表示することで、ユーザーの「デザインにそのまま使える色選び」をサポートします。
受講していたプログラミングスクール「RUNTEQ」における卒業制作アプリになります。 既存のカラーパレットツールが数多く公開されている中、配色数・配色比率の両方を自由に選択して作成できるサイトが存在していないことに着目し、新しい形のツールとして生み出すべく開発に至りました。
スクールでは、バックエンドをメインに学習を行うため、個人開発を行う際に少なからずアプリの見栄え部分で悩まれている受講生の方がいらっしゃる印象でした。私にとってもデザイン面は「最重要ではないけど決して無視はできない」そのような存在だったため、どのようなデザインにすべきかかなり悩んでしまい、なかなか開発を始められなかったことが記憶に残っております。
開発に着手する前に少しだけでもデザイン面のキャッチアップをしておきたいと考え、書籍やサイトなどを漁っていた時期がありました。その過程で出会ったのが配色の概念やカラーパレットツールの存在です。特に寺本恵里著の「見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色」という書籍が、本アプリ開発の大きなきっかけとなりました。
こちらに掲載されている配色を実際に使用して資料を作成しプレゼンを行った際や、デザインに少し力を入れたミニアプリを制作して公開した際に周囲から見た目に関するポジティブな言葉をたくさん頂くことができました。「機能だけでなくデザインにも手を加える」ことで作品がより注目されることを実感しましたし、配色がデザインに与える影響の大きさやカラーパレットの面白さに本格的にのめり込むようにもなりました。
それ以降、日常生活の中で好きなデザインや色の組み合わせを見つける意識も芽生えるようになりました。自身の周りには魅力的なデザインや配色が潜んでいることにも気づきましたし、前より少しデザイン面での視点を持ちながら生活ができるようになったと感じています。デザインに携わらないバックエンドエンジニアにとっても、このようなクリエイティブな意識は役立つのではと考えております。
色の世界を知って間も無く、世の中には既に無数のカラーパレットツールが存在していることに気づきます。しかし、そのどれもが色に関する知識がなければ使用ハードルが高いような、デザイナー向けの作りになっているという印象を受けました。さらに「配色数がサイトごとに固定されている」「パレット内の比率は均等になっている」といった特徴があるようにも感じました。素人の私がさまざまなツールを触ってみた際に生じたこのようなモヤモヤ、それらを解決できるような以下のような特徴を持つものを作れたら…
・「身近なものを色で表現する」というコンセプトだから、知識のない非デザイナーでも使いやすい。
・配色数、比率ともに自由に選択してパレットが作成できる。
そんなアプリがあれば、知識がない人でも色の世界に馴染みやすくなるのでは、また個人開発の際にも色選びの面で役立つのではと考え、全く新しいカラーパレットとして生み出すべく、開発に挑戦した次第です。
身近なものを色で表現して遊ぶだけで「デザインにそのまま使える配色」が発見できる「配色決めの頼れる味方」。 私と同じ受講生や非デザイナー、そして配色に悩んでいる全ての方々にとって、いずれそのような存在になってほしいと願いながら、今後もアプリのブラッシュアップを行っていく予定です。
- パレット作成機能(下書きor公開)
- タグ付け機能
- いいね機能
- Googleアカウントを使用した外部ログイン
- 配色数やキーワード・カラーコード検索による絞り込み・並び替え機能
- パレット画像保存機能
- Xシェア機能(動的OGP)
| カテゴリ | 技術 |
|---|---|
| フロントエンド | Ruby on Rails 7.2.2.1 / Tailwind CSS 3.4.17 / SCSS / Hotwire / Alpine.js |
| バックエンド | Ruby 3.4.2 / Ruby on Rails 7.2.2.1 |
| データベース | PostgreSQL |
| API | devise, omniauth-google-oauth2 |
| 開発環境 | Docker |
| VCS | Github |
| CI/CD | Github Actions |
| インフラ | Fly.io / Cloudinary |
| その他 | rubocop / noUiSlider / iro.js / swiper.js / Pickr / html2canvas / pagy / ransack |
画面遷移図はFigmaで作成しました。
未ログインとログイン後の2つの状態に分けて表示しております。
※実際の開発段階でデザインに変更を加えたため、こちらの画面遷移図とは異なる点が多くなっています。ご了承ください。
※無料作図ツールdraw.ioで作成しました。
本アプリでは以下の点で既存カラーパレットツールとの差別化を図ります。
-
色知識がなくても使いやすいコンセプト
本アプリは、「日々の生活で見つけた好きな色の組み合わせを模倣する」というコンセプトに基づいた構造となっております。そのため非デザイナーでも、知識や情報なしに色の組み合わせを簡単に登録することができます。例えば、好きなブランドロゴや街の看板の色をカラーパレットで再現するといった使い方になるため、色の組み合わせを0から考える必要がありません。 -
シンプルで直感的な色選択
カラーパレットの登録方法はシンプルで、「インポートした画像から色を抽出する」「HEXカラーコードを直接記入する」の2種類のみです。既存のアプリでは色相や補色、RGB値などさまざまなな要素を駆使した緻密な登録が可能ですが、本アプリではあえて複雑な機能を排除し、初心者に優しい使用感となるよう心がけました。 -
各配色の使用面積比率を柔軟に設定できる
選択した色の面積比率を5%単位で変更できる機能を実装しました。既存のカラーパレットでは色が均等に配置されており、そもそも変更ができないものがほとんどでした。本アプリではこの比率を自由に設定できるため、好きな色の組み合わせを詳細に表現することが可能です。 -
配色数も変更可能 2色〜5色の範囲で使用する色の数を変更することができます。既存のカラーパレットアプリでは3色固定、4色固定などとサイトごとに使える色の数が決まっているものが多い印象を受けました。本アプリは、状況に応じて配色数を自由に変更できるため、より詳細に配色を模倣することができます。
-
デザイン例の確認機能
各投稿の詳細画面では、その配色が反映されたデザインを確認できる機能を設けております。「自分の好きな色の組み合わせ」を他に適用した際のイメージが視覚的に把握しやすくなることで、自身の個人開発やデザインへの参考にも繋がると考えました。デザイン例表示の機能に関しては以下のような既存サイトから着想を得ました。このように配色の使用イメージを確認できる機能単体では決して斬新なアイデアとは言えないですが、上述した他の差別化ポイントとも組み合わせることで全体として独自性を持つアプリとなることを目指しました。- COLOR PREVIEW：カラーサークルから2色選択するとコンポーネントデザイン例がリアルタイムで反映されるのが特徴的です。
- palettemaker：表示されるデザイン例が豊富です。5色固定でさまざまな使用例が確認できます。
- Happy Hues：同じく5色固定でデザインのプレビューを確認することができます。各パレットごとにどのようなイメージを与えるか、色についての説明などがあるのも嬉しいです。
これらのポイントを通じて、気軽に色を楽しみめて創造的な表現を行えるアプリを目指します。
これまで行ってきたユーザー獲得のアクションは以下にものになります。
-
同じスクール生への告知
- Xへのポストや、スクール内のコミュニティを活用して、アプリのリリースや機能について告知しました
- ターゲットの層としても最も重なるため、一定以上の初期ユーザーの獲得に関しては一番効果的な方法となりました。
-
アプリ内のシェア機能
- カラーパレットの画像保存機能やXシェア機能を実装し、配色を気軽にシェアできるように工夫を施しました。
- ユーザーの手によって認知度の向上が目指せる手法です。
-
コンテストへの応募
- スクール内イベントのアプリコンテストに本アプリを応募し、触っていただける機会の増加を目指しました。
- 応募したコンテスト内の部門「UI/UX賞」で2位を獲得、さらに「OGP賞」を受賞しました。
さらなるユーザー獲得のために、今後以下の工夫を行っていく予定です。
-
技術記事の作成
- 「非エンジニア向けに特化したカラーパレットアプリを開発しました」といったような独自性のあるタイトルの技術記事を作成し、公開します。
- タイトルによっては特定ターゲットにアプローチしやすいため、効果的だと考えられます。
- 参考までに、似たコンセプトとして下記のような記事があります。これらは非フロントエンジニアにとっての「最重要ではないけどあると嬉しい」部分に訴求している魅力的なタイトルに感じました。
-
アプリの多言語対応
- 日本語だけでなく多言語に対応することで、ターゲットの範囲を大幅に広げることを目指します。
- 既存のカラーパレットも海外で作成されたものが多く、こうしたカラーパレットツール自体も世界中の誰もが国や言語の垣根なく使用できるものです。本アプリも日本語以外の言語に対応することで、より多くの方に触っていただける状態にしていきたいと考えます。
- 言語対応後は、ProductHunt のようなプロダクト評価サイトへの投稿などを活用して、実際に認知度の向上を図る予定です。
追加予定の機能候補や、優先して行いたいと考えている本アプリに対するアクションを記載いたします。
◯ アプリの使用感・機能面関連
- 「アプリについて」画面の充実化(現在、仮置きで簡素なものになっている)
- パレット詳細画面の表示デザイン例・動的OGPのバリエーションを増やす。
◯ 実際にユーザーから頂いた要望・改善案
- パレット作成画面で、配色の順番をドラッグ等で変更できるようにする
- 未ログイン状態での使用可能範囲を拡大する(投稿パレットはログイン状態に関係なく全て閲覧可能にする等)
- 検索欄の充実化(人気のタグ、カラーなどから簡単に検索できるようにする等)
- アプリ自体の背景色やカラーテーマを選べるようにして、デザイン例をさらに確認しやすいようにする。
◯ アプリの質向上・リファクタリング関連
- テストコードの実装
- FatControllerの解消
- 不要なコメントアウトの削除・重複記載の処理の整理等、可読性の改善
◯ その他アクション
- アプリリリース告知用の技術記事作成
※開発前・企画段階のREADMEはこちら