【WEB・アプリ開発】　デバッグ時のデザインチェック

当然ですが、サービス開発の際のデバッグはとても重要ですよね。機能面でのバグ発見と改善は当然必須ですし、デザインも想定通りになっていないとユーザーに混乱や不快感を与える原因になることがあります。開発ボリュームが大きくなると、見る範囲も非常に広くなります。

株式会社ブリューアスではQA専門部隊が様々なデバッグを実施していますが、やはりデザインの反映確認やクオリティチェックは、UIデザインチームが行うことが多いです。その際に気をつけていた点や、注意点などをまとめておきたいと思います。

1.デザインチェックの前に

そもそもデザインツールで作成した画面を、どれくらいの再現度で開発していただけるのか、などは非常に重要な前提となります。
この辺りは開発していただくメンバーや会社とうまくコミュニケーションする必要があり、もちろん開発する側も詳細に再現するほど工数がかかる場合が多いため、できるだけお互いの認識を揃えて開発とデザインチェックを進められるようにしておく必要があります。

デザイン制作の事前にも

・OS準拠やライブラリ準拠でデザインし、再現効率を高める

・デザインガイドとして共通のスペーシングやカラー等を規定する
・許容の有無、許容できる箇所についての確認
・開発者へデザインツールから情報取得の仕方の共有

などを実施しておくことは大切になります。

2.チェックリストを用意する

さて、デザインのデバッグですが、開発によってはiOS,Andorid,webなど見る範囲も多くなると思うので、効率よくチェックしていく必要があります。

このように見る項目を事前に洗い出しておくと、スムースに抜け漏れなく進むかと思います。
特にチームとしてフォーマットがある場合でも、ケースによって増減はあると思うので確認しておきましょう。

3.デザインチェックをする

webに関しては、PCはもちろん各ブラウザで開発者モードで閲覧し、SPについては、PCをつないでデバッグする方法が良いでしょう。
やり方参考：https://qiita.com/spre55/items/5968e759178ac0617cde

ネイティブアプリについては、ReactNativeなどの開発環境で方法は異なると思いますが、スクリーンショットを取ってチェックすることが多いと思います。デバッグツールを利用している場合でも、実機との差分がないことが保証されている事が前提になります。Layout Inspectorなどを利用する場合でも、実機との再現度を確認しておきましょう。
何れの確認環境でも、重要なのは修正箇所の指示内容です。

①「現状」がどのような状態で
②「正」はどのような状態か
③その差をどうするか
④画像を用いて明確にする

を指示することが大切です。どれかが欠けると、誤認につながる事が度々ありました。（もちろん一番の理想は、ソースを含めてチェックし、どうソースを書けば正しいかを指示することですが…）

例えばChromeでは「Select an element in the page to inspect it」で各要素の情報を表示して確認していましたが、CSSと見比べると、時折表示情報と異なる場合があるみたいなので注意です。

一部例を出すと

・フォントサイズが表示と違う
CSSでは8px以下でも、可読性を維持するためにChromeでは10px、safariでは9pxがFont-sizeの最小サイズなので、本来そのサイズ以下にはなりません。ただしデザインで8px以下の文字サイズにしている場合、transform: scaleでサイズを更に小さく表示する事はできます。

　例：font-size:10px,transform:scale(0.6)

この場合は,見た目は6pxとかなり小さくなっているのですが、表示情報やfont-sizeソース上は10pxと表示されます。
（画像はどちらも10pxですが、もしfont-size:8pxにしていた場合でも、可読性の問題で左の表示Fontは10pxになります。意外とここは落とし穴）

ここでもしデザインの見た目と異なった場合に「（6pxだと小さいので）8pxに修正してください」と指示すると、起票者と開発の間に認識がずれる可能性があります。

起票者「（なんか小さいな…）正しくは8pxです！」
開発者「8px？はい、（ソースの）10pxを8pxに直しておきました」

　結果；font-size:8px,transform:scale(0.6) 　

…実際は8px以下にはならないので10pxの時と何も変わりません…ということが起こりえます。（それ以前に8px以下に修正しても意味ないじゃん等のツッコミはさておき）

・マージンが違うと思ったら
本来10pxのマージンの場所が、なぜか見た目上は20pxになっているとします。
起票者「（なんか間が広いな…）正しくはマージン10pxです！」
開発者「最初から10pxですよ！」
起票者「もしかして何かソースの都合で変な表示になってるのかな…じゃあ5pxで指示したら直るのかな？」
開発者「5pxにしてみました」
起票者「あれ…また違う幅になっている」

これは、line-heightが大きく設定されてしまっていて、本来のマージンよりも広く見えてしまっていたことが原因というケースでした。
（もちろんデザイナー側にもブラウザの開発者モードで検証できる知識があれば、このような齟齬は大幅に減ります）
事前に必要なこととして「開発者へデザインツールから情報取得の仕方の共有」を挙げていましたが、「この情報はInspectorのここを見てほしい」などをしっかり共有しておかないと、「そこ見ないとわからない情報だったんだ！」ということもあるので実施しておきましょう。

4.正確なデザイン修正指示

ネイティブアプリ開発でも、デザインチェックする際にはデバイスでチェックし、スクリーンショットなどをPCでデザインと比較するパターンがあると思います。
こちらもチェックした際、不足がある指示では誤認される場合があるので、先に上げた①②③④を元にしっかり指示していく必要があります。簡易的な修正対応は第3者が行うことも多いと思いますし、誰が見ても解るようにしたいところです。

丁寧に、齟齬が起きないことを意識していればごく当たり前の事だと思いますが、慣れないうちや面倒と思ってしまうと省略しがちになります。
私も慣れてくると省略してしまう癖があり、後で失敗したと感じる結果になることがあるのですが、丁寧にやった方が結果的に工数が減るのは然りなので、面倒がらずに進めていくことが大切ですね。