TSUDOWATETSU WORKSCLIENT SERVICES
相談する
MENU
STILL / STUDIOひとつの姿を、いくつもの額に。イメージイラスト
← 制作例一覧

SELF-INITIATED DEMO / 自主制作

STILL / STUDIO — SNS / 広告クリエイティブ集

OVERVIEW

ひとつの内容を、いくつもの比率へ。書き換えれば全部が変わる。

Next.jsReactTypeScriptCSS
Live Demoを操作する

自主制作の広告サンプルです。広告配信実績や成果を示すものではありません。書き出したSVGは実際に開けるファイルで、プレビュー用の補助線は含まれません。

AI
使っていません計算と決まった規則だけで動きます。
保存先
保存しない編集した文言と配置はページの中だけにあり、再読み込みで最初の状態に戻ります。
外部送信
なし入力した内容は、このブラウザの外へ送られません。
MAIN VISUAL / LIVE DEMO
STILL / STUDIOの実装済みDesktop画面
実際に操作できる自主制作デモ
SCOPE
Design + Build + QA
EST. DELIVERY / 納期目安
1〜3営業日〜
PRICE GUIDE / 参考価格
5,000円〜 / 1点

01THE PROBLEM

サイズが変わっても、視線の順番とブランドの一貫性を保つこと。

想定したクライアント
SNSと広告に、同じ告知を何種類ものサイズで出すブランド（架空）
想定依頼
ブランドのトーンを揃えて、SNS投稿・ストーリー・広告バナーを展開したい。
起きていること
1つの告知につき、正方形・縦長・横長を別々に作り直している。
困りごと
文言を1か所直すたびに全サイズを直し、どれかが古いまま出てしまう。
制作コンセプト
文字・形・余白だけで成立する、再利用できるビジュアルシステム。

想定のクライアントと依頼は、この自主制作のために設定した架空のものです。実在の企業・店舗からの受託ではありません。

02SIGNATURE JOURNEY

ひとつの内容を、いくつもの比率へ。書き換えれば全部が変わる。

見出し・商品名・価格・期間・CTAを編集でき、トリミングとセーフエリアを確認しながら、三つの比率を同時に見られるようにしました。

  1. STILL / STUDIOの編集画面

    文言を書き換える

    見出し・商品名・価格・期間・行動を促す文言を編集します。

  2. STILL / STUDIOで3つの比率を同時に表示している

    3つの比率が同時に変わる

    1080×1080・1080×1920・1200×630の3つが、同じ内容で同時に更新されます。

  3. STILL / STUDIOでセーフエリアを表示した状態

    セーフエリアを確かめて書き出す

    切れてはいけない範囲を重ねて確認し、選んだ比率をSVGで書き出します。補助線は書き出しに入りません。

画像は、公開しているデモを実際に操作して撮影した画面です。同じ手順を自分で試す

03KEY INTERACTIONS

触って確かめられる操作

見た目だけのボタンは置いていません。押すと状態が変わり、関連する画面にも反映されます。

04BEHIND THE SYSTEM

画面の裏で、何が決まっているか

データの持ち方、状態の進み方、事故を防ぐための決まりごと。本番化するときに引き継ぐ設計です。

データ

  • 文言（見出し・商品名・価格・期間・CTA）
  • 配色と図形の位置・大きさ
  • 3つの比率のレイアウト

状態の流れ

  1. 編集
  2. 確認
  3. 書き出し

安全のための決まりごと

  • 問題（文字数超過・見出しなし）が残っている間は書き出せない
  • 補助線は書き出したファイルに入れない

05RESPONSIVE & ACCESSIBILITY

ひとつの体験を、どの画面でも。

PCは情報の比較しやすさ、タブレットはカラム幅、モバイルは読む順番とタップ領域を調整。下の画像は、実際のデモを各画面幅で撮影したプレビューです。

SNS / 広告クリエイティブ集 / Desktop Preview
Desktop Preview
SNS / 広告クリエイティブ集 / Tablet Preview
Tablet Preview
SNS / 広告クリエイティブ集 / Mobile Preview
Mobile Preview

06SCOPE & BOUNDARIES

できること・していないことを、先に書く

自主制作のデモと、実際の案件で納品するものの差を、項目ごとに分けています。

