読者です 読者をやめる 読者になる 読者になる

Hold Fast that Which is Good

良きものをつかむために綴るブログです。皆様のレスポンスが何よりの活力になります。どうぞよろしく。

  follow us in feedly  


ブログとWebフォント

雑記
このエントリーをはてなブックマークに追加
あとで読む

ブログの字体を変えるということ

Webフォント

もし、このブログを今知ったとか、最近見始めた方は
このブログが【Webフォント】を導入しているブログであることを
ご存知でない可能性があるかもしれないと思い、今一度取り上げることとしました。
(PC版のみ。スマホ版は未実装)

【今一度】とはどういうことかと言いますと、実は過去にこのブログは
カスタマイズ記録としてWebフォントを導入した経緯を説明したことがあります。

 

このブログに導入しているWebフォントは今から1年以上前に導入したものであり、
当時は過去記事に書いてある方法で導入すれば何の問題もありませんでしたが、
最近調べ直してみたら、どうもライセンスが変更になったとか
Webフォントの種類が増えたとかで、色々と変化が生じたことから
過去記事のままで放置していたら齟齬をきたす可能性があるかもしれないと思い、
今回はちょうどいい機会として再度取り上げることにしました。

 

今回書くことは、【ブログの字体を変更する】ということなので、
ブログの見た目を大きく変える上に、ユーザビリティを犠牲にすることにも繋がり、
決して万人受けする内容ではないのですが、
それでもWebフォントに興味を持たれた場合は、参考にしていただけたら幸いです。

 

 

 

 

No more tofu

そもそもこの記事を書こうと思ったのは、
10月20日頃にGoogleがとあるWebサイトを公開したことが発端となります。
それが上のリンクのGoogle Fonts】と呼ばれるものですが、
これはGoogleベータ版として一般公開している日本語版Webフォントの
一覧を紹介しているものです。

「無料で自由に使っていいし、商用利用も可能とする」としていることから
私も利用に踏み切ったわけですが、最近このフォントの種類が1種類から9種類に
大幅に増えたようです。

それまでのGoogle製日本語Webフォントは、私が今利用している
【Noto Sans Japanese】くらいしかなかったのですが、私が以前紹介して以降
これだけの数に増えたというのは正直意外でしたし驚きました。

 

No more tofu

でもまあ9種類を見比べてみても、やはりNoto Sansが最も優れていると思います。
Notoとは【No more tofu】の略称で、PCで表示不可能な文字が出力された時、
といった、まるで意味のわからない豆腐みたいなものが出てくるのを阻止するために
生み出されたフォントです。

このフォントはGoogleAdobeと共同開発したもので、
tofuを防ぐと共に、もっと読みやすい高品質のフォントを作る、という名目で
作られたのだそうです。

 

はてなブログ標準フォント Noto Sans Japanese 比較

 

実際に比較画像をご覧いただきたいと思います。
上の画像はこのブログの文章の一部を切り取って左右に並べたものですが、
左半分ははてなブログの標準フォントで書かれたもので、
右半分はNoto Sans Japaneseで書かれたものです。

私ははてなブログの標準フォントがあまり性に合いませんで、
一字一字が詰まって表示されているように見える上に、表示がジャギっているのが
見ていて実に疲れる!
タイトルや見出しならともかく、本文がこれではイカンなあと思って
1年以上前に思い切って変更してみました。

まあ感性によりけりの話ですので、人によっては標準フォントの方が見やすい
ということもあり得るでしょうが、私は断然Notoです。
標準フォントに戻すことなど万に一つも考えていません。

 

 

 

はてなブログでのWebフォント導入方法

ここではWebフォントをはてなブログに導入する方法をご紹介します。
私はNoto Sans Japaneseを使用していますので、これを例として取り上げます。

 

上のリンクは先程もご紹介したGoogle Fontsの日本語版Webフォントのページですが、
ダイレクトでNoto Sans Japaneseに飛べるようにしています。
飛んだ先には導入するために必要なHTMLが記述されていますが、
そのHTMLを、ご自身のブログの管理画面から
【設定】→【詳細設定】→【headに要素を追加】のテキストボックス上に
コピペしてください。

