無料会員制サイト

アフィリエイト記事作成「Google Fonts」の使い方

メリットとデメリット

あ~、悩ましい。
すみません、いきなり変なことを言ってしまって。

何が悩ましいのか?
それはフォント(文字)の種類です。

実はフォントというのは知れば知る程、どんどん迷路に迷い込んでしまいます。

それは何故か?
フォントは読者のパソコン環境(OS)環境に依存するからです。

あまり難し話をしても面白くないですよね。
簡単に言うと記事を綺麗なフォントで表示したい。

そこで活用したいのが無料で使えるウェブフォントサービスの「Google Fonts」

今回は「Google Fonts」の使い方を分かりやすく紹介していきます。

メリットとデメリット
無料の「Google Fonts」は、とても使い勝手の良いサービスですが、やはりメリットもあればデメリットもあります。

簡単にメリットとデメリットについて説明します。

「Google Fonts」
  • 読者の環境に関係なく思い通りのフォントを表示できる
  • キャッチコピーなどを画像で作る必要がない
  • 文字の大きさや色も自由に選ぶことができる
  • あまり使いすぎると表示速度に影響する
  • 英語フォントは豊富だが日本語フォントは少ない
  • 導入するためには多少の知識が必要になる
ヘッダーを画像で作成している人も多いと思いますが、「Google Fonts」などを使えば画像でキャッチコピーを作成する必要はありません。
画像でキャッチコピーを作成した場合
  • スマートフォンで見た場合文字が小さすぎる
  • デスクトップ用とスマホ用、2枚の画像が必要
  • 画像なので文字として認識されない
文字が小さかったらスワイプするんじゃない?

記事を作成している私達はそう思うかもしれませんが、ほとんどのユーザーはファーストビューを見て読むか読まないか判断します。

いちいちスワイプして読んでくれるのは、よっぽど記事の内容に興味がある人しかいないでしょう。

「Google Fonts」は文字ですから、CSSで大きさを調整できます。
文字として認識されればSEOの効果も期待できるので一石二鳥ですよね。

それでは次からは「Google Fonts」の導入方法について紹介します。

「Google Fonts」を導入する2つの方法

「Google Fonts」を導入するには2つの方法があります。
HTMLに埋め込む方法
HTMLの「head~head」にコードを埋め込む方法です。
CSSで読み込む方法
CSSに「@charset〜」を書き加えて読み込む方法です。
もしもWordpressで子テーマを使用している場合はCSSから読み込む方法をオススメします。

次からは、どのようにしてコードを埋め込むか説明していきます。

「Google Fonts」のコード埋め込みHTML編

最初にHTMLとCSS共通の使い方から説明していきます。
Google Fontsにアクセス

Google Fontsへアクセス
https://fonts.google.com/
最初に「Google Fonts」にアクセスしましょう。

フォントの種類を選ぶ

検索
かなりの数のフォントがあるので、お目当てのフォントが決まっている場合は右上の検索から探しましょう。

メニューを表示

メニュー表示
フォントを選んだら右上の「+」をクリックしてください。

Sentence

Sentence
Sentenceをクリックすると次のように表示されます。
■Paragraph(段落)
■Alphabet(アルファベット)
■Numerals(数字)
■Custom(自分の好きな文字列)
それぞれをクリックすることで、文字のイメージを確認する事ができます。

フォントを追加したい場合

メニュー表示
フォントを追加したい場合は他のフォントの「+」をクリックしていってください。

Regular

文字の太さ
Regularとは文字の太さの事です。
太さが変えられる文字の場合は画像のように表示されます。
文字の太さが固定されている場合は「Regular400」のように表示されます。

文字の大きさ

文字の大きさ
文字の大きさはバーを左右に移動することで変えられます。
画像を参考にしてすきな文字サイズを選んでください。

ここで決めた文字サイズは、あくまでも確認のためです。

SEE SPECIMEN

