【PC版】Webデザインレイアウトについてまとめてみた

どうも、Tです。

職業訓練(Webクリエイト関連)に行きつつ日々お勉強をしております。

とまぁ、今ってどんなデザインがあるのかな?と思いまとめてみました。

スマホなどを対象とした、レシポンシブについてはなしで、PCを対象としてまとめてみました。レシポンシブについても後々まとめていきます。

勝手ながら、大きく5つに分類しました。

細かくいうともっと分けれるし、素晴らしいサイトには複数のレイアウトを巧みに取り入れているものもあったり色々ですが、大まかな基軸を決めるためのカテゴリという感じでまとめています。

スポンサーリンク
アドセンス1

シングルカラムレイアウト

説明

1カラムレイアウトとも呼ばれます。ヘッダとコンテンツ領域があり1列(カラム)で構成されています。数年前は2カラムなどが主流でしたが、近年スマホなどを意識したレシポンシブ対応との相性がいいため急速に普及しています。

参考例

参考1 Webサイト買取サイト

参考2 ソードアート・オンライン-TheBeginning-

メリット

横幅一杯にメイン近哲を配置できるため訴求内容をしっかり見てもらうことができます。

1列で完結しているので、レシポンシブ対応もしやすいです。

デメリット

多階層のページの場合、下層への誘導がし辛いため離脱率が高くなる可能性があります。

また、ニュースなど情報量の多いサイトにも不向きです。

マルチカラムレイアウト

    

説明

2列(カラム)以上で構成されたレイアウトになります。

以前から流行っているレイアウト構成ですが、現在もなお実用性が高く利用されています。

参考例

参考1 HIKAKINオフィシャルブログ (2カラム)

参考2 Jミルク (3カラム)

メリット

外部リンクへやバナー設置が容易で、メニューなど多くの情報を整然と表示することができるため、ユーザーの回遊性を高めやすいです。

デメリット

メインコンテンツの表示幅が少々狭くなり、情報量も多くなるためユーザーのコンテンツへの集中力が持続しにくい、視点が定まり辛いという点があります。

フルスクリーンレイアウト

説明

コンテンツを画面全体に表示させたレイアウトす。

ダイナミックに表現でき、レシポンシブとの相性もいいため人気が高くなっています。

参考例

参考1 古宇利島

参考2 FOOD WORKER FUNAKI

メリット

コンテンツ1つ1つをダイナミックに表現できユーザーに伝えたいメッセージを明確にすることができます。

デメリット

テキスト情報が少なくなるため、選択する画像などによって何のサイトかわかりにくくなってしまう可能性がありいます。

スプリットレイアウト

説明

左右・上下などに分割したレイアウトです。分割スクリーンレイアウトとも呼ばれます。

画面を大きく分割することによって、対比を明確にしたり伝える情報をアピールできます。

また、レシポンシブとの相性も良いです。

参考例

参考1 ツイッター

参考2 OTANIJUN

メリット

対比が協調され、オリジナリティのある構成が可能です。

分割(男女など)を明確化するため、ユーザー目線から目的などを判別しやすくなります。

デメリット

分割に意味を持たせる必要があります。

また、細かなテキスト情報などを掲載しにくい傾向にあります。

グリッドレイアウト

説明

カードを並べたようなレイアウトで、カード型レイアウトとも呼ばれます。

レシポンシブとも相性がよく、複数の画像を大きく表示させることができます。

参考例

参考1 Youtube

参考2 Find my Tokyo

メリット

印象的なデザインが作りやすく、多くの情報(画像)を記載できます。

また、下層(二階層以下)への誘導も容易で、レシポンシブとも相性も良いです。

デメリット

全体のデザインが、画像の質に左右されます。

画面の構成が統一化しやすく、コンテンツ毎の住み分けが差別化しにくくなります。

まとめ

それぞれのデザインに一長一短があり、デザインの趣向も時代により変化します。

サイトを作成する際は、対象となるユーザーやコンテンツの内容を加味し、基本レイアウトを決めつつ調整していくのがよいでしょう。

好みだけでいうと僕はフルスクリーンレイアウトが一番好きです。

スポンサーリンク
アドセンス1
アドセンス1
ブログランキング・にほんブログ村へ

シェアする

フォローする