フォントレンズ

テキストを選択して右クリックするだけで、フォント、サイズ、太さ、色、CSSを即座に解析。コピー、調整、プレビュー、ダウンロードも簡単です。

ウェブページを訪れて、その文字の美しさに感心し、「このフォントは何だろう？」と思ったことはありませんか？FontLensは、その疑問にワンクリックで答えます。あらゆるウェブサイト上のテキストを選択し、右クリックして「FontLensでフォントを調査」を選ぶだけです。すると、クリーンで使いやすいパネルがページ上に表示され、そのテキストのスタイルが正確に明らかになります。書体、サイズ、ウェイト、行の高さ、色、その他デザインの背後にあるあらゆる詳細情報が表示されます。デザイナーがレイアウトをリバースエンジニアリングする場合でも、開発者が仕様に合わせる場合でも、あるいは単に美しい見出しに興味がある場合でも、このツールはどんなウェブページもタイポグラフィの教科書に変えてしまいます。 FontLensは、フォント特定ツールとCSSインスペクターが一体化したものです。単にfont-familyを教えてくれるだけでなく、すぐに使えるコード、アイデアを試すためのインタラクティブなプレイグラウンド、そしてテキストが読みやすいことを確認するためのアクセシビリティツールまで提供します。アカウントは不要です。登録も必要ありません。ただ選択し、右クリックして、調べるだけです。 🔍 出来ること - 選択したテキストのタイポグラフィ全体を明らかにします：font-family、font-size、font-weight、line-height、色を一目で確認できます。 - letter-spacing、text-transform、font-styleといった見落としがちな追加のスタイリングも表示します。 - ワンクリックで個別のプロパティをコピーしたり、ルールセット全体を完全なCSSスニペットとして取得したりできます。 - そのスニペットを簡単なタブ切り替えでTailwind、SCSS、SASSに変換し、全体または行ごとにコピーできます。 - ライブ編集可能なプレビューで実験できます：サンプルテキストを書き換えたり、値を微調整したり、背景色を変更したりして、即座に更新される様子を確認できます。 - プロバイダーバッジ（Google Fonts、Adobe Fonts、セルフホスト、内蔵システムフォント）でウェブフォントの出所を特定できます。 - 「フォントをダウンロード」ボタンで、ウェブフォントをそのソースから直接コンピューターに保存できます。 - WCAG基準に照らして色のコントラストをチェックし、正確な比率とAAおよびAAAの合格・不合格結果を確認できます。 - スポイトツールを含むフル機能のカラーピッカーで、画面上の任意のピクセルを取得して色を選択・サンプリングできます。 - 測定単位をpx、rem、pt、emの間で切り替えられ、その設定は入力欄とエクスポートされるコードの両方に適用されます。 🖱️ 仕組み FontLensの使い方は数秒で終わります。調査したいテキストをハイライトし、選択範囲を右クリックして、メニューから「FontLensでフォントを調査」を選びます。パネルは現在のページの上に表示され、サイト自体のデザインと衝突しないよう、すっきりとスタイリングされています。そこから詳細を読んだり、必要なものをコピーしたり、編集を開始したりできます。 ライブプレビューは、このツールの面白いところです。実際の見出しを試すために文言を変更したり、サイズを微調整したり、ウェイトを調整したり、新しい背景色を設定してタイポグラフィがどのように見えるかを確認したりできます。編集内容はページを移動しても保持されるため、あるサイトで始めたアイデアが次のサイトでも待っています。元の値に戻したいときは、「サイトの設定にリセット」ボタンを押せば、ページが実際に使用しているすべての値に復元されます。 実際のフォントファイルが必要ですか？ダウンロード可能なウェブフォントの場合、ボタン一つで@font-faceの場所からファイルを取得します。お使いのオペレーティングシステムに既に付属している書体の場合、FontLensはそれが内蔵フォントであることを伝え、ダウンロードなしで利用可能であることを知らせてくれます。 🔒 プライバシー第一 FontLensは完全にブラウザ内で動作します。データ収集、トラッキング、分析、テキスト調査に関わる外部サーバーは一切ありません。調査した内容はすべてお使いのコンピューター上に留まります。この拡張機能がネットワークリクエストを行うのは、ユーザーが意図的に「フォントをダウンロード」ボタンを押したときだけで、その際はフォント自身のソースにアクセスしてファイルを取得します。それ以外のものがお使いのデバイスから送信されることはありません。 権限は意図的に限定されています。コンテキストメニューの権限は、右クリックメニューに項目を追加するために使用します。アクティブタブの権限は、呼び出したタブで選択したテキストを読み取るために使用し、それ以外の場所では機能しません。ストレージは、プレビューテキストや単位・フォーマットの設定を記憶し、次回も利用できるようにするために使用されます。閲覧履歴への広範なアクセスや、包括的なホスト権限はありません。 👥 対象ユーザー - 書体を特定し、カラーパレットを取得し、スタイルを素早く再利用したいウェブデザイナー - モックアップに合わせて、正確なfont-familyやスペーシングの値をコードに反映させたいフロントエンド開発者 - 一貫性のある、ブランドに沿ったタイポグラフィシステムを構築するUI/UXエンジニア - 実際のサイトがどのように構築されているかを見たい、CSSとタイポグラフィを学ぶ学生 - リリース前にテキストがWCAGコントラスト要件を満たしているかを確認するアクセシビリティ監査担当者 - 単にサイトが使用しているフォントを知りたいブロガー、マーケター、そして好奇心旺盛な読者 ✨ 多くの人に愛用される理由 - 開発者ツールを掘り下げる代わりに、右クリック一発で答えが得られます。 - コードはプレーンCSS、Tailwind、SCSS、SASS形式ですぐにコピーでき、プロジェクトに直接貼り付けられます。 - 編集可能なプレビューを使えば、一行もコードを書かずにタイポグラフィの選択肢をプロトタイピングできます。 - コントラストチェッカーは、アクセシビリティを後回しにせず、ワークフローに組み込みます。 - カラーピッカーとスポイトツールを使えば、ページ上のどこからでも正確な色をサンプリングして再利用できます。 - ライトテーマとダークテーマはOSに自動で追従し、昼夜を問わず快適に使用できます。 - px、rem、pt、emの間で単位を切り替える機能により、お使いのコードベースの記述方法に合わせて出力を調整できます。 🎨 詳細をさらに詳しく タイポグラフィは、単なる名前以上のものです。FontLensは、テキストが心地よく感じられるようにする細かな決定（見出しのウェイト、行間のゆとり、文字間隔の微調整など）を明らかにします。これらの値を並べて見ることで、なぜそのデザインが機能するのか、そしてそれをどう再現すればよいのかを理解する助けになります。プロバイダーバッジも文脈を追加し、表示されているのがGoogle Fontsのアセットなのか、Adobe Fontsの書体なのか、セルフホストのファイルなのか、あるいはシステムのデフォルトフォントなのかを一目で教えてくれます。これは、書体を特定したり入手したりする際の最初のヒントになることが多いです。 カラーツールは、静的な読み取り値以上の機能を提供します。カラーピッカーは、色相とアルファスライダー付きのHSVスクエアを提供し、HEX、RGB、HSL形式に対応しているため、どのフォーマットでも作業できます。これにスポイト機能を組み合わせれば、どの要素の正確な色合いでも取得し、プレビューやメモにドロップできます。 🚀 さあ、調査を始めましょう FontLensを追加し、テキストをハイライトして右クリックするだけで、あらゆるページのタイポグラフィ、スタイル、色を明らかにできます。高速でプライバシーに配慮した、ウェブの読みやすさを気にかけるすべての人にとって真に役立つツールです。インストールして手元に置いておけば、もう謎のフォントに悩まされることはありません。