Share on facebook
Share on twitter
Share on linkedin

Blog

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

Webサイト制作・リニューアルにおいて 大切にしていること
なんて名前? WEBサイトの基本パーツ名と導入時の注意点!

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

なんて名前? 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.パンくずリスト

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

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

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

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

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

Leave your thought here

メールアドレスが公開されることはありません。

Popular tags

1つのWEBサイトを作るのには、どれだけの時間がかかるもの? alt属性とは?画像検索の対策 business DTPデザイナーが陥りがちな残念なWebデザイン IT Security IT services ITで働き方改革!クラウド、テレワークの新しい仕事の形とは LP(ランディングページ)って何? Pythonでできることって何だろう? Pythonとは?大人気プログラミング言語のメリット Webサイトの制作って、なぜこんなに高いの?! Webサイトを更新したのに反映されない?それ、キャッシュが原因 Webサイトを更新したのに反映されない?それ、キャッシュが原因かも…【PC編】 Webデザイナーの1日・生活スタイル WEB制作の現場で使われる用語をご紹介 WordPress(ワードプレス)でのホームページ制作・ウェブサイト制作 WordPressのメリットとデメリット WordPressを使ったホームページ作成のメリットデメリット 「デザインお願いします」と言われてデザイナーは何を考えてデザインしているの? この修正、お金かかるんですか? なんて名前? WEBサイトの基本パーツ名と導入時の注意点! イメージコピーとセールスコピーの違い クリック率とCV数をUP!サイトの入り口を飾る「titleタグ」「meta description」とは? コロナ対策のためにネットショップを素早く開設しよう!ECサイト構築 ネットワークエンジニアとは?ネットワークエンジニアの仕事内容と将来性 ネットワークエンジニアになるには資格が必要?おすすめの資格 フリーランスのWebデザイナーが仕事を効率良くする方法とは? ブログで使っているその画像は本当に大丈夫? プログラマーとは?プログラマーの種類と将来性 ペルソナってなに? 〜WEBサイトのターゲット ホームページとウェブサイトの違い! ホームページを制作する目的の重要性 ホームページ作成に失敗しないための、制作料⾦の費⽤相場と Web制作ツール・制作業者選定のポイント ホームページ制作で起きるトラブル事例と対策 ホームページ制作と動画や写真撮影などを一社でまとめるメリット ホームページ制作に関する著作権 ホームページ制作の注意点 企業にとってのホームページの役割と運用目的を再確認 働きながらWebプログラミングスクールに通う方法 初心者でも簡単!無料でホームページ作成ができるソフト 危険!Wordpressの更新は制作会社にご依頼ください。 古いサイトは何故ダメなのか 在宅でできるWebデザインを副業にしよう♪初心者におすすめの仕事は? 画像はリサイズして使いましょう! 〜重いサイトにしないために 結果が出ないホームページの初歩的なミス
Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping