MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
このフォントどうやって使うの?ダウンロードしていいの?【正しいフォントの使い方】

このフォントどうやって使うの?ダウンロードしていいの?【正しいフォントの使い方】

公開日:2020年12月07日
最終更新日:2020年12月07日
オンスタ運営
デザイン
デザイナー
デザイン
Webデザイン
ホーム > 全記事一覧 > 制作 > デザイナー > Webデザイン > このフォントどうやって使うの?ダウンロードしていいの?【正しいフォントの使い方】
このエントリーをはてなブックマークに追加
このフォントどうやって使うの?ダウンロードしていいの?【正しいフォントの使い方】
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。
おっ久しぶりです。
デザイナーのきなこです。
 
みなさんフォントをダウンロードしたことありますか?
PCに元から入っているフォントだけでなく新しくフォントを入れる機会って結構あるかと思います。
 
フォントをダウンロードする際、様々な種類がありどれをダウンロードしたらいいのか、悩んだことがありませんか?
 
なんなんだこの形式は?
フリーフォントと書いてあるけど、ほんとに使っていいの?
オープンタイプってなんだ?
、、、ええい、とりあえずダウンロードだーーー!
なんてことがないように、
本日はフォントの種類や選び方についての基礎知識を書こうと思います。
 
データの形式などの話になりますので、
フォントの歴史や選び方については弊社さとおの
「日本語フォントの役割と分類を知って、適切なフォント選びをしよう!」
にとっても分かりやすくまとめてありますのでご覧いただければと思います!! 

拡張子の種類について

フォントのデータを見ると様々な拡張子があると思います。
これらは何が違うのでしょうか、よく使われるものを簡単にご説明いたします。
.otf
一般的にPCにインストールして使用するフォントファイル
 
.ttf
otfと同様一般的にPCにインストールして使用するフォントファイル
 
.woff
TrueType(ttf)やOpenType(otf)の圧縮版。ファイルサイズが軽く読み込み時間が早い
 
.woff2
「woff」の進化版。woffと比べて圧縮率が高い

OpenTypeとTrueType

フォントを見る際に「OpenType」「TrueType」ってよく聞きませんか?
またフォントを選ぶとき、『O』や『T』というマークがついているのをみたことがあると思います。
こちらは拡張子の話ではなく「形式」のことを指します。(うぅぅ、分かりにくい、、、)
拡張子は同じでも、フォントの形式が違う、ということがあります。
フォント形式による違いをご説明いたします。
 

OpenType

OpenType(読み:オープンタイプ)
 
アドビシステムズとマイクロソフトが共同開発したフォントファイル形式です。
  
特徴
・MacとWindowsの両方で利用できる
・文字数の違うStd仕様とPro仕様とがある
・文字セットが多い
・比較的高価格
・制御や字詰めが柔軟にでき
  
OpenTypeフォントのうち、TrueTypeフォントの形式を継承したOpenTypeフォントの拡張子は「.ttf」「.ttc」
Postscriptフォント形式を継承したOpenTypeフォントの拡張子は「.otf」となります。

TrueType

TrueType(読み:トゥルータイプ)
 
アップルとマイクロソフトが共同開発したフォントファイル形式です。
  
特徴
・Macとwindowsそれぞれにインストールできるが互換性がない
比較的安価
・使用環境を気にする必要がない
・最高解像度が600dpiしかない
  
フリー(無料)フォントの多くはTrueTypeです。
歴史が長く、広く普及済みのフォント形式になります。

どっちがいいの?

で、結局どっちがいいのかな?

特徴を見て分かる通り、
解像度の関係で荒くなってしまったり(大きい文字を印刷する場合)、
特殊な文字が表現できなかったりすることがあるため、

デザイン業界(DTP業界)では高性能なOpenTypeフォントを使う事が多いです。
(文字詰めが柔軟にでき、綺麗さ、読みやすさを求めるDTPでは大活躍♪)
しかしWindowsの一般向けソフトはOpenTypeに対応してない事が多いので注意しなければなりません。
Windowsを使っており、フォントを使う目的がプレゼン資料の作成や年賀状の作成などの場合は、
TrueTypeフォントを使用する方がいいと思います。
しかしWindowsとMac間での互換性がないため、両方のパソコンで使用する場合は
それぞれWindows用、Mac用フォントを準備する必要があります。
それぞれメリットデメリットをきちんと理解し、
作業環境や目的に合わせて、ダウンロードするフォントを選んでみてくださいね!

Webフォントについて

さてさてWebフォントって一体なんだ?
ずばり、Webページ上のテキストを好きなフォントで表現できるステキな仕組みのことです。
デザイン性とSEOの効果を両立できる!すげー!
 
