CODE · 2.5 KB
src/creative-presets.js
Workspace snapshot · 09/04 13:35
export const useCases = [
{ id: "download-cover", label: "ダウンロード資料", shortLabel: "資料サムネ", size: "1200×630", width: 1200, height: 630, purpose: "ホワイトペーパーやサービス資料の価値が一目で伝わる表紙・告知サムネイル" },
{ id: "blog", label: "ブログ・オウンドメディア", shortLabel: "ブログ", size: "1200×630", width: 1200, height: 630, purpose: "記事タイトルと読む理由が検索・SNS一覧で瞬時に伝わるアイキャッチ" },
{ id: "youtube", label: "YouTubeサムネイル", shortLabel: "YouTube", size: "1280×720", width: 1280, height: 720, purpose: "小さく表示されても内容と感情が伝わり、クリックしたくなる動画サムネイル" },
{ id: "web-hero", label: "Webサイト メインビジュアル", shortLabel: "Webメイン", size: "1600×600", width: 1600, height: 600, purpose: "Webサイトのファーストビューで価値と世界観を伝える横長のキービジュアル" },
{ id: "web-banner", label: "Webサイト バナー", shortLabel: "Webバナー", size: "1200×400", width: 1200, height: 400, purpose: "サイト内導線として、内容とクリック後の期待を短時間で伝える横長バナー" },
{ id: "sns-square", label: "SNS 正方形投稿", shortLabel: "SNS正方形", size: "1080×1080", width: 1080, height: 1080, purpose: "InstagramやXのフィードで視線を止め、保存・シェア・遷移を促す投稿画像" },
{ id: "sns-portrait", label: "SNS 縦長投稿", shortLabel: "SNS縦長", size: "1080×1350", width: 1080, height: 1350, purpose: "Instagramフィードの画面占有率を活かして情報を段階的に読ませる縦長画像" },
{ id: "story", label: "ストーリー・縦型動画表紙", shortLabel: "Story", size: "1080×1920", width: 1080, height: 1920, purpose: "スマートフォン全画面で、上下のUI安全領域を避けながら行動を促す縦型画像" },
{ id: "display-ad", label: "Web広告", shortLabel: "Web広告", size: "1200×628", width: 1200, height: 628, purpose: "広告面で短時間にターゲット、便益、CTAを伝える配信用クリエイティブ" },
];
export function getUseCase(id) {
return useCases.find((item) => item.id === id) ?? useCases[5];
}
export function aspectRatio(width, height) {
const divisor = (a, b) => (b ? divisor(b, a % b) : a);
const gcd = divisor(width, height);
return `${width / gcd}:${height / gcd}`;
}
export function buildExpansionVariants(ids = []) {
return [...new Set(ids)].map(getUseCase);
}