サイト制作におけるiphone、ipadの検証環境について

Question

お聞きしたいこと

現在wordpressで友人のカフェのサイトを制作しているのですが
Macもiphoneもipadも持っていないためios環境からの検証ができないことに気づきました。
chromeの検証ツールを用いてレスポンシブ対応自体はしていますが、フォントやsafariの仕様などで修正すべきところが出てくるのではないかと思っています。

必要であれば実機を買おうかとも思っていますが、あまり予算もないためできれば安く抑えたい……

そこで、安いipadを買ってInspect Browserなどのアプリでiphoneでの見え方を再現できるのなら
検証のためだけにiphoneを買う必要は無いんじゃないかと思いますが可能でしょうか？
また、仮に1台だけiphoneを買う場合、表示領域としては何インチのものが検証としては適しているでしょうか？

また、一般的なサイト制作においてスマホやタブレットでの表示検証は
どの程度行われるものなのでしょうか？

Comments

[Lhankor_Mhy]

iOS12を捨てるかどうかで、用意する機種が変わりそうな気がしますね。
https://ja.wikipedia.org/wiki/IOS_12

[kabokabo]

現在がios14なので二つ前の12（iPhone 5s、6/6Plus以前)から切るかどうか考えるのも手なのですね。
検討してみます。ありがとうございます。

Answer 1

必要であれば実機を買おうかとも思っていますが、あまり予算もないためできれば安く抑えたい……

そこで、安いipadを買ってInspect Browserなどのアプリでiphoneでの見え方を再現できるのなら

検証のためだけにiphoneを買う必要は無いんじゃないかと思いますが可能でしょうか？
また、仮に1台だけiphoneを買う場合、表示領域としては何インチのものが検証としては適しているでしょうか？

Inspect Browserで検証するのはありといえばありだとは思います。ただ、m.ts10806さんもおっしゃるとおりで、実機にまさる検証環境はありません。1台だけiPhoneを買うという話も、これも要件次第というか、iPhoneの人全員が表示されることを確認したいのであれば、現役iPhone（の定義も難しいですが）で一番解像度が低いiPhone SE 第二世代を買うべきかもしれませんし、大半の人が見れれば良いやくらいであれば、現状で一番普及してるiPhone（iPhone11とか12あたり？）を買うべきでしょう。どれを買えば正しいというのはなく、要件しだいです。

また、一般的なサイト制作においてスマホやタブレットでの表示検証は

どの程度行われるものなのでしょうか？

これも何を持って一般的というくくりにするかが難しいので、おそらく誰も正しくは答えられないと思います。当たり前ですが大企業が作るサイトであれば、金や時間をかけて様々な環境でしっかり検証するでしょうし、個人サイトや小規模の団体のWEBサイトであれば、現状で一番普及してるWindows、Mac、iPhone、Androidの各端末でそこそこ問題なく表示されればいい、という感じのところもあると思います。m.ts10806さんも書いてますが「免責事項」等を表示して「正しく見えなくてもごめんなさい」としておけば問題がでることはあまりないと思います。

この手の要件はWEBディレクターと呼ばれる方が得意としていますので、そういう方が周りにいれば聞いてみればいいですし、いないようであれば参考書籍などを購入するのもありだと思います。

Comments

[kabokabo]

なるほど、やはり要件次第ということなのですね。
完全に独学の為、web制作の現場での標準的な検証環境などが全く分かっておらず少し大雑把な質問になってしまっていたかもしれません。

iphoneはまだしもipadだと表示幅がPCに近いためグローバルメニューなどでマウスオーバーができないことによる不具合など出そうですし、やはり実機は必要ですね。
Inspect Browserでいけないこともないとのことなので、今回は安いipadでも買って対応し、もし依頼が増えるようなら少しずつiphoneの実機も増やしていきたいと思います。
参考になりました。ありがとうございます。

Answer 2

実機に勝るものはありません。
いきなり本番公開とかはしないでしょうから、テストサーバーにて検証すると良いです。

一般的なサイト制作においてスマホやタブレットでの表示検証は

どの程度行われるものなのでしょうか？

要件次第です。
基本設計時などに「対象デバイス」「ブラウザ、バージョン」を定義するので、そちらに沿って検証を行います。
あくまで運営側の都合なので、要件次第で切り捨てるデバイスもでてきます。
なので、注意事項に対象OSやブラウザを記載し、それ以外の動作保証はできないという旨の文章を免責事項として掲載します。

Comments

[kabokabo]

確かにそこらへんはあらかじめ決めておくのが普通ですよね…
作りながら「そういえば検証環境どうしよう」なんてこと自体ありえないので
一般的な制作環境では…というのも難しい質問になってしまいました。

やはりアプリを使ってもあくまで仮環境であって、
実機では思いもよらない崩れや抜けがあるものなのでしょうね

参考になりました。ありがとうございます。