Pixsoのテキスト機能：パス・バリアブルフォント・多言語UI

UIの文字を調整するときは、まず本文と操作ラベルを読みやすく整え、装飾が必要な箇所にだけ表現を加えます。Pixsoのパス上テキストはバッジや見出し、バリアブルフォントは太さや幅の調整、双方向テキストは右から左に読む言語を含む画面の設計に役立ちます。機能を使い分ける基準は、文字の見栄えだけでなく、利用者が内容を読んで次の操作を判断できるかどうかです。

PixsoのUIデザイン機能を使って、会員登録画面とその案内用バッジを作る場面を考えてみましょう。画面の本文には読みやすい文字組みを使い、バッジには曲線に沿った文字を配置します。日本語版と他言語版を並べれば、同じ文字サイズでも改行位置や行の高さが変わることを確認できます。

1. パス上のテキスト配置：曲線に沿わせる場所を選ぶ

パス上のテキスト配置（Type on a Path）では、ベクターパスに沿って文字を並べられます。円形のバッジや装飾的な見出しなど、形そのものに意味を持たせたい箇所に向いています。説明文や入力欄のラベルまで曲線にすると読み取りにくくなるため、操作に必要な文字は通常のテキストとして配置します。

位置の調整には、次の4つの項目を使います。

• 水平オフセット：パスに沿った方向に文字を移動し、始まる位置を調整します。
• 垂直オフセット：文字とパスの距離を調整します。
• 開始点の反転：パス上で文字が始まる位置を切り替えます。
• ベースラインの反転：文字を配置する側を切り替え、パスに対する向きを調整します。

たとえば「新メンバー募集中」というバッジなら、先に円の大きさと文字列を決めてから、水平オフセットで文字のまとまりを中央に合わせます。その後、垂直オフセットで縁との間隔を整えます。文字が収まらない場合は、文字サイズだけを小さくする前に、円を大きくするか、表現を短くできるかを検討します。

完成時はキャンバスを実際の表示サイズで見ます。拡大表示で整っていても、小さなバッジでは文字がつぶれることがあります。バッジの文字を読めなくても登録操作が分かるように、主な案内は画面内の見出しや本文でも伝えます。

2. バリアブルフォント：太さと幅を目的に合わせる

バリアブルフォントは、1つのフォントファイルで太さや幅などを連続的に調整できるフォントです。調整できる軸はフォントごとに異なります。太さだけを持つものもあれば、幅や傾き、独自の軸を持つものもあるため、使用するフォントで利用できる項目を確かめてから設計します。

会員登録画面では、見出し、入力ラベル、補足文に同じフォントファミリーを使い、太さとサイズで役割を分けられます。ただし、微妙な太さの違いだけで重要度を示すと区別がつきにくくなります。見出しの大きさ、上下の余白、文字色も組み合わせて、読む順番が分かるようにします。

1. 実際に使う見出し、ラベル、エラー文を画面に置きます。短い仮の文字列だけで判断しないようにします。
2. 本文が読みやすい太さを決め、その値を基準に見出しとラベルを調整します。
3. 長いラベルを入れて、折り返しや入力欄との間隔を確認します。幅を極端に狭めて押し込むより、配置や文言を見直す方が読みやすい場合があります。
4. 採用したフォント、サイズ、行間、軸の値を開発者に伝えます。異なる画面幅で値を変えるなら、変更する条件も明記します。

Pixso上でスマートフォン用とデスクトップ用の文字組みを作り分けても、公開されたサイトのフォントが自動で切り替わるわけではありません。画面幅に応じた切り替えやアニメーションは、設計した値を基に実装します。

3. 双方向テキスト：文字の向きと画面の配置を分けて考える

アラビア語やヘブライ語は主に右から左（RTL）に読みます。一方、同じ文の中に含まれるメールアドレスや製品名などは、左から右（LTR）の並びを持つことがあります。双方向テキストを扱うときは、段落全体の向きと、内部に含まれる文字列の向きを区別します。

