あおとえま モノデザ
蒼橙英麻（あおとえま）の物作りデザイン研究所
Photoshop

Twitterで4画面の画像でインパクトを出そう！　Photoshopを使って！

 

こんにちは、遊びも！育児も！仕事も！常に全力投球！蒼橙英麻@Aoto_emaです。

以前このようなツイートをしました。

Twitterで画像を4分割にして「おっ！」って思わせる作戦です。

4分割画像は普段のツイート画像より目につきやすく、

また一つ一つの画像に情報を多く入れれるので、ここぞってときに使うと便利です。

今回はこの4分割画像をフォトショップで作る方法をお伝えします。

私の導き出したTwitter4分割画像の作り方

4枚の間に余白を考慮した画像を作ろう！

Twitter4分割画像

私に考えたTwitterの4分割画像は上の図のように「2575px × 1455px」の新規画像をフォトショップで作り、一番上のレイヤーに15px幅の白い帯を縦横中央に配置した状態でデザインを作成していくやり方です。

デザインが完成したら、1280×720pxで画像を切り取っていき、


左上が1番、右上が2番、左下が3番、右下が4番の順にTwitterに画像を投稿すると綺麗に4枚の画像がまとまります。

1枚画像をそのまま4分割してはいけないのか？

1280×720pxをそのまま2倍にして2560×1440pxで作成してそれを4分割したら良いんじゃないかと思われますが、実際にTwitterに表示される場合は画像同士の間に空間ができてしまいます。

その空間ができてしまうために、画像同士が滑らかな感じを出してくれずに、ぶつ切り状態になるので、全体をスムーズな一枚画像としての見てもらえるように、この細かい作業が重要です。

 

Twitterで表示される画像のアスペクト比を知ろう！

Twitterでは投稿する画像の枚数によって、表示のされ方が変わってきます。

自分が投稿する枚数を把握してそのアスペクト比に合わせた画像を作りましょう。

実際にTwitterの上げた画像を見ながら確認していきます。

1枚画像の時

1枚画像の時は 「横：16　縦：9」がベストです

16：9で作った画像は綺麗に丸々表示されます。

2枚画像の時

2枚画像の時は 「横：7　縦：8」がベストです

3枚画像の時

2枚画像の時は特殊で

1枚目が「横：7　縦：8」

2・3枚目の画像は「横：16　縦：9」がベストになります。

4枚画像の時

4枚画像の場合は全て「横：16　縦：9」がベストです。

 

4分割デザインをする時のポイント

一枚画像がチラシとするなら、4分割画像は雑誌みたいな感じですね。

4つの画像の中でしっかりルールをきめて作らないといけません。

4分割デザインをする時のポイントは、4枚のデザインがつながっていることが重要です。

そこで、私の場合はよく外側にラインを入れることで、このデザインはつながっているんですよ〜ってアピールしています。
https://twitter.com/Aoto_ema/status/1288312467857141762

そして中央で4っつに別れても良いようにキャラやロゴを配置して視可性を上げています。

他にも、白い背景（※Twitterの設定をデフォルトにしている方が多いであろう推測から）を逆手にとって、中央に白色でロゴや見出しを作ってみることで

綺麗なデザインに仕上がる方法などもあります。

一枚の画像では情報量が多くて書き込めない時など4分割画像にして、全体画面で読者の心をキャッチして、内容を一枚一枚の画像に書き込んでいくことで、対応することができます。

まとめ

以上、Twitterで4分割画像を作る方法を書いてみましたが、いかがだったでしょうか？

この方法を応用すれば、3分割画面や2分割画面でもTwitterでインパクトのある情報発信ができると思います。

一枚画像を作るより作業が大変になりますが、出来上がった時の爽快感はとても気持ちがいいですよ。

皆さんもぜひお試しください。😀

 

以上、よろしくお願いします。

 

 

4分割画像 Photoshop Twitter フォトショップ