ソフトなしでOK！SNS用の画像の作り方をハッシー先生に聞いてみた
先生、シェアしたときに出る画像が大事なのは分かったんですけど、ボク、デザインのソフトを持ってないんです。どうやって作ればいいですか？
ソフトがなくても大丈夫。ブラウザだけで、タイトルと写真を入れればちゃんとした画像が作れるよ。
OGP画像ってなぜ大事？
OGP画像は、ページがSNSやLINEでシェアされたときに大きく表示される画像です。タイムラインを流れていく中で、人の目に最初に飛び込んでくるのは文字よりも画像です。ここで「なんだろう」と思ってもらえるかどうかで、ページを開いてもらえるかが変わります。
とはいえ、ページを作るたびにデザイナーに頼むのは大変ですよね。園のブログ、地域のイベント告知、採用のお知らせ。更新するのは多くの場合、ふだん別のお仕事をしている先生や職員さん、お店の方です。画像がないまま公開されたり、毎回同じロゴ画像になったりするのは、よく見かける光景です。
僕は、伝えたいことがある人が、自分の手で発信できることが大切だと思っています。専門の道具がなくても、きちんと伝わる画像が作れる。このツールはそのために用意しました。パソコンが得意でない方でも、文字を打ち込んで色を選ぶだけで形になるように作っています。
もうひとつ、OGP画像には「そのページらしさ」を出せるという良さがあります。全部のページが同じロゴ画像だと、シェアされたときに何のお知らせなのかが伝わりません。ページごとにタイトル入りの画像があれば、見た人はシェアされた内容をひと目でつかめます。結果として、シェアした人の思いも伝わりやすくなるんです。
えっ、写真がなくても作れるんですか？
作れるよ。単色の背景に大きな文字を置くテンプレートもあるからね。写真を使う場合も、ブラウザの中だけで処理して外には送らないから安心してね。
ツールの使い方
- タイトル（2行まで）と、サイト名や会社名などのサブを入れます。改行を入れればその位置で2行に分かれ、入れなければ自動で改行されます。
- 必要なら背景の写真を選び、左右・上下・拡大で見せたい位置を調整します。テンプレートは「写真＋下に帯」「左文字・右写真」「単色＋大きい文字」の3つ、色はチャコールやオレンジなどから選べ、自由な色も指定できます。
- X風・Facebook風・LINE風のプレビューで見え方を確かめたら、PNGかJPEGで保存します。写真入りならJPEGの方が軽くなります。
保存した画像は、サーバーやWordPressのメディアにアップロードして、ページの og:image に設定すれば完了です。
ブログ記事やお知らせのように、同じ形の画像を何枚も作るときは、テンプレートと色を決めておくのがおすすめです。毎回そろった見た目になるので、見る人にも「いつものあのページだ」と覚えてもらいやすくなります。
ここがポイント
- 大事な文字は端に寄せすぎない。サイズは1200×630px（横長 1.91:1）が基本ですが、SNSによっては端が切れて表示されます。プレビューには正方形で切り抜かれる範囲も出るので、そこに収まっているか確認しましょう。
- ファイルは軽めに。ツールでは5MB以下をおすすめしています。写真入りならJPEGで保存すると軽くなります。
- 画像の中の文字と、カードの文字は別物。カードに出るタイトル文字は、画像ではなくページの og:title から表示されます。画像には一言で伝わる短いタイトルを入れるくらいがちょうどいいです。
- 差し替えるときはファイル名を変える。SNSは画像を記憶（キャッシュ）しています。同じ名前で上書きすると古い画像が出続けることがあるので、名前を変えると確実です。
文字は真ん中寄りに、短く。これなら真似できそうです。
まとめ
画像1枚で、ページの第一印象は大きく変わります。凝ったデザインでなくても、何のページかがひと目で分かること、文字が読みやすいこと。この2つがそろっていれば十分に役目を果たしてくれます。
作った画像がきちんと設定できたかは、同じく無料の「OGP・SNS表示チェッカー」で確かめられます。作る、確かめる、をセットにしてみてください。
最初は文字だけのシンプルな画像からで構いません。慣れてきたら、行事やお店の写真を背景に入れてみる。少しずつ自分たちらしい形を見つけていけば、発信すること自体がもっと楽しくなっていくはずです。
次のお知らせから、画像つきで発信してみよう。きっと反応が変わるよ。
今度のイベントの画像、作ってみます！
サイト全体の画像をそろえたい、設定の仕方が分からないというときは、お問い合わせからお気軽にご相談ください。
