Adobe Firefly&Adobe Fontsで表現力アップ!Adobe Expressの文字デザイン|もっとAdobe Fonts!04

もっとAdobe Fonts 04

砂の上にある 低い精度で自動的に生成された説明
Adobe Expressの文字表現

生成AIで表現力アップ!Adobe Expressならではの文字表現

Adobe Express」は、多彩なデザインテンプレートをもとに、プロクオリティのグラフィックやムービーを手軽につくることができるアドビのコンテンツ制作アプリです。
写真やPDFの編集、動画の変換といった、プロツールをもつアドビならではの「クイックアクション」も多数用意されているほか、デザインの現場でも使われている魅力的なフォントが豊富に揃っているのはクラウドフォントサービス「Adobe Fonts」を展開するアドビだからこそ。Adobe Creative Cloudのプラン契約がなくても使えるフォントは2,000以上、契約ユーザーなら25,000を超える高品質なフォントをAdobe Expressだけでなく、アドビ以外のアプリでも自由に使うことができます。

この記事では、「もっと!Adobe Fonts」第2回 に引き続き、Adobe ExpressとAdobe Fontsを使って、表現力豊かな文字をつくる方法を解説します。

Adobe Express|フォント設定の基本

Adobe Express|文字の基本機能

最初にAdobe Expressのテキスト機能をおさらいしましょう。
テキストを選択状態にすると、画面左のサイドメニューがテキストに関する設定項目に切り替わり、フォントの種類や太さ・スタイル、サイズなどを指定できるようになります。

Adobe Express|文字の基本機能

[基本的なテキスト設定項目]

Adobe Express|文字の基本機能

上図・D「太字・斜体・下線」 は、ボタンを押すだけで文字を太くする、斜体にする等の処理が行なえる機能です。
「下線」はすべてのフォントに適用することができますが、「太字」はBoldがないフォントでは選ぶことはできません。「斜体」はおもに欧文フォント向けの機能で、イタリックのバリエーションを持つフォントに適用することができます(図の斜体例は、イタリックを持つ日本語書体・貂明朝 でつくられています)。

Adobe Express|文字の基本機能

上図・G「文字間隔」 では、行の間隔、文字同士の間隔を調整することができます。「文字間隔」は「0」を基準に正の値を入れると文字の間隔が開き、負の値(-)を入れると文字の間隔が狭くなります。
数値は1000=1文字分となっていて、「−200」から「800」の間で数値を指定できます。
特定の文字間だけを狭くしたい場合は、狭くしたい位置の前の文字を選択して、負の値を入力 します(図では「と」の文字間隔を「−200」に設定し、「と」と「!」の間を狭くしています)。

Adobe Express|文字の基本機能

上図・H「テキストレイアウト」 の項目では、テキストを自動的にレイアウトすることができます。
「ダイナミック」「円」「半円(上)」「半円(下)」の4種類があり、「ダイナミック」を適用すると行ごとに幅が揃うように文字サイズが拡大されます(図・左下)。
「円」を適用すると文字がドーナツ状に配置されます(図・右上)。文字の間隔が開きすぎる場合は、「文字間隔」の設定で負の値を入れると、文字サイズが拡大されるとともに文字間を詰めていくことができます。
「半円」は上弦・下弦いずれかのかたちで文字をアーチ状に配置します。
図・右下の例は「Adobe Fonts」の文字を「半円(下)」でレイアウトし、「もっと」の文字を追加したものです。このようにテキストを組み合わせることで、より柔軟なレイアウトが可能になります。

Adobe Express|文字に彩りを加える表現機能

Adobe Expressを使うと、文字にさまざまな装飾を加えることができます。ここからは文字の表現力をさらに高める機能について紹介します。

Adobe Expressではテキストに対して、2つの色を設定できるようになっています。ひとつめの「塗り」は文字そのものの色、もうひとつの「アウトライン」は、文字の外側につくフチの色です。それぞれに色を設定し、フチの太さを「アウトラインの幅」欄に入力するだけでカラフルなフチ文字が簡単につくれます。
フチ文字にすると、文字がより見やすく、伝わりやすくなるだけではなく、写真やイラストの上に文字を置くような場合でも、ビジュアルに負けることなく、文字をはっきりと見せることができるでしょう。

Adobe Express|文字表現の機能

「テキスト効果」は、、文字にアドビの生成AI・Adobe Fireflyによってつくりだされたテクスチャ感、質感を加えることができる機能です。
見た目が大きく変わっても、画像になっているわけでないので、あとからテキストを編集することもできるのがポイント。テキストを変えながら、そのイメージに合う表現を追求できるようになっています。

Adobe Express|文字表現の機能

「サンプル効果」にイメージ通りのものがない場合は、「どのような感じにしたいですか?」という問いの下にある入力エリアに、思い描いたイメージを入力してみましょう。Adobe Fireflyがその言葉をもとにさまざまな表現を提案してくれます。
提示された生成案以外の表現が見たいときは、「さらに読み込む」を選べば、最大20通りのバリエーションを生成することができます。

Adobe Express|文字表現の機能

「シャドウ」は、文字に影や光彩を加えることができる機能です。文字に立体感を与えることで、文字をそれ以外の要素から浮き立たせ、より見やすくする効果があります。

Adobe Express|文字表現の機能

「文字フレーム」は、文字に背景色を加えたり、吹き出しやフレーム風に加工することができる機能です。用意されたデザインを選ぶだけで、テキストに装飾を加えることができます。
テキストを変更した結果、幅や高さが変わってしまったとしても、文字フレームは変更後のサイズに応じて変化します。

Adobe Express|文字表現の機能

Adobe Expressには、ほかにもテキストに動きを与える「アニメーション」など、多彩な文字表現をスムーズに実現する機能が数多く搭載されています。

手軽にデザインを始めたい、グラフィックをスピーディにつくりたい……そうした人だけでなく、すでにプロの現場で活躍しているクリエイターもぜひ一度、Adobe Expressに触れてみてください。
思っていた以上に便利な、クリエイティブに役立つ機能が見つかるはずです。

砂の上にある 低い精度で自動的に生成された説明
Adobe Fonts

文字の表現力を広げる多彩なフォントが揃うAdobe Fonts

クリエイティブには欠かせない道具のひとつであるフォントをより自由に、柔軟に使えるクラウドフォントサービス「Adobe Fonts」。2024年6月現在、日本語フォント650超、Adobe Fonts全体では25,000以上のフォントをメディアを問わず、商用/非商用問わず、自由に使うことができます。
書体名がわからなくても書体の分類や文字の特徴、表現したいイメージから探すこともでき、目的のフォントにすばやく辿り着けるようになっています。

“もっといろいろなフォントを見てみたい、使ってみたい!”
そう思えたらまずは一度、Adobe Fontsを開いてみましょう。
無料でも使えるたくさんのフォントで、デザインをよりふさわしく彩りましょう。

Adobe Fontsを無料で試してみる

Open Adobe Fonts