モバイル開発におけるテキストとタイポグラフィ：概要、ツール、仕組み

モバイルアプリのテキスト：iOSのNSAttributedString

NSAttributedStringは、書式付きテキストを扱うための基本的なiOSクラスです。個々の文字や範囲に属性を適用できます。UIFontによるフォント、UIColorによる色、kernによる文字間隔、NSMutableParagraphStyleによる行間隔など。モバイルアプリでは、UILabelから編集対応の複雑なUITextViewまで、NSAttributedStringはあらゆる場所で使用されています。

UIFontとフォント設定

UIFontはiOSでフォントを扱うためのメインクラスです。システム書体、カスタムフォント、Dynamic Typeをサポートします。UIFont(name:size:)は名前でフォントを読み込み、UIFont.systemFont(ofSize:weight:)はシステムフォントを読み込みます。UIFontDescriptorを使用すると、既存のフォントを変更できます（サイズ変更、ウェイト変更、変換行列の追加など）。カスタムフォントの場合は、.ttfファイルをプロジェクトに追加し、Info.plistのFonts provided by applicationキーに登録します。

let attributes: [NSAttributedString.Key: Any] = [
    .font: UIFont(name: "HelveticaNeue-Bold", size: 18) as Any,
    .foregroundColor: UIColor.darkGray as Any,
    .kern: 1.5 as Any
]
let attributedString = NSAttributedString(
    string: "Форматированный текст",
    attributes: attributes
)
label.attributedText = attributedString

NSMutableParagraphStyleと段落書式設定

NSMutableParagraphStyleは、段落表示を設定するためのParagraphStyleの可変バージョンです。配置（alignment）、行間隔（lineSpacing）、インデント（headIndent、tailIndent）、切り詰めモード（lineBreakMode）を制御します。ParagraphStyleはモバイルデバイスでの長いテキストの可読性に重要です。適切なlineSpacingは行の重なりを防ぎ、lineBreakModeは単語のクリッピングを防ぎます。paragraphSpacing設定は段落間のスペースを定義します。

モバイルアプリのテキスト：AndroidのSpannableString

SpannableStringはAndroidでテキストを書式設定するための主要ツールです。Spanオブジェクトのメカニズムを通じて機能し、各オブジェクトが1つの側面を担当します。StyleSpan（太字/斜体）、ForegroundColorSpan（色）、URLSpan（リンク）、UnderlineSpan（下線）。SpannableStringBuilderはNSMutableAttributedStringに相当し、複数のフラグメントからテキストを構築できます。モバイルアプリで書式付きテキストを持つ柔軟なインターフェースを作成するには、SpannableStringの理解が不可欠です。

AndroidのTypefaceとカスタムフォント

TypefaceはAndroidでフォントを扱うためのクラスです。システム書体のRobotoとNoto、およびカスタムフォントをサポートします。Typeface.createFromResource()はres/font/からフォントを読み込み、Typeface.createFromAsset()はassetsフォルダから読み込みます。Android 8.0+はXMLでのフォントファミリーをサポートし、複数のフォントファイルを1つのリソースに結合します。Androidのモバイルアプリでテキストにカスタムフォントを設定するには、android:fontFamily属性を使用するか、プログラムでsetTypeface()を使用します。

TextMeasurerとテキスト測定

TextMeasurer（API 29+）は、Viewにバインドせずにテキストを測定するための最新ツールです。レンダリング前に幅、高さ、文字位置を計算します。古いAPIでは、単一行テキストにはPaint.measureText()、複数行テキストにはStaticLayoutが使用されます。TextMeasurerは、Canvas.drawText()を介してテキストが描画されるカスタムViewで特に便利です。正確な測定により、インターフェースでの文字のクリッピングを防ぎます。

val spannable = SpannableString("Жирный текст с цветом")
spannable.setSpan(
    StyleSpan(Typeface.BOLD),
    0, 6,
    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
)
spannable.setSpan(
    ForegroundColorSpan(Color.RED),
    14, 19,
    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
)
textView.text = spannable

モバイル開発のタイポグラフィ：カーニング、リガチャ、トラッキング

モバイルアプリにおけるタイポグラフィは、フォント、文字間隔、行間隔の包括的な設定です。モバイル開発における適切なタイポグラフィは、テキストの可読性とインターフェースの視覚的印象に直接影響します。両方のプラットフォームで利用可能な主要パラメータを見てみましょう。

カーニングとトラッキング

