web関連

2014/09/09

chromeでスマホエミュレートが簡単になった!~スマホサイトのline-hehghtみんないくつなの?を調べてみた~

chrome-emmu-cover

こんにちは、デザイナーのさっちゃんです。
つい先日知ったのですが、chromeのエミュレーター機能が以前よりもっと楽に使えるようになったみたいですね。

F12を押してデベロッパーツールを表示して

chrome-emmu-pc

スマホっぽいアイコンを押してリロードすると・・・・

chrome-emmu-smp

スマホ画面に切り替わりました!
なにこれスゴイ便利!

前はもっと奥のところにこれがあったのですが、いつの間にか全面に出てきたようです。

せっかくなのでよく見るスマホサイトの行間を調べてみた

ここ数年スマホ向けのアプリやサイトを作る機会が増えて気になっていたことの一つに「スマホで読みやすい行間(line-height)っていくつなの?」というのがありまして。

早速chromeのこの機能でいくつかサイトを調べてみました!

【1】yahooニュース

参照元URL:http://www.yahoo.co.jp/

chrome-emmu-yahoo

chrome-emmu-yahoo2

1.5!

 

【2】googleの検索結果(説明文)

参照元URL:https://www.google.co.jp/

chrome-emmu-google

chrome-emmu-google2

20px!

相対設定が多い中で珍しくpx設定でした。
気になったので、フォントサイズの設定を見てみたら「font-size: small;」こっちは相対!

 

【3】cakesの記事部分

参照元URL:https://cakes.mu/

chrome-emmu-cakes

chrome-emmu-cakes2

175%!

思ったより開いてる!
でも読みやすいので、長めの文章を載せるサイトはこれくらいあけたほうがいいのかも?

 

【4】BLOGOSの記事部分

参照元URL:http://blogos.com/

chrome-emmu-blogos

chrome-emmu-blogos2

1.66!
 
数値がすごい中途半端なんですが、きっとフォントサイズとの兼ね合いで綿密に計算された行間に違いないですね
 
 
結論:みんなバラバラ!
 
やっぱりこれ!という決まりは無いんですね。
個人的にはcakes、BLOGOSが読みやすいと感じるので、長い文章のあるサイトは170%くらいにすると読みやすいのかも?
普段1.5emくらいにするとちょっと隙間開き過ぎかな?と思っていましたが、そんなことはなかったようです。

結構ざっくり調べてるので、もし「見てるとこ違うよ!」とかあったら密かに教えて下さい。

では(^O^)/