【裏側話】画像からフォントを探す機能を諦めた話|でも代わりにもっと便利な機能が生まれた

アプリを設計するときは、「こんな機能があったら便利だな」と思うものをたくさん考えます。

Font & Color Checker(画像からカラーコード、サイトからフォントを調べられるアプリ)でも、最初に考えていた機能がありました。

それは、画像から使われているフォントを調べる機能です。

Font & Color Checkerアプリ👇

書体と色を、そのまま — Font & Color Checker
画像から色をスポイトで抜き出し、任意のサイトから書体と色を読み取る。ブラウザだけで完結する書体・配色チェッカー。

Font & Color Checkerの機能について書いてあります👇

Font& Color-Checker|画像やWebサイトの色・フォントを簡単に調べられる無料ツール
「このサイトの文字って何のフォント?」「画像に使われている色を知りたい」Web制作やデザインをしていると、こんな場面は意外と多いですよね。そんな時に便利なのがFont& Color-Checkerです。画像からカラーコードを取得したり、We…

デザイン画像からフォントが分かったら便利だと思った

Webサイトやバナーを見ていると、

「このフォント何だろう?」

と思うことがあります。

そこで画像をアップロードするだけで、使われているフォントが分かる機能を作りたいと考えました。

もし実現できれば、デザイナーやコーダーにとって便利なツールになると思っていました。

実際には思った以上に難しかった

調べてみると、画像からフォントを正確に判定するのは簡単ではありません。

文字の形だけで判断する必要があり、

  • フォントの種類が膨大
  • 画像の解像度
  • 文字の加工
  • 影や縁取り

など、さまざまな条件で判定精度が変わってしまいます。

「これなら安心して使える」と思えるレベルで実装するのは、今の自分には難しいと判断しました。

発想を変えてブックマークレットを採用

そこで考え方を変えました。

画像ではなく、

実際のWebサイトから情報を取得すればいいのでは?

そうして採用したのがブックマークレットです。

ボタンをクリックするだけで、

  • フォント
  • 文字サイズ
  • 文字色

などをすぐ確認できるようになりました。

想像以上に便利で自分でも驚いた

実際に完成して使ってみると、

「これ、すごく便利だ!」

というのが率直な感想でした。

これまでは検証ツールを開いてHTMLやCSSを確認していましたが、ブックマークレットなら必要な情報をすぐ取得できます。

作っている途中は「本当に使うかな?」と思っていましたが、完成後は自分でもよく使うツールになっています。

最初のアイデアより良いものになった

個人開発では、最初に思い描いていた機能がそのまま完成するとは限りません。

でも今回のように、方向転換したことで、より実用的な機能が生まれることもあります。

「予定していたものを諦めること」は失敗ではなく、新しいアイデアにつながるきっかけになるのだと感じました。

フォントやカラーに興味がある方、デザイナー・コーダーの方はぜひ使ってみてください!

書体と色を、そのまま — Font & Color Checker
画像から色をスポイトで抜き出し、任意のサイトから書体と色を読み取る。ブラウザだけで完結する書体・配色チェッカー。

詳しい使い方は下記記事をご参照ください!👇

Font & Color Checkerの使い方|画像から色・サイトから書体を簡単に調べる方法
Font & Color Checkerは、画像から色を抽出したり、Webサイトで使用されている書体やCSS情報を調べたりできる無料ツールです。一般的なツールでは「色だけ」「フォントだけ」のように機能が分かれていることが多いですが、Font…

タイトルとURLをコピーしました