PixelsとCanvaを使ってOGPとFaviconを作りまくる

• Facebook
• X(旧:Twitter)
• はてブ
• LINE
• Pocket

どうもこんにちは、如月翔也（@showya_kiss）です。
　今日はTwitter（現X）にWordPressやはてなブログ、TumblrのブログをURL付きで投稿するとOGPを使ってアイキャッチが表示されるんですが、僕はわりと面倒くさがりなのでOGPなんてどうでもいいか、と思っていたんですが、やっぱりOGP付きだと格好いいよね、という事実に突き当り、重い腰を上げて各種サイトのOGPと、あとOGPを圧縮してブラウザのタブに表示されるFaviconを大量に作りました。
　OGPを作るのにおいて、素材サイトのPixelsさんと、画像作成サイトのCanvaさんがめちゃくちゃ便利だったので、今日はそれを共有したいと思います。
　本来なら翔也ガジェットブログに書く内容かも知れないんですが、文字数が稼げない気がするのでこっちのサイトでちゃちゃっと書いてしまおうと思います。

Pixelsとは

Pixelsさんは無料素材の配布サイトです。
　メインは写真な感じなんですが、基本的に無料（有料のもあります）、改変オーケー、商用利用オーケーなのでOGPとかを作る背景を入手するのに非常に便利です。
　OGPについては1200×630の横長表示と、630×630の正方形表示の2種類がありえるので、横長の背景を使ってサイト名自体は630×630におさまるように作っておくとどっちの表示でもサイト名が表示されるので便利です。
　日本語検索ができるんですが、英語で検索した方がサジェストされる写真が多いので、具体的にイメージが有るならGoogle翻訳を使って英語キーワードで検索するとより良い素材が手に入ります。
　僕は放っておくと背景を宇宙にして白文字でサイト名を浮かそうとするんですが、それだけだとあまりにも芸がないのでいくつかパターンを作ってOGP画像をいっぱい作りました。

Canvaとは

CanvaさんはWeb上で動画や画像を作成できるサイトです。
　AIとかも使えるんですが基本有料機能なので僕は使いませんでした。フォントとかにも有料のがあるんですが、それも使わないで無料の範囲でなんとかしました。
　基本的にオリジナルサイズで1200×630を作ろうとするとFacebook表示というテンプレートがあるのでそれを選び、さっきPixelsで見つけてきた画像（ダウンロードしたもの）をCanvaにアップして、背景を選ぶとサイズ変更ができるので拡大縮小を使って1200×630に合わせます。
　最初から「そのサイズで切る」イメージを持ってPixelsで画像を探すとジャストでOGPに丁度よい背景が切り取られるので、後はテキストツールからテキストを入力し、色を選び、サイズを決め、行間を調整し、配置を左右「中央」上下「中央」にしつつ、テキストウィンドウが630pxに収まるように調整してダウンロードしてくるだけです。
　背景に文字が紛れる場合「エフェクト」から「袋文字」を選ぶと文字に枠を付けられるので、白文字なら枠に黒、黒文字なら枠に白、みたいな感じで設定してあげるとあっという間にOGP画像ができあがります。
　OGPについては普通のWordPressでは自分でテーマに手入力しないといけないんですが、僕は有料テーマのTHE THORを使っているのでOGP画像とFacebook IDを指定してあげるだけで簡単にOGP設定ができます。

Facebook IDの確認方法は舐めているとしか思えない

OGPにはFacebook IDが必要なんですが、これ確認方法が馬鹿みたいで、ちゃんと確認する方法が現状ないのです。
　正式ではないですが、以下の手順で自分のFacebook IDが確認できるので、必要な人は以下で確認して下さい。

• Facebookにログイン
• 自分のアイコンをクリック
• プロフィールを選択
• プロフィール画像を見るを選択
• URLが「https://www.facebook.com/photo/?fbid=xxxxxxxxxxxx&set=a.YYYYYYYYYY&locale=ja_JP」と表示される
• Facebook IDはxxxxxxxxxの部分。手でコピーする

馬鹿か、という感じですが、一応これで確認できます。

正式にOGP対応するにはFacebook公開を覚悟しないといけないので

まあ調べる人がいるかどうかは別として、OGPを設定するという事はFacebook IDを公開するという事なので、今まで明らかにしてこなかったFacebookアカウントがバレる可能性があるという事です。
　僕はFacebookは如月翔也でやっており、関係者とほぼ繋がっていないので別にバレてもいいんですが、ちょっとだけいろフォロワーさんに迷惑がかかると嫌だなぁ、と思います……。

という訳で、今日はOGPについてPixelsさんとCanvaさんを使って大量に生成したよ、というお話でした。

• Facebook
• X(旧:Twitter)
• はてブ
• LINE
• Pocket