モバイルガイドにカスタムフォントを使用する

最終更新日:

モバイルガイドでアプリのフォントを使用できるため、ガイドにもアプリと同じ見た目や操作性を持たせることができます。

カスタムフォントを使用するには、アプリのテーマに追加し、ガイドのビジュアル要素に割り当てる必要があります。

カスタムフォントを定義する

  1. [ガイド(Guides)]>[テーマ(Themes)]に進み、アプリのテーマを更新します。
  2. テーマで特定のタイポロジーを選択します。たとえば、[タイトル(Title)]にします。
  3. [タイトルスタイル(Title Styles)]サイドパネルで、[ファミリー(Family)]ドロップダウンを選択します。このドロップダウンには、サポートされているすべてのiOSおよびAndroidのシステムフォントが一覧表示されます。
  4. [+カスタムフォントを管理(+ Manage custom fonts)]を選択します。
    mceclip1.png

  5. アプリで定義されているフォントのファイル名を入力します。アプリで使用されているファイル名を正確に入力してください。ファイル名では大文字と小文字が区別されます。
  6. 複数のフォントのファイル(ボールド、イタリックなど)がある場合は、それらをすべて追加できます。
  7. テーマ固有のタイポロジー(タイトル、プライマリボタン、その他のオプションなど)のいずれかで、新しく追加したフォントを選択します。

カスタムフォントを使ったガイドをテストする

カスタムフォントが正しく設定されていることをテストするには、定義したタイポロジーを使用してガイドを作成し、カスタムフォントがデバイスで正しく表示されることを確認します。

ガイド内のカスタムフォントをテストするには、[ガイド(Guides)]>[ガイド(Guides)]に移動して、次の操作を行います。

  1. [ガイド(Guides)]リストでモバイルガイドを選択します。
  2. ガイドの詳細ページで、[自分のアプリで管理(Manage In My App)]を選択します。
  3. モバイルアプリ用のカスタムテーマを作成し、そのテーマに1つ以上のカスタムフォントを指定します。
  4. ビジュアルデザインスタジオで、作成したカスタムテーマをガイドに適用します。
  5. ラベルを含まないテキストの設定を編集します。
  6. その要素に対してカスタムフォントを選択してプレビューできることを確認します。

モバイルカスタムフォントはブラウザでサポートされていないため、ガイドのウェブプレビューではフォントが表示されません。

mceclip4.png

カスタムフォントは、[+カスタムフォントの管理(+ Manage Custom Fonts)]からいつでも編集・削除できます。

mceclip2.png

Android用カスタムフォント

  • フォントのファイルは、以下のパスに存在する必要があります:"/res/font"
  • サポートされるフォント形式:XML、TTF。

Screen_Shot_2019-11-21_at_11.01.41.png<br>[Androidカスタムフォントの場所]

iOS用カスタムフォント

サポートされるフォント形式:TTF、OTF。





この記事は役に立ちましたか?
1人中0人がこの記事が役に立ったと言っています