アプリを設計するときは、「こんな機能があったら便利だな」と思うものをたくさん考えます。
Font & Color Checker(画像からカラーコード、サイトからフォントを調べられるアプリ)でも、最初に考えていた機能がありました。
それは、画像から使われているフォントを調べる機能です。
Font & Color Checkerアプリ👇
Font & Color Checkerの機能について書いてあります👇

デザイン画像からフォントが分かったら便利だと思った
Webサイトやバナーを見ていると、
「このフォント何だろう?」
と思うことがあります。
そこで画像をアップロードするだけで、使われているフォントが分かる機能を作りたいと考えました。
もし実現できれば、デザイナーやコーダーにとって便利なツールになると思っていました。
実際には思った以上に難しかった
調べてみると、画像からフォントを正確に判定するのは簡単ではありません。
文字の形だけで判断する必要があり、
- フォントの種類が膨大
- 画像の解像度
- 文字の加工
- 影や縁取り
など、さまざまな条件で判定精度が変わってしまいます。
「これなら安心して使える」と思えるレベルで実装するのは、今の自分には難しいと判断しました。
発想を変えてブックマークレットを採用
そこで考え方を変えました。
画像ではなく、
実際のWebサイトから情報を取得すればいいのでは?
そうして採用したのがブックマークレットです。
ボタンをクリックするだけで、
- フォント
- 文字サイズ
- 文字色
などをすぐ確認できるようになりました。
想像以上に便利で自分でも驚いた
実際に完成して使ってみると、
「これ、すごく便利だ!」
というのが率直な感想でした。
これまでは検証ツールを開いてHTMLやCSSを確認していましたが、ブックマークレットなら必要な情報をすぐ取得できます。
作っている途中は「本当に使うかな?」と思っていましたが、完成後は自分でもよく使うツールになっています。
最初のアイデアより良いものになった
個人開発では、最初に思い描いていた機能がそのまま完成するとは限りません。
でも今回のように、方向転換したことで、より実用的な機能が生まれることもあります。
「予定していたものを諦めること」は失敗ではなく、新しいアイデアにつながるきっかけになるのだと感じました。
フォントやカラーに興味がある方、デザイナー・コーダーの方はぜひ使ってみてください!
詳しい使い方は下記記事をご参照ください!👇
