Webページに活用されるデザインパーツについて簡単に解説していこうと思います！
Webページには、ロゴが入る『ヘッダー』、サイト内のページにリンクする『グローバルナビゲーション』、主要なコンテンツが入る『メインカラム』、コピーライト表記やページトップリンクなどが入る『フッター』などに分かれています。
それぞれのエリアの中に、機能や情報伝達パーツが配置されています。
１、Webページの基本的な構造
| ヘッダーパーツ | グローバルナビゲーション | メインカラム | フッターパーツ |
| LOGO
検索窓 ソーシャルアイコン
|
ホーム
会社概要 サービス紹介 お問い合わせ |
メインビジュアル
画像 動画 スライドショー テキスト（文字） 見出しやグラフ フォームやバナー パンくずリストやボタンリンク タブメニュー |
コピーライト
テキストリンク（UI UXについて） ページトップリンク |
※上の図はあくまで基本的なことであり、4つの構成ができていれば中身は自由です
２、レイアウトに大事な4つの法則
・ページ上にあるすべてのものを意図的に揃え統一化する。
・要素に視覚的な関係を持たせる。
3,ホームページに用いられるレイアウトの種類
カラムについて
ホームページのレイアウトにおいて、情報を整理して見やすくするために、要素と要素の「段組み」を行うことがあります。
雑誌などを見ると写真と文章が見やすい位置にそれぞれ配置されており、このようにホームページでも最適な位置に配置をする必要があります。
この段組みのことを、ホームページ制作の現場では「カラム」と呼び、カラムがいくつ組み合わさっているかによって、「シングルカラムレイアウト」「マルチカラムレイアウト」というような呼び方をつけています。
シングルカラムレイアウト
<シングルカラム>
すっきりと縦長で1列に段組みされたレイアウトを「シングルカラムレイアウト」と呼びます。
近年はスマートフォンでの訪問者が増え、余計な情報は表示しない縦長のシングルカラムレイアウトのサイトが増えてきました。
特に集客したユーザー向けに商品の説明などをする「ランディングページ」などは、コンテンツを読むのに集中させることができるシングルカラムレイアウトが適しています。
マルチカラムレイアウト
マルチカラムレイアウトはコンテンツの脇にサイドバーを設置するというような、2~3列に分かれたレイアウトです。
情報量が多い、もしくはポータルサイト・検索サイト・ニュースメディアのような回遊性をユーザーに提供するようなサービスは、マルチカラムレイアウトで作られることが多いです。
2カラムレイアウト
コンテンツの左にサイドバー、もしくは右にサイドバーを設置したレイアウトです。
<2カラムレイアウト>
3カラムレイアウト
コンテンツの左右にサイドバーを設置したレイアウトです。
<3カラムレイアウト>
レスポンシブウェブデザインにおけるシングルカラム・マルチカラムレイアウトの切り替え
マルチカラムレイアウトはスマートフォンで表現がしづらいため、レスポンシブウェブデザインで実装をする際は、PCはマルチカラム・スマホはシングルカラムというように表示を分岐させることが多いです。
レイアウト別参考サイト
MUUUUU.ORG
縦長のサイトに特化したWebデザインのギャラリーサイトです。
SANKOU!
出典：https://sankoudesign.com/
更新頻度の高いWebデザインのギャラリーサイトです。
I/O 3000
出典：https://io3000.com
国内だけでなく海外のサイトも多く取り扱われているWebデザインのギャラリーサイトです。
＜まとめ＞
レイアウトは相手への見せ方、伝わり方に大きく関わってきますが、今までのレイアウトやパーツは基本的なことになります。
デザインは基本を活かして自由に制作することも可能ですので、是非デザイン始めたての方はまず参考サイトを見てどんなサイトがあるのかを見るだけでも勉強になります。
おまけ
DIO参考サイト