のっとぬん

Notnun BLOG

【見やすい!使いやすい!】ブラウザのフォントを変えて『見にくい』をなくそう

f:id:piel:20171023235700j:plain

こんにちは、のっとぬんです。

今回はゲームの話とは路線が違うのですが、「ウェブフォント」のお話をしようと思います。

皆さんは、普段ネットを使う際にどの「検索ブラウザ」を使用しますか?

GoogleChrome

 今現在、一番シェアが高いのは「Googlechrome(グーグルクローム)」でしょう。

読み込み速度やカスタマイズ性が選ばれている理由です。
Windows10が出始めて、マイクロソフト社が「chromeより高速」というキャッチフレーズで「Microsoft edge」という新しい検索ブラウザを公開しましたが、当時はブラウザをグレードアップする「拡張機能」がなかったし、今現在は存在しますが数は知れていて、なんか微妙な感じ・・

その他に、「Fire FOX」や「Opera」など多数ありますが、やはりGooglechromeは王道でしょう。 

私もクローム愛用者の一人です。特にはてなブログの拡張機能が使えるのは非常にありがたいところです。

 

フォントを変える

さて、ようやく本題です。 

ある日、どこかのウェブサイトを見ていたとき・・

なんか、このサイト見づらいたこ

と思ったことはありませんか?ありますよね。私もあります。

サイトが見づらい原因は、サイトの構成(広告とか)がガタガタだったり・・訪問者側からすると「見る気の無くす」サイトはブラウザバックされることが非常に多いんです。

 サイトで使われる文字の書体「フォント」は、見る側にとって物凄く気になる部分です。だって、読んでる記事のフォントが見づらかったらストレスたまるでしょ。

 

今回は、クロームを使って「ウェブサイトで表示されるフォントを任意のフォントに自動的に変える」という設定をしていきたいと思います。

 

f:id:piel:20171023233826p:plain
f:id:piel:20171023234815p:plain
フォント変更後と変更前

これが、今回変更した後の画像になります。左が変更前、右が変更後です。この違いは一目瞭然、変更後の方がすっきりしていて見やすいですね。


 

 

変更するフォントを選ぶ

今回は、このサイトでも使われている(スマホ表示は別フォントです)「游ゴシック」を使用します。游ゴシックのダウンロードは下記リンクから。

Download 游ゴシック 游明朝フォントパック from Official Microsoft Download Center

 

設定画面を開く

1.グーグルクロームの右上にある「・・・」を縦に並べたマークをクリック。
 そこから、「設定(S)」をクリック。↓

f:id:piel:20171024002735p:plain

 

2.画面左上の「設定」から「デザイン」をクリック。↓

f:id:piel:20171024002942p:plain

 

3.「フォントをカスタマイズ」という項目があるので これをクリック。↓

f:id:piel:20171024003057p:plain

 

4.各項目「標準フォント」「Serifフォント」「Sans Serifフォント」「固定幅フォント」に任意のフォントを設定します。私の場合は「游ゴシックMedium」を使用しています。↓

f:id:piel:20171024003104p:plain

★各項目のフォント説明

ここで登場する4つのフォント項目ですが、1つずつ説明していきます。私のように全て游ゴシックでいいやぁって方は飛ばしてもらって結構です。

標準フォント

Mac/WindowsなどのOSに元々入っているフォントを「標準フォント」を呼びます。

標準フォントの例として、MS ゴシック游ゴシックなどがあります。

この項目では、『Web上で表示される標準フォントに対して変更するフォントの設定』を意味します。つまり、標準フォントにはない”手描きフォント”といった部類のフォントには適用されません。

 

Serifフォント

 日本でいう「明朝体フォント」のことを指します。文字の始まり、終わりの部分などに少しラインが入っていたりします。

この項目では、『Web上で表示されるSerifフォント(明朝体)に対して変更するフォントの設定』を意味します。

 

Sans Serifフォント

日本でいう「ゴシックフォント」のことを指します。Serifフォントとは違い、丸みがあります。

この項目では、『Web上で表示されるSans Serifフォント(ゴシック)に対して変更するフォントの設定』を意味します。

 

固定幅フォント

名前の通り、文字の幅が固定されているフォントのことをいいます。現代は文字によって文字幅が異なる「プロポーショナルフォント」が流通してきています。

この項目では、『Web上で表示される固定幅フォントに対して変更するフォントの設定』を意味します。

 

5.各項目に任意のフォントを変更し終えたら、設定完了です。【保存】ボタンはなく、フォントの項目を設定した時点で即時設定が適用されます。

f:id:piel:20171024003110p:plain

 

フォント変更時の注意

・設定するフォントは、あまり個人製作のフォントを選ばないほうがおススメです。
 フォントによっては、表示できる文字が「ひらがな/カタカナ」限定だったり、「小学2年生で習う範囲の漢字」しか収録されていないものがあるためです。

・サイトの運営者が、そのサイトのフォントを意図的に「設定」している場合は、サイ  トで設定されたフォントが優先的に適用されるため、この作業で設定したフォントが適用されない場合があります。

 

以上、フォントの変更方法でした!

ばいちゃっ