Chap14-1 レイアウトデザインの種類

Chap14-1 レイアウトデザインの種類

Webサイトのコンテンツを伝えるためのレイアウトデザインについて学習します。
これまで多くのレイアウトの内容が出てきましたが、それぞれの違いを理解した上で、今回のレイアウトデザインの種類と特徴を理解するのが目的です。

この講座でのレイアウトに関する定義

「レイアウト」とは、配置や配列という意味で、「Webレイアウト」は文字や写真、描図などをページ上のスペースに効果的に配置することです。

ページデザイン/サイトデザイン

Webページのレイアウトを含め、デザイン全般のこと。
複数のページのデザインを統一させて設計するサイトデザインも、ここでは同義にする。
総称としてWebデザインと呼んでいる。

ページレイアウト

Webページを構成する、各ボックスを配置する場所。
カラムレイアウト
シングルカラム・マルチカラムレイアウトがある。
フリーレイアウト
カラムを使わない自由に配置するレイアウトのこと。

ナビゲーションデザイン

ナビゲーションメニューの機能やデザイン手法のこと。
ボタンの形状やドロップ(プル)ダウンメニュー・タブメニュー・ドロワーメニューなどの機能がある。

ナビゲーションレイアウト

カラムレイアウトのナビゲーションメニューを配置する場所。
上部・下部メニュー型、左サイド・右サイドメニュー型、逆L字メニュー型などがある

レイアウトデザイン

主にページレイアウトやデザインする手法のこと。
固定・可変レイアウト、フルスクリーンレイアウト、レスポンシブwebデザインなどがある。

コンテンツレイアウト

ページのコンテンツ部分のレイアウトをデザインするパターンや手法のこと。
カード・タイルレイアウト、スプリットレイアウト、ブロークングリッドレイアウトなどがある。

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

リンク先のサイトは、リニューアルされたり無くなっているかも知れません。
フリーレイアウトやフルスクリーンレイアウトのサイトを探してみましょう。

Master
Master

動画内で紹介したサイトです

日清食品グループのウェブサイト。「チキンラーメン」「カップヌードル」などの商品情報をはじめ…
www.nissin.com
Bruno Simon
bruno-simon.com
黒川温泉のお宿野の花は熊本県にあり、黒川温泉街から離れた山間にある貸切風呂付き離れ宿の旅館…
www.oyado-nonohana.com