紙面デザイナーが、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

執筆者:森島[ WEBデザイナー ]

8bit デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

プログラミング

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ②

前回はLINE Developersでチャネル登録までを行いました。 今回は実際にPHPでログインを実装していきます。 目次1 初期設定を定数にする2 LINE ログインのURLを作成する3 コールバック時の処理4 最後に 初期設定を定数にする 最初にdefineでチャネル登録した情報やAPIのURLを定義します。 メールアドレスを取得したい場合はLINE_SCOPEに「email」を追記してください。 LINE ログインのURLを作成する LINEログインに利用するログイン […]

Webサービス

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ①

今回はLINEログインです。 LINEログインは他のソーシャルログインと違って、電話番号必須なので、ユーザーがアカウントを無限に発行するということがなく、しかもOSに関係なくアカウントを使用できるので、特にB2Cサービスを考える場合には是非導入を進めたいと思います。 逆に法人サービスで使う場合、法人担当者が個人のLINEアカウントを使用することはないと思うので、あくまで個人向けサービスがよいかなと思います。 LINEログインについての概要はこちらに詳しく書いています。 htt […]

プログラミング

【PHP】ソーシャルログインに対応したお話(Apple ID編) ②

目次1 前回のおさらい2 実装に必要な情報3 PHPで実装してみる4 戻り先の処理4.1 composerでライブラリのインストール4.2 処理の説明4.3 実際のソース5 最後に 前回のおさらい 前回は「Appleでサインイン」を実装する前の下準備をまとめました。 今回は実際にPHPで実装をしたいと思います。 なお、ソーシャルログインについて実はFirebase上でできるぽいのですが、今回はそれを使わずに実装したいと思います。 実装に必要な情報 前回Apple Develo […]

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

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

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

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。