ノーコードツール【Adalo】色の変更とフォント変更について解説

色の変更方法

左のツールバーのブランディングタブのカラーセクションで、ブランドカラーを設定することができます。 主色、副色、画面背景色、文字色を設定することができます。

一度設定すれば、アプリ内の画面に新しく追加したコンポーネントは、そのデフォルト値が使用されます。 例えば、App Barコンポーネントは、デフォルトでブランディングの原色を使用します（もちろん、コンポーネントの色を好きなものに変更することは可能です）。

ブランディングタブで色を変更すると、そのブランディングカラーをまだ使用しているすべてのコンポーネントが自動的に一度に更新されます。

ブランディングカラーは、Adaloカラーピッカーのプリセットパレットオプションに自動的に追加され、プライマリーカラーとセカンダリーカラーのライトニングバージョンとダークニングバージョンも一緒に追加されます。 カラーピッカーの下段の最後の2色は、お客様が選択したテキストカラーとスクリーン背景色に設定されています。

フォントの変更方法

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

どのようなフォントがあるか

・アダロ無料プランをご利用の場合、以下のフォントオプションが利用できます。

　・Oswald

　・Merriweather

　・Source Sans Pro

　・Standard System Font

・Adaloの有料プランの場合、Google Fontsの1,000以上のフォントから選択することができます。

スタンダードシステムフォントとは？

このオプションを選択すると、アプリ内のテキストのフォントが、ユーザーがアプリを閲覧しているデバイスのデフォルトのフォントに設定されます。 AndroidとChromebookの場合、これはRobotoです。 iOSおよびMacデバイスの場合、これはSan Franciscoです。 Windows 10の場合は、Segoe UIと呼ばれるフォントです。

ほとんどのアプリ、特にアプリストアのアプリは、フォントをカスタマイズするのではなく、「Standard System Font」を使用しています。

どのようなフォントを選べばよいのでしょうか？

効果的な（そして相性の良い）フォントを選ぶのは大変なことです。 タイポグラフィの分野では、文字通り専門家集団が存在します。 私たちは、美しいアプリをできるだけ簡単に作りたいので、フォント選びを簡単にするための機能をたくさん用意しています。

人気のある組み合わせ…見出しフォントを設定した後、本文フォントを設定しようとすると、Adaloは自動的に、選択した見出しと相性の良いフォントを提案します。 下の例では、見出しフォントとしてオズワルドが選択されていますが、Adaloはオズワルドと相性の良いOpen Sans、Roboto、Lato、Montserrat、またはSource Sans Proを提案しています。 この機能は、フォント選びのソムリエのようなものだと考えてください。

人気のフォント…Adaloは、推奨される組み合わせ以外にも、人気のあるフォントを提案しています。 HeadingとBodyのそれぞれに、デザインチームがスタイル、種類、アクセシビリティを考慮して選んだ人気のあるフォントを用意しています。

サーチ＆エクスプロア…もちろん、アプリやブランドにはそれぞれ個性がありますから、人気のあるものをそのまま踏襲する必要はないでしょう。 使いたいフォントが決まっている場合は、フォント名を入力するだけで、Google Fontsライブラリ全体の検索をすぐに開始できます。

使いたいフォントが決まっておらず、ブラウジングしたい気分のときは、フォント選択のドロップダウンの下にある「探索」オプションが常に利用可能です。このオプションは、Google Fontsのウェブサイトに直接移動し、さまざまな基準で閲覧したりフィルタリングしたりして、あなたのアプリケーションに最適なフォントを見つけることができます。

フォントの使用

書式設定メニューを使う…フォーマットメニューを開くと、以下の設定ができるようになります。

・フォント(Font)

　・ここで、このテキストに使用するフォントを見出しフォントと本文フォントから選択できます。

・フォントウェイト(Font Weight)

　・ノーマル、ボールド、エクストラボールドからお選びいただけます。

　・注：フォントによって、使用できるウェイトオプションが異なります。 このドロップダウンのオプションは、選択したフォントに基づいて自動的に変更されます。

・フォントサイズ(Font Size)

　・文字の大きさを設定する

・アライメント(Alignment)

　・テキストを左寄せ、右寄せ、中央寄せのいずれにするかを選択します。

・テキストカラー(Text Color)

　・テキストの色を設定する

注意：すべてのコンポーネントで、フォーマットツールバーに表示されるすべてのオプションが有効になるわけではありません。 コンポーネントの開発者は、そのコンポーネントにとって意味のあるフォーマット設定を有効にするオプションを持っています。

フォントを変更する

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

参考英語サイト

https://help.adalo.com/design/branding