Adobe Muse でのフォントの使用方法

Web ページのデザインに Adobe Muse を使用する場合、3 つの異なるフォントの種類からフォントを選択してテキストに適用できます。ページを書き出しまたはパブリッシュすると、適用したフォントの種類は、どのようにテキストコンテンツがレンダリングされるかを決定します。また、3 つの異なるフォントの種類は、サイトのビヘイビアーおよびパフォーマンスに様々な形で影響を与えるため、それぞれの種類の選択による影響を理解することは重要です。

Web ページへのテキストの追加は、次の操作で実行できます。

• テキストツールを使用して、ページに直接テキストを入力します。
• ファイル／配置を選択し、外部の TXT ファイルを選択してテキストコンテンツを配置します。
• 別の外部のソースからテキストをコピーして、ページにペーストします。

テキストを含むテキストフレームを作成したら、フォントのカラー、サイズ、スタイル、整列、およびその他の書式オプションを設定するために、テキストパネルまたはコントロールパネルでオプションを使用できます。フォントメニューを使用して、ページデザインに合ったフォント（Arial や Helvetica など）を選択することもできます。

この記事では、フォントメニューを使用して適用できる 3 つの異なるフォントの種類の概要を説明します。それぞれのフォントの種類に関連する利点と潜在的な問題、テキストの制御およびテキストフレームの編集方法について学習します。

フォントを適用してテキストコンテンツのフォーマットを指定する場合、次の 3 つの選択肢があります。

• Web フォント
• 標準フォント
• システムフォント

以下に各オプションを簡単に説明します。

Adobe Muse の Web フォントは、Typekit フォント、Edge Web フォントおよび自己ホスト型 Web フォントから構成されます。（数百種類のフォントタイプがある）大きなライブラリにアクセスし、そのフォントを Adobe Muse でページに適用することができます。テキストコンテンツに Web フォントを適用するときに、Adobe Muse が自動的にページにコードを追加し、フォントファミリーへのリンクを作成します。ブラウザーでそのページにアクセスすると、そのページの表示に必要な Web フォントをダウンロードし、コンテンツをテキストとして表示します。この方法には多くの利点があります。ヘッダーその他の重要なテキストコンテンツのデザインに、バラエティに富んだフォントを使用でき、また、パブリッシュされたり書き出されたりしたページでは、そのテキストが選択可能なテキストとして表示されるからです。ただし、同一ページ上で使用する Web フォント数が多くなりすぎないよう注意してください。画像が多いデザインのように、リンクされたファイルが多すぎると、ブラウザーでのページの読み込みに時間がかかる場合があります。デザインでは、使用する Web フォントをページあたり 3 つまでに制限し、フォントサイズをそれ相応の大きさに保ち、テキストを読みやすくすることが最適です。詳細については、「Typekit およびその他の Web フォント」を参照してください 。

標準フォント（フォールバックあり）は、サイトにアクセスするすべてのマシンにインストールされている確率の高いフォントです。これらのフォントには、Arial、Georgia、Times New Roman などの標準フォントファミリーが含まれています。広く使用されている標準フォントの小さなセットの中から選択し、ライブサイトではテキストとして表示することができます。標準フォントはすばやく読み込めますが、装飾性の高い活字ではありません。標準フォントは、テキストコンテンツが多い段落の書式設定を行う場合に最適です。なぜなら、標準フォントは Web 上で読みやすいように最適化されているからです。可能な限り標準フォントを使用し、サイトのパフォーマンスを上げ、読み込みに時間がかからないようにします。

システムフォントでは、ユーザー（デザイナー）がマシンにインストールした特殊なフォントをベースとして、一層ユニークなタイポグラフィーを使用することができます。例えば、ガーデニングなど特別なテーマを持つサイトをデザインしている場合、Typekit Web フォントライブラリからは入手できない独特の花のフォントをインストールすることができます。システムフォントは、テキストに対して控えめに適用することが望ましいのですが、テキストコンテンツが画像として書き出されることに注意してください。つまり、ページの読み込みには時間がかかり、ページ上のテキストを訪問者が選択、コピー、またはペーストすることはできません。システムフォントも、ヘッダーなどテキストの小さな集合に適用することが最適です。サイトを使いやすくするために、訪問者がカレンダーや電子メールメッセージにコピー＆ペーストする可能性がある住所、電話番号、その他のコンテンツにシステムフォントを使用することは避けてください。訪問者の中には、小さな文字を読むことが難しい人もいます。また、ブラウザーの設定でフォントサイズを拡大している場合もありますが、この方法では画像ファイルとして書き出されたテキストを読む助けにはなりません。また、検索エンジンは、テキストコンテンツを検索してサイトの索引付けを行い、検索結果のサイトのランキングを設定している点にも注意してください。こうした理由から、システムフォントは、デザインに本当にインパクトを与える必要がある場合にのみ適用することが最適です。互換の Web フォントや標準フォントがある場合は、そちらを適用してください。

