2018年08月24日

Webデザインメモ

コーディングの後は、スマートフォン実機での確認を

ここ数年スマートフォンの普及により、ますますスマートフォン向けサイトが増えていきました。
PCだけでなく、マルチデバイスへの対応が出来るウェブサイトが求められています。

コーディングを行う際必要となるのが、実際の見え方の確認。
ChromeやFIrefoxなどのブラウザでは、画面幅に対しての見え方を簡単に確認できます。

私はChromeをよく使うのですが、iPhoneやAndroidなどの外観と共に確認できる機能がついているので、これがとても便利です!

【確認の仕方】
①右クリック
②「検証」をクリック
③左上に出てくるデバイスのアイコン(Toggle device toolbar)をクリック

これで、スマートフォンでの見え方を確認することができます。


しかし、ここで問題になってくるのが、「フォント」。
サイトを見ている環境によって大きく変わるので、PC上のプレビューではいい感じだったのに、公開されたものを見ると、フォントが適用されていない!ということが多々あります。
(iPhoneはメイリオ、游ゴシック・游明朝に対応していないのでご注意ください・・・)

実際どう見えるのかは、やはりスマートフォンを使うのが一番確実です。
可能であれば、iPhoneやAndroid両方を用意し、実際の環境で確認するのがよいでしょう。

(参考)
「2018年以降はコレで決まり!Web サイトで指定するゴシック体・明朝体・等幅の font-family 設定」
https://neos21.hatenablog.com/entry/2017/11/12/080000