本業Webマーケター副業Webライターが運営するサイト

【ブログ初心者向け】Webサイトのブロック用語集【最初に知っておくと捗る】

Web

本業Webマーケター副業Webライターのたろうです。
ブログ初心者が最初に知っておくと捗るWebサイトのエリアの名前を紹介します。

ブログ初心者は分からないことだらけなので、たくさん検索をすると思います。私もたくさん調べました。

しかし、『ブログのここをこうしたい』と思っても、『ここ』の名前が分からないと検索ができません。(とても困っていました。)

今となってはWeb業界で働くプロなので、調べようと思ったらすぐに調べることができます。

この記事では、そんな『ここ』の名前(Webサイトのブロック名称)を解説します。

(この記事に載っていない場所の名前を知りたい場合は、Twitterまで連絡をください。記事に反映します。フォローはこちら

Webサイトの各ブロック(エリア)の名前

Webサイトの各ブロックの名前
Webサイトのエリア概略図

最低限知っておくと捗るWebサイトページの各ブロックの名前は、次の6つです。

  1. ヘッダー
  2. グローバルメニュー(トップメニュー、メインメニュー、グローバルナビゲーション)
  3. ハンバーガーメニュー
  4. ボディ(メインコンテンツ)
  5. フッター
  6. アイキャッチ画像

1つずつ解説していきます。

ヘッダー

Webサイトのヘッダーの画像
ヘッダーは赤色のエリア

まず最初に紹介するのはヘッダー(header)です。
その名前の通り、ページ上部(head)のエリアと覚えましょう。

※厳密に言うと、headタグとheaderタグは違います。headタグはページに表示されず、headerタグはヘッダーとして表示されるのですが、初心者向けの記事なので割愛。

ヘッダーには、サイトのロゴやメニューを設置することが一般的です。
ページ上部について調べたいときは、「テーマ名 ヘッダー 編集」と調べましょう。

グローバルメニュー(メインメニュー・トップメニュー・グローバルナビゲーション)

Webサイトのグロナビの位置説明の画像
グロナビは赤色のエリア

続いて紹介するのは「グローバルメニュー」です。メインメニューと言ったり、グローバルナビゲーションと言ったりします。Web業界だと、グローバルナビゲーションを略して「グロナビ」と言うことの方が多いです。

グロナビには、サイトに訪れたユーザーが迷子にならないよう、カテゴリ等を設置することが望ましいです。
親カテゴリから子カテゴリをぶら下げることもできます。

グロナビを編集したい時は、「テーマ名 グロナビ 編集」と調べましょう。

ハンバーガーメニュー

ハンバーガーメニューの位置説明画像
ハンバーガーメニューは赤色のエリア。3本線が特徴

続いて紹介するのは「ハンバーガーメニュー」です。見た目がハンバーガーみたいだからハンバーガーメニューです。そのままですね。


スマホでWebサイトを開いたときに、よく見かけます。(スマホは表示範囲が狭いので、メニューがたくさんある時はグロナビよりもハンバーガーメニューの方がユーザーエクスペリエンス的に良いです。)

ハンバーガーメニューがデフォルトのテーマはあまりないと思います。
もしハンバーガーメニューを実装したい場合は「テーマ名 ハンバーガーメニュー 導入(実装)」などと検索してみましょう。

ボディ(メインコンテンツ)

Webサイトのボディエリアの説明画像
ボディは赤色のエリア

次に紹介するのはボディです。
ページの文章や画像、いわゆるメインコンテンツがある場所をボディといいます。

ボディはあまり初心者がいじることはないと思います。
(テーマデフォルトで充分なため。)

1つの知識として頭の片隅に置いておく程度でOKです。

フッター

フッターは赤色のエリア

次はフッターを紹介します。
その名前の通り、フッター(footer)はページの足、下部のエリアです。

フッターはよく、「共通フッター」という言葉が使われます。すべてのページで同じものを表示させる時などに使われる言葉です。

スマホユーザーはスクロールが早いので、すぐにフッターにたどり着いてしまいます。
そのため、見逃してほしくない情報等はフッターにも掲載しておきましょう。

フッターには、グロナビと同じメニューを設置しても良いですし、グロナビより沢山のメニュー(そのWebサイトの全てのカテゴリ等)を置いてもOKです。

サイドバー

Webサイトのサイドバーの位置説明画像
サイドバーは赤色のエリア

次はサイドバーです。
そのままの名前ですが、ページボディの横です。
サイドバーは右側にあることが一般的です。(もちろん、左側にある場合もあります。)
ちょっとアピールしたい情報などは、サイドバーに設置しておくことがオススメです。

アイキャッチ画像

Webサイトのアイキャッチ画像の位置説明画像
アイキャッチ画像は赤色のエリア

最後はおまけとして、アイキャッチ画像を紹介します。
アイキャッチ画像は、ページの上部に表示される、その記事の顔となる画像です。

アイキャッチ画像とはその名前の通り、目を惹く画像を設定することが求められます。
画像を編集してタイトルを入れるといいでしょう。
画像編集にはCanvaというソフトがオススメです。無料で使えます。

まとめ

いかがでしたでしょうか。
ブログ初心者が知っていると捗るWebサイトのページエリアの名前を紹介しました。

検索能力は、Webの世界で生きていくために重要です。
しかし、「なにを検索すればいいか」「どうやって検索すればいいか」がわからずに色々な検索を試す時間は無駄な時間です。
検索する時間を短縮すれば、それだけ早くサイトも成長しますし、「分からない」というストレスも軽減されます。

この記事で紹介した基本名称を駆使して、快適なブログ制作を行ってください!

サイト運営者

本業Webマーケターの副業Webライターです。
SEOやWebマーケティングの知見があります。
元自衛官ですが、一念発起して当サイトを立ち上げ、ウェブ解析士の試験にも独学1週間で合格し、Web企業に転職しました。

本業とは関係ないですがが、宅地建物取引士試験に独学で1発合格しています。
「一生に一度の買い物に後悔したくないなあ」と思い、不動産を勉強しすぎた結果、宅建に合格するくらいの知識を身に着けました。

父親として長期育休を職場で初めて取得するなど、育児も楽しんでいます。

趣味で古民家をDIYで直してます。

Twitterフォロー歓迎!
YouTubeではDIYを発信しています

サイト運営者をフォローする
Web
サイト運営者をフォローする
セコウド

コメント

タイトルとURLをコピーしました