ロイヤルノート|ろくでもない知識をきみに。

ろくでもない知識をとにかくかき集めて、どこかの誰かのためにウェブの海へ放り投げているブログ

スマホのフォント表示を変更したら劇的に見やすい感じになったよ

 

f:id:vintraw:20170125163419j:plain

スマホからの流入が圧倒的に多いんです、比率的に。
パソコンを使って制作作業をする人間からすると、ウェブサーフィンはもっぱらPCですけどね。

PCでのレイアウトや見た目ばかりに気が行きがちなんですが、グーグルアナリティクスで流入の実際のところを調べてみると、スマホから閲覧される割合のほうが高い。

であれば!

スマホの見た目もっと気にしたほうがいいんじゃないかな?ということで今回、少しでも読み心地が良くなるようにフォントの変更をおこなってみました。

フォント出しわけのCSS

閲覧しているブラウザの横幅がスマホとPCでは異なるため今回はそこを利用して、横幅ごとに表示するフォントを変える方法にしました。

レスポンシブデザイン(見てる人のブラウザの横幅に応じてレイアウトを変化させる方法)で組まれたテーマを設定しているので、この横幅に応じて出しわける指定は相性が良いです。

指定する横幅の分岐点は人によりいろいろ思うところはあるでしょう。
僕はあまり考えすぎるとロクなことがないので、さらりと『920px』あたりをターニングポイントにしました。

まずそもそもフォントの指定をCSSでするときはこんな感じ。

body { ←どこを指定するか。今回はページ全体に適用できるbodyにした
 font-family:  游ゴシック体, '游ゴシック', などなど… ; ←使いたいフォントを書く
}

ブラウザの横幅ごとに使うCSSを使い分けるにはこんな記載を。

@media screen and (max-width: 300px){ ←ココがポイント。()の中に条件を書く。この例では「幅300以下の時…」という意味
  body {
   font-family:  游ゴシック体, '游ゴシック' ; ←あとは普通にCSS書く
   }
  }

そして実際にやってみた例がこちらです。

万が一応用したいぞってなかたがいましたら、基本的にコピペでOKで、解説で入れた緑色の文字は消し、あとはお好みで手を加えるといい感じです。

@media screen and (max-width: 919px){ ←919px以下の時だけ適用する
  body { ←ボディ全体に適用する
   font-family: "Noto Sans Japanese", YuGothic, 'Yu Gothic', 游ゴシック体, '游ゴシック', "Avenir Next", 'Helvetica Neue', Helvetica, Arial, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS ゴシック', 'MS Gothic', sans-serif !important; ←フォントの違いは赤い部分だけ
   font-weight: 200; ←normal(400)じゃ太すぎたので細めの200を適用
   }
  }
@media screen and (min-width: 920px){ ←920px以上の時だけ適用する
  body {
   font-family: YuGothic, 'Yu Gothic', 游ゴシック体, '游ゴシック', "Avenir Next", 'Helvetica Neue', Helvetica, Arial, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS ゴシック', 'MS Gothic', sans-serif !important;
   font-weight: normal; ←こっちはnormalがちょうど読みやすい感じ
   }
  }

なおこの横幅ごとに指定を変えるCSSの手法は、今回のようなフォントの件じゃなくてもなんにでも使える。スマホから見たときにだけ見せたいエリアを作る、など。 

<head>の中にも指定が必要

今回スマホ用のフォントで『Noto Sans Japanese』を採用した。この子はいわゆるウェブフォントなので、ただCSSを指定するだけでは表示されない。誰が閲覧しに来ても一律で同じフォントが表示されるようウェブ上にあるフォントデータから読み込む必要があり、それこそがウェブフォントのウェブフォントたりえる由縁だ。

ということで『設定 ⇒ 詳細設定 ⇒ 検索エンジン最適化 ⇒ headに要素を追加』へ以下を書き込んで読み込む。

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

これで作業は終わり。

スマホのフォントはこれにした

f:id:vintraw:20170125155827j:plain

Googleが公開している早期アクセスの試験的フォント『Noto Sans Japanese』というものを使ってみた。こちらのサイトでいくつか日本語フォントが公開されていて自由に使える。

この後のビフォーアフターで紹介するが、スマホでこのフォントを見ると『綺麗な細字』を表現してくれたので気に入った。

ビフォーアフター

スマホはこんな感じ。

f:id:vintraw:20170125161321j:plain

游ゴシックだと細字指定をしてもどうしてもやや太って見えた。
それでもかまわない人も多数いることだろう、しかし個人的な好みを優先して影の薄く繊細な細字にした。

だがNoto Sans Japaneseを指定したところPC端末で逆にやや太った表示になってしまった。そこでこちらは従来の游ゴシックを指定した。
細字(=200)を指定するとむしろ細すぎて読みにくかったので太さはnormalに。

f:id:vintraw:20170125162150j:plain

 とりあえずいったんこれで運用してみることに。