HTMLをこちらにも記載しておきます。

<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />

 

次に、CSSを設定する必要があります。
CSSにより、Webフォントをブログのテキストとしてどこまで適用させるか
決めることになります。

ブログのテキスト全てをWebフォントに変えたい場合は非常に簡単で、
以下のCSSをご自身のブログの管理画面の
【デザイン】→【カスタマイズタブ】→【デザインCSS上に
コピペしてください。

body {
    font-family: 'Noto Sans Japanese', sans-serif;

 

ただし、一部のみをWebフォントにしたい場合は、class属性別にNoto Sansを
適用させていく必要があります。
その方法は上に載せた過去記事のカスタマイズ記録をご参照ください。

なお、Noto Sans Japaneseは2015年9月よりライセンスが変更になったらしく、
それまでのApache License 2.0から、SIL Open Font License 1.1になりました。
Apache Licenseの時には、著作権CSS上にコメント形式で明記する必要が
ありましたが、SILからはそれが必要なくなったみたいなので、
より導入のハードルが低くなって結構なことだと思います。

 

noto font-weight

また、Noto Sans Japaneseは文字の太さ、いわゆるfont-weightが7種類存在します。
Thin(100)、Light(300)、DemiLight(350)、Regular(400)、Medium(500)、
Bold(700)、Black(900)の全7種類となっています。
ちなみにこのブログは、Lightでお送りしています。

 

 

 

Webフォントは重い

しかし、Webフォントは何も良いことばかりではありませんで、
何かと問題があるのも事実。
標準ではないものを使う、ということ自体が見映えの違いも重なって
違和感を持たれやすいというのもあるのですが、
一番の問題はやはり【重い】ことでしょう。

WebフォントというのはWebサーバー上に置いてあるフォントファイルを
ダウンロードして表示する文字を意味するので、
そのフォントファイルのダウンロードが終わらない限り、
そのWebフォントを実装した
Webサイトは文字が表示されないことになります。

「日本語は世界から見ると複雑怪奇な言語」と言われるだけあって、
日本語フォントはひらがな、カタカナ、漢字の他に全角と半角の区別まであるので
フォントの数が膨大になり、ヘタするとフォントファイルが10MB以上になるので
そのダウンロードに時間を要し、その間は文字が表示されなくなるのです。

標準フォントなら一瞬で表示されて当然のところが、
Webフォントだと3~5秒はかかるということも十分あり得ます。
ということはページが完全に表示されるまでに相応の時間がかかるということになり、
まさにユーザビリティに完全に逆行する実に馬鹿げた話なのですが、
私はそれでもあの汚い標準フォントで自分のブログを埋め尽くす気はないので
ここはユーザビリティを犠牲にしてでもこのWebフォントで書いていきたいと
思っています。

 

一方、このブログのスマホ版はWebフォントではありませんので、
そちらならば文字表示も早いのではないかと思います。
見やすいが文字表示が遅いPC版、見にくいが文字表示が早いスマホ版、
好みの方でご覧いただければと思います。

 

 

まとめ

弟切草 フォント

やはり文字が主体となって構成されているものは
フォントにも気を使う必要があると私は思います。
かつて、ゲームで小説を読むというサウンドノベルが出てきた時、
音楽や画はもちろんのこと、フォントが雰囲気作りに非常に大きな役割を
持っていたものでした。
そして今では俗に言う紙芝居ゲーにおいては、
フォントを設定できることはもはやデフォルトとなり、
決してどうでもいいような要素ではなくなったことがフォントの価値を
さらに押し高めています。

 

そして、ブログの場合はフォントこそがそのブログをどう見せるかの
肝となる部分になるのではないでしょうか。
そこをもっと見やすく、レスポンシブデザインへの対応力が高いといった
機能性も有したフォントにすれば、より集客効果が高まることも期待されるので
これからはデザイン性に優位なWebフォントが注目されていくことを
Webフォントを使い続けている私としても期待したいと思います。

 

 

 

広告を非表示にする

【DESIRE remaster.ver】応援中!

長編アニメーション映画【planetarian】応援中!