レスポンシブデザインの作り方で注意すべき0.5pxのバグ原因！

どうも、Tommy(@SitommyBlog)です。

私が以前仕事現場で、レスポンシブコーディング作業をしていてスマートフォン（実機）で確認した際に、変な線が入っていて消えないという現象が起こりました。

その時の対処法や原因を共有したいと思います。

解像度に注意する

知らない人のために説明しておくと、レスポンシブ対応のWebサイトの案件でPCとスマートフォンのデザインを作成する際に、PCの場合は等倍でデザインを作成します。

そして、解像度が高いスマートフォンはデザインを大きく作成する必要があります。

例えば、『iPhone7シリーズ』をベースとするなら、実寸375pxの画面（横幅）に対して2倍の750pxでデザインを作成していくことになります。

ここで重要になってくるのは、表示は必ず半分になるということです。

デザイン上で『高さ100px × 幅200px』のBOXがあったとします。実際にコーディングする際は、『高さ50px × 幅100px』と1/2の大きさで指定していきます。

解像度が高い媒体に合わせてデザインも作成しないといけないと言うことになります。

今は2倍の話をしてますが、今後『4K・5K』が当たり前になってくると、2倍では済まないケースが来るでしょう。

問題になるのは、半分に出来ない奇数サイズを指定した場合です。

例えば1pxの線だった場合、

スマートフォンでは0.5pxは表示されず、周りの色との中間色になった1px線で表示されてしまいますので注意が要ります。

また、線だけなく画像・ボックスの指定でデザインが奇数の場合、レイアウト崩れの原因になりますのでこちらも注意しましょう。

例えば、3等分のレイアウトの場合、100%を3で割ったら『33.333333…』となります。

このように、割り切れない数値があると、コーディングするに際、非常にめんどくさいことになります。

デザイン上では必ず整数で作成しましょう。

偶数でOKとは限らない

偶数にしておけばすべてOKという訳ではなく、解像度を高くする理由をちゃんと理解していくことが大事です。

解像度というのは、2倍だけでなく3倍サイズなどもあります。

もし、3倍でデザインする場合最低の線幅は偶数ではなく奇数の3pxで作成することになります。

先ほども言いましたが、現在は2倍が主流ではありますが、今後3倍、4倍と解像度は上がっていくでしょう。

それにあわせてデザインの最小単位も変化していくことになるので注意して置きましょう。

まとめ

レスポンシブデザインのグリッドで、すべて偶数にすると考えていると必ず矛盾が発生しますので気をつけましょう。

2倍が最適なわけではなく、2倍が最低限の仕様だということです。

こういった解像度が高い端末を想定して今後デザイン・コーディングをしていかなければなりません。

デザインをする方は必須で覚えておき、デザインはしないコーダーやエンジニアの方も知識を知っていればデザインが出来、確認段階で注意が出来ます。

現場では、結構あるあるなので今回を気に意識しましょう。

レスポンシブ対応コーディングになると、1段階ハードルが上がります。

ブレイクポイントといったものがあり、横幅を指定した数値になったら切り替えるという記述をCSSで書かなくてはなりません。

デザイナーもスマートフォン用デザインを作成する際、いろいろ注意することがあり大変かとは思いますが、それ以上にコーディングする人は大変になってきます。

少しでもデザインの段階で解決できる問題はやっておきましょう。

私は、デザインもコーディングもしますので両方の気持ちがわかります。間違いなくコーディングの方がめんどくさいです。

ただ、今ではスマートフォン用サイトがない方が少ないので、初心者の方はレスポンシブにも対応できるスキルを身につけましょう。