デザイナー必見！正しい"幅選び"で、使いやすいWebサイトへ

Webサイトのデザインを決める重要なポイントの一つに"サイトの幅"があります。

「サイトの幅って、パソコンやスマホの画面の大きさで変わるんじゃない？」
「自動だから、考えなくてもいいよね」
と思う方もいらっしゃるでしょう。

でも、その考え方、ちょっと惜しいです。

私たちがデザインをするときに考える"サイトの幅"とは、"コンテンツを載せるエリアの幅"のことです。 この幅の設定を間違えると、見づらい・使いづらいWebサイトになってしまいます。

今回は、Webデザイナーが考える"サイトの幅"を決めるポイントをご紹介します。

パソコンやスマホの大きさから考える、理想的な"サイトの幅"

"サイトの幅"を決める際の大切な基準の一つが、私たちが利用しているパソコンやスマートフォンの大きさです。

近年のWebサイトは、端末の大きさに合わせて自動で画面のレイアウトを切り替える「レスポンシブデザイン」が主流になっています。
そのため、パソコンでもスマホでもタブレットでも「見やすい」「使いやすい」と感じるWebサイトにするためには、それぞれの端末に適したサイトの幅を想定したデザインを作らなくてはいけません。

私たちは、様々なWebサイトを制作した経験から、パソコンとスマートフォンについては、あらかじめサイトの幅を決めてデザインするようにしています。
（タブレットはコストや制作期間の関係からデザインを作成せず、コーディング時に調整していくことが多いです）

画面ギリギリまで文字が入ってしまうと見づらく、使いづらいサイトになる可能性が高いです。
そこで私たちは、画面の左右に少し余裕を持たせるイメージでデザインしています。

よく見かける幅100％のデザインの注意点

「左右に少し余白を持たせるデザインが使いやすい」と言いましたが、今はやりのデザインに横幅が画面幅とぴったりあった"幅100％のデザイン"があります。
動画を大きく入れたり、いくつもあるサービスを格好良く魅せたりすることができて、トレンド感もあるので人気が高いデザインです。
このデザインの場合は、左右に余白を持たせることは難しいですよね。

オシャレでトレンド感の強いデザインですが、何も考えずに写真も文字も動画もメニューも全部画面の幅に合わせてデザインしてしまうと、特にパソコンサイトで不都合なところが出てきます。

特に注意した方が良いのは、次の3つです。

• ロゴの位置
• メニューの位置
• 本文の横幅

この3つをデスクトップPCとノートパソコンのモニターサイズで確認して、見づらくなっていないか確認するようにしています。

Webサイトの目的やターゲットで"サイトの幅"を決めるのもGOOD！

モニターが以前よりも大きくなってきたこともあり、最近は幅100％でなくても幅が広いデザインが人気です。ただし、どんなサイトでも幅をトレンドに合わせて広くすればOKというものではありません。

特に、文章を読んでもらうことを目的としたWebサイトの場合は、幅が広すぎると文字が読みづらくなります。また、高齢の方が使うWebサイトの場合は、幅を少し狭くして、慣れ親しんだWebサイトのイメージに近づけることもあります。

最近出てきた、"新しいサイトの幅"

最近はパソコンで見てもスマートフォンの幅で表示されるサイトが増えています。
これは、見てほしい・読んでほしいコンテンツ意外の部分を背景のように扱う方法です。

スマートフォンでインターネットを使う人が増えたことでできた、新しいスタイルのWebサイトだなと思います。

ちなみに、ムーンファクトリーのスタッフに「プライベートでインターネットを使うときに一番よく使う端末はどれですか？」と聞いてみたところ、90.9％がスマートフォンと答えました。

IT企業だからか、自宅にパソコンのあるスタッフがほとんどなので、この結果はちょっとびっくりです。他の職種の方だともっとスマートフォンの割合が多いかもしれませんね。

こう考えると、スマートフォンでの閲覧だけを意識した"幅"というのも、デザインの選択肢の一つだなと思います。

トレンドを踏まえた、目的・ターゲットに配慮した幅選びが大切

デザインのトレンドは日々変わっていきます。でも、私たちが使うパソコンやスマートフォンのサイズは、デザイントレンドほど頻繁に変わりません。

私たちはトレンドを取り入れながらも、利用する用途やターゲットユーザーを想定し、訴求したい情報をより効果的に発信できるデザインをご提案することを心がけています。

皆さんのWebサイトは、どんな幅になったら使いやすいと思いますか？
気になる方、リニューアルで幅を意識してみたい方は、ぜひご連絡をお待ちしています。

お問い合わせ