カーニングは特定の文字ペア（AV、To、Wa）間のスペース調整です。トラッキングはテキスト全体またはその一部の均一な文字間隔です。iOSではカーニングはNSKernAttributeNameを介して設定され、AndroidではTextViewのletterSpacingプロパティを介して設定されます。負の値は文字を近づけ、正の値は文字を広げます。モバイル開発におけるタイポグラフィは、これらのパラメータの慎重な調整を必要とします。大きな見出しでは文字間隔を広げ、本文テキストでは標準のままにします。

リガチャ

リガチャは、2つ以上の文字の組み合わせ（fi、fl、ffi）を置き換える特殊なグリフです。iOSでは、リガチャはNSLigatureAttributeNameを介して制御されます。0 — 無効、1 — 標準、2 — すべて利用可能。Androidでは、リガチャはOpenType機能を介してフォントレベルで制御されます。リガチャを有効にすると、特にセリフ書体でテキストの外観が向上します。モバイル開発におけるタイポグラフィは、主に見出しやロゴにリガチャを使用します。

モバイルアプリのカスタムフォント：読み込みと設定

カスタムフォントは、アプリに独自のビジュアルスタイルを作成するための主要ツールの1つです。ブランドを強調し、ユーザーエクスペリエンスを向上させるのに役立ちます。モバイルアプリでは、カスタムフォントは見出し、ロゴ、アクセント要素、コーポレートアイデンティティに使用されます。

バリアブルフォント

バリアブルフォントは、1つのファイルに複数のスタイル（細字から極太、狭字から広字まで）を含む最新のフォント技術です。複数のフォントファイルを1つに置き換えることでアプリサイズを削減します。iOSでは、バリアブルフォントはweightパラメータを持つUIFontを介してサポートされます。Androidでは、可変軸（wght、wdth、slnt）を指定するTypeface.Builderを介してサポートされます。バリアブルフォントを使用すると、モバイルアプリのタイポグラフィが簡素化されます。開発者は各スタイルに個別のファイルを読み込む必要がありません。

let customFont = UIFont(name: "CustomFont-Regular", size: 16)
let scaledFont = UIFontMetrics.default
    .scaledFont(for: customFont)
label.font = scaledFont
label.adjustsFontForContentSizeCategory(true)

NSTextAttachmentとImageSpan

iOSのNSTextAttachmentを使用すると、NSAttributedString内にUIImageを埋め込むことができます。画像はベースラインに合わせられ、テキストとともに移動します。Androidでは、SpannableString内のImageSpanが同等です。どちらのアプローチも、絵文字付きチャット、アイコン付きニュースフィード、カスタムチェックボックス付きフォームに役立ちます。テキストとグラフィックスが調和して見えるように、フォントの高さに合わせて画像を適切に拡大縮小することが重要です。

テキスト効果、配置、エリプシス

基本的な書式設定に加えて、モバイルアプリのテキストは追加の視覚効果（影、輪郭、取り消し線、下線）をサポートしています。これらのツールはタイポグラフィの可能性を広げますが、可読性を維持するために慎重な適用が必要です。

テキストの影と輪郭

iOSのテキストの影は、offset、blurRadius、colorを持つNSShadowを介して設定されます。輪郭はNSStrokeWidthAttributeNameを介して設定されます。負の値は輪郭付きの塗りつぶしを作成し、正の値は輪郭のみを作成します。取り消し線はNSUnderlineStyle（.single、.thick、.double）です。Androidでは、TextViewの影はandroid:shadowRadius、android:shadowDx、android:shadowDyを介して設定されます。SpannableStringはStrikethroughSpanとUnderlineSpanをサポートしています。Androidでのテキストの輪郭は、OutlineSpanまたはカスタムフォントを介して実装されます。

エリプシスとマーキー

エリプシスは、コンテナがオーバーフローしたときに省略記号でテキストを切り詰めることです。iOSではlineBreakMode .byTruncatingTailとnumberOfLinesを介して設定されます。Androidではandroid:ellipsize="end"とandroid:maxLinesを介して設定されます。マーキーは、Androidでandroid:ellipsize="marquee"を介して利用可能なスクロールテキストアニメーションです。iOSには組み込みの同等機能はなく、MarqueeLabelライブラリが使用されます。コンテンツのクリッピングを避けるため、モバイルアプリのすべての単一行テキストにはエリプシスが必須です。

iOSのDynamic Type

Dynamic Typeは、ユーザーのアクセシビリティ設定に基づいてフォントサイズを調整するiOSの適応型テキストシステムです。カスタムフォントをスケーリングするにはUIFontMetricsを使用します。Dynamic Typeはアクセシビリティ準拠アプリに必須です。Androidでは、sp単位とscaledPixelsが同等であり、システムのテキストサイズ設定に応じてスケーリングされます。