- CODING FACTORY TOPICS
- Vol.119 2018年09月号
前回の第一部は、品質管理部が設立された経緯やチームの役割についてお話しました。
第二部では、ここ数年で主流になったレスポンシブWeb デザイン（以下、RWD）にスポットを当て、品質管理部がどのようにチェックを行っているか、またRWD ならではのチェックポイントなどを紹介いたします
RWD のメリットとデメリット
RWDについての説明は今さら不要かもしれませんが、最初にRWDのメリット・デメリットをざっとおさらいしておきます。
【RWD のメリット】
1. ワンソース管理
1つのHTML ファイルで複数デバイスに対応できるので、制作後のメンテナンス等が容易になり、作業工数の削減に繋がる
2.SEO に効果的
Google が推奨する「モバイルフレンドリー」なサイトになっていれば、検索順位に有利
3. シェアされやすい
URL が統一されることで、ユーザーがリンクを共有しやすくなる
【RWD のデメリット】
1. サイトの表示が重くなりがち
フルサイトを読み込むので、PC・スマートフォン共に転送データ量が重くなることがある
2. RWD に適したデザインの構成を考える必要がある
制作・運営者、ユーザー、検索エンジン、それぞれの視点からみてメリット・デメリットがあることがわかります。
RWD をチェックするときの具体的効率と質
私たち品質管理部のチェックの視点からみても、RWDに対するメリット・デメリットはあります。
まずはRWD のチェックにおけるメリットを挙げていきます。
【チェックにおけるメリット】
・マルチデバイスで共通している指摘は一度だけすれば良い
メリット1 で触れたように、RWD はワンソース管理になるため1 つのHTML ファイルに対し修正・変更を行います。よって、文言・リンク・alt のようなマルチデバイスで共通している要素の指摘は一度で済みます
・コンテンツの読み込みが簡単
メリット3のとおり、RWDはURLが統一されることでリンクを共有しやすくなり、各デバイスでの画面表示が楽になります
このようにRWD のメリットがチェックのしやすさにも影響することが言えます。マルチデバイスで共通している指摘は、指摘の回数を減らせたり、URL の統一により情報の管理が楽になることで、いずれも工数削減に繋がっています。
しかしメリットがあれば、何かとデメリットも生じるもの。では、チェックにどのようなデメリットがあるのか、以下にあげてみます。
【チェックにおけるデメリット】
・共通指摘した修正が、マルチデバイスで正しく反映されるとは限らない
修正後にPC・スマートフォンなどで再チェックしたとき、一方では正しく表示されるがもう一方では表示崩れしてしまうケースがあります。デバイスごとのレイアウトやCSSが影響して表示崩れしてしまうなど、考えられる原因は様々です。
・見るべき箇所が増えるので、チェック工数がかかる
例）ブラウザやOS・iOS の各依存によって生じる操作性や表示の誤差
※不要な指摘をしなくて済むよう、現在改善に取り組んでいます
閲覧環境が増えると、機種やバージョンの依存による互換性が出てきます。また、構築が複雑になるとその分ミスも起こりやすくなり、いずれも指摘の増加原因になっているとが考えられます。
品質管理部とコーディングファクトリー（以下、CF）の制作チームでは、このような問題の改善に向けて、定期的にミーティングを行っています。
RWD のチェックで気を付けていること
スマートフォンやタブレットの端末チェックでは、たて向き表示だけでなく、横向き表示も必ずチェックします。たて向き→横向き表示したときに起こりやすいミスとしては
・スマートフォン用の画面が、PC 用の画面に切り替わってしまう
・見出しやテキストが画面幅で折り返されず、そのまま一直線に突き抜けてしまう
・たて向き→横向き→たて向きにしたとき、元に戻らず表示が崩れる
などが挙げられます。
端末チェックはたて向き（画像上）だけでなく、
横向き表示（画像下）もしっかり行います。
スマートフォンやタブレットの端末チェックでは、たて向き表示だけでなく、横向き表示も必ずチェックします。たて向き→横向き表示したときに起こりやすいミスとしては
・スマートフォン用の画面が、PC 用の画面に切り替わってしまう
・見出しやテキストが画面幅で折り返されず、そのまま一直線に突き抜けてしまう
・たて向き→横向き→たて向きにしたとき、元に戻らず表示が崩れる
などが挙げられます。
きちんと設計・構築をしないと、スマートフォン・タブレットのたて向きと横向きとで全然違うレイアウトになり、操作に混乱を招いてしまう、という最悪のケースも考えられます。
日常でスマートフォンを横向きにして使用する頻度は少ないかもしれませんが、サイトのデザインやユーザーのその時のシチュエーションによっては横向きで閲覧する可能性も十分考えられます。
想定できるケースは全て操作してみて、何か問題がないかくまなくチェックを行うよう心掛けています。
進歩していく技術、磨いていくべきもの
現在は、端末の種類や表示サイズも多岐にわたり、RWD が出始めた数年前と比べると「どの端末で表示させるか」から「あらゆるサイズに表示対応させる」発想へ進歩したように感じます。
技術はどんどん進化していく中で、チェックの内容も数年前と比べ難しくなっています。私が最近感じていることは、品質管理部はこれから何を提供していき、CF とどういう関係性を持ち、時代の流れにどう適応すべきなのか視野に入れていく時期が来ているということです。課題や考えることは山ほどありますが、近い将来をイメージしながら目の前の出来ることを精一杯やっていきたいと思います。
