こんにちは!
今日で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 PC | Mac OS |
iPad | iPad OS |
iPhone | iOS |
というかたちです。
具体的な例を出すと、
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
パソコンのデベロッパーツールである程度確認して、
サーバーにアップ後、
スマホでも確認していきます。
自分以外の人に連絡して確認してもらうことも多いです。
できる限り自分でチェックして、人に協力してもらうのもおすすめですよ!
では、また(*´︶`*)ノ”