# フォント

## イントロ動画

{% embed url="<https://youtu.be/n-jE90kp2k8>" %}

{% tabs %}
{% tab title="シンプルガイド" %}

#### アプリのフォントはどこで設定できますか？

左のツールバーのブランディングタブで、アプリで使用できるフォントを確認できます。設定できるフォントには、見出しフォントと本文フォントの2種類があります。アプリにコンポーネントを追加すると、それらのテキストはこれら2つの選択されたフォントのいずれかにデフォルトで設定されます。

![](/files/DtTk7jgR3rooh4atciEU)

#### 利用可能なフォントは？

* Adaloの無料プランを利用している場合、以下のフォント選択肢にアクセスできます
  * Oswald
  * Merriweather
  * Source Sans Pro
  * 標準システムフォント
* Adaloの有料プランを利用している場合、Google Fontsから1,000以上のフォントから選択できます。

#### 標準システムフォントとは？

このオプションを選択すると、アプリ内のフォントが、ユーザーがアプリを表示しているデバイスのデフォルトフォントに設定されます。AndroidとChromebookの場合、これはRobotoです。iOSとMacデバイスの場合、San Franciscoとなります。Windows 10の場合、SegoeUIというフォントです。

ほとんどのアプリ、特にアプリストアのアプリは、フォントをカスタマイズする代わりに標準システムフォントを使用します。

#### どのフォントを選択すべきですか？

うまく機能し（そしてうまく組み合わせられる）フォントを選択することは困難かもしれません。実際、タイポグラフィに関する専門家の分野があります。美しいアプリを作成することをできるだけ簡単にしたいので、フォント選択を簡単にするための機能をいくつか提供しています。

**人気の組み合わせ -** 見出しフォントを設定した後、本文フォントを設定すると、Adaloは自動的に見出しの選択によく合うフォントを提案します。以下の例では、Oswaldが見出しフォントとして選択され、AdaloはOpen Sans、Roboto、Lato、Montserrat、またはSource Sans ProがOswaldとよく合うと提案しています。この機能をフォント選択のためのソムリエと考えてください。

![](/files/sdYSWxxApq0CBJ45nwjO)

**人気のフォント -** 提案された組み合わせに加えて、Adaloはスタイル、バラエティ、アクセシビリティに優れた人気のフォントの選択も提案しています。見出しと本文それぞれに、デザインチームによって選ばれた人気のフォントがあります。

![](/files/ua4RvZ52xhmyvJuE66nI)

**検索と探索 -** もちろん、すべてのアプリとブランドはユニークですので、人気の流れに従う必要はありません。使用したいフォントがすでにある場合は、使用したいフォントの名前を入力して、すぐにGoogle Fontsライブラリ全体を検索できます。

使用したいフォントがわからない場合、ブラウジングしたい気分であれば、フォント選択のドロップダウンの一番下に常に「探索」オプションがあります。このオプションを選択すると、Google Fontsのウェブサイトに直接移動し、アプリに最適なフォントを見つけるためのさまざまな基準でフィルタリングできます。 ![](/files/KBGJlYjMFAM8Cmik2qAO)

#### フォントの使用

ブランディングタブでアプリのフォントを設定したら、それを使う準備が整いました！ アプリ内の構成可能なテキストを持つ任意のコンポーネントを選択し、左側のパネルで表示するテキストを設定できる場所の下に、マジックテキストを追加するアイコンと**フォーマットメニュー**を開くパレットアイコンが表示されます。

![](/files/zy8EBdIOWcmCuZniUZTu)

**フォーマットメニューの使用** - フォーマットメニューが開いていると、以下を設定できます：

* フォント
  * ここで、このテキストが見出しフォントまたは本文フォントを使用するかを選択できます
* フォントの太さ
  * 通常、太字、極太などのオプションから選択できます
  * 注：異なるフォントには異なる太さのオプションがあります。このドロップダウンのオプションは、選択したフォントに基づいて自動的に変更されます。
* フォントサイズ
  * テキストのサイズを設定します
* 整列
  * テキストを左揃え、右揃え、または中央揃えに選択します
* テキストの色
  * テキストの色を設定します

{% hint style="info" %}
**注意：** フォーマットツールバーのすべての可能なオプションを有効にするコンポーネントはすべてではありません。コンポーネント開発者は、コンポーネントに適したフォーマット設定を有効にするオプションを持っています。
{% endhint %}

#### フォントの変更

アプリで使用するフォントを変更することにした場合は、左側のツールバーのブランディングタブに戻ってこれを行うことができます。見出しまたは本文フォントを更新すると、Adaloは自動的にアプリ内のすべてのコンポーネントを関連する新しいフォントで更新します。アプリ内のすべてのコンポーネントに戻って一つずつ更新する必要はありません！

Adaloのブログ記事[Tips & Tricks for Using Fonts](https://www.adalo.com/posts/tips-tricks-for-using-fonts-in-your-mobile-and-web-apps)をチェックしてください！
{% endtab %}
{% endtabs %}

## ヘルプ

この記事に関する追加のヘルプが必要な場合は、いつでも[コミュニティフォーラム](https://forum.adalo.com/)で質問できます！ 投稿にこの記事へのリンクを貼り付けることも忘れずに！


---

# 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://help.adalo.com/ja/design/branding/fonts.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.