WEBサイトのレイアウトについて

WEBサイトを作る際によく使うパーツを今回はミライクチセのサイトを見本としてご紹介させていただきます。

この記事を読むことでサイトを見た時に「この部分はこれ！」と理解できるようになりますので、WEBにご興味のある方は一見の価値あり！
「WEBサイトを作ろうと思ったけど何から作ればいいのかわからない」という方もレイアウト(配置)に何が必要かを知ることで迷いが減ることでしょう。

WEBサイトを作るのに使用するマークアップ言語のHTML＆CSSについて触れていきますので、こちらのほうもぜひ読んでみてください。

基本的な5つのパーツ

WEBサイトのレイアウトによっては採用されないパーツもあるのですが、使用頻度の多いものを5つの項目にわけて簡潔に解説させていただきます。
チセのサイトを見本として赤い枠で囲んだ各パーツを見ていきましょう。

1.ヘッダー

2.ナビゲーション

ナビゲーションはユーザーに見てもらいたい主要コンテンツへのリンクを並べたメニューバーを意味します。
自身のWebサイトや会社や商品について(About)や、お問い合わせフォーム(Contact)など、大事な情報の載っているページへクリックすると移動できるリンクを配置しておきます。

ナビゲーション以外にも呼び方が色々とあり——

• ヘッダーメニュー
• ヘッダーナビ
• グローバルナビ
• メインメニュー

上記のように表現されることもあるので、頭の片隅に置いておきテキストや人による違いに気を付けましょう。

3.メインコンテンツ

ブログや文章に作品集など、メインコンテンツではそのサイトの主要となる部分をチセの配置するものとなります。
チセのサイトでは各コースの魅力について知っていただきたく思い、このメインコンテンツにコース紹介をトップへ配置しております。

4.サイドバー

メインコンテンツの右端か左端、あるいは両方にサイドバーは配置されます。

• カテゴリーやタグの一覧
• 店舗や会社の基本情報
• サイトに関連するSNSのボタン
• 最新記事や人気記事など特にピックアップして表示したいブログ

主に上記のようなものを配置しますが、サイトの種類や目的ごとに適したものを表示するようにしましょう。
レイアウトによってはサイドバーを作らない場合もありますので、必須ではありません。

5.フッター

メインコンテンツの下部、サイトの一番下のエリアをフッターと言います。ヘッダーと同じく全ページに共通して表示されるパーツで以下のようなものを入れていきます。

• 会社などの概要
• コピーライト(著作権の表記)
• プライバシーポリシー(個人情報保護)
• サイトマップ(サイト全体のページ構成)

また、関連記事や人気記事などをフッターに表示するパターンもあります。
ユーザーが記事を読み終えた後に、この位置にそれらがあると別のブログ記事に移動するのに便利ですので！

Webサイトのレイアウトについてのまとめ

Webサイトのレイアウトでよく使われる基本的なパーツは以上になります。繰り返しになりますが、レイアウトによっては作らないパーツもあります。
大事なのはユーザーにどう自社のサービスや商品の魅力を伝えるかで、目的によって大きくレイアウトは変わってきます。
種類も様々ありますので、Webサイトを作る時はまずどんな目的でサイトが必要なのか明確にしておきましょう。



次回はミライクチセのWEBコースで勉強できるWEBサイトのレイアウトについてご紹介させていただきます。

もしWEB制作にご興味をお持ちの方はミライクチセの無料体験会を行っておりますので、ぜひこちらにお問い合わせください！