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

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

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

セミの鳴き声でした！

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

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

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

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

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

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

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

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

デバイスごとのチェック

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

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

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

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

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

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

ほぼ同じですが・・・

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

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

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

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

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

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

OS・ブラウザの違い

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

というのは第一段階。

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

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

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

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

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

というかたちです。

具体的な例を出すと、
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

の３つを持っています。

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

• Safari
• Google Chrome
• Firefox
• Opera

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

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

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

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