IT知識
普段皆さんはなんとなくWebサイトを見ていると思いますが、実はWebサイトには適切なサイズがあることをご存知でしたか？
最近はコロナウイルスの影響もあり、Webサイトを作ったりデザインをしたいという需要がかなり増えています。
もちろんキレイなデザインを作ることも大事ですが、適切なサイズを知らなければ、文字や画像が崩れ、ユーザーが呆れてサイトを離れることにもなります。
せっかく寝る間も惜しんで作ったサイトなのに、すぐに離れるのは大きな機会損失です。
そこで今回は、Webサイトの適切なサイズと、デザイン時の注意点を紹介していきます。
この原則を理解できれば、素敵なデザインを作ることができます。逆にこの原則をおろそかにすると、デザインが台無しになるのでぜひ読んでいってください。
某IT企業でエンジニアとして約1年ほど勤務し、サイト構築を経験。難しいプログラミングを分かりやすく解説できるよう日々精進中。
Webサイトのサイズを決めるときに押さえたい言葉
まずは、Webサイトのサイズを決めるときに押さえたい言葉を紹介します。
Webサイトを作る際に必要な要素はたくさんありますが、以下の言葉は基本的なものです。
以下の言葉を知っているだけで、「パソコン用のWebサイトを作る時はこのサイズにすればよいのか」と感覚ではなく実際に理解できるので、ぜひ退屈だなと思わずに読んでもらえると嬉しいです。
では紹介していきます。
デバイスサイズとは？
デバイスサイズとは、パソコンやスマートフォンの横幅を言います。
例えば、「1920px×1080px」と表記があった場合は「1920px」、スマートフォンで「375px × 667px」の場合、「375px」がデバイスサイズとなります。
コンテンツ幅とは？
コンテンツ幅とは、Webサイトの文字や画像を入れるための枠を言います。
もしコンテンツ幅を意識せずにサイトを作成すると、スマートフォンで見た時に文字の余白がなく見づらいと感じ、ユーザーがサイトから離れてしまう可能性があります。
パソコンで見る場合とスマートフォンで見る場合を想定してコンテンツ幅を設定しなければいけません。
アートボードとは？
アートボード幅とは、photoshopやAdobeXDなど画像編集ソフトを使用する際の外枠を言います。
例えば、チラシ作成であれば印刷される範囲、パソコンやスマートフォンで画面のスクリーンショットを撮影する場合であれば、表示される範囲のことをアートボード幅と言います。
Webサイトの適切なサイズとは？
Webサイトを制作する際は、パソコンで見る場合とスマートフォンで見る場合を想定し、適切なサイズで制作しなければなりません。
ではそれぞれどのくらいのサイズで作成すればよいのでしょうか？
ここではデータをもとに解説していきます。
パソコンの場合は横幅1920pxあるいは横幅1536px
パソコンで見る場合は、横幅1920pxもしくは1536pxが理想のサイズです。
理由は上記画像のとおり、「1920px×1080px」 「1536×864px」が日本国内で上位のシェアを取っているからです。
スマートフォンの場合は横幅390pxあるいは横幅375px
スマートフォンで見る場合は、横幅390pxもしくは375pxが理想のサイズです。
理由は上記画像のとおり、「390px×844px」 「375×667px」が日本国内で上位のシェアを取っているからです。
日本国内で利用されているスマートフォンのほとんどがiphoneのため、390pxで作成するとキレイなデザインが作成できるでしょう。
Webサイトの制作時は「レスポンシブデザイン」への対応が必須
”
Webサイトを制作する際は、レスポンシブデザインへの対応が必須となってきます。
「一度は聞いたことがある」と思った方もいると思いますが、全く聞いたことがない人もいるでしょう。
この章ではレスポンシブデザインの概要と対応するメリットについて解説していきます。
レスポンシブデザインの概要
レスポンシブデザインとは、パソコンやスマートフォンのサイズに依存しないようなデザインを作成することを言います。
例えば、パソコンでは違和感なくページを見られていたのに、スマートフォンで見た時に文字のすき間が詰まっていて見づらいと、ユーザーは離脱してしまいます。
せっかくWebサイトを作ったのにもったいないですよね。
レスポンシブデザインのメリット
この章では、レスポンシブデザインの対応をすることでどのようなメリットがあるのかを解説していきます。メリットは大きく3つあります。
1.スマートフォンの画面でも快適に見られ、使いやすさが向上する
メリットの1つ目は、スマートフォンの画面でも快適に見られ、使いやすさが向上することです。
現在スマートフォンの利用率は70%近くあります。ほとんどの方がスマートフォンで情報収集をしています。
例えば、仕事の休憩中にわざわざパソコンを開いて情報収集する方はほとんどいないと思います。
なので、レスポンシブデザイン対策をしていれば、検索されたうえでWebサイトを見てもらえる確率は高くなります。
2. モバイルフレンドリー対応でSEOに有利
メリットの2つ目は、モバイルフレンドリー対応をしていると判断され、SEOで有利になることです。
SEOはご存知の方も多いですが、検索上位に表示されることを言います。
SEO対策の方法はたくさんあります。しかし、レスポンシブデザイン対策がされていることで、Googleが「このWebサイトはスマートフォンから検索されるかもしれない」と判断し、検索上位に表示される可能性が高くなります。
検索上位に来てしまえば、努力して作成したサイトが多くの方に見られ、売上アップにつながるでしょう。
3. URLが1つなのでユーザーにSNSでシェアされやすい
メリットの3つ目は、URLが1つなのでSNSでシェアされやすいことです。
例えば、パソコン用のWebサイトとスマートフォン用のWebサイトをそれぞれ作成したとしましょう。
仮にデザインがとてもよく、ユーザーが「他の人にもこのサイトを見て欲しい」と思った場合、URLが2つあったらどうでしょう？
「パソコン用のURLはこちらでスマートフォン用はこちらです」と2回URLを貼らなければなりません。
このように考えたら、「面倒だからシェアするのはやめよう」となりせっかくの機会が台無しです。
以上の点からも、レスポンシブデザイン対策を行うことが重要であると分かっていただけたはずです。
ただ中には、「レスポンシブデザインの重要性は分かったけど、どうすればいいの？」と思った方もいるでしょう。
そこで以下の章では、レスポンシブデザインをする際のポイントを解説していきます。
レスポンシブデザインに対応させる場合のポイント
レスポンシブデザインに対応させるポイントは、画像や動画をそれぞれのサイズで最適化することです。
例えば当たり前ですが、パソコン用のWebサイトを作成した場合、画像の容量は大きくなります。
ただし、その容量のままスマートフォンでWebサイトを見ると、画像の容量が大きすぎてうまく読み込みません。
せっかくデザインが素敵な出来なのに、読み込み時間が長くなると、ユーザーはストレスを感じてそのサイトから離れてしまいます。これは分かりやすい動画を組み込む場合も同じです。
パソコン用の動画容量のままスマートフォンで再生すると同じく負荷がかかり、場合によっては固まることもあります。
「パソコン用とスマートフォン用で作り変えるのは面倒だよ」と思うかもしれませんが、この対策を出来るかできないかで会社の売上が変わると言っても過言ではありません。
Webサイトのデザイン時に注意したいこと
Webサイトをデザインする時には注意しなければならない点が多くありますが、今から解説する5つの点は特に注意してほしい基本的な要素になります。
以下の点を守って作成するだけでも、素晴らしいサイトを作成できるので、ぜひ読んでみてください。
コンテンツの幅を調整する
1つ目は、コンテンツの幅を調整することです。
Webサイトは文字や画像を使って構成されています。構成を理解した上で、パソコンやスマートフォンのデバイスを確認してからコンテンツの幅を考えましょう。
「たった1pxずれたくらいで大したことないでしょ」と思う方もいるかもしれません。
しかし、1pxずれるだけでも文字や画像のバランスが崩れ、無駄な余白が見えます。
すると、ユーザーは違和感を感じ離脱します。コンテンツの幅を意識してデザインをしましょう。
サイズは端数が出ないようにする
2つ目は、サイズに端数を出さないことです。
多くの場合がサイズで端数が出ることはありませんが、デザインしている段階で、pxではなく%でサイズ調整をしている場合はまれに端数が出ることがあります。
そうなれば1つ目の内容と重複しますが、サイズが増えてしまい色がぼやけてしまう可能性もあります。
なので、サイズはpxで統一した上で、よほどのことがない限りは端数を出さないようにしましょう。
位置合わせの基準点をそろえる
3つ目は位置合わせの基準点を揃えることです。
デザインの基本原則の中に「整列」という概念があります。
これは、箇条書きの際に左端は揃えましょうと言ったルールです。
基本的に1人のデザイナーがデザインする時は問題ありません。
しかし複数のデザイナーが違うデザインを行う場合、基準を決めなければ全く違う意デザインになります。
良くいえば個性になりますが、ページごとにレイアウトなどが違えばユーザーが違和感を感じることもあります。
適切なフォントサイズも考えておく
4つ目は、適切なフォントサイズも考えることです。
パソコンで見る時とスマートフォンで見る時には、フォントサイズを変えなければなりません。
例えば、パソコンで見ることを想定し大き目のサイズでデザインしても、そのフォントのままスマートフォンで見ると、大きすぎて見づらくなり、サイトから離れてしまうこともあります。
逆に、スマートフォンで見ることを意識してデザインして、パソコンで見ると小さすぎて読みづらい場合もあります。
適切なフォントサイズを考えること大事です。
ちなみに、Googleが推奨しているのはパソコン・スマートフォンともに「16px」です。
このサイズを基準にするのもよいでしょう。
アートボードの数を少なくする
5つ目は、アートボードの数を少なくすることです。
アートボードとは、デザインをWeb上で行う際のキャンバスのようなものです。
アートボードは容量がかなり大きいため、複数開いてしまうとパソコンが対応しきれず、最悪の場合画面が固まってしまうこともあります。
デザインをする際は、最低限のアートボードだけを残し、不要なものは早い段階で削除することをおすすめします。
まとめ
本記事では、Webサイトの適切なサイズと、Webデザインをする際に注意する点を解説してきました。
最近はコロナウイルスの影響もあり、今まで以上にWebサイトやデザインの重要性が注目されています。
少し難しい話もあったと思いますが、この施策をすることでサイトを見てもらえる確率が上がることは間違いありません。
ただ「そうは言ってもWebに詳しくないから無理だよ」と思う方もいるかもしれません。
Jiteraでは経験豊富なWebサイト制作のプロが、初心者が見落としがちな細かい部分までヒアリングを行い、希望に合わせてサイトを制作します。
この記事を読んで「Webに関する知識がないから相談したい」という方は以下のリンクをクリックしていただけたらと思います。