Webページのテキストを表現する時に、今まではユーザ側を考慮した限られたフォントしか使えなかったのですが、
Webフォントが登場し、フォントファイルさえあれば、どんなフォントでも使用できるようになりました!
Webフォントには、TrueTypeフォントやOpenTypeフォントも使えるのですが、
Web専用のフォント形式を使う方が、メリットがたくさんあります。
・ストレージの節約
・読み込み時間の短縮
・第三者による二次利用を防ぐ など
 
オススメWebフォント
Google Fonts
Googleが提供するWebフォントのサービスです。
無料で使用可能!

フリーフォントについて

フリーフォントを使うことは多いかと思います。
フリーフォントは「無料」で使えるフォントを指します。
しかし無料だからといって自っ由〜に使えるというわけではありません!
下記の内容に注意しましょう!

商用利用なのか個人利用なのか

商用利用とは営利目的で利用することです。 
企業サイトでの利用する場合や成果物の作成を目的とした場合などを指します。
 
個人利用とは商用利用とは逆の、営利を目的とせずに個人で使うことを言います。
フリーフォントを使った作品を個人のサイト・ブログで紹介する場合
フリーフォントを使った作品の売買取引をしない場合など

「商用利用可」でも注意

「商用利用可」でも注意しなければならないことがあります。
 
・フォントの変形・加工をしてはいけない
フォントの形をそのままに、ロゴやグラフィックを作成するのは構わないが、
既存のフォントを加工してはいけないという意味です。
 
・クレジットに示さなくてはならない
著作権表示をすることによってそのフォントの作者を分かるようにしなければいけないという意味です。
 
フリーフォントといっても作成者がいます。
作成者を尊重し、使用許諾や利用規約をきちんと読むことが大切です!

フォントのインストール方法

当然の如くご存知の方ばかりかと思いますが
こちらに簡単にダウンロードしたフォントの使い方をまとめておきます。

Windows

①フォントファイル(拡張子.ttf, otfのファイル)をダブルクリック。
②Windows フォント ビューアーでフォントが開く。
③「インストール」をクリックすると、フォントがインストールされる。

Mac

①フォントファイル(拡張子.ttf, otfのファイル)をダブルクリック。
②Font Bookでフォントが開く。
③「フォントをインストール」をクリックすると、フォントがインストールされる。
いやいやほんとに簡単だな。

最後に

普段当たり前に使っているフォント。
なんとなーくダウンロードしてなんとなーくインストールすれば使えてしまいます。
しかし、しっかりと理解して正しい使い方をしていきたいですね。
今回いろいろ調べてみてモヤモヤしていた部分も少し解消されました。
 
読んでいただきありがとうございました!
以上フォント作りをそろそろやってみたいきなこでした〜!

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
初心者デザイナーさんにオススメ!コンセプトから考える コーポレートロゴの作り方
デザイン
公開日: 2020年10月12日
最終更新日: 2020年10月12日
初心者デザイナーさんにオススメ!コンセプトから考える コーポレートロゴの作り方
h.yamaguchi

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
なんか物足りない…デザインにひと工夫!簡単テクニック10選
Webデザイン
デザイン
公開日: 2018年01月25日
最終更新日: 2022年01月17日
なんか物足りない…デザインにひと工夫!簡単テクニック10選
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
WEBアクセシビリティとは
デザイン
公開日: 2017年09月23日
最終更新日: 2017年09月23日
WEBアクセシビリティとは
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【ホームページ制作】~ターゲット設定はしない方がいい!?~
コンサルティング
デザイン
公開日: 2016年12月28日
最終更新日: 2022年01月17日
【ホームページ制作】~ターゲット設定はしない方がいい!?~
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
コピペ実装!CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選
Webデザイン
マークアップ
公開日: 2018年03月02日
最終更新日: 2018年03月02日
コピペ実装!CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイナーの社内勉強会、何やってるか教えます!
デザイナー
デザイン
公開日: 2022年01月06日
最終更新日: 2022年01月06日
デザイナーの社内勉強会、何やってるか教えます!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
ロゴマークの基礎知識 その②
デザイン
ロゴ制作
公開日: 2017年08月23日
最終更新日: 2017年08月23日
ロゴマークの基礎知識 その②
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイナーとカメラ撮影
デザイナー
デザイン
公開日: 2017年06月16日
最終更新日: 2022年01月17日
デザイナーとカメラ撮影
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Adobe XDに待望の新機能!共同編集機能がリリース!webデザイナーさん必見です!
Webデザイン
web担当者
ツール
デザイナー
制作
公開日: 2019年11月06日
最終更新日: 2022年01月17日
Adobe XDに待望の新機能!共同編集機能がリリース!webデザイナーさん必見です!
  • # Adobe XD
  • # 共同編集
  • # 新機能
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイナーに資格は必要なの・・・!?【デザイナーが取れる資格まとめ】
デザイン
公開日: 2018年03月30日
最終更新日: 2018年03月30日
デザイナーに資格は必要なの・・・!?【デザイナーが取れる資格まとめ】
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。