Webサイトは実機で確認しよう!

  • このエントリーをはてなブックマークに追加
  • LINEで送る

こんにちは!
今日で6月も最後。
1年の半分まで来ました。

昨日の出来事ですが、家でパソコン作業していると、外から何やら音が・・・

セミの鳴き声でした!

10分くらいで聞こえなくなってしまいましたが、もうすっかり夏ですね笑
(早い気もしますが!)

と、前置きはここまでにして、今日はWebサイトの確認方法についてお話ししていきたいと思います。

Webサイト完成したぞ!
サイトオープンのお知らせだそう!

制作が完了して、サーバーにもアップして、いざお披露目。

という段階まで来た時、動作チェックや、見た目のチェックはお済みですよね。

その確認、十分に足りているでしょうか?

デザインやコーディングはパソコンで行うので、もちろんパソコンでは確認が十分にできていますよね。

ですが、スマホやタブレットの確認、実機で確認できているか、今一度チェックしてみてください。

デバイスごとのチェック

Webサイトを閲覧できる機器は、大きく分けて3つに分類できます。

パソコン
タブレット
スマートフォン

パソコンで確認はできていても、タブレットやスマホで確認できてないってことはありませんか?

「デベロッパーツールで確認したから大丈夫だよ!」
「ワードプレスの管理画面でプレビュー確認したからOK!」

という場合は要注意です。

デベロッパーツールやプレビュー画面は、実機を完全に再現できない部分もあります。

デベロッパーツールと実機でスマホの画面を比べた画像

実際に同じGoogleの検索画面を、デベロッパーツール、実機ともにスクリーンショット撮ってみました。

ほぼ同じですが・・・

画面上部に違いがあるのわかりますか?

実機では画面上部にURLアドレスバーがありますが、デベロッパーツールには表示されていません

ちょっとした違いですがURLバーを想定してコーディングをしないと、

  • 背景画像がずれる
  • 背景画像の大きさが変わってしまう

など、崩れることがあります。

ですので、デベロッパーツールやプレビュー画面を過信しすぎずに、実機での確認が大事です。

OS・ブラウザの違い

「パソコン、タブレット、スマホで確認すればOKだね!」

というのは第一段階。

OSやブラウザの違いも確認していきましょう。

同じパソコンだけれども、WindowsとMacだとOSが違いますよね?

OSも違うし、デフォルトで搭載されているブラウザも違います。
(WindowsはEdge、MacはSafari)

OSやブラウザの違いによって、Webサイトで表現できること、できないことの違いも生じてきます。

また、同じApple製品であれば、搭載されているOSは一緒なんじゃないか、と思ってしまいそうなのですが、実はそれぞれ違います

Mac PCMac OS
iPadiPad OS
iPhoneiOS

というかたちです。

具体的な例を出すと、
cssで以下を併用した際に崩れてしまうOSが・・・。

position: fixed;
background-size: cover;

背景画像を画面全体覆うようにし、さらに固定させる手法ですが、iOSだけ崩れてしまいます。
つまり、iPhoneだけです。

同じApple製品のMacやiPadでは崩れません。

OSの違いによる崩れも想定して、確認していきましょう。

バージョンの違い

これはなかなかやっかいな問題です>_<

ブラウザも新しいバージョンが出ますし、OSも新しいバージョンが続々と出て来ます。

新しいバージョンに合わせてWebサイトを制作すると、古いバージョンでは崩れてしまう、というのはよくあることです。

案件を請け負って制作する場合は、バージョンについて事前の取り決めが大事です。

制作を始める際に、

どのバージョンまで対応するか?

をしっかり決めておきましょう。

「現行の最新バージョンに合わせてコーディングします」

「バージョン〇〇までは対応します」

といった形でクライアントさんと事前に決めておくと良いです。

私の場合は、ですが
最新バージョンに合わせてコーディングします。
サポートが切れている古いバージョンにも対応する場合は、
追加費用をいただくようにしています。

あまりにも古いバージョンを提案された場合はお断りすることも。

先程の、Apple製品の話に捕捉すると、iPadは販売された時期によってOSそのものが違います。

サポートが切れているiPadはiOS(iPhoneと一緒、iPad OSではない)のものが多いです。

あまり古いものまで対応しても、時代に逆行するだけじゃないかな〜、と個人的には思っていますが、

「話が違う!!」

とならないように、事前にしっかり決めておくのが一番です^^

最後に

「確認するために、
Mac、Windows、Andoroid、iPhone、
全部買わなきゃダメな気がして来た・・・」

↑↑ができたらすごく良いですが、そうもいきませんよね^^;

私自身は、

  • Mac PC(ノート)
  • Androidスマホ
  • iPhone

の3つを持っています。

PCにはブラウザをたくさん入れて確認しています。

  • Safari
  • Google Chrome
  • Firefox
  • Opera

パソコンのデベロッパーツールである程度確認して、
サーバーにアップ後、
スマホでも確認していきます。

自分以外の人に連絡して確認してもらうことも多いです。

できる限り自分でチェックして、人に協力してもらうのもおすすめですよ!

では、また(*´︶`*)ノ”

  • このエントリーをはてなブックマークに追加
  • LINEで送る

LINEで無料レッスン配信中!


  • 売り手市場じゃなかったの?案件獲得に苦労するなんて・・・
  • なかなか単価が上がらない。どうすれば・・・
  • グラフィックデザインだけじゃ厳しい。じゃ、Webデザイン?

な方は今すぐご覧ください!!


今すぐチェック!

SNSでもご購読できます。

写真素材無料【写真AC】

コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください