ホームページに掲載する情報とそれぞれの役割

ホームページは様々な情報を組み合わせて構成をします。
またそれぞれの情報毎に目的や役割が異なるため、どこにどのような情報を掲載するかが重要になります。
ここでは一般的なホームページに掲載される情報と目的・役割について説明いたします。

テキスト情報

テキストは「ユーザーにページの内容を分かりやすく適切に伝えるため」の情報です。
基本的には制作するホームページの全てのページにテキスト情報を掲載します。
またテキストは大きく以下のように分類されます。

キャッチコピー

ページ上部ヘッダーエリア付近などで、まず最初にユーザーに伝えたいメッセージをキャッチコピーで伝えます

https://osteria-ao.com/

キャッチコピーでユーザーの心を掴み、スクロールやその他のページへの誘導を促します。
クールな印象を与える場合はあまり具体的な文章などにせず、場合によってはメインビジュアルのみなどとします。
親近感などを与え、良い意味でハードルを下げたい場合には具体性のある文章がおすすめです。

見出しと本文

コンテンツ内の文章の読みやすさ・探しやすさのために見出しと本文を使います

https://jox-jp.com/

ユーザーはまず見出し部分を見て「読みたい」と感じた本文を読み始めます。
また見出しには「ページ全体の見出し(大見出し)」「ページ内にあるコンテンツの見出し(中見出し)」「コンテンツ内にあるテーマの見出し(小見出し)」など、いくつのレベルの見出しを作るとページ全体の構造がわかりやすくなります。

本文のみのコンテンツでは読みたい情報を探すことが難しくなってしまうため、見出しと本文を適切に使うことをお勧めします。

説明文

見出しの周辺に本文の概要を短くまとめた説明文を入れることで「この先にはこういった情報が載っている」ということを、明確にユーザーに伝えることができます

https://www.uchida-bs.co.jp/

本文が長文となる場合には、見出し・説明文・本文と並べると見出し部分で伝えきれなかった概要を説明文が補い、ユーザーに本文を読むことを促すことができます。

また、見出し・説明文・ボタンと並べることで、リンク先にどのような情報があるかをユーザーに明確に伝え、ユーザーがボタンをクリックすることを促すこともできます。
ユーザーが目的の情報を見逃してしまうことを防ぐ目的として、適切に説明文も入れることをお勧めします。

画像情報

画像は「ユーザーにイメージとして情報を伝えるため」の情報です。
大きく以下のように分類されます。

メインビジュアル

ページ上部のヘッダーエリア内で、まず最初にユーザーに伝えたいイメージをメインビジュアルで見せます

https://www.fujiya-peko.co.jp/cakebrand/

複数のイメージを見せたい場合はスライドショーを使って表現をします。
スライドはメインビジュアルのみではなく、商品などのイメージを複数見せる際にも効果的です。

写真

製品・人物・社内の様子など、具体的なイメージをユーザーに見せたい場合に写真を用います

https://aubloom.com/

その他にも風景・景色などの写真を用いて、ユーザーに大きなイメージを与えることもあります。
写真は実物をそのまま見せることができるため、より現実的で具体的なイメージをユーザーに与えることができます。

イラスト

写真では表現が難しいイメージを見せたい場合にはイラストを用います

また実際の人物や社内の様子を写真として載せることができない場合に、イラストで表現をすることもあります。

https://www.lty.co.jp/adoption

イラストは抽象的でデザイン性の高い表現ができるため、コンセプトに沿った世界観を表現することができます

アイコン

機能や情報を分かりやすいイメージとして伝えたい場合にアイコン表現を用います。

https://goodlife-inc.co.jp/

例えば「お問合せボタンにメールアイコン」「トップページに移動するボタンにホームアイコン」などがよく用いられます。
その他にもコンテンツをイメージで直感的に伝えるためにアイコンを使用するのも効果的です。

アイコンを使うことによって「ここを操作した時に何が行われるか・どこに移動するか / ここにどのような情報が載っているのか」を直感的に伝えることができます。

動画情報

動画表現はイメージ・時間・音声を使い写真やイラストよりもさらに強い印象をユーザーに与え、様々な情報をユーザーに伝えることができます

https://hokuyo-w.co.jp/

実写の場合はより具体的でより臨場感のある印象を与え、モーショングラフィックや3D表現の場合はより高いデザイン性や技術力を持ってユーザーに強い印象を与えることができます。

https://nnc-studio.jp/

また製品やサービスの使い方などを分かりやすく説明することもできます。
動画を用いることで、写真やイラストでは伝えきれない情報を与えることができます。

まとめ

ホームページに掲載する情報には様々な種類と役割があります。

デザイン性が高くても期待する情報がなければユーザーは離脱してしまいます。
各情報をしっかりと準備をして、ページ上から情報を的確にユーザーに伝えることでユーザーの満足度が上がり効果の期待できるホームページを作ることができます。

どのような情報を掲載したら良いか悩んだ場合には、同業種のサイトを見ていただくと参考になります!
それでも悩んでしまう場合には制作会社に相談をして、適切なアドバイスを受けながら準備をしていただくことをお勧めします。

弊社ではクライアント様からのご相談に親身にアドバイスをさせていただきます。
お悩みのことがあればお気軽にご相談ください!

こちらの記事はいかがでしたか?
+1
0
+1
0
+1
0
+1
1

【PR】Tech Tech Zoo

【PR】オリジナルキャラクター「てくてくず」を公開しました!

作品は、随時X(旧Twitter)で公開していきます!
ぜひ「てくてくず」の作品を応援していただけたら嬉しいです。

X(旧Twitter)アカウントはこちら:
https://twitter.com/tech_tech_zoo

RECENT ENTRIES

  • スクロールアニメーションに革命!CSSだけで実装する方法を解説します【JavaScriptなし】

    VIEW MORE
  • 【徹底考察】divタグとは【今更聞けない】

    VIEW MORE
  • WordPressの条件分岐タグまとめ(記述例あり)

    VIEW MORE

CONTACT

contact