この記事は次のような方に向けて書きました。
・見やすく操作しやすいWebサイトを作りたい
・Webデザインをするときの推奨されている画面サイズを知りたい
この記事を読んでいただくと、これらのことが解決し、見栄えが良く使いやすいWebサイトを作ることができるようになります。
どうぞ最後までご覧になってください。
Webサイトのサイズとは
コンテンツとは、Webサイトの中身が詰まった部分のことを指して、Webサイトにとって大切なエリアです。
Webサイトを制作するには、コンテンツの中身が伝わるようにレイアウトしてデザインをすることが必要です。
そのためにも適切なコンテンツ幅を設定することが重要です。
ブラウザサイズとコンテンツサイズ
・コンテンツサイズ ⇨ Webサイトの中身が詰まった部分
・ブラウザサイズ ⇨ ブラウザの中での表示エリアの大きさ
ブラウザを表示している画面サイズは、パソコン上で自在に変更できるので、必ずしもパソコンの横幅と同じサイズとは限りません。
その一方、コンテンツサイズというのは、Webサイトの中身が詰まったエリアの大きさのことを指します。
サイトの情報が届きやすいようにするために、ブラウザの中で最適なコンテンツサイズを決めます。
なので、コンテンツ幅の最大値を設定して、ブラウザサイズがその最大値よりも大きい場合は、左右に余白を入れるようにして、コンテンツが読みやすいようにしましょう。
レスポンシブWebデザイン
多くの人がスマートフォンを使うようになりましたが、どの大きさのデバイスから見てもWebサイトが最適な状態で見ることができるために、レスポンシブWebデザインは大切です。
SEOサービスを提供しているドイツ企業のSISTRIX（シストリックス）によると、2022年現在、日本ではWeb検索の約75％がスマートフォンからの検索であるという調査結果が出ています。
Webデザインを制作する際に推奨する画面サイズ
ここで、Webデザインに最適なサイズをご紹介します。
2022年4月の時点では、パソコンとスマホのそれぞれの画像サイズは次の通りになります。
・パソコンの画像サイズは「横幅1920px」または「横幅1366px」
・スマートフォンの画像サイズは「横幅375px」または「横幅400px」
パソコンの画像サイズは「横幅1920px」または「横幅1366px」
日本で使われているパソコンのサイズは、「1920×1080」「1366×768」のものが一番多く、最適なWebデザインのサイズなので、横幅は1920pxか横幅1366pxが最適なサイズです。
Webサイトは基本的に縦にスクロールするので、縦のサイズは、必要に応じて自由に設定します。
Webサイトやランディングページを作るときには、このサイズで作るとデザインが美しくなります。
2022年4月時点では、1920×1080のサイズで見ている人が一番多く、パソコンに関してはシェア率の高いデバイスの等倍サイズでWebサイトを作るのが良いと言われています。
スマートフォンの画像サイズは「横幅375px」または「横幅400px」
「375×667」はiPhone、そのほかはAndroidのスマートフォンです。
Androidのスマートフォンの場合は、画面サイズが色々とあるので、「横幅400」と考えられます。
なので、スマートフォンにおける最適なWebデザインの横幅は「375px」または「400px」というように言えます。
Retinaディスプレイとは
Retinaディスプレイとは、2010年に発売されたiPhone4に搭載されたディスプレイのことです。
Retina ディスプレイのピクセル密度はとても高く、通常画面を見るときの距離では、人間の目で一つ一つのピクセルを見分けることはできません。そのため、コンテンツが色鮮やかに細部まで再現され、画面の美しさに圧倒されます。
従来のディスプレイでも十分綺麗なのですが、Retinaディスプレイの方が解像度が高く、具体的に比べてみると、HDディスプレイでは1920×1080なのに対して、Retinaディスプレイでは2880×1800となります。
つまり、HDディスプレイよりも約２倍のpx数で画像を表示していることになるので、画像自体を２倍で書き出す必要があります。
「Rerinaディスプレイ：デザインの横幅計算式
375px(iPhone7の物理的な横幅) × 2倍(デバイスピクセル比)
＝ 750px(iPhone7のブラウザで実際に表示される大きさ)
画面サイズとレイアウトについて
パソコンではウインドウサイズが可変できるので、その可変したサイズに応じて、コンテンツがどういう動きをするのかを考えないといけません。
そしてスマートフォンでは、色々な機種の画面幅や高さに対応しなければいけません。
そう言うことに対応したデザインのことを、レスポンシブWebデザインと言うのですが、レイアウトについても考えないといけません。
レスポンシブWebデザインのレイアウトには次の3つのような種類があります。
・ソリッドレイアウト
・リキッドレイアウト
・フレキシブルレイアウト
ソリッドレイアウト
ソリッドレイアウトのメリット
ソリッドレイアウトのデメリット
リキッドレイアウト
リキッドレイアウトのメリット
リキッドレイアウトのデメリット
Webデザインの画面サイズを考える上で理解しておきたい3つのこと
その上で、Webデザインのサイズを考える上で、理解しておきたい用語が次の3つです。
・ファーストビュー
・アートボード
・リキッドレイアウト
ファーストビュー
ファーストビューを魅力的にするには、最適な縦幅のサイズを考えることが必要です。
アートボード
Webデザインにおいてアートボードとはブラウザの幅のことで、実際に表示される部分のことです。
Webデザインの適切なサイズは、アートボードのサイズとも言い換えることができて、現場では「アートボードの横幅を1920pxにする」などと言って使います。
リキッドレイアウト
拡大したり縮小に対して耐えられるデザインを作るために、リキッドレイアウトの考え方は頭に入れておきましょう。
レスポンシブWebデザインでは、パソコンで表示するときはソリッドレイアウトで、スマートフォンで表示する場合はリキッドレイアウトであることが多いです。
Webデザインを制作する際に気をつけたい5つのこと
Webデザインのサイズについて理解しておきたい用語を伝えてきましたが、これらの用語を頭に入れておくことで、Webデザインについての理解がしやすくなります。
・コンテンツ幅
・画像サイズに端数を出さない
・位置を合わせるときの基準点を揃える
・使用するフォントは幅広く使われているものを
・アートボードの数
コンテンツ幅
コンテンツのサイズをよく確認して、ほんの少しでもずれがないように注意して調整しましょう。
画像が敷き詰められたデザインだと、たった1pxでもずれてしまったら、バランスが悪くなったり、余白が目立ったりする原因になりますので、コンテンツ幅にずれが出ないように注意してデザインをすることが大切です。
画像サイズに端数を出さない
基本的に端数が出ることはないのですが、グループごとでサイズを変更したり、％で拡大したり縮小したりなどの作業をした時に端数が出ることがあります。
このような作業をした際には、再度サイズをチェックして、横幅・縦幅・位置に端数が出ないように注意しましょう。
端数が出てしまうと、端数の分が切り上げられてサイズが増えてしまい、画像の端がぼやけててしまうこともあります。
位置を合わせるときの基準点を揃える
特にページごとに作る人が違う場合は、バラバラになることもあるので、注意が必要です。
基準点のルールを事前に決めて、共有しておくと良いでしょう。
次の2つのような理由がない限り、基準を揃えておいた方が良いです。
・ルールに合わせることで不都合が出る
・デザイン性を重視して意図的に変えている
使用するフォントは幅広く使われているものを
一般的でないフォントの場合になると、Webページを表示するデバイスによって表示されるフォントが変わることもあります。
Webフォントを使う場合は、どのデバイスからでも同じフォントを表示することができますが、サイトの表示スピードが遅くなるので、注意しましょう。
アートボードの数
必要最低限のアートボードで作業するようにしましょう。
Webデザインの最適な画像サイズは時代や目的によって変化
これからまた新たな人気端末が発売されてシェアが広がるとまた大きく変化するだろうと言われています。
Webサイトのターゲット層からよく使われているブラウザを調べてサイズ決定の参考にすると良いですが、どうしても決められない場合は、競合サイトのサイズを参考にしてみましょう。
ユーザーにきちんと情報を伝えられるように、Webサイトには最適なサイズを設定することが大切です。
Webデザインをする際のおすすめの文字サイズと文字数
文字のサイズは、小さすぎると読みにくいし、かといって大きすぎると洗練されていないような印象になります。
文字が読み取りやすくなって情報が伝わりやすくするためには最適なサイズがあります。
・推奨は16px
・最小は10px
・読みやすい文字数は15〜35文字以内
推奨は16px
16pxはGoogleに推奨されている文字サイズで、Webサイトでは、14pxから16pxの文字サイズが使われていることが多いです。
また、Web上のニュースや情報サイトなどでは、読みやすいようにやや大きめの文字サイズが使われています。
最小は10px
ブラウザによって最小の文字サイズが決められているのは、ユーザーが読みやすい文字サイズのレベルを保つために配慮されているからです。
読みやすい文字数は15〜35文字以内
横に並ぶ文字数が多いと、視線の動きが長くなって疲れてしまいますよね。
スマートフォンのおすすめのボタンサイズは44px
タップできるサイズであり、スマートなデザイン性も保てるサイズとして採用されているので、あらゆるWebデザインでもボタンのサイズは44pxであることが多いです。
関連記事
画像サイズをHTMLとCSSを使って変化させると言う記事があったので、ここでご紹介します。
>>【HTML＋CSS】ウインドウ幅に合わせて画像サイズを変化させる方法
まとめ
・Webサイトのサイズとは
・ブラウザサイズとコンテンツサイズ
・レスポンシブWebデザイン
・Webデザインを制作する際に推奨する画面サイズ
・パソコンの画像サイズは「横幅1920px」または「横幅1366px」
・スマートフォンの画像サイズは「横幅375px」または「横幅400px」
・Retinaディスプレイとは
・画面サイズとレイアウトについて
・ソリッドレイアウト
・ソリッドレイアウトのメリット
・ソリッドレイアウトのデメリット
・リキッドレイアウト
・リキッドレイアウトのメリット
・リキッドレイアウトのデメリット
・フレキシブルレイアウト
・フレキシブルレイアウトのメリット
・フレキシブルレイアウトのデメリット
・Webデザインの画面サイズを考える上で理解しておきたい3つのこと
・ファーストビュー
・アートボード
・リキッドレイアウト
・Webデザインを制作する際に気をつけたい5つのこと
・コンテンツ幅
・画像サイズに端数を出さない
・位置を合わせるときの基準点を揃える
・使用するフォントは幅広く使われているものを
・アートボードの数
・Webデザインをする際のおすすめの文字サイズと文字数
・推奨は16px
・最小は10px
・【HTML＋CSS】ウインドウ幅に合わせて画像サイズを変化させる方法
同じパソコンやスマートフォンなどでも、いろんな画面サイズがあって、それに対応するために、レスポンシブWebデザインと言うものがあることがわかりました。
そして、パソコンやスマートフォンに推奨する画面サイズがあると言うことがわかったね。
しかし、画面サイズに正解はなく、これからの時代の移り変わりで変化していくのが、Webデザインの世界であると言うこともお話ししてきました。
この授業を受けたことで、より見やすく操作しやすいWebサイト制作のヒントになれたら幸いです。
私たちは頑張るあなたを応援しています。
