カラム数について

1カラム

①ヘッダー②メイン③フッターが構成。
縦積みされたコンテンツの順序はスマホで表示した時も変わりません。
スマホ画面をはじめとしたレスポンシブデザインへの配慮があります。

メリット
・情報を1つの文脈で伝えることができる
・スマホ画面のデザインと統一感が生まれる

デメリット
・他のコンテンツが探しにくい。
・広告が入れづらい

2カラム

ヘッダー、フッターと②メインと③サイドメニューが並列に構成。
最もよく採用されているレイアウト。
サイドメニューを右側に置くケースはECサイトなどで多く採用され、目的の商品を探しやすくカテゴリー階層も分かりやすいといったメリットがあります。
左側に置くケースはメディアサイトに多い。

メリット
・見やすさに優れている
・デザインの参考になるサイトが豊富にある

デメリット
・コンテンツへの集中力がある程度で低下する
・高さの均衡を調節するのが難しい

3カラム

ヘッダー、フッターと②左サイドメニュー③メイン④右サイドメニューが並列に構成。
2カラムと同じように多くのサイトで採用されている。

メリット
・次のアクションの選択肢が多い
・スクロール量が短くなりユーザーの負担が減る

デメリット
・雑多な印象や古臭い印象を与えかねない
・スマホ画面での配慮が必要になる

WEBデザインの基本構成

WEBレイアウトには様々な種類がありますが、WEBサイトの目的に応じて最適なレイアウトが使用されます。

WEBサイトを構成するレイアウト要素としては以下のようなものがあります。

ヘッダー

ヘッダーとはWEBサイトの上部に共通の画像、テキスト、ナビゲーションなどを配置するために設けられます。

・ロゴ
・ナビゲーション(メニュー)
・バナー
・イントロ、テキスト

ロゴ

WEBサイトではGIFまたはPNG形式でロゴデータを作成します。

ナビゲーション(メニュー)

ナビゲーション(メニュー)はWEBサイトの操作性を決める重要な要素です。
最近ではスマートフォンからのアクセスが増加し、狭い画面での操作性を考えると、ボタンよりもテキストメニューの方が操作しやすいのでナビゲーションはシンプルなテキストで表現することが多いです。

バナー

WEBサイトではGIFまたはPNG形式でロゴデータを作成します。
バナーはWEBページの中で広告的色彩の強い部分です。

イントロテキスト

WEBサイトではGIFまたはPNG形式でロゴデータを作成します。
イントロテキストとはWEBサイトの会社やサービス、商品が一言で言うとどのようなものであるのかを表現した文章です。

サイドバー

WEBサイトではGIFまたはPNG形式でロゴデータを作成します。
サイドバーはWEBページのタイトルや本文以外の機能や情報をまとめてレイアウトする部分です。
サイドバーに配置される情報としては以下のようなものがあります:

・検索バー
・新着情報のタイトル一覧
・記事カテゴリ
・カレンダー
・バナー広告
・タグクラウド
・更新履歴
・ショッピングカート
・コメント
・RSS
・ビデオ
・アーカイブ
・サイドバーは機能的ですが、情報が多すぎるとサイドバーが使いづらくなります。またスマートフォンのような小さな画面ではサイドバーは邪魔になってしまいます。サイドバーにはメリットとデメリットがあることを考えて設定すべきです。

ボディ

WEBサイトではGIFまたはPNG形式でロゴデータを作成します。
ボディにはWEBページの本文、画像、動画などコンテンツそのものが配置されます。

カラム設定

WEBサイトの読みやすさを考慮して、カラム設定を行う場合があります。
例えば、自分の会社のビジネス領域が大きく分けて4つある場合、カラム設定を行うとこの会社は大きく分けて4つのビジネスカテゴリがあるのだと言うことがわかりやすくなります。

見出しのデザイン

見出しのデザイン

↑これを見出しといいます。

1.罫線を引く
見出し周りをシンプルな罫線で装飾する方法です。

2.アイコンをつける
先頭にイラストやアイコンを入れると目印になります。

3.英字と組み合わせる
飾りとして英字と組み合わせる方法です。

4.囲む
文字を1文字ずつ囲む方法です。

5.ふちどりをする
太文字をふちどり、下の文字とずらして重ねたデザイン。

他にも様々な見出しデザインがあるので、いろいろなサイトを見て参考にしてみてください!