こんにちは。製作担当村田です。
だんだん暑くなってきて夏も近づいてまいりました。
私は弊社でWebデザインの仕事を担当することになり、今年に入ってから独学でWebデザザンの勉強を始めました。実際に勉強してみると、Webサイトを見るときも何気なく見るのではなく、どのように作られているか考えながら見るようになります。
紙面やチラシなどのデザインは自由にレイアウトができますが、Webデザインのレイアウトはパターンが決まっており、用途に合わせてそれを使い分けていきます。
今回はそんなWebサイトのおおまかなレイアウトについて紹介します。
１．シングルカラムレイアウト
シングルカラムレイアウトとはサイドバーなどがなく一つのカラムで構成されています。メリットは情報が簡潔に整理できて、コンテンツに集中しやすいということです。
現在はスマートフォンの利用増加に伴ってシングルカラムが主流になっています。
そして最大の魅力はPCやスマートフォンなど画面サイズの違うディバイスでも対応できるという点です。
本来ならば、ディバイスごとに画面サイズを変更して設計する必要がありましたが、シングルカラムレイアウトはその必要がありません。
デメリットとしては、情報量が多いWebサイトは情報が散漫になり向いていないという点です。
有名なサイトでいえばappleのWebサイトがシングルカラムレイアウトでデザインされています。
アイテムごとに区切られており、クリックすることでさらに商品ページごとに飛ぶことができます。
TOPページに表示されている情報は最小限に整理されていてスッキリとした印象を与えます。
２．２カラムレイアウト
２カラムレイアウトは２つのカラムを使って組むレイアウトです。
主にブログやニュースサイトなど情報量の多いWebサイトに向いています。
幅の広いほうにメインコンテンツを置き、幅の狭いほうにメニューやナビゲーションなどを配置します。
コンテンツが多いためすべてのコンテンツに目を通してもらいづらい、スマートフォンなど小さなディバイスでは読みづらいというデメリットがあります。
弊社HPやW-smileのHPも２カラムレイアウトでデザインされています。
料金表や商品紹介ページなどサイドバーに項目が分かれており、そこからページごとに移動することができます。多くの情報がわかりやすくまとまっています。
３．タイル型レイアウト
四角形の要素を規則正しく並べたレイアウトです。多くの情報を一気に見せることができ、整った印象を与えることができます。
ショッピングサイトやメニュー表示で多く利用されるレイアウトです。
ZOZOTOWNや楽天などの商品ページはこのタイル型のレイアウトでデザインされています。
一度に多くの商品を表示することができるので、見ている人も一度にたくさんの商品を探すことができ便利です。
いかがだったでしょうか？
今回は大まかなWebデザインのレイアウトを紹介しました。
また別の機会に詳しく紹介したいと思います。
皆さんもWebサイトを見るとき意識して見てみてください！