SNS投稿のモックアップ

公開前にモックアップを作る理由

文書の中では読みやすいキャプションも、フィードの幅で折り返されて「続きを読む」で切れると印象が大きく変わります。ファイルとしては見栄えのいい画像も、Instagramでは4:5に切り取られます。そしてメールで文章を承認したクライアントも、実際の投稿として見ると反応が違うことがよくあります。モックアップなら、こうしたやり取りが一目で片づきます。代理店がプレゼン資料や承認のスレッドに貼るのも、実際の投稿がまだ公開されていないときにポートフォリオ用に使うのも、このモックアップです。

モックアップに表示されるもの

各プラットフォームは、それぞれのレイアウト、書体、アイコン、ラベルで描かれます。

どのプラットフォームもライトモードとダークモードに対応し、落ち着いた背景に置いたすっきりした投稿カードか、プレゼンで映えるステータスバー付きのスマートフォン画面かを選べます。

カルーセルと複数画像の投稿

画像を2枚以上置くと、各プラットフォームの複数画像のレイアウトに切り替わります。Facebookではカルーセル広告として、正方形のカードが横に並び、右から次のカードがのぞきます。各カードには見出し、ページ名、文言を設定できるボタンが付きます。InstagramとLinkedInでは1枚ずつ表示され、隅にスライド番号、下にドットやバーが出ます。どのスライドを前に出すかも選べます。カルーセルのダウンロードには常に2枚のPNGが入ります。スクロールしたときに見えるままのフィード表示と、全カードを横に並べた表示で、後者はクライアントが一目で理解できます。

本物らしく仕上げるコツ

• 実際の画像サイズを使う。プレビューは縦長の画像をフィードと同じように切り取るので、どこが切れるかがそのまま分かります。正方形や4:5の画像は全体が表示されます。
• ロゴをアイコンとして読み込む。イニシャルでも簡単な確認には十分ですが、スクリーンショットのように見せるのはロゴです。
• それらしい数を入れる。いいね、コメント、シェアの数は各プラットフォームと同じ形式で表示され、省略表記するプラットフォームでは1240が1.2Kのようになります。
• 確定したキャプションを貼る。改行や絵文字はそのまま残り、長いキャプションはフィードで切れる位置で切れます。
• 広告ラベルをオンにするのは、通常の投稿ではなく広告を確認するときです。ラベルの文言はプラットフォームごとに変わります。

ダウンロードと活用

ダウンロードされるのは画面表示の2倍サイズのPNGなので、スライドや文書、ポートフォリオのページに置いても鮮明です。背景込みなので、そのままプレゼン資料に入れられます。合成用に背景なしが必要なら、あとで切り抜きツールで切り抜いてください。

このツールがしないこと

投稿も予約もせず、どのアカウントにも接続しません。また、プラットフォームの更新をすべてピクセル単位で再現するものでもありません。フィードは数か月ごとに数ピクセル単位で変わりますが、モックアップは承認、プレゼン、ポートフォリオに十分なほど現在のレイアウトに沿っています。モックアップとはそのためのものです。動画の投稿はまだプレビューできません。動画の1コマを画像として使えば、レイアウトはまったく同じです。

プライバシー

未公開のキャンペーンこそ、よく知らないモックアップサイトにアップロードすべきではないものです。このツールはプレビューの描画もPNGの作成もすべてブラウザ内で行います。画像、キャプション、ロゴは端末の外に出ません。