会員登録画面なら、名前、メールアドレス、電話番号をそれぞれ実際に近い文字列で試します。たとえばRTLの説明文の中に「support@example.com」を置いたとき、記号が不自然な位置に移動していないか、アドレスの並びが変わっていないかを確認します。デザインを整えるためにメールアドレス自体を逆順に入力してはいけません。

文字の方向への対応だけで、画面全体のローカライズが完成するわけではありません。戻る操作の向き、アイコンとラベルの順序、入力欄の配置などは別に検討します。ロゴや写真、電話番号まで一律に左右反転するのは避けます。

他のツールから読み込んだデザインも同様です。インポートできたことと、文字の方向や改行が正しいことは別なので、元の画面と見比べ、対象言語を読める人に文章と表示の両方を確認してもらいます。

4. 多言語の文字組み：同じ数値より、同じ読みやすさを目指す

日本語、韓国語、タイ語など、文字の形や行の組み方が異なる言語では、同じフォントサイズを指定しても見え方がそろうとは限りません。各言語の文字を収録したフォントを選び、実際の文章で行間、改行、上下の余白を調整します。

日本語の登録ボタンを別の言語に訳したら、ラベルが長くなることがあります。その場合、文字を小さくして元の幅に合わせるだけでなく、ボタン幅を広げる、周囲の配置を変える、自然で短い訳にできるかを検討します。利用規約の説明や入力エラーは、最も長くなる文でも他の要素に重ならないようにします。

言語が変わっても維持したいのは、主な操作、補助情報、エラーの関係です。日本語版と他言語版で行間やボタン幅が異なっても、読む順番と操作の優先度が同じなら、製品としての一貫性は保てます。

5. 実例：会員登録画面のテキストを整える

ここまでの機能を、登録画面の作業に当てはめると次の順番になります。最初から装飾を作り込まず、内容と操作が伝わる状態を先に作ります。

1. 通常の状態を作る。見出し、氏名・メールアドレスのラベル、登録ボタン、補足文を配置します。各要素の役割をサイズと余白で分けます。
2. 長い文とエラーを入れる。「メールアドレスを確認してください」など、実際に表示する文を使い、折り返しで下の項目が押し出されても読める配置にします。
3. 文字の設定をそろえる。本文、ラベル、補足文で使う値を決めます。バリアブルフォントを使う場合は、役割ごとに採用する軸の値もそろえます。
4. 他言語版を並べる。各言語の文字列とフォントを入れ、方向、改行、ボタンの長さを確認します。RTL版では画面の配置も個別に検討します。
5. 装飾を加える。案内用バッジにパス上テキストを使い、主見出しや登録ボタンより強く目立っていないかを確かめます。

レビューでは「文字をもっと大きく」だけで終わらせず、「補足文と入力ラベルが同じ強さに見える」「エラーが2行になると次の入力欄に近すぎる」のように、読みにくい箇所を指定します。画面上のコメントと修正を対応させると、意図を共有しやすくなります。

6. 開発者に渡すときに伝えること

見た目だけでは、使用したフォントや調整値、表示条件までは伝わりません。バリアブルフォントなら軸の値、画面幅で設定を変えるなら切り替え条件、RTL版なら反転する要素と反転しない要素を併せて共有します。

パスとバリアブルフォントを組み合わせた見出しも、まずは静止した状態で読みやすい形にします。動きを付ける場合は、その動きが必要な理由と状態の変化を別に設計します。文字機能を組み合わせただけで、動くUIが完成するわけではありません。

文字の表現を、画面の使いやすさにつなげる

パス上テキストは形に沿った表現、バリアブルフォントは細かな文字の調整、双方向テキストは異なる文字方向を含む設計に役立ちます。どの機能も、実際の文言、表示サイズ、利用する言語と合わせて判断することが大切です。

まずは登録画面を1つ作り、通常の文、長い文、エラー文を並べてみましょう。読みやすさが整ってから装飾や他言語版を加えると、表現を増やしても主な操作が埋もれにくくなります。

Pixsoで画面の文字組みを作る