Come localizzare gli screenshot dell'App Store in oltre 30 lingue

Perché localizzare gli screenshot?

Le ricerche degli sviluppatori di Apple rilevano che gli utenti hanno una probabilità significativamente maggiore di installare un'app quando la scheda dell'App Store è nella loro lingua madre. La stessa cosa è documentata nella checklist di localizzazione di Google: le schede localizzate convertono di più e si posizionano meglio nei risultati di ricerca. Tradurre solo le stringhe dei metadati — titolo, sottotitolo, parole chiave — senza tradurre gli screenshot è la mezza misura più comune e lascia sul tavolo conversioni reali, perché l'asset principale è ancora in inglese.

L'ostacolo per la maggior parte dei team è operativo, non strategico. Tradurre a mano un set di cinque screenshot in 30 lingue significa 150 file di design, 150 cicli di revisione e 150 occasioni per un refuso. La soluzione è trattare gli screenshot come qualsiasi altra UI localizzata: chiavi nel codice, copy in un TMS, layout generato da uno step di build.

Come strutturare le chiavi di traduzione?

Usa la stessa struttura di chiavi delle traduzioni in-app. Raggruppa le chiavi per ID dello screenshot, poi per ruolo dell'elemento:

{
  "screenshots": {
    "01_home": {
      "headline": "Build faster.",
      "subhead": "Ship every store size in one API call.",
      "badge": "New"
    },
    "02_pricing": {
      "headline": "Plans for every team.",
      "cta": "Start free"
    },
    "03_api": {
      "headline": "Built for developers.",
      "subhead": "REST, Fastlane, and GitHub Actions out of the box."
    }
  }
}

Poi il file tedesco corrispondente:

{
  "screenshots": {
    "01_home": {
      "headline": "Schneller bauen.",
      "subhead": "Alle Store-Formate mit einem API-Call.",
      "badge": "Neu"
    },
    "02_pricing": {
      "headline": "Pläne für jedes Team.",
      "cta": "Kostenlos starten"
    }
  }
}

Le chiavi non cambiano mai. Cambiano solo i valori. I traduttori lavorano sulla colonna del valore nel loro TMS senza toccare il template di Screenshots.live.

Quali codici di locale dovresti usare?

Usa BCP-47 in modo coerente. Usa solo il sottotag della lingua quando non c'è variazione regionale (de, fr, ja) e aggiungi la regione solo quando le varianti divergono in modo significativo (en-GB vs en-US, pt-BR vs pt-PT, zh-Hans vs zh-Hant). Sia Apple che Google accettano BCP-47, anche se i loro codici interni differiscono leggermente — consulta l<link2>elenco dei locale di App Store Connect</link2> e le <link3>lingue supportate</link3> di Google Play. Mappa il tutto una sola volta nel tuo script di CI.

Come distribuire i render tra i locale?

L'API riceve un ID di template, un catalogo di traduzioni e un array di locale. Restituisce un PNG renderizzato per ogni locale e per ogni dispositivo:

curl -X POST https://api.screenshots.live/v1/renders \
  -H "Authorization: Bearer $SCREENSHOTSLIVE_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "templateId": "tpl_app_release_v3",
    "locales": ["en", "de", "es", "fr", "pt-BR", "it", "nl", "ja", "ko", "zh-Hans", "ar", "he"],
    "devices": ["iphone-6.7", "iphone-6.1", "ipad-12.9", "phone-android"],
    "translations": {
      "en": "@translations/en.json",
      "de": "@translations/de.json",
      "es": "@translations/es.json"
    }
  }'

Dietro le quinte, il renderer parallelizza per locale e per dispositivo. Un render di 12 locale × 4 dispositivi — 48 file PNG — di solito si completa in meno di 90 secondi. Consulta la documentazione di rendering dell'API per la struttura completa della richiesta.

Come gestire le lingue da destra a sinistra?

Arabo (ar), ebraico (he), persiano (fa) e urdu (ur) richiedono il mirroring dell'intero layout — allineamento del testo, posizione delle immagini, icone delle frecce, persino l'ordine dei gruppi multi-elemento. Un mirroring parziale (capovolgere solo il testo ma non il layout) appare sbagliato ai lettori madrelingua e danneggia la credibilità.

In Screenshots.live, contrassegna il template con direction: "auto" e il renderer capovolge automaticamente layout, allineamento del testo e chevron decorativi quando esegue il rendering dei locale RTL. Sovrascrivi i singoli elementi con direction: "ltr" quando qualcosa deve restare da sinistra a destra (un numero di telefono, un URL, un blocco di codice).

E gli override di testo per locale?

Alcune lingue semplicemente non entrano nello stesso riquadro della didascalia. I sostantivi composti tedeschi possono essere il 40% più lunghi dell'inglese; il giapponese e il cinese possono essere il 50% più corti. Permetti override di testo per locale senza duplicare il template:

{
  "screenshots.01_home.headline": {
    "en": "Build faster.",
    "de": "Schneller bauen.",
    "fi": "Rakenna nopeammin.",
    "ja": "もっと速く。"
  },
  "screenshots.01_home.subhead": {
    "en": "Ship every store size in one API call.",
    "de": "Alle Formate mit einem Aufruf.",
    "ja": "ワンコールで全サイズ対応。"
  }
}

E i font e i glifi CJK?

I font con caratteri latini (Inter, SF Pro, Roboto) spesso non includono glifi CJK, cirillici, devanagari o arabi — il testo viene renderizzato come quadratini tofu. Configura i fallback dei font per ogni script:

• Latino / Cirillico / Greco: Inter, SF Pro, Roboto
• CJK (Giapponese / Coreano / Cinese): Noto Sans CJK
• Arabo / Persiano / Urdu: Noto Sans Arabic, IBM Plex Sans Arabic
• Devanagari (Hindi): Noto Sans Devanagari
• Thai: Noto Sans Thai, Sarabun

La famiglia Noto copre ogni script supportato da Apple e Google. Impostala come catena di fallback nel template — il renderer sceglie il font giusto per ogni code point, senza intervento manuale.

Come fare QA dei layout su larga scala?

La revisione manuale di 30 locale non è scalabile. Automatizza le modalità di errore più ovvie:

• Overflow del testo: esegui il rendering a un quarto della risoluzione, applica l'OCR al risultato e confrontalo con la stringa sorgente. Le discrepanze indicano che il testo è stato tagliato.
• Glifi mancanti: conta i quadratini tofu nel PNG renderizzato tramite un modello di vision o un istogramma dei pixel sul carattere di sostituzione Unicode.
• Traduzioni vuote: fai fallire la build se un locale ha più del 5% di chiavi mancanti rispetto all'inglese.
• Limiti di lunghezza: imposta un limite massimo di lunghezza per ogni chiave. Se la traduzione tedesca lo supera, fai fallire la build invece di lasciar passare l'overflow.

Come caricare gli screenshot per locale?

App Store Connect e Google Play accettano entrambi screenshot per locale. Fastlane deliver legge da fastlane/screenshots/<locale>/ e Fastlane supply legge da fastlane/metadata/android/<locale>/images/phoneScreenshots/. Mappa l'output del tuo renderer su questi percorsi e il resto è semplicemente fastlane deliver / fastlane supply --skip_upload_apk.

Cosa fare dopo?

Combina questo con la nostra guida all'automazione CI/CD in modo che la localizzazione venga eseguita ad ogni release. Usa la funzionalità di supporto multi-piattaforma per distribuire su iOS, Android e store web dallo stesso catalogo.