なんて名前？ WEBサイトの基本パーツ名と導入時の注意点！

今回はWEBサイトでよく使われる基本のパーツとその注意点についてお伝えいたします！

「この部分の色を変えて欲しい…、けどこれはなんて言うんだろう？」

「この機能を導入したいけど、注意することはあるかな？」

と思われたことのある方、是非読んでみてください。

01.メインビジュアル

メインビジュアルとはWEBサイトの顔とも言える、一番最初に目に入ってくる大きいビジュアルのことです。略してMVと表記することもあります。

多くのサイト訪問者はパッと見の第一印象でサイトをまず判断するため、メインビジュアルは魅力的にする必要があります。

メインビジュアルが悪いと、内容を見てすらもらえず、即離脱されてしまいます。

02.スライダ

メインビジュアルには1枚の画像を設定することも多いですが、スライダにして数枚の画像が切り替わるデザインもよくみられます。

スライドショーのように画面が切り替わるパターンや、カルーセルで左右に回転するように画像か切り替わるパターンなど、一口にスライダと言っても様々な見せ方があります。

スライダの導入にて注意する点は、以下の2点。

・一枚の画像のみを設定するよりページが重くなりやすい

ページが重くならないよう、画像を軽量化する必要がありますし、載せる写真は絞る必要があります。
多くても5枚以内に絞れるとよいでしょう。

どれも素敵な写真だから、とりあえずたくさん載せよう！とはできないわけですね。

・2枚目以降の画像は見られにくい

まず1枚目に一番見てもらいたい写真を設定しましょう。

また、2枚目以降が他ページへの導線となっている場合、これをクリックされる確率は普通にコンテンツを配置するよりも下がるため、2枚目の画像を少しだけ最初から見えるように設定しておくなども一つの手です。

また、重要なお知らせの場合はスライダではなくバナーを設置するなどの対応も視野に入れましょう。

03.グローバルナビ（グロナビ）

各ページ共通して表示される案内メニューのことです。

メインビジュアルの上にあるのか、もしくは下に表示しているのか、サイドに表示しているのか、それはデザインによって様々。

最近のサイトではブランディング効果を高めるために、グローバルナビを表示しない場合もあります。

グロナビを設置するときに注意すべきなのは、多くのページを載せすぎないこと。

ページの導線を多く載せすぎると、ユーザーは一瞬での判断ができず、結局何も押さずに離脱してしまいます。

ナビゲーションのページは少なく絞ることで、文字の認識を高め、ユーザーの「あ、施工事例のページがあるんだ。ちょっと見てみよう」という心理を呼び起こすのです。

04.ハンバーガーメニュー

主にスマホのデザインで使われています。

線が並んでいる見た目がハンバーガーに見えることからこの名前になりました。

ハンバーガーメニューはただ線があるだけだと、メニューと気づいてもらえない場合もあります。

「メニュー」と補足の文字を付け足したり、ターゲットの年齢層が高い場合はそもそもハンバーガーメニュー以外の見せ方を考えるなどの工夫が必要です。

05.ヘッダー

ページの一番上にある共通部分のことです。

ページの頭にあるのでヘッド→ヘッダーですね。

大体のサイトは、ヘッダーにロゴやページタイトル置いています。

サイトに統一感を出したり、今何のページを見ているのかなどをわかりやすくしています。

06.フッター

ページの一番下にある共通部分のことです。

ページのつま先にあるのでフット→フッターですね。

CVページへの導線や、サイトマップに使われることが多いです。

参考に弊社のフッターを載せていますが、必ずしもこの全ての内容がフッターに必要なわけではありません。

サイトに合った適切な形を考える必要があります。

07.アイキャッチ

ブログページなどでよく見られる、ユーザの目をひくための画像です。

サムネイルとよく混同されますが、サムネイルはアイキャッチがさらに縮小されて表示されるときに呼ばれます。

その名の通り、親指の爪くらいの大きさということですね。

08.CVボタン

CV（コンバージョン）ページへの導線ボタンです。

シーブイボタン、コンバージョンボタンと呼ばれます。

CVを誘導するために、目立つ場所に目立つ色で設置してあるサイトが多いです。

09.ページネーション

内容が多いページに設置されている、分割されたページへのナビゲーションです。

ブログ、イベント、製品紹介のページなどのページに設置されていることが多いです。

全部でどのくらいページがあるのか、今どのあたりを見ているのか、ユーザーにわかりやすく伝えることができます。

10.カテゴリ

ブログページなどでよく使われる、記事の概要を表して分類をするための機能です。

こちらを設定しておくと、例えば様々な内容が書かれているブログの中で「デザイン」に関する記事を読みたい！と思った時に、「デザイン」のカテゴリを探せば、ユーザーは読みたい記事だけを読むことができます。

ユーザーがこのように読みたい記事を簡単に探すことができるように、記事を書く際にはカテゴリを必ずつけておくことが重要です。

11.パンくずリスト

ユーザーが今どのページを見ているかをわかりやすくするため、ページの階層を表示しています。

大体、ヘッダーの下に設置されていることが多いです。

パンくずリストという名前は、童話「ヘンゼルとグレーテル」にて、ヘンゼルが道に迷わないよう通り道にパンくずを置いていったエピソードが元になっています。

おわりに
基本のサイトパーツを紹介させていただきました！

パーツ名を覚えると、サイトのイメージを人に伝えやすくなるかと思います。ぜひ、覚えてみてください。