• 株式会社AliveCastはプライバシーマークを取得してます。
  • 福岡市インキュベート認定マーク福岡県子育て応援宣言登録マーク
  • 株式会社AliveCastは国の認定を受けた異分野連携新事業(新連携事業)に取り組んでいます。
  • FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • JTBビジネスイノベーターズ Travel・Fintechビジネスコンテスト 最優秀賞 受賞
  • AEON Financial Service Innovation 2017 特別賞 受賞
  • 第17回MIT-VFJビジネスプランニングクリニック&コンテスト 正会員特別賞・マイクロソフト賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業
  • 特許第6372856号
  • 特許第6316654号

日々学ぶウェブデザインについて、すぐに役立ちそうな情報を綴っていきます。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