SNSデザイン · チュートリアル
Instagramストーリーズメーカー：新商品の紹介を3枚で作る
見栄えのよい画像が3枚あっても、同じ見出しを繰り返すだけでは伝わりにくいストーリーズになります。続きを見る理由を作り、最後に実行できる行動を示しましょう。
元の依頼は出力がないまま停止しました。英語SVGテンプレート3枚をCiyoの外で制作し、PNGに書き出して読み込み、左から1〜3の順に手動で並べました。スクリーンショットはその実際の確認画面です。SVGの文字は外部で編集します。PNGの読み込みによってネイティブ文字やInstagramの操作部品になるわけではありません。
先に結論：1枚に1つの役割を持たせる
1枚目で商品を紹介し、2枚目で承認済みの特徴を1つ見せ、3枚目で次の行動を促します。配色とイラストはそろえ、予定した順番で3つのファイルを書き出します。
Instagramで追加する操作部品のために余白を残します。画像に描いたリンクボタンや投票欄は、アップロードしても操作できません。リンク先を確認できていないなら、予約URLを作り上げず空けておきます。
1. 商品情報と次の行動を承認する
実物の写真、承認済みの商品名、役立つ特徴を1つ、誘導先から始めます。価格、在庫、発売時期が不明なら、追加する前に担当者へ確認します。魅力的な埋め草が、意図せず商品への約束になることがあります。
Alder Goodsは架空なので、例では価格や在庫を示さず、中立的な文言を使います。ペン立てはイラストであり、実際の販売品の素材、サイズ、仕上げを証明するものではありません。
| 画像 | 役割 | 文言の例 |
|---|---|---|
| 1 | 紹介 | デスクを、もっと穏やかに |
| 2 | 特徴を見せる | 小さなものに、ひとつの居場所 |
| 3 | 次の行動へ | ペン立てを見てみる |
2. 3枚をひとまとまりとして作る
作業形式として1080×1920の画像を3枚、個別に依頼します。このサイズは制作上の指定で、現在のあらゆるInstagram画面に共通する安全領域ではありません。大切な内容を端から離し、上下に余白を取ります。
ペン立ての形と文字の階層をそろえつつ、各枚の強調点を変えます。シンプルな導入、寄った詳細、実際の操作部品を置く場所を残した静かな終わり、という流れです。
架空のAlder Goods用に、縦長の静止画を3枚個別に作成。1枚目：デスクを、もっと穏やかに。2枚目：小さなものに、ひとつの居場所。3枚目：ペン立てを見てみる。同じオリジナルの緑のペン立て、暖かなアイボリー、深緑、アンバーを使用。価格、在庫、商品性能を創作しない。編集可能な文字ソースと個別PNGを保存。上下に十分な余白を取り、3枚目の中央下部は後でInstagramの実際のリンクスタンプを置けるよう空ける。偽のボタンを描かない。投稿しない。3. 正確な文言を編集できるソースに残す
実演ではコードによる描画と編集可能なSVGの文字ソース、書き出し用のPNGを依頼します。再現可能なレイアウトですが、ラスター画像モデルの一貫性テストとしては扱いません。
3枚のソースはまとめて保管します。商品名が変わったらすべての箇所を直して再出力します。生成する方法では参照画像が統一感に役立つ場合もありますが、細部が完全にそろう保証にはなりません。
読み込みを再現するには、下の英語PNGプレビューをダウンロードし、自分のCiyoプロジェクトでキャンバスのUploadからUpload Imageを選びます。読み込んだ画像を並べて確認してください。文言は別のSVGソースを外部で編集し、新しいPNGを書き出して置き換えます。PNGからネイティブな文字レイヤーが生まれるわけではありません。
4. 操作できる機能は投稿先で追加する
自分のInstagram作成画面で3枚を順番に読み込み、利用できるネイティブの操作部品を追加します。リンクが意図したページへ進むか確認します。本記事ではアカウント連携や投稿を行ったとは主張していません。
別の端末のスクリーンショットに頼らず、現在の画面とアカウントの選択肢を確認します。重要な部分が隠れるなら画像か操作部品を動かします。投票には本物の機能が必要で、描いた回答欄は画像にすぎません。
5. 投稿前に全体を通して確認する
ブリーフを見ずに3枚を読み、何の商品か、中間の1枚が何を付け加えるか、その後に何をすればよいか確認します。実際の投稿先のプレビューで、文言、コントラスト、最後のタップ先を確認します。
個人ショップなら、まず分かりやすい特徴を1つ選びます。チームでは3枚の順番と誘導先を一緒に承認します。説明が長くなるなら、2枚目に小さく詰め込まず適切な商品ページへ案内します。
よくある質問
Ciyoからストーリーズを投稿できますか？
ここで扱うのは画像の準備です。Instagramの予約投稿、アカウント連携、公開は実演していません。
書き出したリンクボタンはタップできますか？
画像に描いたボタンは操作できません。Instagramで対応する実際の機能を追加し、誘導先を確認してください。
この余白は保証された安全領域ですか？
いいえ。制作上の余白です。投稿前に現在のプレビュー、端末、アカウントの操作部品を確認してください。
生成写真は必要ですか？
必要ありません。実物の商品には承認済み写真を使うか、イラストであることを明示します。この例はコードで描いた作品です。
次の3枚を計画する
承認済みの商品情報と実際の誘導先を用意しましょう。画像を個別に準備し、操作できる機能はInstagramで仕上げます。