BLOG 2016.08.23
Webサイトできあがり時に絶対チェックしたい項目　環境編

伊藤

# クリエイティブ

こんにちは。
Windows機も使っているのですが、サムネ画像には基本的にMacの画像を使っていくことでハイソに見せていきたいな～と常々考えている伊藤です。

さて、そんな下心はさておきWindowsやMacなど、パソコンにも色々種類があります。
Webサイト制作は、様々な環境に対応させたりする必要があり、その組み合わせ数はスマートフォン全盛の今星の数ほどあるというのが現状です。

全てに対応するのは難しいのですが、主要な環境には大体対応してる必要があります。

また、目に見えない細部もしっかりと設定しておかなければなりません。
表面だけ見て完成だと思っていても、もしコーディング上での記述忘れがあると後々厄介なことになってしまいます。

今回は、Webサイトができあがった後に見直したい項目の中でもユーザ環境についての情報をまとめてみました。

要チェック項目一覧

PCブラウザ対応

□Google Chrome
□FireFox
□Edge
□InternetExplorer10～
□Safari

弊社では主にGoogle Chromeを使用しています。
表示が早く、htmlの表示に癖がない反面他のブラウザで起こりうる表示不具合を見逃しやすいです。
そのため、他のブラウザをしっかりと確認しないとデザインが爆発してしまったまま気づかず……なんてことがありえます。

EdgeはInternet Explorerの後継ブラウザですが、それまでのIEとは全く別の存在です。
まだIEを利用されている方も多いので、どちらもしっかりとチェックしておくことが大事ですね。

PCブラウザモニタサイズの対応

□1920×1080
□1366×768
□1280×1024
□1280×800

現在主流のPCモニタのサイズは1920×1080です。
最近PC売り場で見かけるモニタはこのサイズばっかりで、弊社制作班も全員このサイズで作業しています。
それ以下のサイズはノートパソコンやワイド画面が主流になる前のものです。
とはいえ、ノートパソコンサイズの画面はMacを使用されている方にはなじみ深いものだと思います。
また、現場では非ワイドのモニタが使用されていることも多いです。
以上2つは、意図しない不可視領域やスクロール領域が発生してしまう恐れがあり、確認は必須です。

スマートデバイスiOS編

□safariで正しく表示されるか？
□GoogleChromeで正しく表示されるか？
□アプリ内ブラウザで正しく表示されるか？

スマートデバイスAndroid編

□GoogleChromeで正しく表示されるか？
□ブラウザで正しく表示されるか？

その他

□横持ちで正しく表示されるか？
□タブレットで正しく表示されるか？

iOSは、日本での普及率がもっとも高く、規格も一定なのでチェックしやすいです。
ただし、注意したいのが「アプリ内ブラウザ」です。
LINEやtwitterの中でウェブページを表示するときに表示されるブラウザは、safariと仕様が違います。

Androidは規格がバラバラで非常にｹﾞﾎｹﾞﾎｯ……なのですが
その中でも気を付けるべきは「ブラウザ」でしょう。

Androidの古いOSには、Chromeなどではない独自のブラウザがついています。
これがかなりやんちゃなもので、普通なら問題ないようなCSS設定を簡単に爆発させてしまいます。
スマートフォンでレイアウトが崩れている！という報告を受けたならまず疑うべきなのはここです。
直すのがひﾝじょ～に大変なので、最初のほうで対応しないようにするか、納品する前に絶対チェックしておきたいところです。

横持ちも、普段縦持ちでロックをかけている人だと案外忘れやすいところです。
忘れずにチェックしておきましょう！