おすすめ記事

おすすめ記事一覧

Adalo Resource・カラーとフォント(ブランディングセクション)について

Adalo - Build Your Own No Code App

皆さんこんにちは。いかがお過ごしでしょうか。外の気候が暖かくなってくるとともに、花粉がとんだり、春の嵐で天候が崩れたり…。体調に沖をつけください。さて本日の記事はノーコードツールAdaloのAdalo Resourceを元にブランディングセクションより「カラーとフォント」の日本語解説をお届けします。長かったスクリーンとコンポーネントセクションを終え、この記事から新しいセクションに入ります。それでは早速行ってみましょう。Let’s Go!

カラー

左ツールバーの「ブランディング」タブにある「カラー」セクションでは、ブランドカラーを設定することができます。 Primary Color、Secondary Color、Screen Background Color、Text Colorを設定することができます。

これらを設定すると、アプリの画面に追加した新しいコンポーネントには、これらのデフォルト値が使用されます。 例えば、App Barコンポーネントでは、デフォルトでブランディングのプライマリカラーが使用されます(もちろん、 コンポーネントの色を好きな色に変更することもできます )。

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

Adaloのカラーピッカーにあらかじめ設定されているパレットオプションには、ブランディングカラーが自動的に追加され、さらにプライマリーカラーとセカンダリーカラーのライトニングバージョンとダークニングバージョンが追加されます。 カラーピッカーの最下段の2色には、お客様が選択された文字色と画面の背景色が設定されています。

フォント

アプリのフォントはどこで設定できるか

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

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

Adaloの無料プランをご利用の場合、以下のフォントオプションをご利用いただけます。

・Oswald
・Merriweather
・Source Sans Pro
・Standard System Font

Adaloの有料プランをご利用の方は、Google Fontsの1,000以上のフォントから選択することができます。

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

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

ほとんどのアプリ(特にアプリストアのアプリ)は、フォントをカスタマイズするのではなく、標準システムフォントを使用しています。

どのようなフォントを選ぶべきか

うまく機能する(そして一緒に機能する)フォントを選ぶのは大変なことです。 タイポグラフィの分野には、文字通り、専門家がたくさんいます。 美しいアプリケーションをできるだけ簡単に作りたいので、フォントの選択を簡単にするための機能をいくつか用意しています。

人気のペアリング – 見出しフォントを設定した後、本文フォントを設定しようとすると、Adaloは自動的に見出しの選択と相性の良いフォントを提案します。 下の例では、見出しフォントとしてオズワルドが選択されていますが、Adaloはオズワルドと相性の良いOpen Sans、Roboto、Lato、Montserrat、Source Sans Proを提案しています。

ポピュラーなフォント – Adaloでは、ペアリングだけでなく、ポピュラーなフォントのセレクションも提案しています。 ヘッディングとボディのそれぞれに、デザインチームがスタイルや種類、使いやすさなどを考慮して選んだポピュラーなフォントが用意されています。

検索 – アプリやブランドはそれぞれ個性的なので、人気のあるものだけを追いかける必要はありません。 使いたいフォントが決まっている場合は、そのフォント名を入力するだけで、すぐにGoogle Fontsライブラリ全体の検索が始まります。

使用したいフォントが決まっていない場合、フォント選択のドロップダウンの下に「Explore」オプションが常に用意されています。このオプションを選択すると、Google Fontsのウェブサイトに直接移動し、さまざまな条件で閲覧したりフィルタリングしたりして、アプリに最適なフォントを見つけることができます。

フォントを使う

「ブランディング」タブでアプリのフォントを設定したら、次はそれを使ってみましょう。 アプリ内で設定可能なテキストを持つコンポーネントを選択すると、表示されるテキストを設定できる左パネルの下に、マジックテキストを追加するためのアイコンが付いたツールバーと、書式設定メニューを開くためのパレットアイコンが表示されます。

書式設定メニューの使用 – 書式設定メニューを開くと、以下の設定ができます。

・フォント: テキストに使用するフォントを見出し用フォントまたは本文用フォントから選択できます。

・フォントの太さ:ノーマル、ボールド、エクストラボールドの3種類から選択可能です。

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

・フォントサイズ:テキストのサイズを設定します。

・アライメント: テキストを左寄せ、右寄せ、中央寄せにするかどうかを選択します。

・テキストカラー:テキストのカラーを設定します。

注:すべてのコンポーネントで、フォーマットツールバーのすべてのオプションが有効になるわけではありません。 コンポーネントの開発者は、そのコンポーネントに適したフォーマット設定を有効にすることができます。

フォントを変更する

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

まとめ

いかがだったでしょうか。今回の記事からブランディングセクションに入りましたが、カラーとフォントはワードやパワーポイントでも操作したことがあるでしょうし、他のセクションと比べるとさほどハードルが高くなかったかもしれません。それではまた別の記事でお会いしましょう。See You Soon!

Katsu

Katsu

高校まで日本で育ち、大学からアメリカ・ニューヨークへ。マスメディア、ジャーナリズム、インターネットメディア戦略を専門に修学。コロナ禍でオンライン主体になりつつある世の中で、記事が何かの手助けになれば幸いです。







関連記事

  1. 記事作成

    【不動産業界必見】ノーコードツール「Landbot」をご紹介!

  2. 記事作成

    Bubble・スケジュール化されたワークフロー・再帰的なワークフロー

  3. 記事作成

    Bubble・カスタムイベントの使用とプログラミング時のヒント

  4. 記事作成

    ノーコードツールBubbleの一般的な原則

  5. 記事作成

    Bubbleの重要なコンセプト

  6. Adalo Resource・Google Playストアへの公開

  7. 記事作成

    Bubble〜あなたのTo-doアプリの機能拡張〜

  8. 記事作成

    Bubble・API使用ケース&APIを使う

  9. Adalo Resource・空の状態を作る方法、検索バーの作成方法、ユーザーがフィルタリングできる…

人気記事

  1. topimage
  2. 記事画像
  3. top_image
  4. 特集記事

おすすめ記事一覧

  1. 記事画像
  2. top_image
  3. 記事画像
  4. 勤怠管理
  5. 飲食店 会計
PAGE TOP