クリックで表示
右下に表示される「SPECIMEN」をクリックすると、大きな画面で表示されます。

作者などのプロフィールなども紹介されていますので興味のある方は読んでみてください。

埋め込みコード

画面表示
右上の「+」マークを押すと画面の下に画像のように
■「Families selected」
画面が最小化されて表示されています。

「-」をクリック

設定画面
Families selected画面が表示されます。

CUSTOMIZE

カスタマイズ
CUSTOMIZEをクリックすると
■文字の太さを選択
■文字を斜体にする
など文字をカスタマイズすることができます。

フォントの削除

フォントの削除
必要のないフォントは「-」をクリックすると削除されます。

コードをコピー

コードをコピー
画像を参考にしてEMBEDに戻り①のコードをコピーしてください。
この時に「<」や「>」をコピーし忘れるないように注意してください。

CSSに表示したい見出しなどに②を書き加えてください。

コードを貼り付ける

HTML
次にHTMLファイルを開いてください。

SIRIUSの場合

使用したいページの「head~head」HTMLの間に先程コピーしたコードを貼り付けてください。

「head~head」の中であれば場所はどこでも構いませんが、CSSの下に貼り付けるとメンテナンスする時に分かりやすいかもしれません。

WordPressの場合
header.phpの「head~head」の間に貼り付けてください。
以前の記事で何度も書いていますが、テーマが更新されると貼り付けたコードは消えてしまいます。

かならず子テーマを作って貼り付けるようにしましょう。

CSSの設定の仕方たは、次の「Google Fonts」をCSSから読み込む方法で紹介します。

「Google Fonts」をCSSから読み込む方法

CSSから読み込む方法

CSSコピー
画像を参考にして「@IMPORT」をクリックしてください。

CSSに貼り付ける

CSSコピー
画像のように表示されます。
この時「<style>と</style>で囲まれた中のコードをコピーして、CSSの最初に貼り付けてください。

Specify in CSS

CSSに貼り付け
画像を参考にしてCSSをコピーして貼り付けてください。

基本的には導入方法はこれで終了になります。

次からは具体的にどのように使用したら効果的なのか説明していきます。

「Google Fonts」の日本語を使ってみよう

日本語Google Fonts
「Google Fonts」は数は少ないですが日本語フォントも存在します。
現在は9種類の日本語フォントが使えます。
日本語フォント使用時の注意点
  • キャッチコピーやタイトルなど特定の場所に使用する
  • 本文などで多く使用すると表示速度に影響する
見栄えが良いからといって、本文などに多量に使用することは厳禁です。

あきらかに表示速度に影響が出てしまいます。

それでは「Google Fonts」の日本語ページにアクセスしてみましょう。
https://googlefonts.github.io/japanese/

「Google Fonts」の種類
  • M+1p
  • Rounded M+1c
  • はんなり明朝
  • こころ明朝 kokoro
  • さわらび明朝 Sawarabi Mincho
  • さわらびゴシック Sawarabi Gothic
  • ニコモジ Nico Moji
  • ニクキュウ Nikukyu
  • Noto Sans Japanese
以上の9種類が使用できます。

日本語フォントの場合はHTMLに埋め込むコードしか表示されませんので注意してください。

次からは導入方法などを紹介していきます。

「Google Fonts」日本語の導入方法

使いたいフォントを選ぶ

日本語フォント一覧
画像のようにフォントの一覧が表示されますので、日本語フォントをクリックしてください。

画面が切り替わります

日本語フォントの選択
それぞれの日本語フォントの見本が表示されます。

英語のフォントと違い文字の太さなどは最初から設定する事はできません。
全てCSSで設定することになります。

HTMLの埋め込み

コードを表示
今回は「M+1p」を例にして説明します。
■HTMLへの埋め込みとCSSの設定


<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />
.wf-mplus1p { font-family: "Mplus 1p"; }

これが基本形になります。
HTMLは「head~head」の中に埋め込む
■文字サイズはRegularになっています。

