Web制作

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

Web制作の納品前にブラウザチェックするらしいけど、どうすればいいの?
ブラウザだけじゃなくて端末でのチェックも必要だよ!

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

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

コーディングの時給アップにはこちら!


ブラウザチェックとは?

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

  • Chrome
  • Safari
  • FireFox
  • Microsoft Edge
  • IE(Internet Explorer)

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

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

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

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

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

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

参考記事
【CSS】スマホ(iOS)でボタンが角丸のグラデーションになってしまう時の対処法
【CSS】スマホ(iOS)でボタンが角丸のグラデーションになってしまう時の対処法

続きを見る

 

ブラウザチェック項目

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

ブラウザ名WindowsMac
Chrome確認可確認可
Safari確認不可確認可
FireFox確認可確認可
Microsoft Edge確認可確認不可

困った事に『SafariはMacのみ』『Microsoft EdgeはWindowsのみ』でしかチェックできません。

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

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

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

 

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

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

  • レスポンシブで崩れていないか(320px〜)
  • テーブルで崩れていないか
  • 横スクロールが発生していないか
  • アニメーションが正常に動くか
  • スライダーで崩れていないか
  • jQueryなど使っている実装で正常に動くか
  • ボタンや入力欄がデザイン通りになっているか(特にお問い合わせフォームなど)

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

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

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

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

 

端末チェック

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

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

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

  • Windows PC
  • Mac PC
  • iPhone
  • iPad
  • Android

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

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

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

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

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

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

2022年9月にMacBook airも購入しました

 

検証モード(デベロッパーツール)では駄目か?

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

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

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

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

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

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

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

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

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

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

続きを見る

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

 

仮想環境では駄目か?

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

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

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

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

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

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

納品時のチェックまとめ

  • 主要4ブラウザのチェックは必ずする(Chrome、Safari、FireFox、Microsoft Edge)
  • 仮想環境ではなく、極力実機でチェックする(iPhone、iPad、Android)

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

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

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


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作
-