> ## Documentation Index > Fetch the complete documentation index at: https://docs.getqr.com/llms.txt > Use this file to discover all available pages before exploring further. # カスタマイズ > API で QR コードのスタイルを設定します。ドットとコーナーの形、色、フレーム、ロゴ。 > [!NOTE] > > GetQR API はベータ版で、一部のワークスペースでのみご利用いただけます。正式リリースまでに内容が変更される場合があります。 QR コードを作成または更新するときに、任意の `styles`、`frameOptions`、`logoOptions` オブジェクトでスタイルを設定します。すべてのフィールドは任意で、省略したものには既定値が使われます。 この 3 つのオブジェクトは、[QR コード](https://docs.getqr.com/ja/api/endpoints/qr-codes.md)、[テンプレート](https://docs.getqr.com/ja/api/endpoints/templates.md)、[一括作成](https://docs.getqr.com/ja/api/endpoints/bulk-qr-creations.md) で同じように使えます。不明な形、フレーム、ロゴは `422` で拒否されます。 ## デザインオブジェクトの例 ```json theme={null} { "styles": { "dotsOptions": { "type": "rounded", "color": "#000000" }, "backgroundOptions": { "color": "#ffffff" }, "cornersSquareOptions": { "type": "dot", "color": "#000000" }, "cornersDotOptions": { "type": "dot", "color": "#000000" } }, "frameOptions": { "id": "card", "text": "Scan me!", "color": "#000000", "textColor": "#ffffff" }, "logoOptions": { "type": "suggested", "id": "logo-google", "scalePercent": 25 } } ``` QR コードの他のフィールドと一緒に送ります。 ```bash theme={null} curl -X POST "https://getqr.com/api/v1/qrs" \ -H "Authorization: Bearer $GETQR_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "qrType": "website", "data": "https://example.com", "styles": { "dotsOptions": { "type": "rounded", "color": "#1E40AF" } }, "frameOptions": { "id": "card", "text": "Scan me!" }, "logoOptions": { "type": "suggested", "id": "logo-website-3" } }' ``` ## スタイル `styles` オブジェクトは、パターンの形と色を設定します。 | フィールド | 値 | | - | - | | `dotsOptions.type` | 本体のドットの形：`square`、`dots`、`rounded`、`classy`、`classy-rounded`、`extra-rounded` | | `cornersSquareOptions.type` | コーナーの四角（目の枠）の形：`square`、`rounded`、`dot`、`classy-rounded` | | `cornersDotOptions.type` | コーナーのドット（目の中心）の形：`square`、`dot`、`dots`、`rounded`、`classy` | | `dotsOptions.color` | 前景色。既定値は `#000000` です。 | | `backgroundOptions.color` | 背景色。既定値は `#ffffff` です。 | | `cornersSquareOptions.color`, `cornersDotOptions.color` | 受け付けられますが、効果はありません。コーナーには常に `dotsOptions.color` が使われます。 | * **色。** 16 進数の値のみ：`#RGB` または `#RRGGBB`。 * **誤り訂正。** 常に `Q` で、入力項目ではありません。`styles.qrOptions` を送ると `422` になります。 * **Branded design と AI design。** API では設定できません。`styles.logoQrArt` を送ると `422` になります。 * **コンテンツ。** `styles.data` は無視されます。画像には常に QR コードのコンテンツが埋め込まれます。 > [!TIP] > > 前景色と背景色のコントラストを十分に保ち、明るい背景に暗い前景を使ってください。コントラストが低いコードは読み取れないことがあります。[色](https://docs.getqr.com/ja/design/colors.md) をご覧ください。 ## フレーム `frameOptions` オブジェクトは、行動喚起の文言を添えた装飾フレームを QR コードの周りに追加します。 | フィールド | 説明 | | - | - | | `id` | `frameOptions` を送る場合は必須。下のリストにあるフレームの種類です。`none` はフレームなしを表します。 | | `text` | 行動喚起のラベル。最大 12 文字。既定値は `Scan me!` です。 | | `color` | フレームの色（16 進数）。 | | `textColor` | ラベルの色（16 進数）。フレームにラベルが表示される場合は、`color` と異なる色にする必要があります。ただし、その組み合わせがフレーム組み込みのカラープリセットであれば例外です。 | | `borderColor` | 枠線の色（16 進数）。 | | `fingerPrintColor` | フレームのアイコンのアクセントカラー（16 進数）。 | > [accordion] 汎用フレーム > > `none`, `card`, `card-1`, `card-2`, `card-3`, `card-4`, `card-5`, `card-7`, `card-8`, `card-9`, `card-10`, `card-11`, `card-12`, `card-13`, `card-14`, `card-15`, `card-hor`, `wreath`, `envelope`, `waitress`, `coffee-cup`, `scooter`, `clipboard` > > `card-hor` にはラベルが表示されません。 > [accordion] QR コードの種類別のフレーム > > | 種類 | ラベルありのフレーム | ラベルなしのフレーム | > | - | - | - | > | App Link | `app-3` | `app-1`, `app-2` | > | vCard | `contact-1`, `contact-5` | `contact-2`, `contact-3`, `contact-4` | > | Email | `email-1` | `email-2`, `email-3`, `email-4`, `email-5` | > | Feedback | — | `feedback-1`, `feedback-2`, `feedback-3`, `feedback-4`, `feedback-5` | > | Image | — | `image-1`, `image-2`, `image-3`, `image-4`, `image-5`, `image-6` | > | Location | `location-3` | `location-1`, `location-2`, `location-4`, `location-5`, `location-6` | > | Multi-Link | `multilink-3` | `multilink-1`, `multilink-2` | > | Payment | — | `payment-1`, `payment-2`, `payment-3`, `payment-4`, `payment-5` | > | PDF | `pdf-1` | `pdf-2`, `pdf-3`, `pdf-4` | > | SMS | `sms-3`, `sms-5`, `sms-7` | `sms-1`, `sms-2`, `sms-4`, `sms-6` | > | Social Media | `social-3` | `social-1`, `social-2`, `social-4` | > | Video | `video-1`, `video-3` | `video-2`, `video-4`, `video-5`, `video-6` | > | Website | `website-1` | `website-2`, `website-3`, `website-4`, `website-5` | > | WhatsApp | `whatsapp-2` | `whatsapp-1`, `whatsapp-3`, `whatsapp-4` | > | WiFi | — | `wifi-1`, `wifi-2`, `wifi-3`, `wifi-4` | > > どのフレームも、どの種類の QR コードでも使えます。グループ分けはダッシュボードに合わせています。 ラベルなしのフレームには、ダッシュボードに行動喚起の入力欄がありません。また、`textColor` を `color` と異なる色にするルールも適用されません。 ## ロゴ `logoOptions` オブジェクトは、QR コードの中央にロゴを配置します。ロゴの種類は `type` で選びます。 ### おすすめのロゴ `type` を `suggested` に設定し、カタログから `id` を選びます。ロゴなしにするには `logo-none` を使います。 ```json theme={null} { "logoOptions": { "type": "suggested", "id": "logo-instagram", "scalePercent": 25 } } ``` > [accordion] おすすめのロゴ ID の一覧 > > `logo-none`, `logo-website-3`, `logo-website-4`, `logo-link`, `logo-pdf-1`, `logo-pdf-2`, `logo-pdf-3`, `logo-picture-1`, `logo-picture-2`, `logo-picture-3`, `logo-picture-5`, `logo-picture-7`, `logo-picture-8`, `logo-video-1`, `logo-video-5`, `logo-whatsapp-1`, `logo-whatsapp-2`, `logo-whatsapp`, `logo-wifi-1`, `logo-wifi-2`, `logo-wifi-3`, `logo-wifi`, `logo-airbnb`, `logo-apple`, `logo-binance`, `logo-bitcoin`, `logo-bolt-food`, `logo-booking`, `logo-facebook`, `logo-glovo`, `logo-google`, `logo-google-maps`, `logo-google-play`, `logo-instagram`, `logo-linkedin`, `logo-location`, `logo-mail`, `logo-paypal`, `logo-stripe`, `logo-venmo`, `logo-cashapp`, `logo-braintree`, `logo-square`, `logo-verifone`, `logo-google-pay`, `logo-apple-pay`, `logo-klarna`, `logo-ayden`, `logo-giropay`, `logo-cartes-bancaires`, `logo-restaurant`, `logo-scan-me`, `logo-tripadvisor`, `logo-trustpilot`, `logo-uber-eats`, `logo-youtube`, `logo-spotify`, `logo-spotify-black` ### 独自のロゴ **1. 画像をアップロードする** [ファイル](https://docs.getqr.com/ja/api/endpoints/files.md) で `"target": "logo"` を指定して登録し、返された `uploadUrl` にファイルをアップロードします。 **2. ファイルを参照する** `type` を `uploaded` に、`fileId` を返された `fileId` に設定します。`fileId` は必須で、Files エンドポイントが返した ID である必要があります。 ```json theme={null} { "logoOptions": { "type": "uploaded", "fileId": "file_7bQ2xR9mKp", "scalePercent": 35 } } ``` 不明なファイル、アップロードが完了していないファイル、別の用途でアップロードされたファイルは拒否されます。 ### ロゴのサイズ `scalePercent` は、QR コードに対するロゴのサイズをパーセントで設定します。15 から 45 までの整数を指定します。既定値は 25 です。それ以外の値（`0.25` のような比率を含む）は `422` になります。 ## デザインの更新 * **部分更新。** [QR コードの更新](https://docs.getqr.com/ja/api/endpoints/qr-codes.md#qr-コードを更新する) では、`styles`、`frameOptions`、`logoOptions` は保存済みのデザインにマージされます。部分的なオブジェクトは、指定した項目だけを変更します。 * **ロゴの変更。** 別のロゴを選ぶと保存済みのロゴは置き換えられますが、`scalePercent` は維持されます。 * **テンプレート。** 作成時に `templateId` を指定すると、送ったフィールドがテンプレートのデザインの上にマージされます。[テンプレート](https://docs.getqr.com/ja/api/endpoints/templates.md) をご覧ください。 * **Branded design と AI design。** `designKind` が `branded` または `ai` の QR コードは、ダッシュボードで作成されたものです。API ではその画像を編集できませんが、他のフィールドを変更しても画像は維持されます。 * **デザインの読み取り。** レスポンスでは、保存済みのデザインがリクエストのフィールドと同じ形で `design` に返されるため、そのまま送り返せます。 ## よくある問題 > [accordion] 422 "Error correction is always Q and is not an input" > > リクエストから `styles.qrOptions` を削除してください。 > [accordion] 422 "Frame caption is at most 12 characters" > > `frameOptions.text` を 12 文字以内に短くしてください。 > [accordion] 422 "Frame caption color must differ from the frame color" > > ラベルが表示されるフレームで、`textColor` と `color` が同じです。コントラストのある `textColor` を選んでください。 > [accordion] 422 "Logo scale is a whole number from 15 to 45" > > `scalePercent` は整数のパーセントで送ってください。たとえば `0.25` ではなく `25` です。 > [accordion] コーナーの色が変わらない > > コーナーには常に `dotsOptions.color` が使われます。`cornersSquareOptions.color` と `cornersDotOptions.color` には効果がありません。 ## 次のステップ > [card] [QR コード](https://docs.getqr.com/ja/api/endpoints/qr-codes.md) > [card] [テンプレート](https://docs.getqr.com/ja/api/endpoints/templates.md) > [card] [ファイル](https://docs.getqr.com/ja/api/endpoints/files.md) > [card] [デザインの概要](https://docs.getqr.com/ja/design/overview.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.