最近551蓬莱の肉まんにハマってます。
本気で世界で一番美味しいんじゃないかと思うくらい。
昨日も思い切って８個入りを買っちゃったので朝ごはんにしちゃいました。
そんな肉まん大好きのマンノです。
今回は「画面解像度」と「IE対応」に関して考えていきたいと思います。
画面解像度、いわゆる画面サイズですが。
今はマルチデバイスの時代。
昔のように「この画面解像度に合わせておけばOK」ということがなくなりました。
「PC」「タブレット」「モバイル」
この３つの大枠の中にも細かに解像度が異なってきます。
- 最大何ピクセルまで対応させるべきか
- 最小何ピクセルまで対応させるべきか
仕様書に書いている場合はいいのですが、
「レスポンシブでいい感じに」
なんて言われた日にはたまったもんじゃありませんよね。
- 文字の最大サイズ
- 画像の最大サイズ
- カラム設定
画面解像度によってどのように対応していくのかを考えなければなりません。
それと合わせて「IEをどのバージョンまで対応させるか」も課題です。
今回は弊社のデータを元に画面解像度とIE対応について考えていきたいと思います。
目次
画面解像度をどこまで対応するか考えてみよう
まず冒頭でも述べた通り
「PC」「タブレット」「モバイル」
この３つに大枠を分ける事ができます。
デザインを行う上でも、この３つのレイアウトを考える事になるでしょう。
データを元にどのように対応させていくかを考えていきましょう。
弊社1年のアクセスデータを大公開！
まず弊社AWESOMEのアクセスのデバイス内訳が上記の通りとなっています。
殆どが「デスクトップ」と「モバイル」で二部されているのが分かります。
クライアントのアクセス解析などを行っていても殆どでこのような結果となります。
この事からもPCもスマホも同じレベルでしっかりとデザインをする必要があるというのが分かります。
逆に「タブレット」がとても少ない。
意外と使ってる人って少ないのかな？と思う結果となりました。
画面解像度シェア率
こちらが弊社AWESOMEのホームページを御覧頂いている方々の画面解像度TOP１５です。
- １位「３６５ｘ６６７」iPhone6
- ２位「３２０ｘ５６８」iPhone5
- ３位「１９２０ｘ１０８０」PC
- ４位「３６０ｘ６４０」GALAXY S５
- ５位「１２９０ｘ８００」PC
という結果になりました。
このように見るとiPhoneのシェアがダントツで多いのがお分かりいただけるかと思います。
私はiPhone6 plusを使ってるのですが、やはりiphone5 やiphone6といった小さめのサイズが人気なんですね。
PCの画面解像度を見てみると殆どが「横幅1280ピクセル以上」という結果がでました。
以前、友人のWEB制作会社の方に「画面解像度どこまで対応させてます？」と質問した時
「1024pxまでですよ。それ以上大きい画面は対応しませんよ」とおっしゃっていました。
他の制作会社の方々も1024pxまでしか確認しないという会社が多く驚きました。
実際、1024pxでデザインをしっかり組んでおけば、画面解像度を大きくしてもデザインが崩れることは殆どありません。
ですが、デザイン崩れが無いかをチェックする必要は当然あるため、ある程度気にしておく必要はあります。
画面解像度の大きさをどこを基準にするかは、制作会社の好みや経験によるところが多いような気もしますね。
タブレットのデザインに関して
アクセスが２％しかいないならタブレットレイアウトいらないんじゃない？と思ってしまいますがそうもいきませんよね。
またタブレットのデザインを実装するに当たって、
- 縦向きなのか横向きなのか
- タッチイベントへの対応
- タブレット端末独自の使用への対応
などコーディングにおいて考えないといけないポイントが沢山あります。
タブレットは使用者によって使う向きが変わります。
ですので、どのサイズでもキレイに見えるように対応しておかなければなりません。
「めんどくさい！」って声が聞こえてきそうですね。
スマホデザインに寄せるのか、PCデザインに寄せるのか。
サイトコンセプトと合わせて考えていかなければなりませんね。
画面解像度結局どこに対応させるべきなのか。
これからドンドンとスマホやタブレットの種類は増え続けて、PCなどのディスプレイは更にでかくなっていく事でしょう。
こうなってしまっては正直どこを基準に取るか。なんてのは考えられなくなってきます。
「PC」「タブレット」「モバイル」のブレークポイントを基準にレスポンシブデザインを行うが良いのかなと思います。
特にPCの場合は、「1920pxでも文字サイズが小さすぎないように設定する。」などのちょっとした気遣いが必要になってくるのでは無いでしょうか。
※年々視力が悪くなってきてるのでモニタも文字が大きい方が嬉しい。
ブラウザとIEはどこまで対応させるべき？
さて、続いてはブラウザについてのお話です。
CSSなどのコーディングをする上で、「ブラウザ対応」は本当によく考えなければいけない問題でもあります。
- Flexboxが対応してなくてデザインが崩れてる！
なんて事よくありますからね。
弊社でも契約の際に「IE９まで対応」といったように、クライアントにしっかりとIEのバージョンを含めて対応バージョンの説明を行います。
「IE５に対応してないなんて聞いてない！」
といったクレームにも繋がりかねませんからね。
ここからは、弊社のデータを元に、
- 実際に対応させなければ行けないブラウザと
- IEのバージョンをどこまで対応させるべきか
についてお話していきます。
ブラウザ
まずはブラウザについてです。
グラフを見ていただくと分かるように、Chromeとsafariが殆どを占めています。
弊社はWEB制作に関する記事が多いため、このような結果になりました。
クライアントのアクセスではIEがもっと多い場合もあるため、サイトによってこの結果は大きく事なるでしょう。
それでもChromeのシェアというのは今では絶大です。
コーダーにとってもとてもありがたいのですが、やはりしっかりと意識しなくてはいけない「IE」の存在。
IEのバージョンについてもグラフをご用意いたしました。
今年一年のIEバージョンシェア率
今年AWESOMEのホームページにアクセス頂いたIEのバージョンのシェア率です。
弊社でも驚いたのが「IE１０が少ない！」という所。
IE11,IE9の独占という結果となりました。
それIE8以下に関しては殆どアクセスがありませんでした。
このことから弊社AWESOMEのサイトはIE8以下は容赦なく切り捨てるぞ！って決断ができるようになりました。
IE8ユーザーの方ごめんなさい。今すぐアップデートしてください。
Google Analyticsを活用してクライアントにあった提案を
画面解像度やブラウザ、IEのバージョンなど、とても多くの情報がGoogle Analyticsで集めることができます。
コーダーの方などですと、あまり見ることもないかもしれませんが、ユーザー情報を把握しておくのはとても重要です。
是非これを機会に「あなたのサイトのユーザー情報」も合わせて確認してみてはいかがですか？
どのようなユーザーにアクセスしてもらっているかを把握することで、新しい戦略が思いつくきっかけにも繋がります。
Google Analyticsを是非上手く活用してみてくださいね。
