この記事が気に入ったらシェアしてください

iPhoneでWebサイトの文字フォント(種類やサイズ)を簡単に調べる方法

この記事が気に入ったらシェアしてください

iphoneでサイトのフォントを調べる方法

先日、パソコンでサイトのフォントを調べる方法についてご紹介しました。

参考 Webサイトの文字や画像のフォントを誰でも簡単に調べる方法!

ただ、最近iPhoneを操作している時に「iPhoneでも簡単にフォントを調べられないかな?」と思いました。Google検索を行ったところ、「WhatFont」というアプリを使うことで簡単にサイトのフォントを調べられることが分かりました。

今回はWhatFontを使ったサイトのフォントの調べ方についてご紹介します。

スポンサーリンク
広告

iPhoneでWebサイトのフォントを調べる方法

iPhoneでWebサイトのフォントを調べるためには、WhatFontというアプリを使うのが便利です。WhatFontはiPhoneにもiPadにも対応しているアプリです。元々は、Chromeの拡張機能として提供されていたものがiOSのアプリとなっています。

whatfontを有効にする方法 whatfontの調査結果

WhatFontの使い方

まずはお使いのiPhoneにWhatFontをインストールしてください。

whatfontのインストール方法

WhatFontをインストールした後、フォントを確認したいWebサイトにアクセスし、文字を選択してください。今回は例として「おさいふプラス」という人気サイトのフォントを調べたいと思います。

フォント調べたいサイトの文字を選択する

続いて、iPhoneの画面下の真ん中にあるシェアボタンを押下してください。

webサイトのフォントを調べる方法

そして、下の段のアイコンの一番右にある「その他」を選択してください。

safariでwhatfontを有効にする方法

続いて表示されるアクティビティの画面で先ほどインストールした「WhatFont」を有効にし、右上の完了ボタンを押下してください。

whatfontを有効にする方法

すると、WhatFontのアイコンが表示されますので、文字を選択した状態でWhatFontのアイコンを選択してください。

whatfontを有効にする方法

選択した文字のフォントが表示されます。

whatfontの調査結果

フォントの種類やサイズ、行間を調べてくれます。ちなみに、最後の項目になっている行間(LINE HEIGHT)とは、「フォントの大きさ+上下の余白」です。

line-heightとは

WhatFontがうまく動作しない場合

フォントを調べるためにWhatFontを使う際、たまにエラーが起きてフォントが調べられない場合がありました。私が遭遇したエラーと対処方法についてご紹介します。

選択している文字数が少ない

WhatFontでフォントを調べる時に選択する文字数が少ないと、エラーになる場合があります。エラー画面はこのように「WhatFont」のアイコンを選んだ後に表示される画面に出たり、

whatfontのエラー画面

そもそも、WhatFontのアイコンが表示されなくなったりします。

whatfontのエラー画面

理由はわかりませんが、このエラーは見出しを選択している場合に発生することが多いです。また、ページがうまく読み込めていない場合があります

そこで、このエラーを回避する方法は以下2種類です。エラーが発生したという方は試してみてください。

  • 選択する文字数を増やす(目安は15文字以上)
  • ページを再読み込みする

読み込むページがAccelerated Mobile Pagesの場合

読み込むページがAMPの場合はうまく動作しませんでした。いくつかのサイトのAMPページを試しましたが、どのサイトでも動作しませんでした。エラー画面は先ほどと同じです。

AMPが何かについてはこちらの記事を参考にしてください。

これに関しては「見出し」や「文字数」に関係なく、読み込めなかったため、アプリ側の仕様の問題かと思います。このエラーを回避する方法としては、「AMPではなく普通のページのフォントを閲覧する」です。

Google検索からアクセスするとAMPページが表示されても、サイトのURLに直接アクセスすれば、AMPではなく普通のページにアクセスできます。フォントを調べたい場合は普通のページで実施してみてください。

類似アプリのWhatTheFontに要注意

AppleStoreには「WhatFont」と名前が似たアプリで「WhatTheFont」というアプリがあります。この「WhatTheFont」というアプリもフォントを調べるアプリで、画像からフォントを調査できるようです。

WhatTheFontとは

WhatTheFontを使ってみた

ということで「WhatTheFont」を使ってみました。アプリを起動すると、「カメラで写真を撮る」か「写真アルバムから選ぶ」のどちらかを選択できます。

WhatTheFontのトップ画面

「ん?インタフェースが少し古くないか?」というのはスルーして、とりあえずファイルをアップロードしてみました。そして、アップロード後に「次へ」ボタンを押下すると、、、

WhatTheFontのエラー画面

「ん?」

エラーメッセージが「しかたがない」というのは、初めて見ました。

どうやら、私が使用方法を間違えていたようです。写真を選んだ後に切り抜きが必要でした。というわけで、写真を切り抜いて、再挑戦しました。

写真を選択し、切り抜く範囲を設定した後に「次へ」ボタンを押下しました。

WhatTheFontの切り抜き画面

すると、次の画面は、、、

WhatTheFontのフォント調査方法

「。。。。」

面倒臭がりな私にはできない修正作業でしたので、ここで諦めてしまいました。

改めて、WhatTheFontのアップデート履歴をみると、2011年を最後に更新されておらず、互換性は「iOS3.0以降」となっていました。

まー、それなら”しかたがない”か。。。

ちなみに、WhatTheFontはアプリだけでなく、Webサイトも運営しています。パソコンからこちらのサイトにアクセスした方が使い易いかもしれません。

というわけで、iPhoneでフォントを調べるならWhatFontのアプリを使用してください

スポンサーリンク
広告
広告

この記事が気に入ったらシェアしてください

もし良かったらフォローしてください