Twitter投稿における画像作成の流れと意識すべきポイント

アナグラムの公式Twitterアカウントでは、当ブログの情報をツイート用に要約した投稿も盛んです。Twitterという場の特性を活かし、皆さんに情報がより良いカタチで届けられるよう日々様々な工夫をしています。その1つに、ブログ記事の内容を要約し、図解する取り組みがあります。

この記事では、過去反響を得られたツイートの例をもとに、Twitter投稿用画像作成の流れとおさえておきたいポイントについて解説していきます。

画像に載せる情報を整理する

ブログ記事の内容を要約して画像に落とし込むにはどうすればいいのでしょうか？今回は「運用型広告の報告で大切にしている7つのコミュニケーション方法」の記事を例として情報を整理していきます。

参考：運用型広告の報告で大切にしている7つのコミュニケーション方法

広告運用者としてプラスの評価を得るためには、上手く伝えることも大事です。

上司やクライアントとよりよい関係性を築くために、運用型広告の報告で大切にしているコミュニケーション方法をご紹介します。https://t.co/WRCpFp62bz pic.twitter.com/SODutubcOh

— アナグラム株式会社 / Anagrams,Inc. (@Anagrams_inc) February 7, 2022

STEP1 記事の見出しを書き出す

ブログ記事の内容をまとめた画像を作る場合は、タイトルと記事の見出しを書き出すところからはじめましょう。

見出しをみただけでも記事の概要はつかめますが、詳細を把握するためには6,000字超の記事全てに目を通す必要があります。図にすることでエッセンスだけを短時間で伝えるために、どのように図に落とし込んでいけばよいでしょうか。

STEP2 見出しごとの要点をテキストでまとめる

見出しを書き出したら、見出しごとの要点を書き出していきましょう。図解の肝は長い文章を読み込まなくとも、視覚的に情報を把握しやすいことにあります。そのため、図解に落とし込むにあたってまずは制作者が元情報の内容を理解することから始める必要があります。

今回題材にしている記事であれば、それぞれの見出しから以下のように要点をまとめていけます。

STEP3 情報の優先順位と関係性をまとめる

一番伝えたいことは何か？過去反響が大きかった部分はあるか？要素の関係性は並列なのか？それとも時系列なのか？などなどを考えてテキストでまとめた情報を整理してみましょう。

今回の例で考えてみると、下記の図のようになります。

要素内の優先順位はコミュニケーション方法→その説明→報告の具体例、報告時のポイントであり、７つのコミュニケーション方法が並列の関係となります。

もし、各要素が並列の関係であれば各要素の大きさは揃えた方が良さそうですし、要素が時系列の関係であれば画像1枚にまとめた方が流れを掴みやすい、など関係性を整理することで情報を適切なレイアウトで画像に落とし込むことができます。

STEP4 アイコンやイラスト、図解、表にできる情報はないか考える

画像上の情報をどれだけ直感的に理解できるかがツイートの拡散力を決定します。テキストのみの画像よりもアイコンやイラストでテキストが補われていたり、図解や表として情報の関係性が整理されている方がぱっと見て理解しやすいですよね。

例えば、下記の画像はイラストをうまく使って情報をわかりやすく画像に落とし込んでいます。

図解を作る際には、こちらの記事も参考にしてみてください。

【実例で解説】3STEPで覚える、図解の作り方

Twitter投稿時に注意すべきこと

これまでの投稿から、投稿時に画像が見切れることなくタイムライン上で表示されている投稿がシェアされやすい傾向があることがわかっています。タップせずとも画像の内容が確認できるため、タイムライン上で目につきやすいことも理由の一つでしょう。

従って、Twitter投稿用の画像を作成する際には投稿時にどのようにタイムライン上で表示されるかを知り、最適なサイズで画像を作成することが大切になります。

添付画像が1枚の場合であっても、全ての大きさの画像がトリミング（切り取り）されずにタイムラインで表示される訳ではありません（タップすれば全体は表示されます）。

例えば、縦長（1:2）の画像を投稿した場合、下記のように画像の上下が隠れた見え方になります。

Twitter投稿のおすすめ画像サイズ

