Web制作・コーディング案件の納品前にやるべき端末やブラウザチェックのやり方を解説

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

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

今回は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』の確認をしたいと思うかも知れませんが、結論から言えばどちらも所有しましょうとなります。

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

ブラウザチェックのポイント

また、チェックするポイントとしては主に以下になります。

レスポンシブの最大幅は特に決まりはありませんが、極端に広くしても崩れないようにしましょう（3000pxなど）

MacBookなどで確認するとき、単純に画面幅を狭くするだけでは極端に広い画面幅で確認は出来ないので、デベロッパーツールで確認しましょう。

デベロッパーツール：横幅3000px

端末チェック

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

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

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

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

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

現在WindowsのデスクトップPCとMacbook Airを使用しているのですが、タイに移住するのでiMac24インチとWindowsノートPCを購入しました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

仮想環境では駄目か？

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

しかし『Android Studioでは問題なくても実機だと崩れている』という事が実際ありました。

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

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

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

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

まとめ

今回はWeb制作・コーディング案件の納品前にやるべき端末やブラウザチェックのやり方を解説しました。

以上になります。

コーディングの時給と作業効率を上げる！

2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。※ 4月15日に値上げ予定

• コピペで使えるWordPressの各テンプレート
• 実務でよく使う見出し一覧
• 実務でよく使うテキストのhoverアニメーション
• 実務でよく使うボタン内の矢印9種類
• Contact Form 7の色々・・・

などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。

さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。

800部以上販売し、レビューは430件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

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

販売ページとレビューを見てみる

Twitterのレビューはこちら