実装済み

このデモで実際に動くこと

  • 文言の編集と文字数の確認
  • 配色・図形の調整
  • 3比率の同時プレビュー
  • 選んだ比率のSVG書き出し

デモ限定

見せ方のために簡略化していること

  • 写真は使わず、文字・形・余白だけで構成
  • 書き出しは1回につき1比率

未接続

公開版では接続していないもの

  • 広告の配信・SNSへの投稿
  • フォントの配布ライセンス管理

本番化に必要なこと

実案件で追加で設計・実装するもの

  • ブランドのフォント・写真・ロゴの組み込み
  • PNG・JPEGなど配信先が求める形式での書き出し
  • 量産用のデータ（スプレッドシートなど）からの一括作成

07DELIVERY & QUOTE

納品物と、見積もりの目安

参考価格 5,000円〜 / 1点／納期目安 1〜3営業日〜。範囲と素材が決まってから、正式なお見積もりと納期をお出しします。

もっと詳しく見る？使用技術・実装した機能・納品物・確認項目
TECH STACK / 使用技術

Next.js / React / TypeScript / CSS

対応範囲

設計・デザイン・実装・内部QA・ドキュメント整理

制作期間目安

1〜3営業日〜

参考価格

5,000円〜 / 1点

実装した機能
  • 文字・価格・期間・CTAの編集
  • 図形の位置と大きさの調整、セーフエリア表示
  • 正方形・縦長・横長を同時にプレビュー
  • 画面の内容がそのまま入るSVG書き出し
DELIVERABLES / 納品可能物
  • ソースコード・設定ファイル
  • 起動・更新手順のREADME
  • 画面仕様・検証項目一覧
QA内容・確認項目
  • PC / Tablet / Mobile表示
  • キーボード操作・コントラスト
  • リンク・入力・エラー状態

見積もりが変わるところ

  • 比率とサイズの種類、シリーズの数
  • 写真・イラスト・ロゴの用意
  • 量産の仕組み（テンプレート化）まで作るか

参考価格・期間です。ページ数、機能、デザイン、素材、API・外部サービス、修正範囲で変動します。仕様と素材の確定後に正式なお見積もり・納期を提示します。 納品物は契約範囲に合わせて確定します。QA内容は確認対象を示すもので、実運用環境の適合保証ではありません。

RELATED SERVICES

この制作に近いサービス

デザイン / コンテンツ制作LP制作ECサイト / 商品ページ

08CONTEXTUAL CONTACT

このデモのような制作を相談する

近いと感じた機能に印をつけてください。相談フォームに「STILL / STUDIOを参考にした」ことと、選んだ機能が入った状態で開きます。送信前にすべて編集・削除できます。

参考にしたい機能（任意・複数可）

この時点では何も送信されません。フォームを開くだけです。

MESSAGE-ONLY OK

メッセージだけでも、進められます。

仕様確認・進捗共有・修正確認・納品まで、クラウドソーシング上のメッセージを中心に対応。Zoom / Google Meetは必須ではありません。

相談内容をまとめる
A GOOD PLACE TO START / TETSU WORKS

つくりたいものを、
聞かせてください。

まだ要件が曖昧でも大丈夫。
いま困っていることから、一緒に整理します。

相談内容を入力する ↓
まずは文章で。
打ち合わせの前に、相談できます。
  1. 01相談を送信
  2. 02内容を確認
  3. 03メールで返信
  4. 04合意して制作開始

金額・納期・制作範囲は、内容を確認してご相談。
送信した時点で契約や発注にはなりません。

案件サイトからのご相談は、そのサービス内メッセージでも進められます。

YOUR NEXT PROJECT必須はお名前・メール・ご相談内容
01 何を相談したいですか？ 未定でも大丈夫
02 いま、考えていること

困っていること、つくりたいものを自由に。10〜2,000文字。秘密情報・パスワードは入力しないでください。

予算・希望時期・参考資料を添える 任意

予算・時期はご希望の目安です。制作範囲を確認してお見積もりします。

03 お返事先

送信内容はお問い合わせ対応のために利用します。

受付状況を確認しています。

案件サイトのメッセージで相談したい方へ

入力内容をコピーして、ご利用中のサービスへ貼り付けられます。ここからは送信しません。