• FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業

Webデザインメモ

日々学ぶウェブデザインについて、すぐに役立ちそうな情報を綴っていきます。Webデザインメモ

2018年8月24日(金曜日)  (山本 真里奈)

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

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

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

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

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

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


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

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

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