前回は、AI時代のサイト自作について、お話ししました。
前回の記事はこちらです。
AI時代のサイト自作とは？スモールビジネスが外注に依存しない方法
今回からは、番外編です。
本編では、AIと一緒にコーポレートサイトを作った全体像をお話ししました。
ここからは、もう少し細かいテーマを掘り下げます。
今回のテーマは、OGP画像です。
今回制作したコーポレートサイトはこちらです。
OGP画像とは？
OGP画像とは、ページがSNSやチャットで共有されたときに表示される画像のことです。
例えば、記事やページのURLを共有したときに、タイトルや説明文と一緒に画像が表示されることがあります。
その画像が、OGP画像です。
OGP画像が表示される場所
OGP画像は、主に次のような場所で表示されます。
- X、旧TwitterでURLを共有したとき
- FacebookでURLを共有したとき
- LINEでURLを送ったとき
- SlackやChatworkなどでURLを共有したとき
- 一部のブックマークサービスで表示されるとき
つまり、OGP画像は、サイトの外側で見られる画像です。
サイトの中だけを整えても、共有時の画像が雑だと、少しもったいない。
第一印象に関わるからです。
なぜ、OGP画像を作ったのか？
今回のコーポレートサイトでは、OGP画像もきちんと作りました。
サイト全体の印象を、そろえたかったからです。
サイト本体が整っていても、SNSで共有されたときの画像が弱いと、印象が途切れます。
特に、今回のサイトは「AI時代のDIY」を実物で示すためのサイトです。
だからこそ、見えない部分まで整えたいと考えました。
OGP画像で整えたかったこと
- サイト全体の世界観を、共有時にも伝える
- ページ内容が、ひと目で分かるようにする
- 安っぽい印象に、ならないようにする
- 画像とサイト本体の雰囲気を、そろえる
- スマホで見ても、文字が読みやすいようにする
OGP画像は、細かい部分です。
でも、細かい部分ほど、サイト全体の完成度に影響します。
AIでOGP画像を作ってみた
今回、OGP画像の制作にも、AIを活用しました。
ただし、AIに丸投げしたわけではありません。
サイトの雰囲気に合わせて、方向性を決めながら作りました。
最初に考えたこと
OGP画像を作る前に、まず次のことを整理しました。
- どんな雰囲気にしたいか？
- どんな色を使うか？
- 文字を入れるか？
- ページごとに画像を変えるか？
- 共通画像だけで済ませるか？
- スマホで共有されたときに、読みやすいか？
OGP画像は、ただきれいな画像を作れば良いわけではありません。
サイト本体と、自然につながっていることが大切です。
今回の方向性
今回のOGP画像では、次のような方向性を意識しました。
- 落ち着いた印象にする
- 深い緑や朱色の雰囲気を活かす
- 文字を、読みやすくする
- 余白を、しっかり取る
- コーポレートサイトらしい信頼感を出す
- このは屋らしい、静かな雰囲気にする
派手な画像には、しませんでした。
今回のサイトでは、強い売り込み感よりも、落ち着いた信頼感を大切にしたかったからです。
トップページ用と下層ページ用を分けた
今回のサイトでは、トップページ用のOGP画像だけでなく、下層ページ用の画像も用意しました。
すべてのページに、専用画像が必要というわけではありません。
ただ、重要なページには、個別のOGP画像があると分かりやすくなります。
専用OGP画像を用意したページ
今回、専用のOGP画像を設定した主なページは、次の通りです。
ページごとに画像を分けると、共有されたときに内容が伝わりやすくなります。
「どのページのリンクなのか」が、画像からも分かるからです。
専用画像を用意しなかったページ
一方で、すべてのページに専用画像を作ったわけではありません。
規約や問い合わせ系のページには、専用OGP画像は不要と判断しました。
これらのページは、共有される頻度も、訴求の役割もそこまで高くありません。
そのため、共通のOGP画像で十分だと考えました。
必要なところに、必要な分だけ作る。
これも、サイト制作では大切です。
OGP画像のサイズはどうしたか？
OGP画像では、サイズも重要です。
一般的には、横1200px、縦630pxがよく使われます。
今回も、このサイズを基本にしました。
1200×630pxを使った理由
- SNSで、きれいに表示されやすい
- 横長のカード表示に、対応しやすい
- 文字を入れても、読みやすくしやすい
- 多くのサイトで、標準的に使われている
もちろん、SNSやサービスによって、表示のされ方は少し変わります。
そのため、細かく完璧に合わせようとしすぎると、きりがありません。
まずは、一般的なサイズで作り、実際の表示を確認することが大切です。
OGP画像に文字を入れるときの注意点
OGP画像には、文字を入れることがあります。
今回も、ページの内容が分かるように、文字入りの画像を用意しました。
ただし、文字を入れる場合は注意が必要です。
文字入りOGP画像で気をつけたこと
- 文字を、小さくしすぎない
- 文字数を、増やしすぎない
- 背景との contrast を、しっかり取る
- 端に寄せすぎない
- スマホで見ても、読める大きさにする
- ページタイトルと、ズレないようにする
OGP画像は、スマホの小さな画面で見られることが多いです。
PCで見たときに読めても、スマホでは読みにくいことがあります。
そのため、文字は大きめに、余白は広めにした方が安心です。
文字を入れすぎない
OGP画像に、文章を詰め込みすぎるのはおすすめしません。
文字が多いと、読みにくくなります。
画像としても、少し窮屈に見えます。
今回も、できるだけ短い言葉で伝えるようにしました。
- ページ名を、分かりやすく入れる
- 説明文は、入れすぎない
- 余白を、しっかり残す
- サイト全体の雰囲気を、優先する
OGP画像は、記事本文ではありません。
役割は、ひと目で印象を伝えることです。
AIで画像を作るときに、不安だったこと
AIで画像を作るときに、気になることがあります。
それが、商用利用や著作権です。
今回も、この点はかなり気にしました。
確認したこと
画像については、次の点を確認しました。
- 商用利用して問題ないか？
- 他社の画像に、似すぎていないか？
- 人物やロゴなど、権利上の問題が出ないか？
- サイトの雰囲気に、自然に合っているか？
- 今後も、安心して使えるか？
会社サイトで使う画像なので、安心感は大切です。
少しでも不安がある場合は、出どころや利用条件を確認した方が良いです。
不安を減らす方法
AI画像を使う場合、不安を減らすために、次のような考え方があります。
- 特定の人物や作品に、似せない
- 有名ブランドのロゴや商品を、入れない
- 実在企業のデザインを、真似しない
- 抽象的な背景や、独自の構図にする
- 使用しているAIツールの利用条件を、確認する
- 必要であれば、人間が追加で加工する
AI画像は、便利です。
ただし、便利だからこそ、安心して使える形に整えることが大切です。
OGP画像のファイル形式はどうしたか？
OGP画像では、ファイル形式も考えました。
サイト本体の画像では、AVIFやWebPも使っています。
ただし、OGP画像では、JPEGを基本にしました。
OGP画像でJPEGを使った理由
- SNSや外部サービスで、対応されやすい
- 互換性が高い
- 写真やグラデーションに、向いている
- 設定時に、扱いやすい
WebPやAVIFは、サイト表示では便利です。
ただ、OGP画像では、外部サービス側の対応も考える必要があります。
そのため、今回はJPEGを指定しました。
HTML側では、どんな設定をしたか？
OGP画像を作っただけでは、表示されません。
HTML側に、画像の情報を設定する必要があります。
設定した主なタグ
今回のページでは、主に次のような情報を設定しました。
- og:title
- og:description
- og:url
- og:image
- og:image:type
- og:image:width
- og:image:height
- twitter:card
- twitter:image
これらを設定することで、SNSなどで共有されたときに、画像やタイトルが表示されやすくなります。
ただし、サービスによっては、表示内容がキャッシュされることもあります。
画像を差し替えた直後に、すぐ反映されないこともあります。
OGP画像は、確認までセットで考える
OGP画像は、作って設定したら終わりではありません。
実際に、どのように表示されるかを確認することが大切です。
確認したいこと
- 正しい画像が、表示されるか？
- タイトルが、自然に表示されるか？
- 説明文が、長すぎないか？
- 画像の文字が、読めるか？
- ページごとに、画像が切り替わっているか？
- 古い画像が、キャッシュされていないか？
特に、SNS側のキャッシュには注意が必要です。
画像を修正しても、すぐに新しい画像が表示されないことがあります。
その場合は、各サービスの確認ツールやデバッグツールを使うと、状態を確認しやすくなります。
OGP画像をページごとに変えるメリット
OGP画像は、共通画像だけでも設定できます。
ただ、重要なページでは、ページごとに変えるメリットがあります。
メリット1：ページ内容が伝わりやすい
ページごとに画像が違うと、共有されたときに内容が分かりやすくなります。
例えば、使命・理念のページなら、理念のページだと伝わる画像にできます。
無料テンプレート申込ページなら、テンプレートの案内だと分かる画像にできます。
メリット2：サイト全体の完成度が上がる
下層ページまで画像が整っていると、サイト全体の完成度が高く見えます。
細かい部分まで作られている印象になるからです。
実際に、見えない部分まで整えると、運営側としても安心感があります。
メリット3：内部リンクや紹介時に使いやすい
ページごとにOGP画像があると、SNSやブログ記事で紹介しやすくなります。
この実践記のように、記事内で各ページへリンクするときにも、共有時の見え方が整います。
細かいことですが、長く運用するほど効いてきます。
OGP画像を作るときの注意点
今回の実践をもとに、OGP画像を作るときの注意点をまとめます。
1. サイト本体と雰囲気をそろえる
OGP画像だけ、別の雰囲気にならないようにします。
- 色を、サイト本体と、そろえる
- フォントの雰囲気を、そろえる
- 余白の取り方を、そろえる
- 言葉のトーンを、そろえる
サイトとOGP画像の雰囲気がそろうと、印象に一貫性が出ます。
2. 文字を小さくしすぎない
OGP画像は、小さく表示されることがあります。
そのため、文字は大きめにした方が安心です。
- 短いタイトルにする
- 文字数を、減らす
- 背景との contrast を、確保する
- 端に、文字を寄せすぎない
読めない文字は、入れてもあまり意味がありません。
読みやすさを優先することが大切です。
3. 画像を重くしすぎない
OGP画像は、表示速度にも少し関わります。
必要以上に重い画像は、避けた方が安心です。
- 適切なサイズにする
- 圧縮する
- 不要に高画質にしすぎない
- ページごとに、ファイル名を分かりやすくする
きれいさと軽さのバランスを取ることが大切です。
4. 権利面を確認する
AI画像や素材を使う場合は、権利面も確認します。
- 商用利用できるか？
- 利用規約に、問題はないか？
- 他社の素材に、似すぎていないか？
- ロゴや人物の扱いに、問題はないか？
会社サイトで使う場合は、特に慎重に見た方が良いです。
OGP画像は、小さな信頼感につながる
OGP画像は、サイト本体ほど目立ちません。
でも、URLが共有されたときに、最初に見られることがあります。
- そこで、雑な画像が出るのか？
- 整った画像が出るのか？
印象は、少し変わります。
特に、コーポレートサイトでは、細部の整い方が信頼感につながります。
OGP画像は、地味ですが、整えておいて損はありません。
まとめ
今回は、AIでOGP画像を作った実践についてお話ししました。
要点をまとめます。
- OGP画像は、SNSやチャットで共有されたときに表示される画像
- サイトの外側で見られる、第一印象に関わる要素
- AIを使えば、OGP画像の制作もしやすくなる
- ただし、サイト本体との雰囲気をそろえることが大切
- 重要なページでは、専用OGP画像を用意すると分かりやすい
- 規約や問い合わせ系は、共通画像でも十分な場合がある
- 文字は大きめにし、スマホでも読めるようにする
- 画像形式は、互換性を考えてJPEGを基本にした
- 商用利用や著作権まわりは、慎重に確認する
OGP画像は、サイト制作の中では後回しにされがちです。
でも、URLが共有されたときの印象に関わります。
今回のように、AIと一緒にコーポレートサイトを作るなら、OGP画像まで整えておくことをおすすめします。
実際のコーポレートサイトはこちらです。
次回は、Webフォントの自社配信についてお話しします。
フォントの見た目、表示速度、商用利用、更新管理など、実際に迷った部分を整理します。
