Web制作ラボ

Photoshopで「フォントが見つかりません」と表示されたらやる事まとめ

Web制作ラボ

Photoshopやillusratorで自分以外のデザイナーが制作したデザインデータを開封すると、以下のようなメッセージが表示されることがあります。

  • 「このドキュメントで使われている下記のフォントが見つかりません」
  • 「ドキュメントにはご使用のコンピューターにないフォントが使用されています」

これらは、あなたのパソコンにインストールされていないフォントがデザインデータ内で使用されている時に表示されるメッセージです。

インストールされていないフォントを使用している部分は、PhotoshopやIllustratorが自動的に別の種類のフォントに置き換えて表示するので、デザイン全体の雰囲気が変わって見えてしまったり、レイアウトが崩れてしまうのが心配です。

特にWebサイトのコーディングでは「どれだけデザインに忠実に構築できるか」が非常に大切ですので、たかがフォントが違うくらい・・・と油断していると大変な目に合うかもしれませんよ!

ということで、当記事ではそんなフォント迷子問題を解決する方法をいくつかご紹介しますので、特にWebサイト制作初心者の方などは参考にしてみてくださいね。

「フォントが見つかりません」を解決する方法

PhotoshopやIllustratorで「フォントが見つかりません」というメッセージが出た時の解決方法は、主に以下の3つです。

  1. フォントを探して入手する
  2. Adobe Fontsで入手する
  3. 自分のパソコン内にある同等のフォントを割り当てる

もし①、②、③を全て試しても解決出来ない場合は、デザイナーからアウトライン版のデータを貰うという方法もあります。

以下から順番に詳しく見ていきましょう。

① フォントを探して入手する

世の中には無料で公開され、さらに商用目的での利用も可能なフォントがいっぱいあることをご存知でしょうか?

デザインデータ内にあなたが所持していないフォントが使用されている場合、まず初めに「そのフォントが無料で入手可能か」を調べましょう。

無料とはいえクオリティが高いフォントが多いため、実はデザイン制作に無料フォントを採用しているデザイナーさんは沢山います。

無料で利用可能な高品質フォントの例
Google Fonts Googleが運営する無料のWebフォントサービス
マメロン 微妙にくずれた文字が親しみやすさを与えるフォント
コーポレート・ロゴ 今どきのロゴにぴったりなモダンな印象のフォント

以下からは、実際にPhotoshopで「このドキュメントで使われている下記のフォントが見つかりません。」のメッセージが出現した場合のフォントの探し方を見てみましょう。

Photoshopでの作業例

1.「このドキュメントで使われている〜」のメッセージが出現

2.「NotoSansJP」というフォント名をそのまま入力して検索します。

3.このフォントはGoogle Fontsで配布されていました。

4.「Download family」をクリックすればフォントをダウンロードできます

5.ダウンロードしたファイル(Noto_Sans_JP.zip)を解凍すると、NotoSansJPのフォントが太さごとに別れて格納されています。

6.各太さのNotoSansJPをパソコンにインストールします

・Windowsの場合
「.otf」ファイルを全て選択して右クリック⇒「インストール」をクリック

・Macの場合
「.otf」ファイルをダブルクリックすると下記ウィンドウが出現するので「フォントをインストール」をクリック。 ※他の太さも同様にインストールする

ここまで終えてから先ほどのデザインデータを再度開くと、「このドキュメントで使われている〜」のメッセージは出現せず、デザイン内にNotoSansJPが反映されます。

② Adobe Fontsで入手する

Adobe Creative Cloudの有償プラン(PhotoshopやIllustrator単体でも可)を利用していれば、Adobe Fontsというサービスで提供されている15,000種類以上のフォントが無料で利用できます。

Adobe製品を利用している現役のデザイナーやコーダーであれば、ほぼ全員が利用できるサービスということですね。

Adobe Fontsのサイトで利用したいフォントを探すことも出来ますが、デザインデータを開いた際に手軽にフォントを入手する機能が便利です。

上記のように「このドキュメントで使われている下記のフォントが見つかりません。」のメッセージが出現した際に、フォント名の右側に「✗ 解決しない」では無く「AdobeCCのマーク フォント名」と表示されているものは、Adobe Fontsに存在するフォントです。

画像右下に有る「フォントを解決する」というボタンをクリックすれば、自動的にフォントが有効化されて利用可能になります。

③ 自分のパソコン内にある同等のフォントを割り当てる

自分のパソコンにフォントがインストールされているはずなのに、なぜかPhotoshopやillustrator上では「フォントが見つかりません」と表示されることがありますが、原因はフォント名の違いです。

中身はまったく同じフォントであっても、ダウンロード元の違いパソコン本体のOSが違うといった場合に、異なるフォント名として登録されている物があります。

WindowsMac
名称(Japanese)游ゴシック游ゴシック体
名称(English)Yu GothicYuGothic

上記はWindowsとMacの両方に標準インストールされている「游ゴシック」というフォントですが、微妙に名称が異なっているのがおわかり頂けるかと思います。

次に、もう一つだけ例を見てみましょう。

Google FontsAdobe Fonts
名称(Japanese)なしなし
名称(English)Noto Sans JPNoto Sans CJK JP

上記はGoogle FontsとAdobe Fontsでダウンロードすることができる「Noto Sans JP」というフォントですが、ダウンロード元によって名称が異なっていますね。

以上のように、中身が同じであったとしても名称が異なるフォントの場合は、PhotoshopやIllustrator上で同じフォントとして認識されませんので、手動でフォントの設定を変更してあげることで元のデザインを再現することが可能です。

フォントの入手が困難な場合の解決方法

ここまでに紹介した方法を試しても「このドキュメントで使われている下記のフォントが見つかりません」が解決しない場合は、デザインデータの製作者に協力をお願いしてアウトライン化したデータを貰いましょう。

アウトライン化とは
テキストデータとして入力した文字を図形として描画させること。

アウトライン化したデザインデータであれば、全てのテキストが図形として埋め込まれるので、同じフォントの有無に関わらず誰でも元のデザインが見られます。

事情を説明したうえで「アウトライン化のデザインデータを送付いただけますでしょうか」とデザイナーさんにお願いすれば対応してもらえるはずです。

またデザイナーさんが事前にアウトライン化したデータを同梱してくれる場合もあるので、念のため一度確認してみましょう。

ファイル名に「OL(アウトライン)」と書いてある物があれば要チェックです!

まとめ

Photoshopやillusratorで「フォントが見つかりません」と表示されたらやる事について解説してきました。

冒頭でも述べましたが、デザインデータのフォントが違う種類に置き換わってしまうと、全体の雰囲気やレイアウトを崩す可能性が有り、特にコーディングのお仕事をする際には大問題です。

当記事で紹介した内容を活用し、フォント迷子問題に適切に対処することで、気持ちよくお仕事が進められるはずです。

それでは良いコーディングライフを!

この記事の内容をシェアする
あなたのWebサイト制作をお手伝いします!

コーディングの外注先をお探しの制作会社様から個人ブログの管理人様まで、Web制作でお困りの方を全力でサポートします!

詳しくはWeb制作のご依頼についてをご覧ください。

どぎブロ
トップページへ戻る