紙面デザイナーが、WEBやアプリをデザインする時に注意したいことまとめ

  • はてブ

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






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

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

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

03 PC版とスマホ版の2種類の表示



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

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

02 Illustratorの場合

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


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

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

01 Illustratorの場合(Ctrl+K 環境設定の単位の項目です)

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




基本の解像度は72dpi

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

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

◆スマホの解像度は2倍?
スマホ対応したデザインデータを用意する際、この話は避けて通れません。

iPhoneやiPadなどのApple製品のディスプレイはRetinaという規格が採用されており、事実上解像度が2倍です。72dpiの画像をそのままiPhoneで表示すると、少し画像がボケてしまいます。

では、例えば縦横300pxの画像を作るとして、縦横300pxで144dpiの画像を作るのか?と思ってしまいそうですが、違います。
スマホ端末対応の場合は、縦横幅600pxで72dpiの画像を300pxに縮小して表示するという手法をとります。解像度を倍にするのではなく、画像の縦横サイズを倍にしてください。奇数pxの画像を縮小すると、稀にボケてしまう端末があるので、偶数幅にしておくのが良いでしょう。

(2017年時点です。スマートフォンの解像度はすごい勢いで進化しているので、ゆくゆくは3倍4倍の画像が必要になってくるでしょう…)





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

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

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

横幅一杯に拡縮するイメージで写真を使いたい場合の注意点
デジタルの世界では、ブラウザの幅一杯に画像を拡縮して表示することが可能です。(詳しくは「background cover」で検索してください。)
その際、ワイドディスプレイで見た時の写真の表示に注視してください。例えば1980pxのディスプレイを使用し、横幅一杯に画像が伸びると、メインビジュアルに映る写真の人物の頭が切れてしまったりします。

縦幅も可変にできるか、もしくは画像のパターンを用意するなど、事前に確認しておくと親切です。

04 ワイドディスプレイによる表示の違い

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

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

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

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




忘れがちな素材

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

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

05

▽マウスオーバーの表示

06

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

07
08

森島

執筆者: 森島

8bit デザイナーです。 コーディング・jQueryなど幅広く担当しています。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