昨今、もう切っても切り離せないWEBやアプリ。私自身職業柄、デザイナーの知り合いが多く、良くWEBの注意点を質問されることが多いです。今回はその注意点と、簡単な説明をしてみたいと思います。

対応の端末を事前にしっかりと確認する

事前に確認しておかないと後で工数が予想外に増えてしまったりしてしまうので要注意です。
レスポンシブデザインが主流になりつつある昨今、「スマートフォン専用サイトも必要」と言われれば、デザインを2種類起こす必要が出てきます。タブレット専用も欲しいと言われれば3種類。

おそらくピンときたかと思いますが、見る端末によって見え方が異なるのであれば、もちろんデザインも複数作る必要があるということです。PC版を元によしなに作ってくださいとオーダーを頂くこともありますが、極力作った方が出戻りも少なく済むでしょう。

デザインデータのカラーモードをRGBにする

IllustratorやPhotoshopでのデザインデータの設定です。新規でアートボードを作ったタイミングで作業前に確認してください。


CMYKと異なり、RGBはディスプレイそのままの色味で表示されます。ですが、薄めのグレーとホワイトの境界がわかりづらかったりする環境も存在しますので、デザインによってはコントラストを気持ち強めに作る必要があります。（私が経験した中では、画面全体色が暗くコントラストが淡いディスプレイなどがありました。）
デザイナーの皆さんがお使いのディスプレイは色がしっかり出る良い環境ということを意識した方が良いでしょう。

デザインデータの単位をピクセル（px）に設定する

こちらもIllustratorやPhotoshopでデザインデータでよく見かけるミスの一つでもあります。
まず新規でアートボードを作った直後、全ての単位設定がピクセルになっているか確認してください。この設定をしておかないと、デザインデータを作った後に実際に表示してみると思い通りのサイズ感にならず、調整の手間が発生してしまう場合があります。


実際にどれくらいのサイズで作ったらいいのかという目安は後述します。

基本の解像度は72dpi

デジタルの世界で扱うデータは基本的には72dpiです。デザインデータ上で配置する際に解像度の高い画像を使用するのは構いませんが、実際にWEB上で使用するデータは72dpiとなると考えて良いでしょう。
重い画像をたくさん使用したサイトは表示速度が遅く、また、すぐに表示されないサイトは離脱率が上がってしまいます。表示する前にページを閉じられてしまうのは非常にもったいないので、できるだけ「データ量はコンパクトで綺麗」を心がけましょう。

例えば、PNGやGIF画像を軽量化したい場合は、下記のサービスを使用すると簡単です。こういったサイトは沢山あるので、利用してみるのも良いでしょう。
https://tinypng.com/

デザインデータを作成する際の横幅

私が2017年時点で推奨する基準のサイズです。対応する端末によってサイズが異なるので事前に確認しておきましょう。

◆PC版
PC版はワイドディスプレイもありますが、まだ1280pxのディスプレイを基準として考えるのが良いと思います。
アートボード横幅1600pxで作成し、デザインは1000px前後に収めるのが良いと思います。残りは余白と考えてください。


◆タブレット版・スマホ版
タブレットとPCは前述の解像度2倍問題があるので、例えば320pxのデザインを作りたければ、倍の640pxでアートボードを設定します。（実際はその2分の1の320pxで表示されるので注意）。

タブレットはiPadが768pxなので、1536pxでアートボードを作ります。
スマホは375pxを基準に、750pxで作成するのが無難だと思います。

モバイル端末は所説ありますし、素早くアップデートされていくものなので、エンジニアさんに事前に確認しておくと良いでしょう。

余談ですが、iPhoneXが2,436×1,125pxと発表されています。どうなるんでしょうと心配しています…この心配は発売しないと解決しなさそうですね…

忘れがちな素材

こんな素材は忘れがちです。データ作成完了後に思い出してもらうくらいで良いと思います。

▽ファビコン（ブラウザのタブに表示される小さい画像）



▽マウスオーバーの表示



▽SNSにシェアされた際のサムネイル画像