@jjlmoya/utils-social 1.2.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +59 -58
- package/src/category/i18n/de.ts +23 -0
- package/src/category/i18n/id.ts +23 -0
- package/src/category/i18n/it.ts +23 -0
- package/src/category/i18n/ja.ts +23 -0
- package/src/category/i18n/ko.ts +23 -0
- package/src/category/i18n/nl.ts +23 -0
- package/src/category/i18n/pl.ts +23 -0
- package/src/category/i18n/pt.ts +23 -0
- package/src/category/i18n/ru.ts +23 -0
- package/src/category/i18n/sv.ts +23 -0
- package/src/category/i18n/tr.ts +23 -0
- package/src/category/i18n/zh.ts +23 -0
- package/src/category/index.ts +12 -0
- package/src/index.ts +8 -0
- package/src/tests/i18n_coverage.test.ts +36 -0
- package/src/tests/locale_completeness.test.ts +1 -1
- package/src/tests/schemas_fulfillment.test.ts +23 -0
- package/src/tests/slug_uniqueness.test.ts +81 -0
- package/src/tests/title_quality.test.ts +55 -0
- package/src/tool/redditFormatter/i18n/de.ts +193 -0
- package/src/tool/redditFormatter/i18n/en.ts +1 -1
- package/src/tool/redditFormatter/i18n/es.ts +1 -1
- package/src/tool/redditFormatter/i18n/fr.ts +1 -1
- package/src/tool/redditFormatter/i18n/id.ts +193 -0
- package/src/tool/redditFormatter/i18n/it.ts +193 -0
- package/src/tool/redditFormatter/i18n/ja.ts +193 -0
- package/src/tool/redditFormatter/i18n/ko.ts +193 -0
- package/src/tool/redditFormatter/i18n/nl.ts +193 -0
- package/src/tool/redditFormatter/i18n/pl.ts +193 -0
- package/src/tool/redditFormatter/i18n/pt.ts +193 -0
- package/src/tool/redditFormatter/i18n/ru.ts +193 -0
- package/src/tool/redditFormatter/i18n/sv.ts +193 -0
- package/src/tool/redditFormatter/i18n/tr.ts +193 -0
- package/src/tool/redditFormatter/i18n/zh.ts +193 -0
- package/src/tool/redditFormatter/index.ts +15 -7
- package/src/tool/safeZones/i18n/de.ts +244 -0
- package/src/tool/safeZones/i18n/id.ts +244 -0
- package/src/tool/safeZones/i18n/it.ts +244 -0
- package/src/tool/safeZones/i18n/ja.ts +244 -0
- package/src/tool/safeZones/i18n/ko.ts +244 -0
- package/src/tool/safeZones/i18n/nl.ts +244 -0
- package/src/tool/safeZones/i18n/pl.ts +244 -0
- package/src/tool/safeZones/i18n/pt.ts +244 -0
- package/src/tool/safeZones/i18n/ru.ts +244 -0
- package/src/tool/safeZones/i18n/sv.ts +244 -0
- package/src/tool/safeZones/i18n/tr.ts +244 -0
- package/src/tool/safeZones/i18n/zh.ts +244 -0
- package/src/tool/safeZones/index.ts +17 -9
- package/src/tool/socialImageResizer/i18n/de.ts +211 -0
- package/src/tool/socialImageResizer/i18n/en.ts +1 -1
- package/src/tool/socialImageResizer/i18n/id.ts +211 -0
- package/src/tool/socialImageResizer/i18n/it.ts +211 -0
- package/src/tool/socialImageResizer/i18n/ja.ts +211 -0
- package/src/tool/socialImageResizer/i18n/ko.ts +211 -0
- package/src/tool/socialImageResizer/i18n/nl.ts +211 -0
- package/src/tool/socialImageResizer/i18n/pl.ts +211 -0
- package/src/tool/socialImageResizer/i18n/pt.ts +211 -0
- package/src/tool/socialImageResizer/i18n/ru.ts +211 -0
- package/src/tool/socialImageResizer/i18n/sv.ts +211 -0
- package/src/tool/socialImageResizer/i18n/tr.ts +211 -0
- package/src/tool/socialImageResizer/i18n/zh.ts +211 -0
- package/src/tool/socialImageResizer/index.ts +16 -8
- package/src/tool/socialValueCalculator/i18n/de.ts +306 -0
- package/src/tool/socialValueCalculator/i18n/es.ts +1 -1
- package/src/tool/socialValueCalculator/i18n/fr.ts +1 -1
- package/src/tool/socialValueCalculator/i18n/id.ts +306 -0
- package/src/tool/socialValueCalculator/i18n/it.ts +306 -0
- package/src/tool/socialValueCalculator/i18n/ja.ts +306 -0
- package/src/tool/socialValueCalculator/i18n/ko.ts +306 -0
- package/src/tool/socialValueCalculator/i18n/nl.ts +306 -0
- package/src/tool/socialValueCalculator/i18n/pl.ts +306 -0
- package/src/tool/socialValueCalculator/i18n/pt.ts +306 -0
- package/src/tool/socialValueCalculator/i18n/ru.ts +306 -0
- package/src/tool/socialValueCalculator/i18n/sv.ts +306 -0
- package/src/tool/socialValueCalculator/i18n/tr.ts +306 -0
- package/src/tool/socialValueCalculator/i18n/zh.ts +306 -0
- package/src/tool/socialValueCalculator/index.ts +17 -9
- package/src/tool/tinderPhotoOptimizer/i18n/de.ts +272 -0
- package/src/tool/tinderPhotoOptimizer/i18n/id.ts +272 -0
- package/src/tool/tinderPhotoOptimizer/i18n/it.ts +272 -0
- package/src/tool/tinderPhotoOptimizer/i18n/ja.ts +272 -0
- package/src/tool/tinderPhotoOptimizer/i18n/ko.ts +272 -0
- package/src/tool/tinderPhotoOptimizer/i18n/nl.ts +272 -0
- package/src/tool/tinderPhotoOptimizer/i18n/pl.ts +272 -0
- package/src/tool/tinderPhotoOptimizer/i18n/pt.ts +272 -0
- package/src/tool/tinderPhotoOptimizer/i18n/ru.ts +272 -0
- package/src/tool/tinderPhotoOptimizer/i18n/sv.ts +272 -0
- package/src/tool/tinderPhotoOptimizer/i18n/tr.ts +272 -0
- package/src/tool/tinderPhotoOptimizer/i18n/zh.ts +272 -0
- package/src/tool/tinderPhotoOptimizer/index.ts +17 -9
- package/src/tool/youtubeThumbnail/i18n/de.ts +207 -0
- package/src/tool/youtubeThumbnail/i18n/id.ts +207 -0
- package/src/tool/youtubeThumbnail/i18n/it.ts +207 -0
- package/src/tool/youtubeThumbnail/i18n/ja.ts +207 -0
- package/src/tool/youtubeThumbnail/i18n/ko.ts +207 -0
- package/src/tool/youtubeThumbnail/i18n/nl.ts +207 -0
- package/src/tool/youtubeThumbnail/i18n/pl.ts +207 -0
- package/src/tool/youtubeThumbnail/i18n/pt.ts +207 -0
- package/src/tool/youtubeThumbnail/i18n/ru.ts +207 -0
- package/src/tool/youtubeThumbnail/i18n/sv.ts +207 -0
- package/src/tool/youtubeThumbnail/i18n/tr.ts +207 -0
- package/src/tool/youtubeThumbnail/i18n/zh.ts +207 -0
- package/src/tool/youtubeThumbnail/index.ts +17 -9
- package/src/tool/youtubeThumbnailPreviewer/i18n/de.ts +321 -0
- package/src/tool/youtubeThumbnailPreviewer/i18n/en.ts +1 -1
- package/src/tool/youtubeThumbnailPreviewer/i18n/es.ts +1 -1
- package/src/tool/youtubeThumbnailPreviewer/i18n/fr.ts +2 -2
- package/src/tool/youtubeThumbnailPreviewer/i18n/id.ts +321 -0
- package/src/tool/youtubeThumbnailPreviewer/i18n/it.ts +321 -0
- package/src/tool/youtubeThumbnailPreviewer/i18n/ja.ts +321 -0
- package/src/tool/youtubeThumbnailPreviewer/i18n/ko.ts +321 -0
- package/src/tool/youtubeThumbnailPreviewer/i18n/nl.ts +321 -0
- package/src/tool/youtubeThumbnailPreviewer/i18n/pl.ts +321 -0
- package/src/tool/youtubeThumbnailPreviewer/i18n/pt.ts +321 -0
- package/src/tool/youtubeThumbnailPreviewer/i18n/ru.ts +321 -0
- package/src/tool/youtubeThumbnailPreviewer/i18n/sv.ts +321 -0
- package/src/tool/youtubeThumbnailPreviewer/i18n/tr.ts +321 -0
- package/src/tool/youtubeThumbnailPreviewer/i18n/zh.ts +321 -0
- package/src/tool/youtubeThumbnailPreviewer/index.ts +24 -0
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
|
|
2
|
+
import type { ToolLocaleContent } from '../../../types';
|
|
3
|
+
import type { SafeZonesUI } from '../ui';
|
|
4
|
+
|
|
5
|
+
const slug = 'zone-sicure-social';
|
|
6
|
+
const title = 'Social Safe Zones: Simulatore Video per TikTok, Reels e Shorts';
|
|
7
|
+
const description =
|
|
8
|
+
'Visualizza in anteprima le tue immagini e i tuoi video con la vera interfaccia dei social media. Assicurati che il tuo contenuto sia sempre visibile ed evita ritagli accidentali.';
|
|
9
|
+
|
|
10
|
+
const faqData = [
|
|
11
|
+
{
|
|
12
|
+
question: "Cosa sono le 'Zone Sicure' sui social media?",
|
|
13
|
+
answer:
|
|
14
|
+
"Sono le aree dello schermo in cui il contenuto è visibile senza il rischio di essere coperto da elementi dell'interfaccia, come il nome utente, la descrizione, i pulsanti di interazione (mi piace, condividi) o il ritaglio automatico applicato da alcuni dispositivi.",
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
question: 'Perché il mio video TikTok sembra ritagliato in alto e in basso?',
|
|
18
|
+
answer:
|
|
19
|
+
"TikTok utilizza un formato 9:16. Se il tuo video è più largo, l'app applicherà uno zoom per riempire lo schermo, causando il ritaglio. Inoltre, l'interfaccia inferiore copre parte del video, quindi gli elementi importanti dovrebbero essere centrati.",
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
question: 'La zona sicura è la stessa per Instagram Reels e YouTube Shorts?',
|
|
23
|
+
answer:
|
|
24
|
+
"Sono molto simili ma non identiche. I pulsanti di YouTube Shorts sono posizionati diversamente rispetto a quelli di Reels. Il nostro strumento ti consente di passare da una piattaforma all'altra per verificare il tuo design su ognuna di esse.",
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
question: 'Cosa succede se metto del testo nell’angolo in basso a destra?',
|
|
28
|
+
answer:
|
|
29
|
+
"Probabilmente sarà invisibile o molto difficile da leggere, poiché è lì che si trovano le icone del profilo, del cuore e dei commenti. Idealmente, tieni testi e volti nell'area centrale superiore (Zona Sicura).",
|
|
30
|
+
},
|
|
31
|
+
];
|
|
32
|
+
|
|
33
|
+
const howToData = [
|
|
34
|
+
{
|
|
35
|
+
name: 'Carica la tua immagine o il tuo video',
|
|
36
|
+
text: "Carica il file che desideri visualizzare in anteprima. L'elaborazione è locale e privata — nulla viene caricato su internet.",
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
name: 'Seleziona la piattaforma',
|
|
40
|
+
text: "Scegli tra TikTok, Instagram Reels o YouTube Shorts per attivare la relativa sovrapposizione dell'interfaccia.",
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
name: 'Controlla la leggibilità',
|
|
44
|
+
text: "Verifica se testi, sottotitoli o elementi chiave del brand sono coperti dalle icone del social network.",
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
name: 'Regola ed esporta',
|
|
48
|
+
text: "Se qualcosa è nascosto, sposta l'elemento nel tuo editor video originale e prova di nuovo finché non si adatta perfettamente.",
|
|
49
|
+
},
|
|
50
|
+
];
|
|
51
|
+
|
|
52
|
+
const faqSchema: WithContext<FAQPage> = {
|
|
53
|
+
'@context': 'https://schema.org',
|
|
54
|
+
'@type': 'FAQPage',
|
|
55
|
+
mainEntity: faqData.map((item) => ({
|
|
56
|
+
'@type': 'Question',
|
|
57
|
+
name: item.question,
|
|
58
|
+
acceptedAnswer: { '@type': 'Answer', text: item.answer },
|
|
59
|
+
})),
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
const howToSchema: WithContext<HowToThing> = {
|
|
63
|
+
'@context': 'https://schema.org',
|
|
64
|
+
'@type': 'HowTo',
|
|
65
|
+
name: title,
|
|
66
|
+
description,
|
|
67
|
+
step: howToData.map((step, i) => ({
|
|
68
|
+
'@type': 'HowToStep',
|
|
69
|
+
position: i + 1,
|
|
70
|
+
name: step.name,
|
|
71
|
+
text: step.text,
|
|
72
|
+
})),
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
const appSchema: WithContext<SoftwareApplication> = {
|
|
76
|
+
'@context': 'https://schema.org',
|
|
77
|
+
'@type': 'SoftwareApplication',
|
|
78
|
+
name: title,
|
|
79
|
+
description,
|
|
80
|
+
applicationCategory: 'UtilityApplication',
|
|
81
|
+
operatingSystem: 'All',
|
|
82
|
+
offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
|
|
83
|
+
inLanguage: 'it',
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
export const content: ToolLocaleContent<SafeZonesUI> = {
|
|
87
|
+
slug,
|
|
88
|
+
title,
|
|
89
|
+
description,
|
|
90
|
+
faqTitle: 'Domande Frequenti',
|
|
91
|
+
faq: faqData,
|
|
92
|
+
bibliographyTitle: 'Documentazione Ufficiale delle Piattaforme',
|
|
93
|
+
bibliography: [
|
|
94
|
+
{
|
|
95
|
+
name: 'TikTok Creator Portal: Ottimizzazione video e zone sicure',
|
|
96
|
+
url: 'https://www.tiktok.com/creators/creator-portal/en-us/foundation/video-optimization/',
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
name: 'Instagram Business: Best practice per i Reels',
|
|
100
|
+
url: 'https://business.instagram.com/creators/reels-best-practices',
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
name: 'Guida di YouTube: Creare YouTube Shorts',
|
|
104
|
+
url: 'https://support.google.com/youtube/answer/10343433',
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
name: 'Meta for Creators: Zone sicure e rapporti d’aspetto per i video',
|
|
108
|
+
url: 'https://www.facebook.com/business/help/103816146375741',
|
|
109
|
+
},
|
|
110
|
+
],
|
|
111
|
+
howTo: howToData,
|
|
112
|
+
schemas: [faqSchema, howToSchema, appSchema],
|
|
113
|
+
seo: [
|
|
114
|
+
{
|
|
115
|
+
type: 'title',
|
|
116
|
+
text: 'Guida Completa alle Zone Sicure: Ottimizza i tuoi Reels, TikTok e Shorts',
|
|
117
|
+
level: 2,
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
type: 'paragraph',
|
|
121
|
+
html: "Nel mondo saturo dei contenuti verticali, la prima impressione è tecnica. L'errore più grande che i creatori commettono è ignorare come il loro <strong>video o immagine</strong> interagisce con l'interfaccia nativa della piattaforma. Ogni social network (TikTok, Instagram Reels e YouTube Shorts) sovrappone strati di pulsanti, testo e profili che possono annullare l'impatto visivo della tua composizione.",
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
type: 'paragraph',
|
|
125
|
+
html: "Questo strumento ti consente di caricare i tuoi file multimediali e vedere in anteprima esattamente quali parti della tua inquadratura saranno coperte dall'interfaccia. Non si tratta solo di <strong>sottotitoli</strong>; si tratta di assicurarsi che i volti, i prodotti o le azioni principali nel tuo video non siano sepolti sotto un pulsante \"Mi piace\" o una lunga descrizione.",
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
type: 'grid',
|
|
129
|
+
columns: [
|
|
130
|
+
{
|
|
131
|
+
type: 'card',
|
|
132
|
+
title: 'TikTok: L’interfaccia più invasiva',
|
|
133
|
+
html: "<p>TikTok ha l'interfaccia più densa. Sul lato destro, c’è una colonna di icone che occupa circa il 15% della larghezza. In basso, la descrizione può estendersi su 4 o 5 righe, coprendo quasi un terzo dello schermo dal basso.</p><ul><li><strong>Margine inferiore:</strong> Lascia liberi gli ultimi 250px per evitare il testo della descrizione e il nome utente.</li><li><strong>Margine destro:</strong> Evita di posizionare il testo entro 100px dal bordo destro.</li><li><strong>In alto:</strong> I pulsanti \"Seguiti\" e \"Per te\" occupano la fascia centrale superiore.</li></ul>",
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
type: 'card',
|
|
137
|
+
title: 'IG Reels: Il fattore feed',
|
|
138
|
+
html: "<p>A differenza di TikTok, Instagram Reels ritaglia il video in un formato 4:5 quando visualizzato dal feed principale. Ciò significa che se inserisci informazioni vitali nel 15% superiore o inferiore del tuo video 9:16, queste scompariranno nel feed.</p><ul><li><strong>La regola del 4:5:</strong> Mantieni i titoli e gli elementi chiave nella zona centrale per la visibilità nel feed.</li><li><strong>Interfaccia:</strong> Le icone dei Reels sono più sottili di quelle di TikTok, consentendo un margine laterale leggermente maggiore.</li><li><strong>Pulsante audio:</strong> Situato in basso a destra, di solito copre molto meno rispetto al disco rotante di TikTok.</li></ul>",
|
|
139
|
+
},
|
|
140
|
+
],
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
type: 'title',
|
|
144
|
+
text: 'YouTube Shorts: Attenzione al lato destro',
|
|
145
|
+
level: 3,
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
type: 'paragraph',
|
|
149
|
+
html: "YouTube Shorts ha un’interfaccia asimmetrica. Il pulsante iscriviti è molto visibile e di colore solido (solitamente nero o bianco), creando un importante punto cieco visivo in basso a destra.",
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
type: 'list',
|
|
153
|
+
items: [
|
|
154
|
+
'<strong>Margine destro:</strong> Evita di posizionare testo o elementi importanti nel 20% in basso a destra.',
|
|
155
|
+
'<strong>Margine inferiore:</strong> Lascia liberi gli ultimi 150px per evitare il testo della descrizione e il nome utente.',
|
|
156
|
+
'<strong>In alto:</strong> I pulsanti \"Iscriviti\" e \"Altro\" occupano la fascia centrale superiore.',
|
|
157
|
+
],
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
type: 'title',
|
|
161
|
+
text: 'Domande Cruciali sul Design Verticale',
|
|
162
|
+
level: 2,
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
type: 'title',
|
|
166
|
+
text: 'Dove posizionare gli elementi chiave (volti, testo, prodotto)?',
|
|
167
|
+
level: 3,
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
type: 'paragraph',
|
|
171
|
+
html: 'La "Zona d\'Oro" per l\'azione principale è il terzo centrale del video. Se stai riprendendo una persona, assicurati che i suoi occhi e la sua bocca siano all\'interno di questa zona. Gli elementi grafici importanti dovrebbero essere leggermente spostati verso l\'alto rispetto al centro geometrico per evitare la descrizione in basso.',
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
type: 'title',
|
|
175
|
+
text: 'Perché il mio video appare sfocato una volta caricato?',
|
|
176
|
+
level: 3,
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
type: 'paragraph',
|
|
180
|
+
html: "Spesso non è la qualità ma il ridimensionamento. Registra sempre in 1080x1920 a 30 o 60 fps. Evita il 4K se applichi molti effetti pesanti, poiché le piattaforme comprimono in modo aggressivo i file di grandi dimensioni.",
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
type: 'title',
|
|
184
|
+
text: 'E per quanto riguarda i bordi del telefono?',
|
|
185
|
+
level: 3,
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
type: 'paragraph',
|
|
189
|
+
html: "Ricorda che i telefoni moderni hanno tacche (notch) o fori per la fotocamera sullo schermo. Questo strumento include un margine di sicurezza superiore affinché il tuo contenuto non entri in conflitto con l'orologio o le icone di sistema (batteria, segnale).",
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
type: 'title',
|
|
193
|
+
text: 'Anatomia di un Video Virale',
|
|
194
|
+
level: 2,
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
type: 'paragraph',
|
|
198
|
+
html: "Progettare per i social media non è solo estetica — è <strong>usabilità</strong>. Se un utente deve sforzarsi per leggere il testo perché le icone della piattaforma lo coprono, passerà semplicemente al video successivo. La ritenzione (Watch Time) cala drasticamente quando c'è un attrito visivo.",
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
type: 'paragraph',
|
|
202
|
+
html: "Su YouTube Shorts, ad esempio, l'interfaccia è asimmetrica. Il pulsante iscriviti è molto evidente. Utilizzando questo simulatore, puoi regolare l'opacità per capire come la tua tavolozza di colori interagisce con i colori nativi della UI.",
|
|
203
|
+
},
|
|
204
|
+
{
|
|
205
|
+
type: 'tip',
|
|
206
|
+
title: 'Strumento di Controllo Qualità Creativo',
|
|
207
|
+
html: '<p>Progettato per i creatori che non lasciano nulla al caso.</p>',
|
|
208
|
+
},
|
|
209
|
+
],
|
|
210
|
+
ui: {
|
|
211
|
+
labelConfig: 'Impostazioni',
|
|
212
|
+
labelPlatform: 'Piattaforma Target',
|
|
213
|
+
labelUpload: 'Carica Contenuto',
|
|
214
|
+
uploadPrompt: 'Seleziona immagine o video',
|
|
215
|
+
uploadLink: 'O usa un esempio',
|
|
216
|
+
loadContent: 'Carica il tuo contenuto',
|
|
217
|
+
labelOpacity: 'Rilevanza Interfaccia',
|
|
218
|
+
labelMask: 'Oscura Zone Critiche',
|
|
219
|
+
labelGrid: 'Regola dei Terzi',
|
|
220
|
+
btnReset: 'Resetta Canvas',
|
|
221
|
+
bannerTiktok: 'Simulazione TikTok 9:16',
|
|
222
|
+
bannerReels: 'Simulazione Instagram Reels 9:16',
|
|
223
|
+
bannerShorts: 'Simulazione YouTube Shorts 9:16',
|
|
224
|
+
nameTiktok: 'TikTok',
|
|
225
|
+
nameReels: 'IG Reels',
|
|
226
|
+
nameShorts: 'YT Shorts',
|
|
227
|
+
ttFollowing: 'Seguiti',
|
|
228
|
+
ttForYou: 'Per te',
|
|
229
|
+
ttDescription: 'Design reale dell\'interfaccia per i creatori di contenuti. #uxdesign #socialmedia',
|
|
230
|
+
ttAudio: 'jjlmoya - Suono Originale',
|
|
231
|
+
ttNavHome: 'Home',
|
|
232
|
+
ttNavFriends: 'Amici',
|
|
233
|
+
ttNavInbox: 'In arrivo',
|
|
234
|
+
ttNavProfile: 'Profilo',
|
|
235
|
+
reelsFollow: 'Segui',
|
|
236
|
+
reelsDescription: 'Questa interfaccia è identica a quella reale. #reels #ux #simulator',
|
|
237
|
+
reelsAudio: 'Trending Music - Audio Originale',
|
|
238
|
+
shortsSubscribe: 'ISCRIVITI',
|
|
239
|
+
shortsDislike: 'Non mi piace',
|
|
240
|
+
shortsShare: 'Condividi',
|
|
241
|
+
shortsRemix: 'Remix',
|
|
242
|
+
shortsDescription: 'Simulazione di interfacce reali per gli Shorts! #youtube #shorts',
|
|
243
|
+
},
|
|
244
|
+
};
|
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
|
|
2
|
+
import type { ToolLocaleContent } from '../../../types';
|
|
3
|
+
import type { SafeZonesUI } from '../ui';
|
|
4
|
+
|
|
5
|
+
const slug = 'social-safe-zones';
|
|
6
|
+
const title = 'Social Safe Zones:TikTok、リール、Shorts用ビデオシミュレーター';
|
|
7
|
+
const description =
|
|
8
|
+
'実際のソーシャルメディアのインターフェースで画像や動画をプレビューします。コンテンツが常に表示されるようにし、誤ったトリミングを避けます。';
|
|
9
|
+
|
|
10
|
+
const faqData = [
|
|
11
|
+
{
|
|
12
|
+
question: 'ソーシャルメディアの「セーフゾーン」とは何ですか?',
|
|
13
|
+
answer:
|
|
14
|
+
'ユーザー名、説明文、インタラクションボタン(いいね、共有)などのインターフェース要素によって隠されるリスクなく、コンテンツが表示される画面領域のことです。また、一部のデバイスで適用される自動トリミングも考慮されます。',
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
question: 'TikTok動画が上下にトリミングされて見えるのはなぜですか?',
|
|
18
|
+
answer:
|
|
19
|
+
'TikTokは9:16のアスペクト比を使用しています。動画がそれより広い場合、アプリは画面いっぱいに表示するためにズームし、トリミングが発生します。また、下部のインターフェースが動画の一部を覆うため、重要な要素は中央に配置する必要があります。',
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
question: 'リールとYouTube Shortsのセーフゾーンは同じですか?',
|
|
23
|
+
answer:
|
|
24
|
+
'非常に似ていますが、同一ではありません。YouTube Shortsのボタンはリールとは異なる位置に配置されています。当ツールでは、プラットフォームを切り替えて、すべてのプラットフォームでデザインを確認できます。',
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
question: '右下隅にテキストを置くとどうなりますか?',
|
|
28
|
+
answer:
|
|
29
|
+
'そこにはプロフィール、ハート、コメントのアイコンがあるため、おそらく見えなくなるか、非常に読みにくくなります。理想的には、テキストや顔は中央上部のエリア(セーフゾーン)に配置してください。',
|
|
30
|
+
},
|
|
31
|
+
];
|
|
32
|
+
|
|
33
|
+
const howToData = [
|
|
34
|
+
{
|
|
35
|
+
name: '画像または動画を読み込む',
|
|
36
|
+
text: 'プレビューしたいファイルをアップロードします。処理はローカルでプライベートに行われ、インターネットにアップロードされることはありません。',
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
name: 'プラットフォームを選択する',
|
|
40
|
+
text: 'TikTok、リール、YouTube Shortsの中から選択して、対応するインターフェースオーバーレイを有効にします。',
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
name: '読みやすさを確認する',
|
|
44
|
+
text: 'テキスト、字幕、または主要なブランド要素がソーシャルネットワークのアイコンで覆われていないか検証します。',
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
name: '調整してエクスポートする',
|
|
48
|
+
text: '隠れているものがある場合は、元の動画エディタで要素を移動し、完璧に収まるまで再度テストします。',
|
|
49
|
+
},
|
|
50
|
+
];
|
|
51
|
+
|
|
52
|
+
const faqSchema: WithContext<FAQPage> = {
|
|
53
|
+
'@context': 'https://schema.org',
|
|
54
|
+
'@type': 'FAQPage',
|
|
55
|
+
mainEntity: faqData.map((item) => ({
|
|
56
|
+
'@type': 'Question',
|
|
57
|
+
name: item.question,
|
|
58
|
+
acceptedAnswer: { '@type': 'Answer', text: item.answer },
|
|
59
|
+
})),
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
const howToSchema: WithContext<HowToThing> = {
|
|
63
|
+
'@context': 'https://schema.org',
|
|
64
|
+
'@type': 'HowTo',
|
|
65
|
+
name: title,
|
|
66
|
+
description,
|
|
67
|
+
step: howToData.map((step, i) => ({
|
|
68
|
+
'@type': 'HowToStep',
|
|
69
|
+
position: i + 1,
|
|
70
|
+
name: step.name,
|
|
71
|
+
text: step.text,
|
|
72
|
+
})),
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
const appSchema: WithContext<SoftwareApplication> = {
|
|
76
|
+
'@context': 'https://schema.org',
|
|
77
|
+
'@type': 'SoftwareApplication',
|
|
78
|
+
name: title,
|
|
79
|
+
description,
|
|
80
|
+
applicationCategory: 'UtilityApplication',
|
|
81
|
+
operatingSystem: 'All',
|
|
82
|
+
offers: { '@type': 'Offer', price: '0', priceCurrency: 'JPY' },
|
|
83
|
+
inLanguage: 'ja',
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
export const content: ToolLocaleContent<SafeZonesUI> = {
|
|
87
|
+
slug,
|
|
88
|
+
title,
|
|
89
|
+
description,
|
|
90
|
+
faqTitle: 'よくある質問',
|
|
91
|
+
faq: faqData,
|
|
92
|
+
bibliographyTitle: '公式プラットフォームドキュメント',
|
|
93
|
+
bibliography: [
|
|
94
|
+
{
|
|
95
|
+
name: 'TikTokクリエイターポータル:動画の最適化とセーフゾーン',
|
|
96
|
+
url: 'https://www.tiktok.com/creators/creator-portal/en-us/foundation/video-optimization/',
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
name: 'Instagram Business:リールのベストプラクティス',
|
|
100
|
+
url: 'https://business.instagram.com/creators/reels-best-practices',
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
name: 'YouTubeヘルプ:YouTube Shortsを作成する',
|
|
104
|
+
url: 'https://support.google.com/youtube/answer/10343433',
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
name: 'Meta for Creators:動画のセーフゾーンとアスペクト比',
|
|
108
|
+
url: 'https://www.facebook.com/business/help/103816146375741',
|
|
109
|
+
},
|
|
110
|
+
],
|
|
111
|
+
howTo: howToData,
|
|
112
|
+
schemas: [faqSchema, howToSchema, appSchema],
|
|
113
|
+
seo: [
|
|
114
|
+
{
|
|
115
|
+
type: 'title',
|
|
116
|
+
text: 'セーフゾーンマスターガイド:リール、TikTok、Shortsを最適化する',
|
|
117
|
+
level: 2,
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
type: 'paragraph',
|
|
121
|
+
html: '縦型コンテンツが飽和している世界では、第一印象は技術的なものです。クリエイターが犯す最大の過ちは、自分の<strong>動画や画像</strong>がプラットフォーム独自のインターフェースとどのように干渉するかを無視することです。各ソーシャルネットワーク(TikTok、リール、YouTube Shorts)は、ボタン、テキスト、プロフィールのレイヤーを重ねて表示するため、せっかくの構図の視覚的インパクトが損なわれる可能性があります。',
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
type: 'paragraph',
|
|
125
|
+
html: 'このツールを使用すると、メディアファイルを読み込み、フレームのどの部分がインターフェースによって隠されるかを正確にプレビューできます。これは単なる<strong>字幕</strong>の問題ではありません。動画の中の顔、製品、または主要なアクションが「いいね」ボタンや長い説明文の下に埋もれてしまわないようにするためのものです。',
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
type: 'grid',
|
|
129
|
+
columns: [
|
|
130
|
+
{
|
|
131
|
+
type: 'card',
|
|
132
|
+
title: 'TikTok:最も侵入的なインターフェース',
|
|
133
|
+
html: '<p>TikTokは最も密度の高いインターフェースを持っています。右側には、幅の約15%を占めるアイコンの列があります。下部では、説明文が4〜5行に及ぶことがあり、下から画面のほぼ3分の1を覆います。</p><ul><li><strong>下部マージン:</strong>説明文とユーザー名のエリアを避けるため、下部250pxを空けておきます。</li><li><strong>右側マージン:</strong>右端から100px以内にはテキストを配置しないようにします。</li><li><strong>上部:</strong>「フォロー中」と「おすすめ」のボタンが上部中央の帯を占めています。</li></ul>',
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
type: 'card',
|
|
137
|
+
title: 'Instagramリール:フィード要因',
|
|
138
|
+
html: '<p>TikTokとは異なり、リールをメインフィードから見る際、動画は4:5の形式にトリミングされます。つまり、9:16の動画の上下15%に不可欠な情報を配置すると、フィードでは消えてしまいます。</p><ul><li><strong>4:5の法則:</strong>フィードでの視認性を確保するため、タイトルや主要な要素は中央ゾーンに配置します。</li><li><strong>インターフェース:</strong>リールのアイコンはTikTokよりも控えめで、左右のマージンには少し余裕があります。</li><li><strong>オーディオボタン:</strong>右下に配置され、通常、TikTokの回転ディスクよりも覆われる範囲は非常に小さいです。</li></ul>',
|
|
139
|
+
},
|
|
140
|
+
],
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
type: 'title',
|
|
144
|
+
text: 'YouTube Shorts:右側に注意',
|
|
145
|
+
level: 3,
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
type: 'paragraph',
|
|
149
|
+
html: 'YouTube Shortsは非対称なインターフェースを持っています。チャンネル登録ボタンは非常に目立ち、単色(通常は黒または白)であるため、右下に大きな視覚的死角を生み出します。',
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
type: 'list',
|
|
153
|
+
items: [
|
|
154
|
+
'<strong>右側マージン:</strong>右下の20%エリアには、テキストや重要な要素を配置しないようにします。',
|
|
155
|
+
'<strong>下部マージン:</strong>説明文とユーザー名を避けるため、下部150pxを空けておきます。',
|
|
156
|
+
'<strong>上部:</strong>チャンネル登録ボタンやその他の要素が上部中央の帯を占めています。',
|
|
157
|
+
],
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
type: 'title',
|
|
161
|
+
text: '縦型デザインに関する重要な疑問',
|
|
162
|
+
level: 2,
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
type: 'title',
|
|
166
|
+
text: '主要な要素(顔、テキスト、製品)はどこに配置すべきか?',
|
|
167
|
+
level: 3,
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
type: 'paragraph',
|
|
171
|
+
html: '主要なアクションの「ゴールデンゾーン」は、動画の中央3分の1です。人物を撮影する場合は、目と口がこのゾーン内に収まるようにしてください。重要なグラフィック要素は、下部の説明文を避けるため、幾何学的な中心からわずかに上にずらす必要があります。',
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
type: 'title',
|
|
175
|
+
text: 'アップロードすると動画がぼやけて見えるのはなぜか?',
|
|
176
|
+
level: 3,
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
type: 'paragraph',
|
|
180
|
+
html: '品質自体ではなく、スケーリングの問題であることが多いです。常に1080x1920、30または60fpsで記録してください。重いエフェクトを多用する場合は4Kを避けてください。プラットフォームは大きなファイルを強力に圧縮するためです。',
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
type: 'title',
|
|
184
|
+
text: 'スマートフォンのベゼルについて',
|
|
185
|
+
level: 3,
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
type: 'paragraph',
|
|
189
|
+
html: '最近のスマートフォンには画面上にノッチやカメラホールがあることを忘れないでください。当ツールには上部の安全マージンが含まれているため、コンテンツが時計やシステムアイコン(バッテリー、信号)と重なることはありません。',
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
type: 'title',
|
|
193
|
+
text: 'バイラル動画の解剖学',
|
|
194
|
+
level: 2,
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
type: 'paragraph',
|
|
198
|
+
html: 'ソーシャルメディア向けのデザインは単なる美学ではなく、<strong>ユーザビリティ</strong>です。プラットフォームのアイコンが邪魔でテキストを読むのに苦労する場合、ユーザーはすぐに次の動画にスワイプしてしまいます。視覚的な摩擦があると、維持率(視聴時間)は急激に低下します。',
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
type: 'paragraph',
|
|
202
|
+
html: '例えばYouTube Shortsでは、インターフェースが非対称です。登録ボタンは非常に目立ちます。このシミュレーターを使用して不透明度を調整することで、カラーパレットがネイティブのUIカラーとどのように干渉するかを理解できます。',
|
|
203
|
+
},
|
|
204
|
+
{
|
|
205
|
+
type: 'tip',
|
|
206
|
+
title: 'クリエイティブ・品質管理ツール',
|
|
207
|
+
html: '<p>何事も運任せにしないクリエイターのために設計されました。</p>',
|
|
208
|
+
},
|
|
209
|
+
],
|
|
210
|
+
ui: {
|
|
211
|
+
labelConfig: '設定',
|
|
212
|
+
labelPlatform: '対象プラットフォーム',
|
|
213
|
+
labelUpload: 'コンテンツのアップロード',
|
|
214
|
+
uploadPrompt: '画像または動画を選択',
|
|
215
|
+
uploadLink: 'または例を使用する',
|
|
216
|
+
loadContent: 'コンテンツを読み込む',
|
|
217
|
+
labelOpacity: 'インターフェースの透明度',
|
|
218
|
+
labelMask: '注意が必要なゾーンをグレーアウト',
|
|
219
|
+
labelGrid: '三分割法',
|
|
220
|
+
btnReset: 'キャンバスをリセット',
|
|
221
|
+
bannerTiktok: 'TikTok 9:16のシミュレーション',
|
|
222
|
+
bannerReels: 'リール 9:16のシミュレーション',
|
|
223
|
+
bannerShorts: 'YouTube Shorts 9:16のシミュレーション',
|
|
224
|
+
nameTiktok: 'TikTok',
|
|
225
|
+
nameReels: 'リール',
|
|
226
|
+
nameShorts: 'YouTube Shorts',
|
|
227
|
+
ttFollowing: 'フォロー中',
|
|
228
|
+
ttForYou: 'おすすめ',
|
|
229
|
+
ttDescription: 'コンテンツクリエイター向けの実際のインターフェースデザイン。 #uxdesign #socialmedia',
|
|
230
|
+
ttAudio: 'jjlmoya - オリジナル楽曲',
|
|
231
|
+
ttNavHome: 'レコメンド',
|
|
232
|
+
ttNavFriends: '友達',
|
|
233
|
+
ttNavInbox: '受信箱',
|
|
234
|
+
ttNavProfile: 'プロフィール',
|
|
235
|
+
reelsFollow: 'フォローする',
|
|
236
|
+
reelsDescription: '本物と同一のインターフェースです。 #reels #ux #simulator',
|
|
237
|
+
reelsAudio: 'Trending Music - オリジナルオーディオ',
|
|
238
|
+
shortsSubscribe: 'チャンネル登録',
|
|
239
|
+
shortsDislike: '低評価',
|
|
240
|
+
shortsShare: '共有',
|
|
241
|
+
shortsRemix: 'リミックス',
|
|
242
|
+
shortsDescription: 'Shortsの実際のインターフェースをシミュレート! #youtube #shorts',
|
|
243
|
+
},
|
|
244
|
+
};
|