---
title: "シェア画像の設定"
source: "https://vibely.site/docs/manual/share-image-settings"
section: "操作マニュアル"
category: "受講生アウトプット"
updated: "2026-06-04"
---

# シェア画像の設定

シェア画像（OGP画像）は、ブログ記事のURLがSNSやチャットでシェアされたときに、リンクのプレビューとして表示される画像です。
この記事では、シェア画像の背景・文字色・フォントの設定方法を説明します。

## シェア画像（OGP画像）とは

ブログ記事のURLがX・Slackなどでシェアされると、リンクのプレビュー画像が表示されます。
vibelyでは、記事を公開すると、設定した背景画像に記事タイトルと投稿者を重ねた画像が自動で作られます。

> **メモ**
>
> シェア画像の設定は、ブログ記事用の設定です。
> 実績（作品）の場合は、設定したサムネイル画像がそのままシェア画像になります。
> 実績については[「実績機能」](https://vibely.site/docs/manual/works-feature)をご覧ください。

## 設定ページを開く

左メニューの「受講生アウトプット」→「ブログ」を開き、「公開・通知設定」タブを選びます。
その中の「シェア画像」の項目で設定します。

![シェア画像の設定。OGP背景画像のアップロードとプレビュー](https://xzivcqbzwwetyrrkazll.supabase.co/storage/v1/object/public/app-public/public/document-articles/1780535352796-a6b71dda-bb5e-436a-ae1a-6c68ff1052e7.png)

*図1：シェア画像の設定。OGPの背景画像をアップロードし、「OGP画像プレビュー」で確認できる*

## 設定できる項目

- **OGPの背景画像**
  シェア時に表示される画像の背景です。
  「高さ630px × 幅1200px」のサイズで、クリックまたはドラッグ＆ドロップでアップロードします。
  未設定の場合は、vibelyの標準デザインが使われます。
- **文字の色**
  記事タイトルや投稿者名の文字色です（初期値は #333333）。
- **フォント**
  「ゴシック体」または「明朝体」から選べます。
- **Instagramストーリーズの背景画像**
  Instagramストーリーズ用の縦長画像です（縦長1080px × 1920px推奨）。
  未設定の場合は、デフォルトの背景が使われます。

設定したら「保存」を押します。
「OGP設定を保存しました」と表示されれば完了です。

> **メモ**
>
> シェア画像の設定には、ブログ設定の更新権限が必要です。

## 背景画像の寸法

アップロードした背景画像の上に記事タイトルなどが重なった状態で表示されます。
文字が表示される位置を参考に、背景画像を作成ください。

### OGPの背景画像

画像サイズ：高さ630px - 幅1200px

![image](https://xzivcqbzwwetyrrkazll.supabase.co/storage/v1/object/public/app-public/public/editor/1780546134324-517f2669-d518-4466-8750-b86306477a0c.png)

### Instagramストーリーズの背景画像

画像サイズ：高さ1920px - 幅1080px

![image](https://xzivcqbzwwetyrrkazll.supabase.co/storage/v1/object/public/app-public/public/editor/1780546166217-c5d6fc82-89db-42f6-af83-05d8a8400de5.png)

## プレビューで確認する

「OGP画像プレビュー」を押すと、実際に作られるシェア画像を確認できます。
「ストーリーズ画像プレビュー」を押すと、Instagramストーリーズ用の画像を確認できます。

## シェア画像が作られる仕組み

記事を公開すると、設定した背景画像の上に、記事タイトル（上部）と投稿者（下部）が、選んだ文字色・フォントで自動的に描かれます。
画像のサイズは1200×630px（SNSの標準サイズ）です。
記事のタイトルを変更すると、シェア画像も自動的に作り直されます。

> **メモ**
>
> シェア画像（OGP画像）は「シェアされたときのプレビュー画像」の設定です。
> 記事ページに表示する共有ボタン自体の表示・非表示は、同じ「公開・通知設定」の「SNS共有設定」で行います。