画面サイズについての考察

kigoulab-B

2019年10月12日 17:38

とあるセミナーの質問事項に後日回答したメールを、備忘録として掲載します。あくまでも考察なので、いや間違ってるよっと思う点がありましたら指摘ください。

Webデザインをするときの、画面サイズと、インブラウザーデザインに対する考察です。

デザインするときの画面サイズ
==========================

ノートパソコンの全画面表示を台紙にすることを考えます
イラストレーターのドキュメント制作画面で、Webサイト（大型）というのがあり、それのサイズが、

1920×1080px

ですので、これを基準に作成してゆきます。キービジュアル等で左右裁ち切りになっている画像や、全画面表示する画像などは、このサイズを基準にデザインを行います

ドキュメントのサイズ
========================

しかし、上記画面全部を、ドキュメントエリアとしてつかうわけにはいきませんので、ちょっと古いですが、960pxの幅をかんがえて、12カラムのグリッドシステムのガイドラインをひき、それをベースにデザインしてゆきます。

https://960.gs/

しかし、960pxでは少し狭くなってきましたので、その場合は、1024pxや1200px当たりを基準に、下記のようなサイトでグリッドシステムを制作する形になります

http://www.kenjisugimoto.com/gridpx/

実際の素材サイズ
=========================

上記の考え方で、デザインは可能なのですが、ディスプレイはRetinaを初めとする高精細ディスプレイが主流になりましたので、そのまま切りだして使うわけにはいきません。

最低２倍のサイズの画像を、主要な画像（キービジュアルや本文中の挿絵）については、作り直す必要があります。その辺で、フォトショップでなくイラストレーターを使うデザイナーが増えたのかもしれません。とはいえ、写真は２倍サイズを用意する必要があります

画像サイズに対する対策
------------------------------
しかし、大きい画像をそのまま使うわけにはいきません。

まず必要なのは画像の圧縮。

https://www.iloveimg.com/ja/compress-image

こういったサイトで、画像を圧縮します。平均して半分になります。

一方、スマホなど小さなモニターでは、小さい画像をだし、PCでは大きな画像を出す方法もあります。
HTML5のsrcsetディスクリプションをつかって、出し分けする方法があります。以下のように記述します

https://techblog.zozo.com/entry/responsive_images

その他、SVGをつかう、Font AwesomeのWebフォントのアイコン（デザイン的にオリジナルでなくても言い場合）等を活用する
などによって、ファイルサイズをさげ、表示の高速化に対応させます。

https://fontawesome.com/?from=io

インブラウザーデザインに対する考え方
================================

画像サイズの再制作などを考えると、最初から画面単位ではなく、パーツ単位で２倍画像をつくったほうが効率的ということもでてきます。レイアウトは、いっそ、コーディング先行でつくたほうが楽なのではという考え方もでてきます。

ウェブの基本は、グリッドシステムをつかったレイアウトですから、はじめからそういうCSSフレームワークを使った方が良い場合もあります。

そこでコーディング先行でデザインするという考え方がでてくるのですが、そのときの土台になるのが、Bootstrapに代表される、CSSフレームワークです。

https://getbootstrap.com/

https://getbootstrap.jp/docs/4.2/getting-started/introduction/

12分割のグリッドシステム、ジャンプ率を考慮したタイポグラフィー、ボタンなどのデザインなどすでにテンプレートとなるものが用意されています。これをカスタマイズしながら、デザインしてゆくという方法も考えられます。

ブランドを訴求するような、素敵デザインには向いていませんが、一般のコーポレートサイトや業務アプリケーションのインターフェースデザインなどには、適用しやすいです。

以上、駆け足でしたが、自分に対する備忘録をかねて、まとめてみました。ご意見、ご指摘お待ちしています。

=======================
サクッとUXデザイン診断
キゴウラボ
======================

この記事が気に入ったらサポートをしてみませんか？