タイトル:Webサイトの適切なサイズは？デザイン時の注意点なども紹介
普段皆さんはなんとなくWebサイトを見ていると思いますが、実はWebサイトには適切なサイズがあることをご存知でしたか？
最近はコロナウイルスの影響もあり、Webサイトを作ったりデザインをしたいという需要が
かなり増えています。
もちろんキレイなデザインを作ることも大事なのですが、適切なサイズを知らなければ、文字や画像がガタガタになり、ユーザーが呆れてサイトを離れることにもなります。
せっかく寝る間も惜しんで作ったサイトなのに、すぐに離れるのは大きな機会損失になりもったいないです。
そこで今回は、Webサイトの適切なサイズと、デザイン時の注意点を紹介していきます。
この原則を理解できれば、素敵なデザインを作ることができます。逆にこの原則をおろそかにすると、デザインが台無しになるので、ぜひ読んでいってください。
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サイトを見てもらえる確率は高くなります。
- モバイルフレンドリー対応でSEOに有利
メリットの2つ目は、モバイルフレンドリー対応をしていると判断され、SEOで有利になることです。
SEOはご存知の方も多いですが、検索上位に表示されることを言います。
SEO対策の方法はたくさんあるのですが、レスポンシブデザイン対策がされていることで、Googleが「このWebサイトはスマートフォンから検索されるかもしれない」と判断し、検索上位に表示される
可能性が高くなります。
検索上位に来てしまえば、努力して作成したサイトが多くの方に見られ売上アップにつながるでしょう。
- URLが1つなのでユーザーにSNSでシェアされやすい
メリットの3つ目は、URLが1つなのでSNSでシェアされやすいことです。
例えば、パソコン用のWebサイトとスマートフォン用のWebサイトをそれぞれ作成したとしましょう。
仮にデザインがとてもよく、ユーザーが「他の人にもこのサイトを見て欲しい」と思った場合、URLが2つあったらどうでしょう？
「パソコン用のURLはこちらでスマートフォン用はこちらです」と2回URLを貼らなければなりません。
このように考えたら、「面倒だからシェアするのはやめよう」となりせっかくの機会が台無しになります。
以上の点からも、レスポンシブデザイン対策を行うことが重要であると分かっていただけたはずです。
ただ中には、「レスポンシブデザインの重要性は分かったけど、どうすればいいの？」と思った方もいるでしょう。
そこで以下の章では、レスポンシブデザインをする際のポイントを解説していきます。
レスポンシブデザインに対応させる場合のポイント
1.画像や動画などを最適化する
レスポンシブデザインに対応させるポイントは、画像や動画をそれぞれのサイズで最適化することです。
例えば当たり前の話ですが、パソコン用のWebサイトを作成した場合、画像の容量は大きくなるのが当然です。
ただし、その容量のままスマートフォンでWebサイトを見ると、画像の容量が大きすぎてうまく読み込みが出来なくなります。
せっかくデザインが素敵な出来なのに、読み込み時間が長くなると、ユーザーはストレスを感じてそのサイトから離れてしまいます。
これは分かりやすい動画を組み込む場合でも同じことです。パソコン用の動画容量のままスマートフォンで再生すると同じく負荷がかかってしまい場合によっては固まることもあります。
「パソコン用とスマートフォン用で作り変えるのは面倒だよ」と思うかもしれませんが、この対策を出来るかできないかで会社の売上が変わってくると言っても過言ではありません。
h2:Webサイトのデザイン時に注意したいこと
Webサイトをデザインする時には注意しなければならない点が
多くありますが、今から解説する5つの点は特に注意してほしい
基本的な要素になります。以下の点を守って作成するだけでも、
素晴らしいサイトを作成できるので、ぜひ読んでみてください。
h3:コンテンツの幅を調整する
1つ目は、コンテンツの幅を調整することです。Webサイトは文字や画像を使って構成されています。構成を理解した上で、パソコンやスマートフォンのデバイスを確認してからコンテンツの幅を考えましょう。
「たった1pxずれたくらいで大したことないでしょ」と思う方もいるかもしれません。
しかし、1pxずれるだけでも文字や画像のバランスが崩れ、無駄な余白が見えます。
すると、ユーザーは違和感を感じ離脱します。コンテンツの幅を意識してデザインをしましょう
h3:サイズは端数が出ないようにする
2つ目は、サイズに端数を出さないことです。多くの場合がサイズで端数が出ることはありませんが、デザインしている段階で、pxではなく%でサイズ調整をしている場合はまれに端数が出ることがあります。
そうなれば、1つ目の内容と重複しますが、サイズが増えてしまい、色がぼやけてしまう可能性もあります。
なので、サイズはpxで統一した上で、よほどのことがない限りは端数を出さないようにしましょう。
h3:位置合わせの基準点をそろえる
3つ目は位置合わせの基準点を揃えることです。デザインの基本原則の中に、「整列」という概念があります。これは、箇条書きの際に左端は揃えましょうと言ったようなルールのことです。
基本的に1人のデザイナーさんがデザインする時は問題ありません。しかし複数のデザイナーさんが違うデザインを行う場合は、基準を決めなければ全くちがう形のデザインが出来てしまいます。
良くいえば個性になりますが、ページごとにレイアウトなどが違えばユーザーが違和感を感じることもあります。
h3:適切なフォントサイズも考えておく
4つ目は、適切なフォントサイズも考えることです。パソコンで見る時とスマートフォンで見る時には、フォントサイズを変えなければなりません。
例えば、パソコンで見ることを想定して大き目のサイズでデザインして、そのままのフォントサイズでスマートフォンで見ると、大きすぎて見づらくなり、サイトから離れてしまうこともあります。
逆に、スマートフォンで見ることを意識してデザインして、パソコンで見ると小さすぎて読みづらい場合もあります。適切なフォントサイズを考えること大事です。
ちなみに、Googleが推奨しているのはパソコン・スマートフォンともに「16px」です。
このサイズを基準にするのもよいでしょう。
h3:アートボードの数を少なくする
5つ目は、アートボードの数を少なくすることです。アートボードとは、デザインをWeb上で行う際のキャンバスのようなものです。
アートボードは容量がかなり大きいため、複数開いてしまうとパソコンが対応しきれず、最悪の場合画面が固まってしまうこともあります。
デザインをする際は、最低限のアートボードだけを残し、不要なものは
早い段階で削除することをおすすめします。
まとめ
本記事では、Webサイトの適切なサイズと、Webデザインをする際に注意する点を解説してきました。最近はコロナウイルスの影響もあり、今まで以上にWebサイトやデザインの重要性に注目が集まっています。
少し難しい話もあったかと思いますが、この施策をすることでサイトを見てもらえる確率が上がることは間違いありません。
ただ「そうは言ってもWebに詳しくないから無理だよ」と思う方もいるかもしれません。(○○)では経験豊富なWebサイト制作のプロが初めての方が見落としがちな細かい部分までヒアリングを行い丁寧に対応していきます。
この記事を読んで「Webに関する知識がないから相談したい」という方は
以下のリンクをクリックしていただけたらと思います。
コメント