【1月目】重要基礎項目

知っていれば問題解決の近道!超基本の【WEBサイトパーツ名称】を初心者向けに分かりやすく解説

こんにちは!
心配性ママHARUです。

スクール生HARU
スクール生HARU
WEBマーケティングスクール・キークエストで1年間
副収入と1万人フォロワーアカウント作成スキル獲得のため勉強しています!

今回はWEBサイトの各パーツについて解説します。
WEBサイトにはそれぞれのゾーニングブロックに役割と名称があります。
これらを知らないと、トラブル時に調べることに時間がかかってしまうため、事前に知っておくことが問題解決の近道になります。

スクール生HARU
スクール生HARU
WEBサイトを作る上で、問題が起こったときや修正したいとき、部分の名称が分からなくて検索ワードに何と入れたら良いか分からない…!と困ることがあります。

この記事では

  • WEBサイトの構成を理解する
  • WEBサイト作成で分からない部分の検索をピンポイントでできる
  • WEB制作会社に依頼するときに要望や変更をスムーズに伝えられるようになる

上記の目的を達成できるよう解説をしていきます。

全部覚えなくても大丈夫です。
名称があると知っているだけでも困った時の検索に役立ちます!
迷ったときにはこちらのページを見に来てくださいね。
それでは、早速見ていきましょう!

 

WEBサイトの超基本パーツ

 

こちらのWEBサイトトップページを参考に解説をしていきます。
トップページはWEBサイトホームページの入り口となるページです。

基本的にユーザーが1番多く閲覧するページのため、トップページ全体では
「誰に向けたWEBサイトか」「どのような内容が記載されているか」を明確にすることで紹介する記事へのアクセス誘導がしやすくなります。

①ロゴ

作成するときには、イメージや理念を表現できるものを自作したり依頼するのが良いでしょう。自作するときには「CANVA」やスマホアプリでも作成することができます。
他にも
パソコンで直感的に作ることができる
Squarespace Logo

イラストとフォント数が豊富なロゴ制作サービス
ONLINE LOGO MAKER

などがあります。

②メイン画像(キービジュアル)

WEBサイトのトップページ上部に配置されます。
コンテンツの代表的なイメージ画で訪れたユーザーがはじめに目にする部分。
見てもらいたいユーザーに興味を持ってもらえるよう、WEBサイトの主旨や伝えたいイメージを設置しましょう。

 

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

WEBサイト全ての各ページに設置される主要なページへのリンク。
ヘッダーやメイン画像の近くに配置されるのが一般的です。
「グローバルメニュー」「ヘッダーナビゲーション」「メインメニュー」とも呼ばれます。

KUMA先生
KUMA先生
①~③のゾーニングブロックを【ヘッダー】というよ

 

④カテゴリー

各記事の上に配置され、記事項目へリンクさせることができます。
いくつもカテゴリ分けをしているときには、絶対に見てほしいカテゴリーをここにピックアップしましょう。

サイドバーにカテゴリー検索を表示を作ると、すべてのカテゴライズをプルダウンで見ることが出来ます。

 

⑤記事一覧

記事は1列に配置したり2列に配置したり、サイドバーをなくして全体的に配置することもできます。

選ぶテーマによって変わるので、ユーザーが見やすく、好みの配置にすると良いでしょう。

 

⑥アイキャッチ

記事一覧の1部で、訪れたユーザーの興味を引く画像とキャッチフレーズを作成し設置することで記事へのアクセスを促します。
このWEBサイトではCANVAでアイキャッチを作成しています。
CANVAの使い方については今後記事を作成します。

 

⑦サイドバー

ここには、カテゴリー、人気ランキング記事、プロフィールなどを設置することができます。
サブナビゲーションやバナーなど補助的な要素を設置します。
スクロールしてもサイドバーを固定して追従させることができるため、離脱率を軽減できるメリットがあります。

この参考画面では右に配置していますが、テーマによって左側や両側に配置することもできます。
LP(ランディングページ)などはサイドバーを設置しない場合も多くあります
サイドバーなし・メインコンテンツのにのパターンを1カラム(ワンカラム
参考画面のように右か左に1つのサイドバー+メインコンテンツを2カラム(ツーカラム)
左右両方にサイドバー+メインコンテンツのパターンを3カラム(スリーカラム)
と言います。

参考画像はサイドバー+メインコンテンツなので2カラムですね。

スマホの場合、サイドバーは記事一覧の下にくることがあります。

⑧フッター

WEBサイト下部にあたる、各ページに配置される共通ブロック。
コピーライトやナビゲーションが入ります。
フッターに入るナビゲーションは、グローバルナビゲーションと同じとは限らず
・会社概要
・サイトマップ
・プライバシーポリシー
等の補足情報のナビゲーションのみである場合もあります。

ここに入るコピーライトは著作権のことで、明記することでユーザーにとっての信頼性に繋がります。

 

その他

【パンくずリスト】
ユーザーがホームページ上で今どの位置のページにいるかを簡易的に表示したリストです。

 

Googleのクローラーにも良い影響があるため、SEO対策にも有効とされています。
パンくずリストの語源は、童話「ヘンゼルとグレーテル」で兄妹が青い鳥を追いかけるときに森で道に迷わないようパンくずを落としながら歩いたエピソードから名づけられました。

 

 

【ファビコン】

ホームページを立ち上げたときにタブに表示される画像の名称。
ブラウザのブックマークにもファビコンが表示されます。
ファビコンの設置はブランディング効果の他、ブックマークからWEBページの表示がしやすくなるメリットもあります。

 

さいごに

今回はWEBサイトを構成する超基本の各パーツについて解説しました。
自分でWEBサイトを作るときに困ったときは勿論、依頼する場合にも共通認識のある名称を理解しておくことで意思疎通が格段にしやすくなります。

はじめは全て覚えられなくても大丈夫です。
分からなくなったらこのページを思い出して確認してみてくださいね。

HAPPY
HAPPY
いつもお疲れ様です!