MacでOpen GraphやSNSのプレビュー画像を作成
X、LinkedIn、Slack、WhatsApp、iMessageでリンクが共有されたときに表示される、1200 × 630のカードを作成します。
MacでOG画像作成
サンプルファイルを使ったアプリのスクリーンショット。
OG画像作成の使い方
- 1
タイトルを入力
必要なのはこれだけです。必要に応じて、サブタイトルと、タイトルの上に短いタグを追加できます。ファイルは不要です。
- 2
スタイルを選ぶ
カラーテンプレートか好きな2色、グラデーションの方向、フォントを選びます。質感がほしければ、控えめなグリッドやフィルムグレインを加えましょう。
- 3
必要なら画像を追加
ロゴ、製品写真、背景写真をドロップし、最初の画像の使い方を選びます。
- 4
「カードを作成」をクリック
1200 × 630のカードが「ダウンロード › OneMacTools」内の日付付きフォルダに保存され、ペーストするためのメタタグがアプリに表示されます。
- 5
ページに追加する
画像をサイトにアップロードし、実際の画像のアドレスを使ってタグをページの<head>に貼り付けます。
OG画像作成でできること
タイトルを入力し（タグとサブタイトルは任意）、スタイルか独自の色、グラデーションの方向、フォントを選び、必要に応じてグリッドやフィルムグレインを追加します。ロゴ、右側にカードとして浮かぶ商品写真、背景写真も追加できます。長いタイトルは収まるよう縮小されます。ページにペーストするメタタグも得られます。
こんなときに
- ブログ記事にきちんとしたシェア画像を付ける
- 新製品の発表
- リンクのプレビューをプロらしく見せる
オプションの説明
- タイトル
- 必須。メインの見出しです。長いタイトルは自動で縮小され、複数行に折り返されます。
- サブタイトル（任意）
- タイトルの下に入れる小さな一行。一文の説明など。
- タイトルの上のタグ（任意）
- タイトルの上に表示する大文字の短いラベル（NEWやGUIDEなど）。テンプレートのアクセントカラーで表示されます。
- スタイル
- ミッドナイト、オーシャン、サンセット、フォレスト、グレープ、ペーパー、コーポレート、またはカスタムの色。各テンプレートで背景、文字、アクセントの色が決まります。
- 色（16進値を2つ）
- 「スタイル」が「カスタムカラー」のときのみ表示されます。グラデーションの始まりと終わりの色を、「#0F172A, #2563EB」のように16進値2つで入力します。テキストは最初の色に合わせて自動で暗い色か明るい色になります。
- グラデーション
- 斜め、左から右、上から下、単色。単色では最初の色だけを使います。
- フォント
- Sans、Serif、Rounded、Mono。いずれもMacのシステムフォントのバリエーションです。
- 画像を追加した場合の使い方
- ロゴ（左上）、商品写真（右側のカード）、背景写真。最初にドロップした画像に適用されます。背景写真は白い文字が読みやすいよう暗くなります。2枚目の画像は常に商品写真として使われます。
- 控えめなグリッド
- デフォルトはオフ。背景にうっすらとグリッドを加えます。
- フィルムグレイン
- デフォルトはオフ。細かい粒子を加えて、やわらかく印刷物のような風合いにします。
- 保存形式
- PNGまたはJPEG。PNGはテキストや単色を鮮明に保ち、背景に写真を使う場合はJPEGのほうが小さくなります。
おすすめの使い方
- タイトルは6〜10語程度の短さにしましょう。プレビューは小さく表示されることが多く、言葉が少ないほど大きく読みやすいまま表示されます。
- 重要な言葉は端ぎりぎりに置かないでください。アプリによってはプレビューが少し切り取られます。
- グラデーションの上にきれいに載るよう、背景が透明なロゴを使いましょう。
- ページや投稿ごとに同じスタイルのカードを作れば、共有したリンクに統一感が生まれます。
- アプリはプレビューをキャッシュするので、公開後はデバッガで確認するか、チャットにリンクを貼ってテストしましょう。
対応形式
- 入力
- ファイルは不要です。必要に応じてロゴ、商品写真、背景写真（最大2枚）を追加できます。
- 出力
- 「og-」にタイトルを続けた名前の1200 × 630のPNGまたはJPEG。アプリにはog:imageとTwitterカードのメタタグも表示されます。
- メタタグには仮のアドレスが入っています。画像をアップロードする場所のアドレスに置き換えてください。
OG画像作成についての質問
Open Graph画像はどのサイズにすべきですか？
1200 × 630ピクセルはリンクプレビューで広く使われているサイズで、OG画像作成もこのサイズで作成します。
デザインソフトなしでリンクのプレビュー画像を作成するには？
「OG画像作成」を開き、タイトルを入力してスタイルを選び、「カードを作成」をクリックします。ファイルを追加する必要はありません。
OG画像をWebサイトに追加するには？
画像をサイトにアップロードし、アプリに表示されるmetaタグをページの<head>に貼り付けます。例のアドレスは実際の画像のアドレスに置き換えてください。
自社のブランドカラーを使えますか？
はい。「カスタムカラー」を選び、16進値を2つ入力してください。テキストの色は、それに合わせて濃い色と明るい色が切り替わります。
カードにロゴやスクリーンショットを入れられますか？
はい。ドロップして、「ロゴ（左上）」か「商品写真（右側のカード）」を選んでください。2枚目の画像を追加すると、ロゴと商品写真を両方入れられます。
リンクを共有しても新しい画像が表示されないのはなぜですか？
アプリはリンクプレビューをキャッシュします。タグがページの<head>内にあり、画像のアドレスが正しく機能していることを確認してから、各プラットフォームのプレビューツールやデバッグツールで更新してください。
OG画像作成はファイルをアップロードしますか？
いいえ。OG画像作成はすべてMac上で動作するので、ファイルが外に出ることはなく、オフラインでも使えます。
OG画像作成は元のファイルを変更しますか？
いいえ。結果は「ダウンロード › OneMacTools」内の日付つきフォルダに新しいファイルとして保存され、元のファイルは、そうする旨のオプションをオンにしない限り、そのまま残ります。
OG画像作成に必要なものは？
macOS 26以降を搭載したMacだけ。ほかにインストールするものはありません。
次にすること
Webサイトに必要なすべてのファビコンに加え、Webマニフェストと、ページに貼り付けるHTMLも作成します。
PNGを圧縮色数を減らしてPNGを60〜80%軽量化。透明部分はそのままなので、スクリーンショット、ロゴ、アイコンに最適です。
