エディトリアル・グラフィックデザイナーがWebデザイナーになるまで Vol03 可変する表示領域問題

Webデザイナー/ディレクターのヤスハラタカユキです。

不定期にお届けしている「エディトリアル・グラフィックデザイナーがWebデザイナーになるまで」3回目です。

今回はグラフィックからWebにコンバートするにあたり一番悩むであろう、表示領域の違いによる可変するデザインについて書いてみたいと思います。

目次

• Webデザインは可変する
• 基準となるサイズをどうするか問題
  
• 結局どのサイズをファーストビューの基準にするか
• 超縦長、超横長で見ちゃう人対策はどうするの？
• タブレットはどうするんだ問題
• 今回のまとめ

Webデザインは可変する

グラフィックデザインはA4、B4など紙のサイズやパッケージ、看板というようにデザインの領域が決まっています。モノ自体の大きさが変わることはありませんから、その中だけで表現は完結します。

しかしWebというものは見る人のデバイスによって様々なサイズで表示されます。スマホで見る人もいればPCで見る人もいるし、ディスプレイのサイズもそれぞれ違うし、そもそもブラウザを開いたときのサイズもまちまちです。

例えば、すごく細長い画面で見る人もいるかもしれないし、横長の画面で見る人もいるかも。あまりに極端な使い方をする人は除外するとしても、一般的な比率であれば、あらゆるパターンを意識しながらデザインする必要があります。

基準となるサイズをどうするか問題

まず、いま現在PCを使ってWebサイトを見る人達の画面解像度は一体どれくらいなのかを知る必要があります。

取りあえずここ1年くらいの動向をこちらのサイト、statcounterで確認してみましょう。

中程のScreen Resolution Statsをクリックして、チャートデータをエディットするとこんな結果が出ます。

1920×1080が24.92%

1366×768が13.49%

1440×900が4.74%

1280×720が4.28％

2560×1440が2.78%

他

というデータが出ました。

モバイルも一応見てみましょう。

といっても日本の場合iPhoneが寡占状態なので、なんとなく結果は想像できます。

やはりiPhone6以降の画面サイズがほとんどを占めています。

iPhoneX以降の375×667pxが基準と考えて良さそうです。

320×568のiPhone5/SEサイズも3.16%と少し残っていますが、もう正直このサイズは無視したい。

結局どのサイズをファーストビューの基準にするか

上記の検証でPCは最小値で横幅が1280px、縦幅が720pxあれば良さそうです。

スマホはiPhoneXの375×667pxが基準になるでしょう。

といってもPCやスマホにはツールバー等があり、そのサイズをフルに使えるわけではないので、少しゆとりを持たないといけません。PCの場合は天地左右をそれぞれ100pxずつ、スマホの場合は天地を30PXずつ左右を15pxずつマージンとしましょう。

ということで導き出されたファーストビューサイズは

PC＝1080×520px

スマホ＝345×600px

です。

この範囲内で破綻しないようにデザインしておけば、とりあえずほとんどの人は表示崩れすることなく見られるようになっているはずです。

デザイナーはアートボードの横幅を、PCは1920pxもしくは1366pxにして内側1080pxにガイドラインを引く、スマホは375pxにして15pxずつ左右にマージンを取った位置にガイドラインを引いてデザインに励みましょう。

PCの天地520pxはけっこう狭いかもしれないので、本当にどうしようもない場合は700～800pxくらいまで高さをとってもいいかもしれないですね。

この範囲内でデザインが破綻しなければ、大体のケースで崩れることはないはず。

この感覚を覚えて下さい。

超縦長、超横長で見ちゃう人対策はどうするの？

こういう極端な場合はどう対策すればいい？と思うかもしれません。これはコーディングの知識を頭にある程度入れておけば対策が見つかります。

天地左右につっかえ棒をすればいいんです。

具体的には最低縦幅、横幅をCSSで制限してしまいます。ちょっと乱暴なやり方かもしれませんが、極端な方に合わせてデザインすると多くの普通に使っているユーザーに不利益が生じます。

なので基本は見捨てます（笑）。

例えば1080×520pxでつっかえ棒をすれば、これ以下の大きさで見る人たちにはスクロールバーが出ます。

多少不便だけど我慢してねっちゅーことです。

タブレットはどうするんだ問題

そう、タブレットについて何も触れてないですね。

これどうするんだ問題は結構つきまといます。

ちゃんとやるのであれば、PC・タブレット・スマホの3パターンのデザインを考えないといけないのですが、予算や時間の都合ですべては作らないケースが多いです。

なので、強制的にタブレットではPCと同じ表示をする！というようにCSSで指示してしまいましょう。

とりあえず、PCとスマホのデザインだけに専念することができます。

以前はレスポンシブのブレイクポイントをタブレットサイズにして、タブレットの場合はスマホの表示の拡大版みたない感じにしていましたが、今はスマホはスマホ、タブレットはPCの縮小版という考え方が主流です。

今回のまとめ

取りあえずこのサイズでデザインをすればOKという数値を説明しました。

ここらへんの感覚は紙媒体のデザイナーは持ち合わせていないことが多いですが、少し勉強すれば覚えられることなのでGoogle先生に教わりましょう。

あとやっぱりコーディングはやっておくべきですね。

文章を読んで覚えるよりも腑に落ちる感じがありますので。

• PCのモニタサイズは1920×1080px、スマホは375×667px
• PCのファーストビューは1080×520px，スマホは345×607px
• 極端な人のことは忘れる
• タブレットはPCだと思え

ということでした。

ではまたお会いしましょ～。