これら 3 種類のフォントそれぞれを適用するには、テキストツールを使用してテキストを選択してから、フォントメニューより所定のオプションを選択します。

フォントメニューの先頭に、最近使用したフォントのリストが表示されます。これにより、ページをデザインしていくにつれて、フォントの再適用が簡単になります。後から、それほど多くのフォントを表示する必要はないと判断する場合や、最近使用したフォントをすべて消去するという場合は、Adobe Muse の環境設定でこの設定を更新することができます。

次のセクションでは、各フォントの種類のより詳細な説明、および各種類を適用することによる、ライブサイトのテキストコンテンツのレンダリングに与える影響について説明します。

最適なフォントレンダリング結果を得るには、使用目的に適したフォントを選択します。例えば、フォントを段落に適用する場合（大量の連続したテキストを比較的小さいフォントサイズで表示）、凝った装飾的なフォント（通常、これらは比較的大きいフォントサイズで表示されるヘッダーなどに使用）の選択は避けます。

Web サイトのテキストで最も重要な考慮点の 1 つは、それらが確実に判読可能であることです。装飾的なフォントの視覚的な細部をレンダリングするために十分な解像度が Web にはないため、これらは小さいフォントサイズではうまくレンダリングできません。

さらに、段落のフォントは、標準、斜体、太字、太字斜体スタイルが利用できる必要があります。これにより、段落内の人物の名前、本や映画の題名、その他の特徴的なコンテンツを強調するために、太字や強調テキストを使用できます。多くの装飾的および高度にスタイリングされたフォントファミリーには、このようなスタイルオプションがありません。

フォントは特定の用途のために技術的に最適化することも可能です。フォントは、特に比較的大きいサイズで良好なレンダリングができるアウトライン書式を使用したり、プラットフォームを問わず比較的小さいサイズで最適なレンダリングをするためのフォントヒントが含まれる場合があります。上述したように、Adobe Muse で Web フォントにアクセスすると、Web フォントライブラリでは、フォントをフィルターして、段落または見出しに使用するお勧めフォントのリストを表示できます。デザインで特定のフォントがテキスト見出しまたは段落に適しているかが判断できない場合は、段落または見出しに関するこれらの推奨に基づいてフォントを選択することで、確実に作成するページを読みやすいものにできます。

標準フォントとシステムフォントに適用した同じプロセスを使用して、標準フォントのテキストのスタイルを設定できます。Web フォントを使用してテキストのスタイルを設定するには、次の手順に従います。

テキストコンテンツを画像ではなく、テキストとして書き出すことは望ましいことです。システムフォントを選択した場合、テキストコンテンツは画像として書き出され、ページの読み込み時間が長くなります。

Web フォントの使用により、サイト訪問者はテキストコンテンツをサイトページから直接コピーしてペーストすることができます。これにより、アドレス、電話番号、およびその他の重要な情報にアクセスして保存できます。これらの情報を他の人と共有したり、独自のアドレスブックにオフラインで保存したりできます。

Web フォントをテキストとしてレンダリングすることで、サイトの検索結果ランキングが向上します。これは検索エンジンが Web サイトのコンテンツにインデックスを付けるときに、画像ファイルよりもテキストコンテンツの方が解析が容易であるためです。Web フォントの使用により、サイトにより多くのトラフィックを集約したり、訪問者がより効率的にページを読み込んだりすることができます。

さらに、テキストコンテンツの場合、訪問者はテキストリーダーを使用してはるかに容易にナビゲーションできます。ページのヘッダーなどの重要な領域をテキストとしてレンダリングすることで、誰もがより簡単にアクセスできるサイトにできます。

フォントメニューには、標準フォントのリストを示すセクションがあります。標準フォントは、今日のすべてのコンピューターにインストールされているので、ページのデザインで標準フォントを自由に適用できます。コンピューターに新たにインストールが必要なものはなく、ページのテキストコンテンツのレンダリングに使用できるフォントが、訪問者のコンピューター上に既にあります。

標準フォントは、すべてのコンピューターがテキストコンテンツの表示で共有する、一般的に使用されるコンピューターフォントの小さなセットです。標準フォントを使用したテキストは、ライブサイトでテキストとしてレンダリングされます。

Web フォントと同様に、標準フォントはテキストとしてレンダリングされるため、次のような利点があります。

• 訪問者は、Web ページコンテンツの選択、コピー、およびペーストができます。
• テキストコンテンツのページは、画像で重いページと比較して、読み込み時間が速くなります。
• 検索エンジンは、テキストコンテンツにインデックスを付けることができるため、サイトの検索結果ランキングが向上します。
• スクリーンリーダーを使用する訪問者は、画像コンテンツよりも、より簡単にテキストにアクセスできます。

しかし、標準フォント使用の短所は、ページのデザインで選択できるフォント数が少ないことです。

フォントメニューを使用して標準フォントを選択すると、一覧が表示されます。

