# キービジュアル作成レギュレーション

ウズスタジオから投稿するシナリオのキービジュアル（カバー画像・タイトル画像）に関するレギュレーションを策定いたしました。

## ①画像の縦横比は16:9で作成すること <a href="#id-16-9" id="id-16-9"></a>

16:9以外で作成されたキービジュアルは、アプリ内で正しく表示されません。

<figure><img src="https://1279302283-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgOyErfAjeKrNXFgLBxtx%2Fuploads%2Fgit-blob-86af99aea3ab292820bdb5d661878cb63104b79f%2Fimage.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

<figure><img src="https://1279302283-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgOyErfAjeKrNXFgLBxtx%2Fuploads%2Fgit-blob-588c9498c8d09bacfbd1c8e8901d65924365422e%2Fimage.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

## ②タイトルが読みやすいコントラストにすること <a href="#contrast" id="contrast"></a>

背景の画像とタイトルの文字の色のコントラストが弱いと可読性が下がってしまうため、コントラストを意識して作成してください。

{% hint style="success" %}
『コントラスト』とは\
「対比」のこと。キービジュアルにおいては、明度・彩度・色相の差のこと。
{% endhint %}

<figure><img src="https://1279302283-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgOyErfAjeKrNXFgLBxtx%2Fuploads%2Fgit-blob-0d9f4a9385e2a04483ccb95cc4750c09e2d123d9%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

### 改善方法

▷文字色を工夫する

▷タイトル文字を線で縁取る

▷タイトル文字の背景にシャドウを入れる

▷背景の画像に黒あるいは白をうっすらと重ねる

{% hint style="info" %}
**【発展的な注意点】**

上記の【悪い例】【良い例】では「明度」「色相」を調整して読みやすくするという対応をしていますが、注意点が一つあります。

それが「**ハレーション**」です。

<img src="https://1279302283-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgOyErfAjeKrNXFgLBxtx%2Fuploads%2Fgit-blob-a3cd0b83743b31650cee16961aef549157880f24%2Fimage.png?alt=media" alt="" data-size="original">

ハレーションとは配色の「明度」が近く、かつ「彩度」が高いと起きる目がチカチカしてしまう状態のことを指します。非常に視認性が悪いデザインになってしまうので、この状態も避けられると理想的です。
{% endhint %}

## ③サイズを縮小してもタイトル（主題）が読めること <a href="#size" id="size"></a>

<figure><img src="https://1279302283-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgOyErfAjeKrNXFgLBxtx%2Fuploads%2Fgit-blob-1d034cfaba958f10ce8e068060e31e191d7faa4a%2Fimage%20(40).png?alt=media" alt=""><figcaption></figcaption></figure>

### 改善方法

▷フォントの太さを太くする

▷フォントサイズを大きくする（目安：横書きで10～15文字並べたときのサイズ以上）

{% hint style="success" %}
ウズアプリのシナリオ一覧画面上では「160px ✕ 90px」で表示されます。リリース管理画面に小さく表示されるキービジュアルで、読めるかどうか確認すると分かりやすいです↓
{% endhint %}

<figure><img src="https://1279302283-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgOyErfAjeKrNXFgLBxtx%2Fuploads%2FkchJV78s2SF6JWt0h7gR%2Fimage.png?alt=media&#x26;token=fc2fb301-dd0d-4db8-a3e9-c2ff354a5e2e" alt=""><figcaption></figcaption></figure>

## ④シナリオ詳細に表示するタイトルは画像内に全文入れること <a href="#title" id="title"></a>

<figure><img src="https://1279302283-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgOyErfAjeKrNXFgLBxtx%2Fuploads%2Fgit-blob-58951c9c9370fd68f485af5f5ab83675a45d23ec%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

タイトル以外の文字を入れる場合は、タイトルの文字が最も目立つフォントサイズになっているようにしてください。

## ⑤ふりがなについて <a href="#furigana" id="furigana"></a>

ウズスタジオには「ふりがな記入欄」がありますが、こちらはアプリ内でのひらがな検索のためであり、アプリ内ではふりがなが表示されません。

「ふりがなをタイトルに入れる」 「タイトルの読み方を作者コメント欄で補足する」 のいずれの対応も行わない場合は、キービジュアルにふりがなを含めてください。ふりがなが必要なラインは以下の通りです。

{% hint style="info" %}
①一般に難読と呼ばれる読みが含まれる

②複数の読み方のあるもの

③固有名詞

④当て字

⑤一般的でない英単語・外国語
{% endhint %}

## ⑥使用している素材が著作権・パブリシティ権を侵害していないこと <a href="#right" id="right"></a>

{% hint style="info" %}
**著作権とは？**（簡単な説明）

「著作物」を創作した者に与えられる、自分が創作した著作物を無断でコピーされたり、インターネット上で使用されない権利のこと。

キービジュアルにおいては、権利者の許諾なくイラストや画像素材を使用することは著作権侵害にあたる可能性が高いので、注意しましょう。
{% endhint %}

{% hint style="info" %}
**パブリシティ権とは？**（簡単な説明）

顧客吸引力を有するような著名人の氏名・肖像等を保護する権利のこと。

有名人や著名人の写真を無断で使用することはパブリシティ権の侵害にあたるので、注意しましょう。
{% endhint %}

***

※特別の事情があり上記レギュレーションから外れたキービジュアルを採用したい場合は、審査時にその理由を添えてください。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.studio.uzu-app.com/overview/visual-regulation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
