ホームページの構成と名称！１８項目をWeb制作未経験者に向けて解説！

などなど、ホームページの構成が気になっている人もいるのではないでしょうか？

今回は、Webデザイナーを目指すあなたのためにホームページの構成と名称を徹底解説していきます！

ホームページの構成と名称（基本編）

基本的なホームページの構成と名称は、以下の７通りです。

順番に説明していきます！

トップページ

基本的なホームページの構成と名称１つ目は、「トップページ」です。

トップページは、ホームページの入り口となるWebページで、本の「表紙」の役割を果たしています。

下層ページ

基本的なホームページの構成と名称２つ目は、「下層ページ」です。

下層ページは、トップページから派生しているページのことになります。

ヘッダー

基本的なホームページの構成と名称３つ目は、「ヘッダー」です。

フッターは、ページの最上部にあるエリアのことになります。

最初に目に入る大切な部分なので、ロゴやサイト名などの情報が記載されているエリアですね。

フッター

基本的なホームページの構成と名称４つ目は、「フッター」です。

フッターは、ページの最下部にあるエリアのことになります。

補助的な役割を担っていて、「著作権」や「会社名のリンク」などが記載されていることが多いです。

グローバルナビゲーション

基本的なホームページの構成と名称５つ目は、「グローバルナビゲーション」です。

グローバルナビゲーションは、ホームページ上部にある「案内メニュー」になります。

ユーザーがWebサイトの全体像を把握するために、重要なパーツですね。

バナー

基本的なホームページの構成と名称６つ目は、「バナー」です。

バナーは、「広告や宣伝効果のある」画像になります。

ユーザーがクリックすると、別のページに遷移することも多いので、「ユーザーがクリックしたくなる」デザイン作成が必要ですね。

メインコンテンツ

基本的なホームページの構成と名称７つ目は、「メインコンテンツ」です。

メインコンテンツは、主要コンテンツのことで、「1番伝えたい情報」を記載します。

ホームページの構成と名称（応用編）

よく使うホームページの構成と名称は、以下の１１通りです。

順番に説明していきます！

スライダー

ホームページの構成と名称（応用編）１つ目は、「スライダー」です。

スライダーは、複数画像のスライドショーのようなものになります。

少ないスペースで、いくつかのコンテンツを表示する際に使用しますね。

ハンバーガーメニュー

ホームページの構成と名称（応用編）２つ目は、「ハンバーガーメニュー」です。

ハンバーガーメニューは、スマホやタブレット端末で表示させる際のナビゲーションメニューになります。

アイキャッチ

ホームページの構成と名称（応用編）３つ目は、「アイキャッチ」です。

アイキャッチは、最初に目に入る画像のことになります。

ユーザーを惹きつけるような画像を設定することで、内容が読まれやすくなりますね。

サイドバー

ホームページの構成と名称（応用編）４つ目は、「サイドバー」です。

サイドバーは、横に設置されたエリアのことで、リンク情報やカテゴリーなどが記載されていることが多いですね。

パンくずリスト

ホームページの構成と名称（応用編）５つ目は、「パンくずリスト」です。

パンくずリストは、ユーザーが「今、サイトのどこにいるのか」が簡易的にわかる表示になります。

ソーシャルボタン

ホームページの構成と名称（応用編）６つ目は、「ソーシャルボタン」です。

ソーシャルボタンは、「SNSシェアボタン」のことで、WebページとSNSを連携するボタンになります。

近年では、SNS集客が主流になってきているので、多くの企業で採用されていますね！

カテゴリー

ホームページの構成と名称（応用編）７つ目は、「カテゴリー」です。

カテゴリーは、Webページを分類する機能になります。

ファビコン

ホームページの構成と名称（応用編）８つ目は、「ファビコン」です。

ファビコンは、「お気に入りのアイコン」のことで、Webサイトのシンボルマークになります。

必ず設置するものではありませんが、設定することでユーザーからの認識はアップしますね！

サイト内検索窓

ホームページの構成と名称（応用編）９つ目は、「サイト内検索窓」です。

サイト内検索窓は、Webサイトの情報をキーワードで検索できる機能になります。

ページネーション

ホームページの構成と名称（応用編）１０個目は、「ページネーション」です。

ページネーションは、長い文章を複数ページに分割し、読みやすくする機能になります。

画面下に、数字が表示されているものが当てはまりますよ。

アコーディオン

ホームページの構成と名称（応用編）１１個目は、「アコーディオン」です。

アコーディオンは、クリックしたり、タップしたりすることでコンテンツが開閉される機能のことになります。

情報量が多いWebサイトでは、よく使用されていますね。

Web作成を学ぶのにおすすめのスクール

Web作成を学ぶのにおすすめのスクールは、「シーライクス（SHElikes）」です。

シーライクスは、Webデザインを中心として、WebマーケティングやWebライティングなど、45種類以上のWeb系スキルが学べるスクールになります。

未経験からでも挫折しない仕組みがたくさん整っているスクールなので、興味があればこちらも確認してみてください 

まとめ

ホームページの構成と名称を１８項目ご紹介しました。

WebデザインやWeb作成に興味のあるあなたのお役に立てると嬉しいです。

ちなみに、今回ご紹介した「シーライクス（SHElikes）」では、無料体験レッスンを行っています。

シーライクスを無料で体験することができますし、カウンセリングの時間であなたの悩みを質問することもできます。

「Web作成って思ったより難しい」、「Webデザイナーって私でもなれる？」などの悩みがあるあなたは、この機会を利用するのもおすすめです。

無理な勧誘もないので、ぜひ、参加してみてください！

私がシーライクス無料体験レッスンに参加した内容はこちら