標準フォントは以下に制限されます。

• Arial
• Comic Sans
• Courier New
• Geneva
• Georgia
• Helvetica
• Lucida Sans
• Palatino
• Times
• Trebuchet
• Verdana

カーソルをオプションの上に置くと、ツールヒントに代替のフォントのリストが表示されます。

このツールヒントは、訪問者がそのフォントをインストールしていない場合に、サイトでは外観の似たフォントに自動的に置き換えられることを示します。ページデザインは元のデザインと似た外観で、欠落したフォントは訪問者に気付かれることなく代替されます。エラーメッセージが表示されることはなく、ページコンテンツが読み込まれます。訪問者のコンピューターにインストールされている類似した代替フォントを使用して、テキストは表示されます。

一般的に、標準フォントは、読みやすく、訪問者のナビゲーションを容易にする必要があるページコンテンツに適しています。しかし限定的なセットであるため、サイトの美的外観を反映する書体を見つけるのが難しくなります。

システムフォントは、ユーザーの個別のコンピューターにインストールされたフォントを指します。システムフォントは、画像編集プログラムを含む多様なプログラムで使用するためにインストールできます。これらのシステムフォントは、Adobe Muse でページのデザインをする場合にも適用できます。

例えば、地震に関する Web サイトをデザインする場合に、弱々しい、またはひびの入った外観のフォントをインストールして、ページヘッダーがデザインのテーマにマッチするようにできます。インストールされたフォントはすべて Adobe Muse で使用できるため、ページレイアウトが制限されず、ページで完全に独自なアレンジができます（または顧客のサイトで顧客のカスタムフォントを使用できます）。システムフォントにより、広範で独自のフォントを使用でき、ページを活気づけることができます。

訪問者のコンピューターにフォントがインストールされていなくても、デザイン時にスタイルを適用したときと同じ状態で、システムフォントのテキストは訪問者に表示されます。これを実現するため、Adobe Muse はシステムフォントを使用するテキストをすべて画像ファイルとして自動的に書き出します。これはバックグラウンドで実行されるシームレスな操作です。また、ページをデザインしたときと同様に、その後もシステムフォントのテキストは編集可能であるため、引き続き変更することができます。

フォントメニューを使用してシステムフォントを選択すると、コンピューターにインストールしてあるフォントのリストが表示されます。

システムフォントをテキストに適用する場合の短所は、ライブサイトでテキストは画像としてレンダリングされるため、テキストコンテンツの読み込みにかなり長い時間がかかることです。

その一方で、コンピューターにインストールしてある特定のフォントに基づいて、独自性のより高いテキスト編集ができるという長所もあります。しかし、これらのフォントファミリーを適用した結果、ページは画像で重くなり、読み込み時間が長くなります。これはサイトのパフォーマンスにも影響する可能性があります。

このため、デザインでのシステムフォントのテキストへの適用は慎重に行う必要があります。

テキストにリンクがなくても、システムフォントを適用したテキストを選択し、ハイパーリンクメニューの「タイトル」フィールドにわかりやすいタイトルを入力することをお勧めします。

ブラウザーでページをプレビューした場合、テキストにカーソルを置くと、タイトルがツールヒントとして表示されます。

サイトコンテンツを視覚的に読むのではなく、内容を聴いている、スクリーンリーダーを使用する訪問者にとって、タイトルタグは役に立ちます。また、Web サイトにインデックスを付ける検索エンジンは、サイトコンテンツをより良く分類するために画像のタイトルを使用するため、特に画像テキストがページヘッダーなどの重要な情報を伝達する場合、タイトルを追加することは重要です。

可能な場合は、インストールしているシステムフォントと互換性がある標準フォントを探して代用してください。

Adobe Muse でフォントをテキストに適用した後、フォントメニューの最初のセクションにはそのフォント名が表示されます。この機能により、フォント探しが楽になるので、サイトデザイン内の他のテキストに同じフォントを再度適用する処理が簡単になります。どのフォントが Web フォント、標準フォント、システムフォントなのかを覚えておく必要はありません。以前適用したことがあれば、この 3 つのすべてのフォントが上部にリストされます。

一般に、Web の習慣として、1 ページに使用するフォント数を制限しています。1 ページに使用するフォントフェースが 4 つ以下であれば、テキストコンテンツを訪問者が画面に表示したときに見やすいという傾向があります。通常、「最近使用したフォント」セクションには、限られた数のフォント名しか表示せず、探しやすいようにしています。

しかし、1 つのデザイン内で様々なフォントを試してみる場合もあるでしょう。あるいは、サイトのいくつかの異なるセクションをデザインしていて、フォントメニューの「最近使用したフォント」リストがかなり長くなっていることに気が付く場合もあるでしょう。リストが長くなりすぎた場合は、必要なフォントフェースの選択が難しくなります。

「最近使用したフォント」セクションにリストされるフォントの表示は制御することができます。次の手順に従います。