Font Selection

プロジェクトに最適なフォントを選定し、タイプスケール・font-family・パフォーマンス最適化まで 一貫した判断基準を提供する。Web、iOS、Android のクロスプラットフォーム対応。 --- ## トリガー フォント選定、フォント選び、タイポグラフィ、font-family、Webフォント、 Google Fonts、Inter、Noto Sans、SF Pro、タイプスケール、文字、書体、 フォントペアリング、Variable Font、日本語フォント --- ## 1. フォント選定フロー ``` Step 1: プロジェクトの性質を確認 ├── Web（HP/LP/SaaS/管理画面） ├── iOSアプリ ├── Androidアプリ └── クロスプラットフォーム Step 2: トーン&マナーを決定 ├── モダン・クリーン → サンセリフ ├── エレガント・高級感 → セリフ ├── 親しみやすい → ラウンド系サンセリフ └── テクニカル・コード → 等幅 Step 3: 見出し + 本文の2フォントを選定（最大3） Step 4: タイプスケールを決定 Step 5: font-family スタックを定義 Step 6: パフォーマンス最適化 ``` --- ## 2. プラットフォーム別システムフォント ### iOS / macOS | 用途 | フォント | 特徴 | |------|---------|------| | 欧文UI | **SF Pro** | 9ウェイト、Variable Font、光学サイズ自動切替 | | 和文UI | **ヒラギノ角ゴシック** | W3/W6 の2ウェイトのみ | | 読書・エディトリアル | **New York** | セリフ体、SF Proのコンパニオン | | コード | **SF Mono** | 6ウェイト、等幅 | | watchOS | **SF Compact** | 小画面最適化 | **光学サイズ閾値**: SF Pro Text（19pt以下）← 自動切替 → SF Pro Display（20pt以上） ### Android | 用途 | フォント | 特徴 | |------|---------|------| | 欧文UI | **Roboto** | Material Design標準 | | 和文UI | **Noto Sans JP** | Google/Adobe共同開発 | | コード | **Roboto Mono** | 等幅 | ### Web 推奨 | 用途 | フォント | ライセンス | |------|---------|-----------| | 欧文UI | **Inter** | SIL OFL（無料・商用可） | | 和文 | **Noto Sans JP** | SIL OFL（無料・商用可） | | 和文明朝 | **Noto Serif JP** | SIL OFL | | 等幅 | **JetBrains Mono** / **Fira Code** | SIL OFL | --- ## 3. Apple SF Pro フォント詳細 ### ウェイト（9段階） | ウェイト | CSS値 | 用途 | |---------|-------|------| | Ultralight | 100 | 装飾的な大サイズ見出し | | Thin | 200 | ディスプレイ用 | | Light | 300 | サブタイトル | | Regular | 400 | 本文 | | Medium | 500 | 強調テキスト | | **Semibold** | **600** | **Headline（iOS標準の強調）** | | **Bold** | **700** | **見出し（Large Title等）** | | Heavy | 800 | 極太見出し | | Black | 900 | 最大インパクト | ### ライセンス制限（重要） - **Webフォントとしての使用は不可** - Appleプラットフォーム向けUIモックアップ作成のみ許可

インストール

購入後にターミナルで実行してください。

正規購入者にはインストールコマンド再実行で最新版が配信されます。

評価とレビュー