WEBアプリ
フォント/カラーが調べられるアプリ
- TARGET
ターゲット - ・既存サイトのフォントや配色を手早く調べたいWeb制作者・デザイナー
- PURPOSE
目的 - ・クライアントの既存サイトを編集する際に、メインで使われているフォントを手軽に調べられるようにする ・デザインの配色を統一するために、画像からカラーコードを取得できるようにする
- DURATION
製作期間 - 3日
- TECH
使用技術 - Claude Code / HTML/CSS / GitHub
- DESIGN
デザインの意図 - 調べたいときにその場ですぐ使えることを優先した。 手軽に調べられるように、デスクトップの場合は画像をドラッグ&ドロップでアップロードするだけですぐに調べられるようになっている。 フォントについては、使い方が少し複雑なので、リンクを介さずにサイトの下部に説明を記載。 外や移動中でも確認できるよう、スマホ操作の場合の使い方も記載。 web関係者が簡単に他の情報も取得できるように、フォントだけでなく、文字の大きさ・色なども調べることができるようにした。
Episode
制作エピソード
制作に関するエピソード
「実案件で困ったことがきっかけ」
主にClaude Code を使って実装しました。
クライアントの既存サイトの編集を頼まれたとき、どのフォントがメインで使われているのかが分かりにくく、確認に手間取りました。手軽に調べられる方法が欲しかったのが、作るきっかけです。
「スマホでも使えるようにした」
外出先や移動中でもweb制作の情報収集をする方もいると思い、スマホでも調べられるようにしました。
「個人情報の扱い」
カラーコードを調べるにあたって画像のアップロードをする必要があります。
その際に使用した画像は個人情報に当たるものもあると思います。
そのために画像はブラウザ内で処理できるものにしました。