Näin lokalisoit App Store -kuvakaappaukset yli 30 kielelle

Miksi kuvakaappaukset kannattaa ylipäätään lokalisoida?

Applen oma kehittäjätutkimus osoittaa, että käyttäjät asentavat sovelluksen huomattavasti todennäköisemmin, kun App Store -listaus on heidän äidinkielellään. Sama on dokumentoitu Googlen lokalisointitarkistuslistassa: lokalisoidut listaukset konvertoivat paremmin ja sijoittuvat haussa korkeammalle. Pelkkien metadata-merkkijonojen — otsikon, alaotsikon ja avainsanojen — kääntäminen ilman kuvakaappausten kääntämistä on yleisin puolittaisratkaisu, ja se jättää todellisia konversioita pöydälle, koska keskeinen näyttävä elementti on yhä englanniksi.

Useimmilla tiimeillä este on operatiivinen, ei strateginen. Viiden kuvakaappauksen sarjan kääntäminen 30 kielelle käsin tarkoittaa 150:tä suunnittelutiedostoa, 150:tä tarkistuskierrosta ja 150:tä mahdollisuutta kirjoitusvirheelle. Korjaus on kohdella kuvakaappauksia kuten mitä tahansa muuta lokalisoitua käyttöliittymää: avaimet koodissa, käännöstekstit TMS:ssä, asettelu rakennusvaiheen renderöimänä.

Miten käännösavaimet kannattaa rakenteistaa?

Käytä samaa avainrakennetta kuin sovelluksen sisäisissä käännöksissäsi. Ryhmittele avaimet ensin kuvakaappauksen tunnisteen ja sitten elementin roolin mukaan:

{
  "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."
    }
  }
}

Sitten vastaava saksankielinen tiedosto:

{
  "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"
    }
  }
}

Avaimet eivät koskaan muutu. Vain arvot muuttuvat. Kääntäjät työskentelevät TMS:n arvosarakkeessa koskematta Screenshots.live-malliin.

Mitä kielikoodeja kannattaa käyttää?

Käytä BCP-47-standardia johdonmukaisesti. Käytä pelkkää kielen alatunnistetta, kun alueellista vaihtelua ei ole (de, fr, ja), ja lisää alue vain, kun variantit eroavat merkittävästi (en-GB vs. en-US, pt-BR vs. pt-PT, zh-Hans vs. zh-Hant). Sekä Apple että Google hyväksyvät BCP-47:n, vaikka niiden sisäiset koodit eroavat hieman — katso App Store Connectin kielilista ja Google Playn tuetut kielet. Tee mappaus kerran CI-skriptissäsi.

Miten renderöinti hajautetaan eri kielille?

API ottaa vastaan mallin tunnisteen, käännöskatalogin ja taulukon kielistä. Se palauttaa yhden renderöidyn PNG:n per kieli per laite:

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"
    }
  }'

Kulissien takana renderöijä rinnakkaistaa työn kielen ja laitteen mukaan. Kahdentoista kielen ja neljän laitteen renderöinti — 48 PNG-tiedostoa — valmistuu tyypillisesti alle 90 sekunnissa. Katso API-renderöintidokumentaatio pyynnön täydellistä muotoa varten.

Miten käsittelet oikealta vasemmalle kirjoitettavat kielet?

Arabia (ar), heprea (he), persia (fa) ja urdu (ur) vaativat koko asettelun peilaamisen — tekstin tasauksen, kuvien sijainnit, nuoli-ikonit ja jopa monielementtisten ryhmien järjestyksen. Puolittainen peilaus (vain tekstin kääntäminen ilman asettelua) näyttää äidinkielisten lukijoiden silmissä virheelliseltä ja heikentää uskottavuutta.

Screenshots.livessä merkitse malli arvolla direction: "auto", jolloin renderöijä kääntää asettelun, tekstin tasauksen ja koristelliset kulmamerkit automaattisesti renderöidessään RTL-kieliä. Ohita yksittäiset elementit arvolla direction: "ltr", kun jonkin täytyy pysyä vasemmalta oikealle (puhelinnumero, URL-osoite, koodilohko).

Entä kielikohtaiset tekstiohitukset?

Kaikki kielet eivät yksinkertaisesti mahdu samaan kuvatekstilaatikkoon. Saksan yhdyssanat voivat olla 40 % pidempiä kuin englanniksi; japani ja kiina voivat olla 50 % lyhyempiä. Salli kielikohtaiset tekstiohitukset ilman mallin haaroittamista:

{
  "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": "ワンコールで全サイズ対応。"
  }
}

Entä fontit ja CJK-merkit?

Latinalaisten kirjainten fonteista (Inter, SF Pro, Roboto) puuttuvat usein CJK-, kyrilliset, devanagari- tai arabialaiset merkit — teksti renderöityy tofu-laatikoiksi. Määritä fonttien varajärjestelmät kirjoitusjärjestelmäkohtaisesti:

• Latinalainen / kyrillinen / kreikkalainen: Inter, SF Pro, Roboto
• CJK (japani / korea / kiina): Noto Sans CJK
• Arabia / persia / urdu: Noto Sans Arabic, IBM Plex Sans Arabic
• Devanagari (hindi): Noto Sans Devanagari
• Thai: Noto Sans Thai, Sarabun

Noto-fonttiperhe kattaa kaikki kirjoitusjärjestelmät, joita Apple ja Google tukevat. Aseta se varafonttiketjuksi malliin — renderöijä valitsee oikean fontin koodipisteen mukaan ilman manuaalista puuttumista.

Miten asettelut testataan mittakaavassa?

30 kielen manuaalinen tarkistus ei skaalaudu. Automatisoi ilmeiset vikamuodot:

• Tekstin ylivuoto: renderöi neljäsosaresoluutiossa, suorita OCR tulokselle ja vertaa sitä lähdemerkkijonoon. Erot tarkoittavat, että tekstiä on leikattu pois.
• Puuttuvat merkit: laske tofu-laatikoiden määrä renderöidystä PNG:stä konenäkömallilla tai pikselihistogrammilla Unicoden korvausmerkin perusteella.
• Tyhjät käännökset: kaada rakennus, jos jossain kielessä on yli 5 % puuttuvia avaimia englantiin verrattuna.
• Pituusbudjetit: aseta jokaiselle avaimelle kova pituuskatto. Jos saksankielinen käännös ylittää sen, kaada rakennus sen sijaan, että ylivuotoa päästetään tuotantoon.

Miten kielikohtaiset kuvakaappaukset ladataan?

Sekä App Store Connect että Google Play hyväksyvät kielikohtaiset kuvakaappaukset. Fastlanen deliver lukee polusta fastlane/screenshots/<locale>/ ja Fastlanen supply polusta fastlane/metadata/android/<locale>/images/phoneScreenshots/. Kuvaa renderöijän tuloste näihin polkuihin, ja loppu on vain fastlane deliver / fastlane supply --skip_upload_apk.

Mitä kannattaa tehdä seuraavaksi?

Yhdistä tämä CI/CD-automaatio-oppaamme kanssa, jotta lokalisointi suoritetaan jokaisessa julkaisussa. Käytä monialustaisen tuen ominaisuutta hajauttaaksesi renderöinnin iOS-, Android- ja verkkokauppoihin samasta katalogista.