OGPとは「Open Graph Protocol」の略で、SNS等でWebページの内容を伝える為のプロトコルです。
Facebookではお馴染みですね。
投稿がシェアされるかどうかに影響するとされるOGP画像について、本日は新しいSiGNを用いてカスタマイズする方法を解説します。
BiNDで自動設定されるOGP画像について
BiNDでは、ページタイトルや説明文などの基本設定が行われていれば、OGP画像が自動で設定される仕組みになっています。その際の画像は、サイトシアターで表示されるサムネイル画像が使用されます。
なので、普通にアップロードすると縦長のレイアウトになります。
このままでも問題はないのですが、画像を大きく使ってインパクトを出したかったり、意図した画像にする事で訴求内容を明確にしたり、オリジナルのOGP画像を設定することで、より効果的なアピールが出来る様になります。
SiGNでOGP画像をデザインしてみよう
先ずはオリジナル画像の制作から。
新しいSiGNを使って実際に作ってみましょう。
SiGNテンプレートから選ぶ
SiGNテンプレートのSNSの中から「OGP画像1」を選択します。
すると1,200ピクセル×630ピクセルのテンプレートが開かれます。
以前はPCやスマホなどデバイスによって画角が違っていたのですが、最近は統一された様なのでこのサイズで作成すればOKです。
Facebookのタイムラインを見ても判る通り、OGP画像はタイトルや説明文と併用されますので、画像自体の情報量は最低限にしましょう。
欲張って情報を詰め込むと逆効果になるので気をつけて下さい。
テキストで伝えたいことはタイトルや説明文で補いましょう。
そう云う意味でテンプレートも背景画像とロゴと云うシンプルなデザインになっています。
背景を差し替える
まず、余計なレイヤーを削除した後、画像レイヤーの画像を差し替えます。
ここではBiNDクラウドのサービスサイトで使うOGP画像を作る想定にするため、トップページで使われているCG背景動画のイメージを用います。
ここで気を付けて頂きたいのは、テンプレートの画像レイヤーには予めフィルターが施されています。
意図しない場合は「フィルターなし」を選択してリセットしましょう。
ロゴとテキストを配置
続いてロゴとテキストを設定します。
画像レイヤーからロゴ画像を配置して、テキストレイヤーを用いて「オンラインホームページ作成サービス」を配置します。
テキストはサービスサイトでも使われている「筑紫ゴシック Pr5 D」で合わせました。
Webフォントと同じフォントが使えるので、デザインの世界観が統一出来るのが嬉しいですね。
以前はWebフォントとSiGNフォントが共通していないのが悩ましいポイントだったので漸く解決。
さて、ここで気になるのは文字の視認性。
緑色の背景に緑色の文字だと読み難いですね。
シェイプを用いて文字の視認性アップ
白いシェイプレイヤーをロゴとテキストの後ろに配置します。
レイヤーの順番は画面左のレイヤーリストをドラッグして入れ替えて下さい。
背景画像も少し見せたいので透明度を0.85に設定します。
ロゴとテキストが見易くなりましたね。
これでオリジナルのOGP画像は完成です。
完成した画像を
メニュー＞画像ファイルとして保存
からデスクトップなどに書き出しましょう。
前半はここまで。
次回は実際にOGP画像を設置する流れまでを解説します。
POINT
- BiNDでのOGP画像は基本設定ができていれば自動で設定されるが、オリジナルで用意するのがお勧め。
- OGP画像を作成する場合のサイズは1,200ピクセル×630ピクセルに。
- OGP画像はタイトルや説明文と併記されるため情報量は最小限に。欲張って詰め込むと逆効果。