CSSから読み込む方法

GoogleのページにはCSSから読み込む方法については記述がありませんが、次のようにするとCSSから読み込むことができます。

HTMLの場合は「header.php」に記述する必要がありますが、CSSの場合はカスタムCSSに追加するだけで読み込めるのでオススメです。
■CSSから読み込む方法
<link href=”https://fonts.googleapis.com/earlyaccess/mplus1p.css” rel=”stylesheet” />
■赤字のURLをコピー
カスタムCSSの一番上に下のコードを貼り付けてください。


@import url("https://fonts.googleapis.com/earlyaccess/mplus1p.css");

文字の大きさと太さを変える

文字の大きさは今回24pxにしましたが、自由に変えてください。

文字の太さの値は「100~900」まで9段階あります。
何も指定しない場合は400が基本になります。
boldを指定した場合は700が基本になります。

今回の「M+1p」は7段階の太さが設定されています。

「M+1p」の文字の太さ

一番細い日本語フォントの指定方法

2番目に細い日本語フォントの指定方法

通常サイズの日本語フォントの指定方法

やや太いの日本語フォントの指定方法

通常の太さの日本語フォントの指定方法

かなり太い日本語フォントの指定方法

一番太い日本語フォントの指定方法


<p class="wf-mplus1p Font-Size-24 Font-Weight-100"><!-- Thin --></p>
<p class="wf-mplus1p Font-Size-24 Font-Weight-200"><!-- Light --></p>
<p class="wf-mplus1p Font-Size-24"><!-- Regular --></p>
<p class="wf-mplus1p Font-Size-24 Font-Weight-600"><!-- Medium --></p>
<p class="wf-mplus1p Font-Size-24 Font-Weight-700"><!-- Bold --></p>
<p class="wf-mplus1p Font-Size-24 Font-Weight-800"><!-- Extra Bold --></p>
<p class="wf-mplus1p Font-Size-24 Font-Weight-900"><!-- Black --></p>
@import url("https://fonts.googleapis.com/earlyaccess/mplus1p.css");
p.Font-Size-24 {
  font-size: 24px;
}
p.Font-Weight-900 {
  font-weight: 900;
}
p.Font-Weight-800 {
  font-weight: 800;
}
p.Font-Weight-700 {
  font-weight: 700;
}
p.Font-Weight-600 {
  font-weight: 600;
}
p.Font-Weight-500 {
  font-weight: 500;
}
p.Font-Weight-200 {
  font-weight: 200;
}
p.Font-Weight-100 {
  font-weight: 100;
}
p.wf-mplus1p { 
  font-family: "Mplus 1p"; 
}

さわらび明朝

次に「さわらび明朝を試してみましょう。


@import url("https://fonts.googleapis.com/earlyaccess/sawarabimincho.css");

さわらび明朝の太さは2段階

通常サイズの日本語フォントの指定方法

通常の太さの日本語フォントの指定方法


<p class="wf-sawarabimincho Font-Size-24 "><!-- Regular --></p>
<p class="wf-sawarabimincho Font-Size-24  Font-Weight-700"><!-- Bold --></p>
@import url("https://fonts.googleapis.com/earlyaccess/sawarabimincho.css");
p.Font-Size-24 {
  font-size: 24px;
}
p.Font-Weight-700 {
  font-weight: 700;/*Bold*/
}
p.wf-sawarabimincho {
  font-family: "Sawarabi Mincho";
}

クラス指定について
「p.wf-sawarabimincho」のように、クラスの前に「p」が付いています。

これは私の使っているWordpressのテーマでは「p」をクラスの前に記入しないと、他と干渉して上手く表示されないために付けています。

あなたの使っているテーマでは「p」を書き加える必要がないかもしれません。
その時は「p」を外してください。

そうすれば「div」などにもクラスが使えるようになり汎用が向上します。

ちなみに、この文章は「div」に「さわらび明朝」のクラスを指定して表示しています。

