【アイコン】と【ヘッダー】の違いとは？意味の違いと正しい使い方を例文で解説

アイコンとヘッダーの分かりやすい違い

アイコンとヘッダーの違いは、「小さな目印として使う画像」と「画面の上部に広く表示する画像」にあります。
アイコンは、利用者を見分けるために投稿の横などに小さく表示される画像です。
ヘッダーは、プロフィール画面やページの上部に横長に広く表示される部分や画像です。

アイコンとは？

アイコンとは、利用者や機能を小さな絵や図柄で表し、見分けやすくした画像のことです。
投稿の横やアプリの一覧など、狭い場所で誰のものかを一目で示す場面で用いられます。
小さく表示されても判別できるよう、単純で見分けやすい形が向くという性質を持ちます。

画像を指すか操作ボタンの絵を指すかは、文脈によって変わります。

アイコンの例文

( 1 ) 投稿の横に、小さく表示されるアイコンを猫の絵に変えた。
( 2 ) アイコンは細部が潰れやすいので、単純な図柄にした。
( 3 ) アイコンを見るだけで、誰が書いたか見分けられる。
( 4 ) アプリのアイコンは、画面の一覧から探すときの目印になる。

アイコンの会話例

プロフィールのアイコンを変えたいんだけど、どこで直すの？

設定の画面から、小さな画像を差し替えられるよ。

画面の上のほうの大きな画像も同じ場所？

それはヘッダーだよ。別の項目で設定するんだ。

ヘッダーとは？

ヘッダーとは、ページや画面の上部に置かれる部分、またはそこに横長で表示される画像のことです。
プロフィール画面の背景を飾る場面や、サイトの見出し部分を作る場面で用いられます。
画面の幅いっぱいに広がり、全体の雰囲気を印象づけるという性質を持ちます。

サービスによって表示される大きさが決まっており、画像の端が切り取られて見える場合があります。

ヘッダーの例文

( 1 ) プロフィール画面の上部に、風景写真をヘッダーとして設定した。
( 2 ) ヘッダーは横長なので、縦長の写真は端が切れてしまう。
( 3 ) サイトのヘッダーに、題名と案内の項目を並べた。
( 4 ) ヘッダーの画像を替えただけで、画面の印象が変わった。

ヘッダーの会話例

ヘッダーに使う写真、縦長でも大丈夫かな。

横長に表示されるから、端が切れることがあるよ。

じゃあ、横長の写真を選んだほうがいいね。

そうだね。アイコンは正方形に近いほうが収まりやすいよ。

アイコンとヘッダーの違いまとめ

アイコンとヘッダーの違いは、小さく表示して見分けるための画像か、上部に広く表示して雰囲気を示す画像かにあります。
アイコンは利用者や機能を一目で示す小さな目印であるのに対し、ヘッダーは画面上部に横長で広がる部分です。
小さく見分けたいなら「アイコン」、画面の上部を広く飾りたいなら「ヘッダー」と区別されます。