やわらか図書館学

主に大学図書館のデザイン・広報に関するブログです。

デベロッパーツールでページを自分の読みやすいように

 

f:id:Katharine_15:20170628230428p:plain

 

タイトルのデベロッパーツールというのは、Webページを作る時などにブラウザ上で、表示する文字を変えたりCSSの設定を変えたりといった検証に用いる、大抵のブラウザに標準装備されているツールのことです。使い方は、ググるとわかりやすい説明のページがたくさん出てきます。

WebでHTMLのドキュメントを読むときは、そのデベロッパーツールでCSSの設定をいじると読みやすくなることがあるよというお話です。

例えば、文科省の学術情報委員会の議事録は、普通に表示すると以下のように、MSPゴシックで少し行間が狭く表示されますが、結構長い文章ですので、そのまま読もうとするとちょっと疲れます。

 

f:id:Katharine_15:20170628225429p:plain

 出典:第9期学術情報委員会(第1回) 議事録:文部科学省

 

そこで、ブラウザのデベロッパーツール(画像はGoogle Chrome)を使い、フォントの指定を外し、行間を開けてあげると…

 

f:id:Katharine_15:20170628225520p:plain

 

f:id:Katharine_15:20170628225430p:plain

 出典:第9期学術情報委員会(第1回) 議事録:文部科学省

 

こんな風にChromeのデフォルトフォントであるメイリオで表示され、行間も開くので、相当読みやすくなります。わ〜いですね。

念のために書いておきますと、デベロッパーツールは、あくまで自分のブラウザ上での見た目を変えているだけで、元のページには影響ありませんのでご心配なく。

 

それでもまだ長文を読むにはちょっと読みづらいです。

長文を読むときは「ゴシック体」よりも「明朝体」のほうが良いとされていますので、以下のようにフォントの指定の「MSPゴシック」を「游明朝」等の明朝体に書き換えてあげると… 

 

f:id:Katharine_15:20170628225523p:plain

 

f:id:Katharine_15:20170628225434p:plain

 出典:第9期学術情報委員会(第1回) 議事録:文部科学省

 

このように明朝体で表示されるので、本などを読むときのように、ほとんど苦にならずに読み進めていくことができるようになります。バンザ〜イ。

変更前後で比べてみるとこんな感じです。どちらも同じWindowsのGoogle Chromeでの表示ですが、結構印象が違うのではないでしょうか。

 

f:id:Katharine_15:20170628230010p:plain

 出典:第9期学術情報委員会(第1回) 議事録:文部科学省

 

上でご紹介した「游明朝」はWindows10からはバンドルされていますが、Windows7の場合は以下からダウンロードすることで入手可能です。

ただ「游ゴシック」は、Google Chromeで表示すると妙に細く表示されてしまうという問題があるため、上のフォントをインストールすると、丁寧に「游ゴシック」を指定しているページは、もしかしたらメイリオよりもみづらくなってしまうかもしれません。

ちなみにMacの場合は、同様に行間を開けて、フォントに「HiraMinProN-W3」などを指定してあげると読みやすいかなと思います。

本当は折り返しの改行と普通の改行で行間を変えられるとさらに読みやすいのですが、ちょっとページの構造上、難しそうでした。

ということで、自分が上記議事録を読んでる時に気づいた小ネタでした。皆さんが読むときの参考になれば幸いです。(游明朝での表示が綺麗で感動したのでそれをシェアしたかっただけかも。)

お相手はやわらか図書館学でした。

参考