もう、SP用のWebデザインを倍の解像度で作るのをやめよう

デザイナーがコーディングできるべきかという議論がSNS上で白熱していますが個人的にはあまり興味がなく、コーディング経験の有無に関係なくWebに適したデザインデータを作ってもらえたらあとはフロントエンドの領分であると思っています。

とはいえ、Webに適したデザインデータをつくれないデザイナーが多いのでああいった議論が白熱するのではないかとも思っています。

Webに適していないデザインデータとはどういったものかというと、古くから言われているものではPhotoshopの『乗算』を使うとCSSで表現できないためダメというものがあったりします。

CSSでもmix-blend-modeという機能で対応できるけどブラウザの対応状況を鑑みるに、よほどの理由がないかぎりPhotoshopの『乗算』を使っていはいけないのが今の現実です。

参考：mix-blend-mode - CSS: カスケーディングスタイルシート | MDN

最近、落ち着いたかなと思うことにはアイコンなどのグラフィックパーツは極力ベクターデータで作成するというお作法。

ラスター画像でしか書き出しできないパーツはpngで出力することになり高精細度ディスプレイや高精細度モニタでぼやけて見えてしまうので結局最終的にsvgに差し替えることになり実装や確認をするプレーヤーのコストも考えると２度手間では済まないコストが掛かってしまうので、最初からsvgで出力できるベクターデータで作成するのが好ましいのが現在の多くの現場の現実です。(これもPhotshopのデザインデータにありがちな現象です。)

本題

そして最近思っていることであまり議論されていないものとして、SP用のデザインを倍の解像度で作成する必要がないというもの、FigmaやAdobe XDで渡されるデザインデータにはないのですが、やはりPhotshopのデザインデータにありがちな傾向です。

9年ほど前に「スマートフォンサイトをデザインする上で知っておくべき10のTIPS」という記事を書いてそこそこバズったのですがそこで書いた倍の解像度でデザインするという慣習が残っているようですが、レスポンシブが普及してSVGが使えるようになった今、倍の解像度で作る必要が全く無いです。

そもそも、なぜ倍の解像度でデザインする必要があったかというと、iPhone4が発売された当初は先程述べたSVGが利用できない端末も多く高精細度ディスプレイ対応としてSVGを利用することができなかったのでpngで表現するしかなくデザイン作成のタイミングから高精細度ディスプレイ用に倍の解像度で作っておこうというものでした。

また当時のサイトは割とグラフィカルなサイトが多かったのですが、フラットデザインから始まる昨今のシンプルなデザイントレンド上においては写真以外でラスター画像が必要なケースというのが少なくなってきています。(当然例外もあります）

そして、レスポンシブが一般になった今、最終的にPCとSPで同一の画像データを扱うのが一般的なのでSPのデザインデータの解像度を倍にする理由がほとんどありません。高解像度の画像が必要なケースもありますがこれは高解像度の画像をデザインデータに埋め込めばよいのでわざわざベースの解像度を倍で作成する必要はないでしょう。

というわけでSP用のWebデザインを倍の解像度で作成するメリットはほとんど無くなってきています。

PC用とSP用のデザインデータを作成する際に各パーツのサイズを変えて配置するのは本当に無駄な作業なのでやめたほうがよいでしょう。

(もう、WebデザインはPhotshopで作らないほうが良いのではとも思っておりますが、これは私の領分ではないので深くは言及しません。

スポンサードリンク

«ReactのuseRefを再描画がかからないState管理として利用する | メイン | 自宅ネットワーク高速化の道のり»