@jjlmoya/utils-audiovisual 1.7.0 → 1.9.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 +2 -1
- package/src/category/i18n/de.ts +198 -0
- package/src/category/i18n/id.ts +198 -0
- package/src/category/i18n/it.ts +198 -0
- package/src/category/i18n/ja.ts +198 -0
- package/src/category/i18n/ko.ts +198 -0
- package/src/category/i18n/nl.ts +198 -0
- package/src/category/i18n/pl.ts +198 -0
- package/src/category/i18n/pt.ts +198 -0
- package/src/category/i18n/ru.ts +198 -0
- package/src/category/i18n/sv.ts +198 -0
- package/src/category/i18n/tr.ts +198 -0
- package/src/category/i18n/zh.ts +198 -0
- package/src/category/index.ts +31 -3
- package/src/tests/i18n_coverage.test.ts +36 -0
- package/src/tests/slug_uniqueness.test.ts +81 -0
- package/src/tool/chromaticLens/i18n/de.ts +246 -0
- package/src/tool/chromaticLens/i18n/id.ts +246 -0
- package/src/tool/chromaticLens/i18n/it.ts +246 -0
- package/src/tool/chromaticLens/i18n/ja.ts +246 -0
- package/src/tool/chromaticLens/i18n/ko.ts +246 -0
- package/src/tool/chromaticLens/i18n/nl.ts +246 -0
- package/src/tool/chromaticLens/i18n/pl.ts +246 -0
- package/src/tool/chromaticLens/i18n/pt.ts +246 -0
- package/src/tool/chromaticLens/i18n/ru.ts +246 -0
- package/src/tool/chromaticLens/i18n/sv.ts +246 -0
- package/src/tool/chromaticLens/i18n/tr.ts +246 -0
- package/src/tool/chromaticLens/i18n/zh.ts +246 -0
- package/src/tool/chromaticLens/index.ts +15 -7
- package/src/tool/collageMaker/i18n/de.ts +233 -0
- package/src/tool/collageMaker/i18n/id.ts +233 -0
- package/src/tool/collageMaker/i18n/it.ts +233 -0
- package/src/tool/collageMaker/i18n/ja.ts +233 -0
- package/src/tool/collageMaker/i18n/ko.ts +233 -0
- package/src/tool/collageMaker/i18n/nl.ts +233 -0
- package/src/tool/collageMaker/i18n/pl.ts +233 -0
- package/src/tool/collageMaker/i18n/pt.ts +233 -0
- package/src/tool/collageMaker/i18n/ru.ts +233 -0
- package/src/tool/collageMaker/i18n/sv.ts +233 -0
- package/src/tool/collageMaker/i18n/tr.ts +233 -0
- package/src/tool/collageMaker/i18n/zh.ts +233 -0
- package/src/tool/collageMaker/index.ts +15 -6
- package/src/tool/exifCleaner/i18n/de.ts +277 -0
- package/src/tool/exifCleaner/i18n/fr.ts +1 -1
- package/src/tool/exifCleaner/i18n/id.ts +277 -0
- package/src/tool/exifCleaner/i18n/it.ts +277 -0
- package/src/tool/exifCleaner/i18n/ja.ts +277 -0
- package/src/tool/exifCleaner/i18n/ko.ts +277 -0
- package/src/tool/exifCleaner/i18n/nl.ts +277 -0
- package/src/tool/exifCleaner/i18n/pl.ts +277 -0
- package/src/tool/exifCleaner/i18n/pt.ts +277 -0
- package/src/tool/exifCleaner/i18n/ru.ts +277 -0
- package/src/tool/exifCleaner/i18n/sv.ts +277 -0
- package/src/tool/exifCleaner/i18n/tr.ts +277 -0
- package/src/tool/exifCleaner/i18n/zh.ts +277 -0
- package/src/tool/exifCleaner/index.ts +16 -8
- package/src/tool/imageCompressor/i18n/de.ts +242 -0
- package/src/tool/imageCompressor/i18n/en.ts +1 -1
- package/src/tool/imageCompressor/i18n/es.ts +1 -1
- package/src/tool/imageCompressor/i18n/id.ts +242 -0
- package/src/tool/imageCompressor/i18n/it.ts +242 -0
- package/src/tool/imageCompressor/i18n/ja.ts +242 -0
- package/src/tool/imageCompressor/i18n/ko.ts +242 -0
- package/src/tool/imageCompressor/i18n/nl.ts +242 -0
- package/src/tool/imageCompressor/i18n/pl.ts +242 -0
- package/src/tool/imageCompressor/i18n/pt.ts +242 -0
- package/src/tool/imageCompressor/i18n/ru.ts +242 -0
- package/src/tool/imageCompressor/i18n/sv.ts +242 -0
- package/src/tool/imageCompressor/i18n/tr.ts +242 -0
- package/src/tool/imageCompressor/i18n/zh.ts +244 -0
- package/src/tool/imageCompressor/index.ts +15 -7
- package/src/tool/printQualityCalculator/i18n/de.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/fr.ts +1 -1
- package/src/tool/printQualityCalculator/i18n/id.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/it.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/ja.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/ko.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/nl.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/pl.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/pt.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/ru.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/sv.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/tr.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/zh.ts +261 -0
- package/src/tool/printQualityCalculator/index.ts +15 -7
- package/src/tool/privacyBlur/i18n/de.ts +238 -0
- package/src/tool/privacyBlur/i18n/id.ts +238 -0
- package/src/tool/privacyBlur/i18n/it.ts +238 -0
- package/src/tool/privacyBlur/i18n/ja.ts +238 -0
- package/src/tool/privacyBlur/i18n/ko.ts +238 -0
- package/src/tool/privacyBlur/i18n/nl.ts +238 -0
- package/src/tool/privacyBlur/i18n/pl.ts +238 -0
- package/src/tool/privacyBlur/i18n/pt.ts +238 -0
- package/src/tool/privacyBlur/i18n/ru.ts +238 -0
- package/src/tool/privacyBlur/i18n/sv.ts +238 -0
- package/src/tool/privacyBlur/i18n/tr.ts +238 -0
- package/src/tool/privacyBlur/i18n/zh.ts +238 -0
- package/src/tool/privacyBlur/index.ts +15 -7
- package/src/tool/subtitleSync/i18n/de.ts +241 -0
- package/src/tool/subtitleSync/i18n/fr.ts +5 -5
- package/src/tool/subtitleSync/i18n/id.ts +241 -0
- package/src/tool/subtitleSync/i18n/it.ts +241 -0
- package/src/tool/subtitleSync/i18n/ja.ts +241 -0
- package/src/tool/subtitleSync/i18n/ko.ts +241 -0
- package/src/tool/subtitleSync/i18n/nl.ts +241 -0
- package/src/tool/subtitleSync/i18n/pl.ts +241 -0
- package/src/tool/subtitleSync/i18n/pt.ts +241 -0
- package/src/tool/subtitleSync/i18n/ru.ts +241 -0
- package/src/tool/subtitleSync/i18n/sv.ts +241 -0
- package/src/tool/subtitleSync/i18n/tr.ts +241 -0
- package/src/tool/subtitleSync/i18n/zh.ts +241 -0
- package/src/tool/subtitleSync/index.ts +15 -7
- package/src/tool/timelapseCalculator/i18n/de.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/fr.ts +2 -2
- package/src/tool/timelapseCalculator/i18n/id.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/it.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/ja.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/ko.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/nl.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/pl.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/pt.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/ru.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/sv.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/tr.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/zh.ts +169 -0
- package/src/tool/timelapseCalculator/index.ts +16 -8
- package/src/tool/tvDistance/i18n/de.ts +223 -0
- package/src/tool/tvDistance/i18n/id.ts +223 -0
- package/src/tool/tvDistance/i18n/it.ts +223 -0
- package/src/tool/tvDistance/i18n/ja.ts +223 -0
- package/src/tool/tvDistance/i18n/ko.ts +223 -0
- package/src/tool/tvDistance/i18n/nl.ts +223 -0
- package/src/tool/tvDistance/i18n/pl.ts +223 -0
- package/src/tool/tvDistance/i18n/pt.ts +223 -0
- package/src/tool/tvDistance/i18n/ru.ts +223 -0
- package/src/tool/tvDistance/i18n/sv.ts +223 -0
- package/src/tool/tvDistance/i18n/tr.ts +223 -0
- package/src/tool/tvDistance/i18n/zh.ts +223 -0
- package/src/tool/tvDistance/index.ts +15 -7
- package/src/tool/videoFrameExtractor/i18n/de.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/id.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/it.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/ja.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/ko.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/nl.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/pl.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/pt.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/ru.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/sv.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/tr.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/zh.ts +235 -0
- package/src/tool/videoFrameExtractor/index.ts +16 -8
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
|
|
2
|
+
import type { ChromaticLensUI, ChromaticLensLocaleContent } from '../index';
|
|
3
|
+
|
|
4
|
+
const slug = 'chromatic-lens-estrazione-tavolozza-colori-online';
|
|
5
|
+
const title = 'Chromatic Lens: Estrazione Tavolozza Colori Online';
|
|
6
|
+
const description = 'Estrai gratuitamente tavolozze di colori professionali da qualsiasi immagine. Identifica i colori dominanti nelle tue foto usando algoritmi matematici.';
|
|
7
|
+
|
|
8
|
+
const ui: ChromaticLensUI = {
|
|
9
|
+
dropTitle: "Analizza Colori",
|
|
10
|
+
dropSubtitle: "Trascina un'immagine per estrarre il suo DNA cromatico.",
|
|
11
|
+
processingLabel: "Estrazione tavolozza...",
|
|
12
|
+
paletteTitle: "Tavolozza Estratta",
|
|
13
|
+
copyLabel: "Copia HEX",
|
|
14
|
+
copiedLabel: "Copiato!",
|
|
15
|
+
colorCountLabel: "Numero di colori",
|
|
16
|
+
changeImage: "Cambia immagine",
|
|
17
|
+
faqTitle: "Domande frequenti sull'estrazione del colore",
|
|
18
|
+
bibliographyTitle: "Risorse e documentazione tecnica"
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const faq: ChromaticLensLocaleContent['faq'] = [
|
|
22
|
+
{
|
|
23
|
+
question: "Come funziona l'estrazione del colore?",
|
|
24
|
+
answer: "Utilizziamo l'algoritmo 'Median Cut', che raggruppa i pixel dell'immagine in base alla loro vicinanza nello spazio colore RGB per trovare le tonalità più rappresentative.",
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
question: "Posso copiare i colori nel mio editor di design?",
|
|
28
|
+
answer: "Sì, cliccando su ogni colore, il codice HEX verrà automaticamente copiato negli appunti, pronto per essere incollato in Photoshop, Figma o CSS.",
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
question: "Quali tipi di immagini posso analizzare?",
|
|
32
|
+
answer: "Qualsiasi file JPG, PNG o WebP. L'elaborazione è locale, quindi le immagini di grandi dimensioni verranno analizzate rapidamente senza consumare dati di rete.",
|
|
33
|
+
},
|
|
34
|
+
];
|
|
35
|
+
|
|
36
|
+
const howTo: ChromaticLensLocaleContent['howTo'] = [
|
|
37
|
+
{
|
|
38
|
+
name: "Carica l'immagine",
|
|
39
|
+
text: "Carica la fotografia da cui desideri estrarre l'ispirazione cromatica.",
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
name: "Regola la precisione",
|
|
43
|
+
text: "Seleziona quanti colori dominanti desideri che lo strumento identifichi (da 3 a 12).",
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
name: "Analizza il risultato",
|
|
47
|
+
text: "La tavolozza apparirà istantaneamente con i relativi codici esadecimali.",
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
name: "Copia e usa",
|
|
51
|
+
text: "Clicca sulle tonalità per salvarle e applicarle al tuo progetto di design.",
|
|
52
|
+
},
|
|
53
|
+
];
|
|
54
|
+
|
|
55
|
+
const bibliography: ChromaticLensLocaleContent['bibliography'] = [
|
|
56
|
+
{
|
|
57
|
+
name: "Median Cut Algorithm - Wikipedia",
|
|
58
|
+
url: "https://en.wikipedia.org/wiki/Median_cut",
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
name: "Teoria del Colore per Designer",
|
|
62
|
+
url: "https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/",
|
|
63
|
+
},
|
|
64
|
+
];
|
|
65
|
+
|
|
66
|
+
const seo: ChromaticLensLocaleContent['seo'] = [
|
|
67
|
+
{
|
|
68
|
+
type: 'summary',
|
|
69
|
+
title: 'Estrazione Intelligente della Tavolozza Colori',
|
|
70
|
+
items: [
|
|
71
|
+
'Algoritmo professionale Median Cut per l\'analisi del colore',
|
|
72
|
+
'Estrai da 3 a 12 colori dominanti da qualsiasi immagine',
|
|
73
|
+
'Codici HEX copiabili direttamente negli appunti',
|
|
74
|
+
'Elaborazione 100% locale - ideale per i creativi'
|
|
75
|
+
]
|
|
76
|
+
},
|
|
77
|
+
{ type: 'title', text: 'Estrazione Tavolozza Colori: Scienza e Design', level: 2 },
|
|
78
|
+
{ type: 'paragraph', html: 'Ti sei mai chiesto perché una fotografia cinematografica appare così armoniosa? Non è una coincidenza; è la teoria del colore in azione. Chromatic Lens ti permette di estrarre quell\'armonia direttamente dal pixel, trasformandola in codici HEX utilizzabili nei tuoi progetti di design.' },
|
|
79
|
+
|
|
80
|
+
{ type: 'stats', items: [
|
|
81
|
+
{ value: 'Istantanea', label: 'Analisi Colore', icon: 'mdi:lightning-bolt' },
|
|
82
|
+
{ value: '100%', label: 'Privacy Locale', icon: 'mdi:lock' },
|
|
83
|
+
{ value: 'RGB', label: 'Spazio Colore Preciso', icon: 'mdi:palette' }
|
|
84
|
+
], columns: 3 },
|
|
85
|
+
|
|
86
|
+
{ type: 'title', text: 'L\'Algoritmo Median Cut Spiegato', level: 3 },
|
|
87
|
+
{ type: 'paragraph', html: 'L\'estrazione intelligente della tavolozza non è un semplice campionamento casuale di pixel. Utilizza l\'algoritmo Median Cut, una tecnica di partizionamento ricorsivo che garantisce una rappresentazione fedele:' },
|
|
88
|
+
{ type: 'list', items: [
|
|
89
|
+
'<strong>Divisione Ricorsiva:</strong> Il \"cubo di colore\" RGB dell\'immagine viene diviso ricorsivamente in scatole più piccole.',
|
|
90
|
+
'<strong>Bilanciamento del Volume:</strong> Ogni partizione cerca di raggruppare i pixel dello stesso spazio colore con volumi simili.',
|
|
91
|
+
'<strong>Media Ponderata:</strong> Il colore risultante di ogni scatola è la media di tutti i pixel che contiene.',
|
|
92
|
+
'<strong>Rappresentazione Fedele:</strong> I colori dominanti riflettono la reale atmosfera visiva dell\'immagine, non un semplice campione.'
|
|
93
|
+
], icon: 'mdi:check' },
|
|
94
|
+
|
|
95
|
+
{ type: 'card', title: 'Flusso di Lavoro Creativo', html: 'Ideale per sviluppatori web, designer UX/UI, artisti digitali e creativi che desiderano catturare istantaneamente l\'essenza visiva di una fotografia, di un film o di un riferimento visivo da applicare nelle loro interfacce, illustrazioni o tavolozze di brand.' },
|
|
96
|
+
|
|
97
|
+
{ type: 'title', text: 'Casi d\'Uso nel Design Digitale', level: 3 },
|
|
98
|
+
{ type: 'comparative', items: [
|
|
99
|
+
{
|
|
100
|
+
title: 'Designer UX/UI',
|
|
101
|
+
description: 'Estrai tavolozze dalle immagini hero per creare interfacce coerenti',
|
|
102
|
+
icon: 'mdi:palette',
|
|
103
|
+
points: [
|
|
104
|
+
'Colori di sfondo armoniosi',
|
|
105
|
+
'Pulsanti ed elementi secondari',
|
|
106
|
+
'Contrasto calcolato automaticamente'
|
|
107
|
+
]
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
title: 'Sviluppatori Web',
|
|
111
|
+
description: 'Crea fogli di stile CSS direttamente da riferimenti visivi',
|
|
112
|
+
icon: 'mdi:code-braces',
|
|
113
|
+
points: [
|
|
114
|
+
'Copia HEX direttamente nel CSS',
|
|
115
|
+
'Variabili di colore in SCSS/CSS',
|
|
116
|
+
'Temi coerenti senza design preventivo'
|
|
117
|
+
],
|
|
118
|
+
highlight: true
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
title: 'Artisti Digitali e Illustratori',
|
|
122
|
+
description: 'Cattura riferimenti cromatici da film, natura o arte',
|
|
123
|
+
icon: 'mdi:brush',
|
|
124
|
+
points: [
|
|
125
|
+
'Tavolozze di riferimento da capolavori',
|
|
126
|
+
'Studi sul colore cinematografico',
|
|
127
|
+
'Ispirazione visiva immediata'
|
|
128
|
+
]
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
title: 'Specialisti di Branding',
|
|
132
|
+
description: 'Sviluppa identità visive basate su fotografie guida',
|
|
133
|
+
icon: 'mdi:tag-multiple',
|
|
134
|
+
points: [
|
|
135
|
+
'Estrai colori del brand dalle immagini',
|
|
136
|
+
'Crea guide cromatiche professionali',
|
|
137
|
+
'Garantisci coerenza visiva'
|
|
138
|
+
]
|
|
139
|
+
}
|
|
140
|
+
], columns: 2 },
|
|
141
|
+
|
|
142
|
+
{ type: 'title', text: 'Teoria del Colore Applicata', level: 3 },
|
|
143
|
+
{ type: 'table', headers: ['Concetto Colore', 'Definizione', 'Applicazione Pratica'], rows: [
|
|
144
|
+
['Armonia Cromatica', 'Combinazione di colori visivamente bilanciata', 'Identità visiva coerente nella UI'],
|
|
145
|
+
['Contrasto', 'Differenza di luminosità tra i colori', 'Leggibilità e gerarchia visiva'],
|
|
146
|
+
['Saturazione', 'Intensità del colore di una tonalità', 'Professionalità (bassa) vs Energia (alta)'],
|
|
147
|
+
['Temperatura Colore', 'Colori caldi (rossi) vs colori freddi (blu)', 'Psicologia emotiva del design'],
|
|
148
|
+
['Tavolozza Monocromatica', 'Variazioni di una singola tonalità', 'Eleganza e minimalismo']
|
|
149
|
+
] },
|
|
150
|
+
|
|
151
|
+
{ type: 'proscons', items: [
|
|
152
|
+
{
|
|
153
|
+
pro: 'Precisione matematica nell\'estrazione - non una selezione visiva approssimativa',
|
|
154
|
+
con: 'Colori difficilmente visibili possono essere inclusi se hanno molti pixel'
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
pro: 'Copia istantanea negli appunti - integrazione perfetta con il flusso di lavoro',
|
|
158
|
+
con: 'Richiede un browser moderno compatibile con la Canvas API'
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
pro: 'Privacy totale - analisi 100% locale senza invio di dati',
|
|
162
|
+
con: 'Nessuna cronologia delle analisi precedenti salvata'
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
pro: 'Compatibile con qualsiasi formato di immagine digitale',
|
|
166
|
+
con: 'I colori finali dipendono dalla compressione e dalla qualità dell\'immagine'
|
|
167
|
+
}
|
|
168
|
+
], proTitle: 'Vantaggi', conTitle: 'Limitazioni' },
|
|
169
|
+
|
|
170
|
+
{ type: 'diagnostic', variant: 'success', title: 'Rappresentazione Realistica del Colore', icon: 'mdi:check-circle-outline', badge: 'Algoritmo Avanzato', html: 'A differenza degli strumenti che campionano semplicemente pixel casuali, il nostro sistema utilizza l\'algoritmo Median Cut che pesa l\'intero conteggio dei pixel di ogni tonalità, garantendo che la tavolozza risultante rifletta fedelmente l\'atmosfera visiva e la psicologia del colore dell\'immagine originale.' },
|
|
171
|
+
|
|
172
|
+
{ type: 'glossary', items: [
|
|
173
|
+
{
|
|
174
|
+
term: 'Median Cut',
|
|
175
|
+
definition: 'Algoritmo di quantizzazione del colore che divide ricorsivamente lo spazio RGB in scatole, garantendo una distribuzione uniforme. Storicamente utilizzato nella tecnologia GIF e dei colori indicizzati.'
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
term: 'Spazio Colore RGB',
|
|
179
|
+
definition: 'Modello di colore basato su rosso, verde e blu. Ogni colore è rappresentato come combinazione di questi tre valori (0-255). Standard su schermi digitali e web.'
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
term: 'Codice HEX',
|
|
183
|
+
definition: 'Notazione esadecimale a 6 cifre (#RRGGBB) che rappresenta il colore sul web: #FF0000 (rosso), #00FF00 (verde), #0000FF (blu). Universale in CSS, Figma e Adobe.'
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
term: 'Saturazione Colore',
|
|
187
|
+
definition: 'Intensità o purezza del colore. Alta saturazione = colore vivido; bassa saturazione = colore grigiastro. Influisce sulla percezione emotiva del design.'
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
term: 'Armonia Cromatica',
|
|
191
|
+
definition: 'La selezione e la combinazione di colori che danno un risultato visivamente gradevole. Può essere monocromatica, complementare, analoga o triadica.'
|
|
192
|
+
}
|
|
193
|
+
] },
|
|
194
|
+
|
|
195
|
+
{ type: 'message', title: 'Analisi Cromatica Professionale', ariaLabel: 'Informazioni tecniche sull\'analisi del colore', html: 'Chromatic Lens trasforma l\'analisi visiva manuale in precisione algoritmica. Non si limita a estrarre i colori: cattura l\'essenza emotiva e visiva di qualsiasi immagine, mettendola direttamente negli appunti sotto forma di codici HEX pronti all\'uso. Privacy totale, nessun limite al volume di analisi.' },
|
|
196
|
+
|
|
197
|
+
{ type: 'title', text: 'Design dall\'Ispirazione Visiva', level: 3 },
|
|
198
|
+
{ type: 'paragraph', html: 'La migliore tavolozza di colori è quella che cattura l\'intento visivo del tuo riferimento. Chromatic Lens automatizza quello che prima era un processo manuale: osservare, analizzare, annotare. Ora, basta trascinare un\'immagine e ottenere codici HEX professionali in pochi secondi.' }
|
|
199
|
+
];
|
|
200
|
+
|
|
201
|
+
const faqSchema: WithContext<FAQPage> = {
|
|
202
|
+
'@context': 'https://schema.org',
|
|
203
|
+
'@type': 'FAQPage',
|
|
204
|
+
mainEntity: faq.map((item) => ({
|
|
205
|
+
'@type': 'Question',
|
|
206
|
+
name: item.question,
|
|
207
|
+
acceptedAnswer: { '@type': 'Answer', text: item.answer },
|
|
208
|
+
})),
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
const howToSchema: WithContext<HowTo> = {
|
|
212
|
+
'@context': 'https://schema.org',
|
|
213
|
+
'@type': 'HowTo',
|
|
214
|
+
name: title,
|
|
215
|
+
description,
|
|
216
|
+
step: howTo.map((step) => ({
|
|
217
|
+
'@type': 'HowToStep',
|
|
218
|
+
name: step.name,
|
|
219
|
+
text: step.text,
|
|
220
|
+
})),
|
|
221
|
+
};
|
|
222
|
+
|
|
223
|
+
const appSchema: WithContext<SoftwareApplication> = {
|
|
224
|
+
'@context': 'https://schema.org',
|
|
225
|
+
'@type': 'SoftwareApplication',
|
|
226
|
+
name: title,
|
|
227
|
+
description,
|
|
228
|
+
applicationCategory: 'UtilitiesApplication',
|
|
229
|
+
operatingSystem: 'Web',
|
|
230
|
+
offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
|
|
231
|
+
inLanguage: 'it',
|
|
232
|
+
};
|
|
233
|
+
|
|
234
|
+
export const content: ChromaticLensLocaleContent = {
|
|
235
|
+
slug,
|
|
236
|
+
title,
|
|
237
|
+
description,
|
|
238
|
+
ui,
|
|
239
|
+
seo,
|
|
240
|
+
faqTitle: "Domande Frequenti",
|
|
241
|
+
faq,
|
|
242
|
+
bibliographyTitle: "Riferimenti",
|
|
243
|
+
bibliography,
|
|
244
|
+
howTo,
|
|
245
|
+
schemas: [faqSchema as any, howToSchema as any, appSchema],
|
|
246
|
+
};
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
|
|
2
|
+
import type { ChromaticLensUI, ChromaticLensLocaleContent } from '../index';
|
|
3
|
+
|
|
4
|
+
const slug = 'chromatic-lens-color-palette-extraction-online';
|
|
5
|
+
const title = 'Chromatic Lens: オンライン カラーパレット抽出・解析ツール';
|
|
6
|
+
const description = 'あらゆる画像からプロフェッショナルなカラーパレットを無料で抽出。数学的なアルゴリズムを用いて、写真の中の主要な色を特定します。';
|
|
7
|
+
|
|
8
|
+
const ui: ChromaticLensUI = {
|
|
9
|
+
dropTitle: "カラーを解析",
|
|
10
|
+
dropSubtitle: "画像をドラッグして、その色彩DNAを抽出します。",
|
|
11
|
+
processingLabel: "パレットを抽出中...",
|
|
12
|
+
paletteTitle: "抽出されたパレット",
|
|
13
|
+
copyLabel: "HEXをコピー",
|
|
14
|
+
copiedLabel: "コピーしました!",
|
|
15
|
+
colorCountLabel: "色の数",
|
|
16
|
+
changeImage: "画像を変更",
|
|
17
|
+
faqTitle: "カラー抽出に関するよくある質問",
|
|
18
|
+
bibliographyTitle: "リソースと技術ドキュメント"
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const faq: ChromaticLensLocaleContent['faq'] = [
|
|
22
|
+
{
|
|
23
|
+
question: "カラー抽出はどのように機能しますか?",
|
|
24
|
+
answer: "RGB色空間における近似性に基づいて画像の画素をグループ化する「メディアンカット(Median Cut)」アルゴリズムを使用し、最も代表的なトーンを見つけ出します。",
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
question: "抽出した色をデザインエディタにコピーできますか?",
|
|
28
|
+
answer: "はい。各色をクリックするとHEXコードが自動的にクリップボードにコピーされ、Photoshop、Figma、CSSなどにすぐに貼り付けることができます。",
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
question: "どのような種類の画像を解析できますか?",
|
|
32
|
+
answer: "JPG、PNG、WebPの各ファイルに対応しています。処理はローカルで行われるため、大きな画像でもネットワークデータを使用せずに素早く解析できます。",
|
|
33
|
+
},
|
|
34
|
+
];
|
|
35
|
+
|
|
36
|
+
const howTo: ChromaticLensLocaleContent['howTo'] = [
|
|
37
|
+
{
|
|
38
|
+
name: "画像をアップロード",
|
|
39
|
+
text: "色彩のインスピレーションを抽出したい写真をアップロードします。",
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
name: "精度を調整",
|
|
43
|
+
text: "ツールに特定させたい主要な色の数(3~12色)を選択します。",
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
name: "結果を解析",
|
|
47
|
+
text: "対応する16進数(HEX)コードと共に、パレットが即座に表示されます。",
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
name: "コピーして活用",
|
|
51
|
+
text: "トーンをクリックして保存し、デザインプロジェクトに適用します。",
|
|
52
|
+
},
|
|
53
|
+
];
|
|
54
|
+
|
|
55
|
+
const bibliography: ChromaticLensLocaleContent['bibliography'] = [
|
|
56
|
+
{
|
|
57
|
+
name: "メディアンカット・アルゴリズム - Wikipedia",
|
|
58
|
+
url: "https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%83%B3%E3%82%AB%E3%83%83%E3%83%88",
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
name: "デザイナーのための色彩理論",
|
|
62
|
+
url: "https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/",
|
|
63
|
+
},
|
|
64
|
+
];
|
|
65
|
+
|
|
66
|
+
const seo: ChromaticLensLocaleContent['seo'] = [
|
|
67
|
+
{
|
|
68
|
+
type: 'summary',
|
|
69
|
+
title: 'インテリジェントなカラーパレット抽出',
|
|
70
|
+
items: [
|
|
71
|
+
'カラー解析のためのプロ仕様メディアンカット・アルゴリズム',
|
|
72
|
+
'あらゆる画像から3~12色の主要な色を抽出',
|
|
73
|
+
'クリップボードに直接コピー可能なHEXコード',
|
|
74
|
+
'100%ローカル処理 - クリエイターに最適'
|
|
75
|
+
]
|
|
76
|
+
},
|
|
77
|
+
{ type: 'title', text: 'カラーパレット抽出:科学とデザイン', level: 2 },
|
|
78
|
+
{ type: 'paragraph', html: '映画のような写真がなぜこれほど調和して見えるのか、不思議に思ったことはありませんか?それは偶然ではなく、色彩理論に基づいています。Chromatic Lensを使えば、その調和をピクセルから直接抽出し、デザインプロジェクトで使用可能なHEXコードに変換できます。' },
|
|
79
|
+
|
|
80
|
+
{ type: 'stats', items: [
|
|
81
|
+
{ value: '即時', label: 'カラー解析', icon: 'mdi:lightning-bolt' },
|
|
82
|
+
{ value: '100%', label: 'ローカル・プライバシー', icon: 'mdi:lock' },
|
|
83
|
+
{ value: 'RGB', label: '精密な色空間', icon: 'mdi:palette' }
|
|
84
|
+
], columns: 3 },
|
|
85
|
+
|
|
86
|
+
{ type: 'title', text: 'メディアンカット・アルゴリズムの解説', level: 3 },
|
|
87
|
+
{ type: 'paragraph', html: 'インテリジェントなパレット抽出は、単なる画素のランダムサンプリングではありません。再帰的な分割技術であるメディアンカット・アルゴリズムを使用し、忠実な再現性を確保します。' },
|
|
88
|
+
{ type: 'list', items: [
|
|
89
|
+
'<strong>再帰的な分割:</strong> 画像のRGB「カラーキューブ」を、より小さなボックスに再帰的に分割します。',
|
|
90
|
+
'<strong>ボリュームのバランス:</strong> 各パーティションは、似たようなボリュームを持つ同じ色空間の画素をグループ化しようとします。',
|
|
91
|
+
'<strong>加重平均:</strong> 各ボックスの結果としての色は、そこに含まれるすべての画素の平均値となります。',
|
|
92
|
+
'<strong>忠実な再現:</strong> 主要な色は、単なるサンプルではなく、画像の実際の視覚的な雰囲気を反映します。'
|
|
93
|
+
], icon: 'mdi:check' },
|
|
94
|
+
|
|
95
|
+
{ type: 'card', title: 'クリエイティブなワークフロー', html: 'Web開発者、UX/UIデザイナー、デジタルアーティスト、そして写真や映画、視覚的なリファレンスの本質を即座に捉え、自身のインターフェース、イラスト、またはブランドパレットに適用したいと考えるクリエイターに最適です。' },
|
|
96
|
+
|
|
97
|
+
{ type: 'title', text: 'デジタルデザインにおける活用事例', level: 3 },
|
|
98
|
+
{ type: 'comparative', items: [
|
|
99
|
+
{
|
|
100
|
+
title: 'UX/UIデザイナー',
|
|
101
|
+
description: 'ヒーロー画像からパレットを抽出し、まとまりのあるインターフェースを作成',
|
|
102
|
+
icon: 'mdi:palette',
|
|
103
|
+
points: [
|
|
104
|
+
'調和のとれた背景色',
|
|
105
|
+
'ボタンや二次的な要素',
|
|
106
|
+
'自動計算されるコントラスト'
|
|
107
|
+
]
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
title: 'Web開発者',
|
|
111
|
+
description: '視覚的なリファレンスから直接CSSスタイルシートを作成',
|
|
112
|
+
icon: 'mdi:code-braces',
|
|
113
|
+
points: [
|
|
114
|
+
'HEXをCSSに直接コピー',
|
|
115
|
+
'SCSS/CSSでのカラー変数化',
|
|
116
|
+
'事前のデザインなしで統一感のあるテーマ'
|
|
117
|
+
],
|
|
118
|
+
highlight: true
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
title: 'デジタルアーティスト・イラストレーター',
|
|
122
|
+
description: '映画、自然、芸術から色彩のリファレンスをキャプチャ',
|
|
123
|
+
icon: 'mdi:brush',
|
|
124
|
+
points: [
|
|
125
|
+
'名作からのリファレンスパレット',
|
|
126
|
+
'シネマティックな色彩研究',
|
|
127
|
+
'即座に得られる視覚的なインスピレーション'
|
|
128
|
+
]
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
title: 'ブランディング・スペシャリスト',
|
|
132
|
+
description: 'ガイドとなる写真に基づいて視覚的なアイデンティティを構築',
|
|
133
|
+
icon: 'mdi:tag-multiple',
|
|
134
|
+
points: [
|
|
135
|
+
'画像からブランドカラーを抽出',
|
|
136
|
+
'プロ仕様の色彩ガイドを作成',
|
|
137
|
+
'視覚的な一貫性を確保'
|
|
138
|
+
]
|
|
139
|
+
}
|
|
140
|
+
], columns: 2 },
|
|
141
|
+
|
|
142
|
+
{ type: 'title', text: '応用色彩理論', level: 3 },
|
|
143
|
+
{ type: 'table', headers: ['色彩の概念', '定義', '実践的な応用'], rows: [
|
|
144
|
+
['色彩の調和', '視覚的にバランスの取れた色の組み合わせ', 'UIにおける一貫した視覚的アイデンティティ'],
|
|
145
|
+
['コントラスト', '色と色の間の明るさの差', '読みやすさと視覚的な階層構造'],
|
|
146
|
+
['彩度', '色の鮮やかさ', 'プロフェッショナリズム(低)対 エネルギー(高)'],
|
|
147
|
+
['色温度', '暖色(赤系)対 寒色(青系)', 'デザインの感情的心理'],
|
|
148
|
+
['モノクロームパレット', '単一のトーンのバリエーション', 'エレガンスとミニマリズム']
|
|
149
|
+
] },
|
|
150
|
+
|
|
151
|
+
{ type: 'proscons', items: [
|
|
152
|
+
{
|
|
153
|
+
pro: '抽出における数学的な正確さ - おおよその視覚的な選択ではありません',
|
|
154
|
+
con: '画素数が多い場合、ほとんど見えない色が選ばれることがあります'
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
pro: 'クリップボードへの即時コピー - ワークフローとの完璧な統合',
|
|
158
|
+
con: 'Canvas APIに対応した最新のブラウザが必要です'
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
pro: '完全なプライバシー - データ送信なしの100%ローカル解析',
|
|
162
|
+
con: '解析履歴は保存されません'
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
pro: 'あらゆるデジタル画像形式に対応',
|
|
166
|
+
con: '最終的な色は画像の圧縮や品質に依存します'
|
|
167
|
+
}
|
|
168
|
+
], proTitle: 'メリット', conTitle: '制限事項' },
|
|
169
|
+
|
|
170
|
+
{ type: 'diagnostic', variant: 'success', title: 'リアルな色彩表現', icon: 'mdi:check-circle-outline', badge: '高度なアルゴリズム', html: '単にランダムに画素をサンプリングするツールとは異なり、当社のシステムは各トーンの全画素数を重み付けするメディアンカット・アルゴリズムを使用しているため、抽出されたパレットは元の画像の視覚的な雰囲気や色彩心理を忠実に反映します。' },
|
|
171
|
+
|
|
172
|
+
{ type: 'glossary', items: [
|
|
173
|
+
{
|
|
174
|
+
term: 'メディアンカット',
|
|
175
|
+
definition: 'RGB空間を再帰的にボックスに分割し、均一な分布を確保するカラー量子化アルゴリズム。歴史的に、GIFやインデックスカラー技術で使用されてきました。'
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
term: 'RGB色空間',
|
|
179
|
+
definition: '赤、緑、青に基づくカラーモデル。各色はこれら3つの値(0~255)の組み合わせとして表されます。デジタル画面やWebの標準です。'
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
term: 'HEXコード',
|
|
183
|
+
definition: 'Web上で色を表す6桁の16進数表記(#RRGGBB)。#FF0000(赤)、#00FF00(緑)、#0000FF(青)など。CSS、Figma、Adobeで共通。'
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
term: '彩度',
|
|
187
|
+
definition: '色の鮮やかさや純度。彩度が高い=鮮やかな色、彩度が低い=灰色がかった色。デザインの感情的な知覚に影響します。'
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
term: '色彩の調和',
|
|
191
|
+
definition: '視覚的に心地よい結果をもたらす色の選択と組み合わせ。モノクローム、補色、類似色、トライアドなどがあります。'
|
|
192
|
+
}
|
|
193
|
+
] },
|
|
194
|
+
|
|
195
|
+
{ type: 'message', title: 'プロフェッショナルな色彩解析', ariaLabel: '色彩解析に関する技術情報', html: 'Chromatic Lensは、手動の視覚解析をアルゴリズムによる精度へと変換します。単に色を抽出するだけでなく、あらゆる画像の感情的・視覚的な本質を捉え、すぐに使えるHEXコードとしてクリップボードに直接届けます。完全なプライバシーを保ち、解析量に制限はありません。' },
|
|
196
|
+
|
|
197
|
+
{ type: 'title', text: '視覚的なインスピレーションからのデザイン', level: 3 },
|
|
198
|
+
{ type: 'paragraph', html: '最高のカラーパレットとは、リファレンスの視覚的な意図を捉えたものです。Chromatic Lensは、かつては手動だったプロセス(観察、解析、メモ)を自動化します。今では、画像をドラッグするだけで、数秒でプロ仕様のHEXコードを入手できます。' }
|
|
199
|
+
];
|
|
200
|
+
|
|
201
|
+
const faqSchema: WithContext<FAQPage> = {
|
|
202
|
+
'@context': 'https://schema.org',
|
|
203
|
+
'@type': 'FAQPage',
|
|
204
|
+
mainEntity: faq.map((item) => ({
|
|
205
|
+
'@type': 'Question',
|
|
206
|
+
name: item.question,
|
|
207
|
+
acceptedAnswer: { '@type': 'Answer', text: item.answer },
|
|
208
|
+
})),
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
const howToSchema: WithContext<HowTo> = {
|
|
212
|
+
'@context': 'https://schema.org',
|
|
213
|
+
'@type': 'HowTo',
|
|
214
|
+
name: title,
|
|
215
|
+
description,
|
|
216
|
+
step: howTo.map((step) => ({
|
|
217
|
+
'@type': 'HowToStep',
|
|
218
|
+
name: step.name,
|
|
219
|
+
text: step.text,
|
|
220
|
+
})),
|
|
221
|
+
};
|
|
222
|
+
|
|
223
|
+
const appSchema: WithContext<SoftwareApplication> = {
|
|
224
|
+
'@context': 'https://schema.org',
|
|
225
|
+
'@type': 'SoftwareApplication',
|
|
226
|
+
name: title,
|
|
227
|
+
description,
|
|
228
|
+
applicationCategory: 'UtilitiesApplication',
|
|
229
|
+
operatingSystem: 'Web',
|
|
230
|
+
offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
|
|
231
|
+
inLanguage: 'ja',
|
|
232
|
+
};
|
|
233
|
+
|
|
234
|
+
export const content: ChromaticLensLocaleContent = {
|
|
235
|
+
slug,
|
|
236
|
+
title,
|
|
237
|
+
description,
|
|
238
|
+
ui,
|
|
239
|
+
seo,
|
|
240
|
+
faqTitle: "よくある質問",
|
|
241
|
+
faq,
|
|
242
|
+
bibliographyTitle: "リファレンス",
|
|
243
|
+
bibliography,
|
|
244
|
+
howTo,
|
|
245
|
+
schemas: [faqSchema as any, howToSchema as any, appSchema],
|
|
246
|
+
};
|