日本語フォント「ニクキュウ」についてですが、これはカタカナ専用になっていますので気をつけてください。

日本語「Google Fonts」応用編

日本語フォント応用
ヘッダーを画像で作成する人が多いと思いますが、スマホで見ると文字が小さすぎて読めない場合があります。

そんな時に威力を発揮するのが日本語「Google Fonts」です。

文字なので背景画像が小さくなっても、読みやすい文字の大きさに設定することができます。

もちろんSEO的にみても文字の方が効果があるでしょう。

それでは日本語「Google Fonts」で作成したキャッチコピーと、画像で作成したキャッチコピーを比較してみましょう。

日本語「Google Fonts」と画像コピーの比較

今回は最大幅が780pxに設定しているので、ほとんど差は感じられません。

これが1000pxを越えてくると、かなり画像で作成したキャッチコピーは読みづらくなるはずです。

画像で作成した場合は、デスクトップとスマホで画像を切替える方法もあります。

しかしスマホで見た時に、デスクトップ用の画像とスマホ用の画像を2つが読み込まれることになってしまいます。

この方法はスマホには優しくない方法なので、可能なかぎり使用しないようにしましょう。

画像でキャッチコピーを作成した場合

画像でキャッチコピー

「Google Fonts」で作成した場合

画像ではなく文字なのでコピーができます。

いやしの隠れ里

こころのこもったおもてなし

ようこそ侍の宿へ


<!-- 文字を入力 -->
<div class="wf-sawarabimincho Sawarabi-box">
<div class="Sawarabi-text-Box">
<p class="Sawarabi-text">いやしの隠れ里</p>
<p class="Sawarabi-text">こころのこもったおもてなし</p>
<p class="Sawarabi-text">ようこそ侍の宿へ</p>
</div>
</div>
@import url("https://fonts.googleapis.com/earlyaccess/sawarabimincho.css");
@import url("https://fonts.googleapis.com/earlyaccess/sawarabimincho.css");
div.wf-sawarabimincho {
  font-family: "Sawarabi Mincho";
}
div.Sawarabi-box {
  max-width: 780px;
  max-height: 300px;
  margin: 10px auto;
  background-size: cover;
  background-image: url("http://192.168.1.2/wordpress/wp-content/uploads/2018/02/web-font00_compressed.jpg");
}
div.Sawarabi-text-Box {
  padding:8% 0 8% 4%;
}
p.Sawarabi-text {
  color: #FFF;
  font-size: 38px; 
  font-weight: bold;
  padding:0;
  margin: 0;
  line-height: 160%; 
}
@media(max-width: 800px) { 
  p.Sawarabi-text {
    font-size: 26px;
  }
}

くれぐれも使い過ぎには注意しましょう

使い過ぎに注意
これから先、日本語フォントも高速表示されるように改良はされていくでしょう。

しかし今の段階では、まだまだ全文を日本語Webフォントで表示するのは難しいのが現状です。

あくまでもワンポイント、使いすぎには充分に注意をするように心がけてください。

「Google Fonts」オススメな使い方
  • 日本語フォントはヘッダーのキャッチコピーに
  • 日本語フォントはタイトルなどに使用する
  • 英数字は比較的多く使っても大丈夫
ケース・バイ・ケースで英数字と日本語を使い分けるようにしましょう。

読者の環境に影響されないWebフォントは、これからどんどん使用する機会が増えてくることが予想されます。

フォントの種類で悩まされることが無くなる日も近いかもしれません。

使いすぎには注意しながら「Google Fonts」を有効利用することで、他のアフィリエイターに少しでも差をつけることが出来るはずです。

今回は「Google Fonts」の使い方の紹介でした。

それでは次回の記事でお会いしましょう!

経験ゼロだった普通の人が1年で年収1,000万円?!

ゼロから始めて1年間で100万PV達成。秘密の集客術を無料公開

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください