この記事は次のような方に向けて書きました。

この記事を読んでいただくと、これらのことが解決し、見栄えが良く使いやすいWebサイトを作ることができるようになります。

どうぞ最後までご覧になってください。

Webサイトのサイズとは

先生

Webサイトの横幅やサイズというのは、コンテンツ幅のことを言うんだ。

コンテンツとは、Webサイトの中身が詰まった部分のことを指して、Webサイトにとって大切なエリアです。

Webサイトを制作するには、コンテンツの中身が伝わるようにレイアウトしてデザインをすることが必要です。

そのためにも適切なコンテンツ幅を設定することが重要です。

ブラウザサイズとコンテンツサイズ

デザイニャー

コンテンツ幅とブラウザサイズって、なんだか混同しそうだニャン。

先生

ここでコンテンツサイズとブラウザサイズについて整理しておくね。

ブラウザを表示している画面サイズは、パソコン上で自在に変更できるので、必ずしもパソコンの横幅と同じサイズとは限りません。

その一方、コンテンツサイズというのは、Webサイトの中身が詰まったエリアの大きさのことを指します。

サイトの情報が届きやすいようにするために、ブラウザの中で最適なコンテンツサイズを決めます。

先生

例えば大型の横幅の広い大きなパソコンだったら、ブラウザの横幅いっぱいにコンテンツを広げると、間延びして読みとみづらくなることもあるんだ。

レスポンシブWebデザイン

多くの人がスマートフォンを使うようになりましたが、どの大きさのデバイスから見てもWebサイトが最適な状態で見ることができるために、レスポンシブWebデザインは大切です。

レスポンシブWebデザインで何ができるの?メリットや作る方法を解説この記事は次のような方へ向けて書いています。 ・レスポンシブWebデザインで何ができるのかを詳しく知りたい ・レスポンシ...

Webデザインを制作する際に推奨する画面サイズ

先生

Webデザインを作るときには、Webサイトのサイズに合わせて作るんだ。

ここで、Webデザインに最適なサイズをご紹介します。

2022年4月の時点では、パソコンとスマホのそれぞれの画像サイズは次の通りになります。

パソコンの画像サイズは「横幅1920px」または「横幅1366px」

日本で使われているパソコンのサイズは、「1920×1080」「1366×768」のものが一番多く、最適なWebデザインのサイズなので、横幅は1920pxか横幅1366pxが最適なサイズです。

Webサイトは基本的に縦にスクロールするので、縦のサイズは、必要に応じて自由に設定します。

Webサイトやランディングページを作るときには、このサイズで作るとデザインが美しくなります。

2022年4月時点では、1920×1080のサイズで見ている人が一番多く、パソコンに関してはシェア率の高いデバイスの等倍サイズでWebサイトを作るのが良いと言われています。

デザイニャー

でも、実際にそのサイズだと、デスクトップが完全に隠れてしまうから避けているという人もいるらしいけどニャン。

先生

その場合は、1920サイズ時のことを考えてデザインするのであれば、1280pxや1440pxのサイズでも問題ないよ。

スマートフォンの画像サイズは「横幅375px」または「横幅400px」

先生

日本でのスマートフォンのサイズは、「375×667」が一番多くシェアされているんだ。

「375×667」はiPhone、そのほかはAndroidのスマートフォンです。

Androidのスマートフォンの場合は、画面サイズが色々とあるので、「横幅400」と考えられます。

なので、スマートフォンにおける最適なWebデザインの横幅は「375px」または「400px」というように言えます。

デザイニャー

日本ではiPhoneがいちばん多く使われているから、「横幅375px」で作ると良いということだニャン。

先生

だから、750×1334で作れば問題ないよ。

デザイニャー

ん!? 何のことを言っているのか訳がわからないニャン。

先生

推奨サイズから２倍にするのは、Retinaディスプレイというもののためにするんだ。

デザイニャー

Retinaディスプレイってなんだニャン?

Retinaディスプレイとは

Retinaディスプレイとは、2010年に発売されたiPhone4に搭載されたディスプレイのことです。

先生

公式サイトで次のように説明されているんだ。

Retina ディスプレイのピクセル密度はとても高く、通常画面を見るときの距離では、人間の目で一つ一つのピクセルを見分けることはできません。そのため、コンテンツが色鮮やかに細部まで再現され、画面の美しさに圧倒されます。

出典：Apple公式サイト

従来のディスプレイでも十分綺麗なのですが、Retinaディスプレイの方が解像度が高く、具体的に比べてみると、HDディスプレイでは1920×1080なのに対して、Retinaディスプレイでは2880×1800となります。

つまり、HDディスプレイよりも約２倍のpx数で画像を表示していることになるので、画像自体を２倍で書き出す必要があります。

「Rerinaディスプレイ：デザインの横幅計算式

375px(iPhone7の物理的な横幅)　×　2倍(デバイスピクセル比)

＝　750px(iPhone7のブラウザで実際に表示される大きさ)

参考元：Qiita_iPhone/iPad/Apple Watch解像度(画面サイズ)早見表」

デザイニャー

つまり、スマートフォンでは、シェア率の高いデバイスの２倍のサイズで作ると良いってことだにゃん。

画面サイズとレイアウトについて

先生

パソコン画面の推奨サイズについてお話ししてきたけれど、他にも気にしないといけないことがあるんだ。

パソコンではウインドウサイズが可変できるので、その可変したサイズに応じて、コンテンツがどういう動きをするのかを考えないといけません。

そしてスマートフォンでは、色々な機種の画面幅や高さに対応しなければいけません。

そう言うことに対応したデザインのことを、レスポンシブWebデザインと言うのですが、レイアウトについても考えないといけません。

レスポンシブWebデザインで何ができるの?メリットや作る方法を解説この記事は次のような方へ向けて書いています。 ・レスポンシブWebデザインで何ができるのかを詳しく知りたい ・レスポンシ...

レスポンシブWebデザインのレイアウトには次の3つのような種類があります。

ソリッドレイアウト

先生

ソリッドレイアウトというのは、ウインドウの幅にかかわらず、コンテンツを固定の幅で表示するレイアウトのことをいうんだ。

ソリッドレイアウトのメリット

先生

ソリッドレイアウトのメリットは、幅によってデザインが変わることがないので、幅の中でデザインが自由にできるところなんだ。

ソリッドレイアウトのデメリット

先生

ソリッドレイアウトは固定幅になるから、閲覧するデバイスによって左右の余白がやたら広くなったり、または見切れて横にスクロールしなくてはいけなくなることもあるんだ。

リキッドレイアウト

先生

リキッドレイアウトというのは、ウインドウの幅に合わせてコンテンツの表示が可変するレイアウトのことを指すんだ。

リキッドレイアウトのメリット

先生

リキッドレイアウトのメリットは、どんな画面幅でも横にスクロールすることがなく、左右にも余白ができることもないところなんだ。画面いっぱいに自由でインパクトのあるデザインにすることができるんだ。

リキッドレイアウトのデメリット

先生

画面幅が極端に広かったり狭かったりする場合、可読性が下がることがあるところがデメリットだね。

Webデザインの画像サイズについて｜リサイズや画像を軽くする方法もこの記事は次のような方に向けて書きました。 ・Webデザイン制作で画像を使うときに適したサイズを知りたい ・画像を簡単に...

Webデザインの画面サイズを考える上で理解しておきたい3つのこと

先生

ここまでWebデザインの最適なサイズについてお話ししてきたけれど、パソコンとスマートフォンのサイズについてはしっかり頭に入れておこう。

その上で、Webデザインのサイズを考える上で、理解しておきたい用語が次の3つです。

ファーストビュー

先生

ファーストビューというのは、ウェブサイトを訪問したときに最初に見るページの表示範囲のことを指して、ユーザーがこのページを見続けるかどうかを決める重要なものなんだ。

ファーストビューを魅力的にするには、最適な縦幅のサイズを考えることが必要です。

アートボード

先生

アートボードとは、絵画で例えると、アートワークを作成するためのキャンバスのようなもので、印刷するときや書き出しの時に出力される範囲のことを指すんだ。

Webデザインにおいてアートボードとはブラウザの幅のことで、実際に表示される部分のことです。

リキッドレイアウト

先生

リキッドレイアウトについては前にも述べたけれど、常に画面内にコンテンツが収まるになっているレイアウトのことだったね。

拡大したり縮小に対して耐えられるデザインを作るために、リキッドレイアウトの考え方は頭に入れておきましょう。

先生

そして、リキッドレイアウトとは反対に、コンテンツのサイズが変わらないレイアウトのことをソリッドレイアウトと言ったね。

Webデザインを制作する際に気をつけたい5つのこと

Webデザインのサイズについて理解しておきたい用語を伝えてきましたが、これらの用語を頭に入れておくことで、Webデザインについての理解がしやすくなります。

先生

ここでWebデザインをするときに注意しないといけない点が5つあるのでご紹介していくよ。

コンテンツ幅

先生

コンテンツ幅はずれのないように注意しよう。

コンテンツのサイズをよく確認して、ほんの少しでもずれがないように注意して調整しましょう。

画像が敷き詰められたデザインだと、たった1pxでもずれてしまったら、バランスが悪くなったり、余白が目立ったりする原因になりますので、コンテンツ幅にずれが出ないように注意してデザインをすることが大切です。

画像サイズに端数を出さない

先生

画像サイズの単位はpxで統一して、サイズに端数が出ないように注意しよう。

基本的に端数が出ることはないのですが、グループごとでサイズを変更したり、％で拡大したり縮小したりなどの作業をした時に端数が出ることがあります。

このような作業をした際には、再度サイズをチェックして、横幅・縦幅・位置に端数が出ないように注意しましょう。

位置を合わせるときの基準点を揃える

先生

位置を合わせるときの基準点を揃えることで、コーディングが楽になるし、デザインにも統一感が出るんだ。

特にページごとに作る人が違う場合は、バラバラになることもあるので、注意が必要です。

基準点のルールを事前に決めて、共有しておくと良いでしょう。

次の2つのような理由がない限り、基準を揃えておいた方が良いです。

先生

安易な気持ちでずらす前に、基準点を揃えることを意識するようにしよう。

使用するフォントは幅広く使われているものを

先生

Webサイトで使用するフォントは、多くで利用されているものを使うようにしよう。

一般的でないフォントの場合になると、Webページを表示するデバイスによって表示されるフォントが変わることもあります。

Webフォントを使う場合は、どのデバイスからでも同じフォントを表示することができますが、サイトの表示スピードが遅くなるので、注意しましょう。

アートボードの数

先生

アートボードの数が多すぎるとデートが重くなって動作が遅くなる原因になるんだ。

必要最低限のアートボードで作業するようにしましょう。

Webデザインの最適な画像サイズは時代や目的によって変化

先生

Webサイトの横幅サイズには正解はなくて、サイトの目的や時代によって最適なサイズは異なってくるんだ。

これからまた新たな人気端末が発売されてシェアが広がるとまた大きく変化するだろうと言われています。

Webサイトのターゲット層からよく使われているブラウザを調べてサイズ決定の参考にすると良いですが、どうしても決められない場合は、競合サイトのサイズを参考にしてみましょう。

ユーザーにきちんと情報を伝えられるように、Webサイトには最適なサイズを設定することが大切です。

Webデザインをする際のおすすめの文字サイズと文字数

先生

Webデザインをする上で、文字のサイズに悩むこともあるよね。

文字のサイズは、小さすぎると読みにくいし、かといって大きすぎると洗練されていないような印象になります。

文字が読み取りやすくなって情報が伝わりやすくするためには最適なサイズがあります。

推奨は16px

先生

Webデザインをするときにおすすめの文字サイズは16pxだよ。

16pxはGoogleに推奨されている文字サイズで、Webサイトでは、14pxから16pxの文字サイズが使われていることが多いです。

また、Web上のニュースや情報サイトなどでは、読みやすいようにやや大きめの文字サイズが使われています。

先生

文字サイズを小さくすると、デザイン的に洗練された印象になるけれど、ユーザーによっては読みにくい場合も出てくるから、誰にでも読みやすい16pxの文字サイズが最適だよ。

最小は10px

先生

Google Chromeの場合は、最小の文字サイズは10pxだよ。

ブラウザによって最小の文字サイズが決められているのは、ユーザーが読みやすい文字サイズのレベルを保つために配慮されているからです。

デザイニャー

Webデザインで使用する文字サイズは最小10pxと考えておいた方が良いニャン。

読みやすい文字数は15〜35文字以内

先生

ユーザーが読みやすいと感じる文字数は、横並びで15〜35文字くらいだと言われているよ。

横に並ぶ文字数が多いと、視線の動きが長くなって疲れてしまいますよね。

デザイニャー

文字を読みやすくするために、文章の長さが横に広がりすぎないようにデザインするニャン。

スマートフォンのおすすめのボタンサイズは44px

先生

スマートフォンのボタンサイズは44pxがおすすめだよ。

タップできるサイズであり、スマートなデザイン性も保てるサイズとして採用されているので、あらゆるWebデザインでもボタンのサイズは44pxであることが多いです。

関連記事

画像サイズをHTMLとCSSを使って変化させると言う記事があったので、ここでご紹介します。

>>【HTML＋CSS】ウインドウ幅に合わせて画像サイズを変化させる方法

まとめ

先生

この授業では次の31個のことについてお話ししてきたよ。

同じパソコンやスマートフォンなどでも、いろんな画面サイズがあって、それに対応するために、レスポンシブWebデザインと言うものがあることがわかりました。

そして、パソコンやスマートフォンに推奨する画面サイズがあると言うことがわかったね。

しかし、画面サイズに正解はなく、これからの時代の移り変わりで変化していくのが、Webデザインの世界であると言うこともお話ししてきました。

この授業を受けたことで、より見やすく操作しやすいWebサイト制作のヒントになれたら幸いです。

私たちは頑張るあなたを応援しています。