PCブラウザでもスマホアプリでも画像のトリミングがなく、Twitter投稿画像として最適と考えられるサイズは以下の通り。画像の枚数によってタイムライン上での見え方と最適サイズが異なるので注意が必要です。

画像2枚の場合は横長画像であっても、縦長にトリミングされてタイムライン上で表示されるため、あらかじめ縦長のサイズで画像を作成しておくことをおすすめします。

添付画像が3枚の場合は、全てが同じ大きさで表示される訳ではなく、タイムライン上では1枚目の画像が最も大きく表示されるようになります。また、トリミングのされ方も1枚目と2、3枚目で異なります。

添付画像が4枚の場合は全ての画像が横長で小さめに表示されます。

角丸のトリミングに注意

推奨サイズで画像を作ったとしても、現状、トリミングが避けられない箇所があります。それは以下に示した四角の部分です。

複数画像を投稿した場合は画像全体で角が丸くトリミングされるため、該当箇所にはテキストなどを配置しないように気をつけましょう。

おすすめのレイアウト

以前は縦長画像は横長にトリミングされていましたが、2022年4月現在の仕様ではPCブラウザ版、スマホアプリ版ともに縦長画像のままで表示されるため、タイムライン上で画像の占める割合が最も大きくなる縦長（3:4）画像1枚での投稿が最もおすすめです。

基本的には画像が大きく表示される添付画像1枚の構成を推奨しますが、テキスト量や情報量が多く1枚に収まりきらない場合には横長（16:9）画像4枚で画像を作成しましょう。

今回の例では下図中央下の8分割レイアウトを採用しています。

画像2枚の構成にしたい場合は、タイトルを2分割するようなレイアウトにすることでタイトルの視認性を保ちつつ、整った画像を作ることが可能です。

画像作成時のポイント

文字サイズは視認性とコントラストを意識

前述したように、複数枚の画像を投稿する場合はそれぞれの画像が小さくなってしまいます。タイトルや重要なテキストはサムネイルの状態でも視認できる大きさや太さで記載しましょう。特にタイトルは「引き」が強いため、やりすぎかな？と思うくらいの大きさでも意外とちょうどいいバランスもあります。

逆に、全てのテキストをタイムライン上で視認できるように記載する必要はありません。情報に優先順位をつけて、補足的な情報はタップして画像を拡大した際に読むことができる大きさで十分です。

イラストやアイコンを配置する

TwitterはそもそもがテキストベースのSNSであるので、どれだけ内容が素晴らしくてもテキストばかりの画像ではタイムライン上で目立つことができず、ツイートの海に埋もれてしまいます…。そんな時はイラストの力を借りてみましょう。

テキストが並んでいるだけより、キャラクターが吹き出しでしゃべっているような図の方が内容が頭に入ってきやすいこともあります。

数字を効果的に使う

数字を装飾として使うのもおすすめです。例えば「〜するための３つのポイント」や「〜の方法７選」のように数字がタイトルに入っているような記事だと数字を用いてレイアウトを組むことで全体の構成が直感的に把握できるようになります。

色の数は3〜４色程度にするとまとまりが出る

ついたくさんの色を使ってしまいがちですが、色数を3〜4色程度に収めると全体にまとまりが出ます。また、色数を限定することでコントラストが明確になるため重要な箇所がわかりやすくなります。

どうしても4色以上を使う必要がある場合は無彩色を活用したり、トーンを揃えて統一感を出すなどの工夫をしてみましょう。

配色についてはこちらの記事が参考になります。

【こんな配色はNG】いつもの業務からバナー広告まで使える配色の基本を事例付きで紹介

箇条書きの書き方を工夫する

今回の例では箇条書きは使用していませんが、箇条書きの書き方をひと工夫するだけでも、ぐっと目に留まりやすい画像になります。

まとめ

SNS投稿用画像を作成する際は、情報を画像としてまとめるスキルだけではなく、各媒体の特性を理解して画像サイズやレイアウト、情報量を決めることが重要です。

元となる情報そのものの質ももちろんですが、デザインや情報の取捨選択で工夫できる点もたくさんありますのでぜひいろいろな方法を試してみてください。