webサイトのコンテンツ幅を考える
Shelikesの卒業制作を作る過程で、ワイヤーフレームを作成する段階になりました。ワイヤーフレームをつくるにあたり、そもそもコンテンツ幅ってどれくらいが最近は主流なのか気になり、調べてから実際に作成するワイヤーフレームのコンテンツ幅を決めることにしました。
今回PCのコンテンツ幅について考えています。
Shelikesのwebデザイン講座では、「1000px前後の設定がいいと言われている」ようですが、実際に作る時は、「1000pxより狭いほうがいい？」「広いほうがいい？」決め手がわからなかったので、どこの数値が良いのか探りたいと思います。
コンテンツ幅とアートボード
そもそもコンテンツ幅とアートボードは何か簡単に説明すると、
コンテンツ幅とは
webサイトのコンテンツを入れるために規定する枠
アートボードとは
デザインをする時の一番外枠の横幅
アートボード幅を検討する
ワイヤーフレームを作る上で、特にアートボードのサイズを決めるためには、最近主流の画面サイズを調べると適切なサイズがわかります。ディスプレイシェア率を調べられる有名なサイトで確認すると、日本で一番シェア率が高いサイトの横幅は1920pxでした。
今回作るサイトは、スムージーとコールドプレスのサイトなので、情報をたくさん掲載するのではなくイメージ画像を大きく見せたい理由から、ダイナミックに見えるようにコンテンツ幅に対してアートボードを小さくしたいので、横幅は1366pxで作成することにしました。
ちなみに、横幅1366pxはFWXGA（フルワイドXGA）と呼ばれます。
コンテンツ幅を検討する
次に、コンテンツ幅を決めていきます。いくつか参考サイトを調べて今回作りたいwebサイトのイメージに合うサイトを見つけて、マネていきたいと思います。今回作成するwebサイトの情報量などが似ているサイトを調べたいので、今回作成する予定のスムージーや健康食のwebサイトを調査。
イメージを使って訴求していったほうがwebサイトの見栄えがよくなりそうなので、コンテンツ幅は横幅1140にしたいと思います。
FV（First View）やカルーセルの要素があるエリアは、横幅いっぱいに入れることできれいな写真を生かしています。横幅いっぱい以外のコンテンツ幅は1200pxでした。
テキストの収まっているコンテンツ幅は1140pxでした。白い枠やバナー写真によってはコンテンツ幅よりも広い位置に配置していました。
メイン画像やメニューバナーのエリアは横幅いっぱいに画像が置かれていますが、クライエントなど情報がカード型に配置されるエリアでは、コンテンツ幅1080pxでした。
考慮すること
これでアートボード横幅1366px、コンテンツ横幅1160pxと決まりました。
ここで、実際のwebサイト上でコンテンツ幅が縮まったり広くなった時には、どのようなレイアウトの見え方になるのかもあらかじめ考えておくことにしました。
今回は、最近主流になっていると言われているリキッドデザインにします。
リキッドデザインとは
デザインのコンテンツ幅が表示する最大値の幅で作成されるデザイン。
デザインデータのコンテンツ幅よりも狭くなった時、コンテンツの左右にどれくらい余白を持たせるのかを決めておく必要がある。
どうなるのかの想定をエンジニアに伝えておくことでイメージ通りにならないなど問題が発生しないようにする。
もう一つ考えることとして、ひとつのwebサイトではコンテンツ幅は統一したほうが、ページ回遊した時に違和感が生まれないので良さそうです。webサイトでコンテンツ幅は１つに統一する、もしくは一定のルールにして情報量のボリュームに対応して２つに統一することで見やすくするなど、配慮するとよさそうです。
まとめ
コンテンツ幅とアートボードは最近主流のディスプレイや文字サイズによって変わってきたり、コンテンツの内容によって適切なサイズを選ぶことで、ユーザーの体験も良くする事ができると思いました。