納品時における端末やブラウザのチェックとは？

Web制作の納品時にブラウザチェックするらしいけど、どうすればいいの？

ブラウザだけじゃなくて端末でのチェックも必要だよ！

今回は納品時におけるチェック項目について解説していきます。

効率よくコーディングしたい人はこちら

ブラウザチェックとは？

Webサイトを見るのに必要なブラウザですが、様々な種類があります。

例えばchromeでは正常に表示されていてもsafariでは崩れてるという事があるので、基本的には上記主要ブラウザ全て正常に表示されるのを確認する必要があります。

ただIEに関しては2022年6月15日にサポートが終了する為IEのブラウザチェックは対象外としているコーダーさんは多く、制作会社側もIEは対象外としてる所がほとんどに感じます（私が請けている所の場合）

IEは他のブラウザでは正常に表示されているのに崩れる事が多く、サポート終了の情報は全てのコーダーを歓喜させましたｗ

しかし、経験上safariやiOSも結構崩れますし、FireFoxもごく稀に崩れます。

例えばiOSだとボタンのデザインが崩れていたりします。

これについては以下の記事を参照下さい。

スマホで見たらボタンのデザインが丸くなってしまった時の対処法

チェック項目

IEを除いた4つのブラウザチェックですが、WindowsとMacで確認出来るブラウザが異なります。

困った事にsafariはMacのみ、Microsoft EdgeはWindowsのみでしかチェック出来ません。

しかし片方しか持っていないという方もいると思います。

どうにかしてWindowsでsafari、MacでMicrosoft Edgeの確認をしたいと思うかも知れませんが、結論から言えばどちらも所有しましょうとなります。

これは後ほど説明します。

端末チェック

ブラウザチェックとは別に端末のチェックも必要になります。

ただ一言で端末といっても全ての端末（機種）を所有するわけにはいきませんよね。

ここで私がチェックしている端末は以下になります。

Web制作始める前から全て所有している人は中々いないと思いますが、コーダーとして仕事をしていくのであれば全て所有しておきましょう。

納品時に「この端末は持っていないのでチェックしていません」と言ったら制作会社の方から呆れられたという話も聞きます。

現在WindowsのデスクトップPCとMacbook Airを使用しているのですが、タイに移住するのでiMac24インチとWindowsノートPCを購入しました（Macbook Airは一応持っておきます）

そのWindowsのノートPCはこちらです。

家ではiMac、外でしっかり作業する時はこのPCを使おうと思っているのでモリモリオプション付けて少々高額になりましたが、Macbookと比べれば画面が大きく遥かにコスパがいいです。

デメリットとしてはデザインがイマイチという所でしょうかｗ

検証モード（デベロッパーツール）では駄目か？

検証モードを使えば各端末のチェックが出来るんじゃないかと思うかも知れませんが、検証モードにおける端末の選択はその端末の画面幅で崩れないかどうか確認する為のものと思いましょう。

つまり検証モードでは問題なくても実機では崩れている、という事は非常によくあります。

またiPadなどはデザインはPCだけどiPadの実機ではhoverにしないで欲しいという要望もあるので、実機がないと困る場面が出てきます。

なので私は端末チェックの為にiPadを購入しました。

Wifiさえあればサイトの確認は出来るので、実機だけ購入すればOKです。

また目的が端末チェックなので高いスペックは必要ないと思いますが、普通に使いたいのであればそれに応じてスペックを調整しましょう。

私が所有しているのはこちらです。

またkindleアプリを入れれば電子書籍も見れるので、今まで所有していた参考書を全て電子書籍にしようと思っています（kindleアプリは無料です）

Web制作でおすすめの参考書は以下にまとめてあるので参考にしてみて下さい。

【Web制作初心者向け】コーディングやデザインの勉強でおすすめしたい本まとめ

ついでに安いケースも購入しましたがいい感じです。

仮想環境では駄目か？

例えばAndroidの場合、Android Studioというツールを使えばPC上でAndroidの仮想環境を構築する事が出来ます。

しかし、Android Studioでは問題なくても実機だと崩れているという事が実際ありました（実体験）

さらにスペックの低いPCだとメチャクチャ重くて熱くなります。

なので仮想環境でどうにかしようとするより、サクッと実機を買ってしまった方がいいと思います。

例えばAndroidであればこの端末と似た機種を私は持っています（実際所有している端末はもうありませんでしたｗ）

あくまでも検証用なのでそこまで高いスペックは必要ありません。

コーディング案件の単価と作業効率を上げる！

Brainランキング1位獲得 ＆ 3日で500部突破

クチコミ約300件
（平均スコア）

今だけ！5つの無料特典あり🎁

👇画像をクリック