代表画像・とは？初心者にも分かる意味と使い方の基礎共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

代表画像とは？

代表画像とは、ウェブページの「顔」となる主画像のことです。ページを開いたときに最初に目に入る画像であり、SNSでそのURLがシェアされたときにも表示されるサムネイルになります。

目的は2つ: 読者の興味を引くことと、内容を一言で伝えること。適切な代表画像を設定しておくと、クリック率（CTR）や滞在時間の改善につながります。

代表画像と他の画像の違い

「代表画像」は、そのページの内容を象徴する1枚を指します。対して、本文中に挿入するアイキャッチ以外の画像は、補足的な情報を伝える役割を持ちます。ソーシャルメディアでの表示元となる点が大きな特徴です。

どこで使われるのか

主に以下の場面で使われます。

・記事ページのトップに表示される

・検索結果のサムネイルとして表示される

・SNSの投稿プレビューとして表示される

選び方のコツ

良い代表画像を選ぶと、読者の関心を引きやすく、内容を直感的に伝えることができます。選ぶ際のポイントは次のとおりです。

内容の要約性：1枚で記事の要点が分かるとベストです。

視認性とデザイン：文字が見やすく、ブランドカラーと統一感がある画像を選ぶと印象が良くなります。

解像度と比率：高解像度で、SNSや検索結果の推奨比率に対応できるサイズを選びます。

実際の設定では、記事ページの本文とは別に代表画像を設定します。多くのCMS（Content Management System）では「アイキャッチ画像」や「OG画像」という名称で設定欄が用意されていますが、意味としてはほぼ同じです。

画像の推奨サイズと形式

実務では、OG（Open Graph）画像としての推奨サイズを意識します。ここでは代表的なサイズを表にして示します。

<th>用途

推奨サイズ	コメント
OG画像（open graph）	1200×630 または 1200×628	横長の比率1.91:1が一般的。端末によってトリミングされることがあります。
Twitterカード	1200×675	大きなカードで表示される場合が多いです。
記事のヘッダー推奨	本文長とデザインによって変動	スマホでも見やすいサイズを意識してください。

上の表のサイズを基本に、実際にはファイルサイズを軽く保つことも重要です。一般に100KB前後〜300KB程度に収めると表示速度に影響しにくくなります。

実装のポイント

HTMLのhead部分には、代表画像を知らせるメタ情報を設定します。例として以下のようなタグを入れると、検索エンジンやSNSが正しく画像を取得できます。

・og:image：ページの代表画像を指定します。

・twitter:image：Twitterカード用の画像を指定します。

また、アクセシビリティの観点からは、alt属性を必ず設定してください。代替テキストは画像の内容を短く伝える案内文にします。

まとめ

代表画像は、ページの第一印象とクリック率を左右する重要な要素です。適切に設定し、内容を正しく伝える画像を選ぶことで、閲覧者が記事に興味を持ちやすくなります。ブランドの一貫性を保つためにも、全体のデザインと整合性を意識して選択しましょう。

代表画像の同意語

アイキャッチ画像: 記事や投稿の顔となり、SNSのプレビューや一覧表示で目を引く主役画像。読者のクリックを誘う目的で使われる。
アイキャッチ: 記事や投稿の顔となる代表的な画像。SNSや一覧で表示される起点となるイメージ。
サムネイル画像: 一覧ページや検索結果など、小さく表示される補助画像。複数の投稿を並べる際に使われることが多い。
サムネイル: サムネイル画像の略称。小さく表示される代表的な画像。
表紙画像: 記事やページの表紙としてトップに表示される画像。読者の第一印象を決める役割。
表紙: 表紙画像の略称。トップページでの入り口となる視覚要素。
トップ画像: ページの最上部やヒーロー領域に表示される主要画像。
トップビジュアル: サイトや記事の冒頭を飾る大きなビジュアル。雰囲気を決める役割。
メインビジュアル: ページのメインとなる主役画像。全体の雰囲気を決定付けるビジュアル。
ヒーロー画像: デザイン用語で、ヒーローセクションに置く大きく目立つ画像。
ヒーローイメージ: ヒーロー画像と同義。サイトの最初の強い印象を作る。
フィーチャー画像: CMSで投稿の代表画像として設定される、主役画像。
リード画像: 本文の導入部を伝える画像。本文の先頭イメージとして使われることが多い。
リードビジュアル: リード画像と同義。導入部のビジュアル。
OG画像: Open Graph用に設定するSNS共有時の代表画像。
OGP画像: OG画像とも呼ばれる。SNSでのサムネイルとして使われる画像。
プレビュー画像: 記事の概要を伝える先行画像。検索結果や一覧ページで使われることが多い。
一覧用画像: 記事一覧やカテゴリ一覧で使われる、補助的な画像。
メイン画像: 記事本文の中心となる主要ビジュアル。代表画像の実務的な呼称。
キャッチ画像: SNS等で注目を集めるための、印象的な代表画像。

代表画像の対義語・反対語

非代表画像: 代表としての機能を果たしていない画像。記事の主題を効果的に象徴していない、代表性が欠如した写真（関連記事：写真ACを三ヵ月やったリアルな感想【写真を投稿するだけで簡単副収入】）。
代替画像: 代表画像の代わりに使われる別の画像。主画像としては使われず、補助的に用いられることが多い写真。
補足画像: 主要情報を補足するための画像。代表性を強く打ち出さず、説明目的が主。
サブ画像: メインではなく、二次的な画像。複数枚ある場合の補助的役割を担う写真。
追加画像: 記事内で追加的に掲載される写真。代表画像と同等ではなく、補助的に用いられることが多い。
象徴性が低い画像: 記事のテーマを象徴・代弁しない、代表性の弱い画像。
本文挿入画像: アイキャッチではなく本文中に挿入される画像。代表性は限定的で、補足的な役割が中心。