エクスポートガイド

Bobcorn のエクスポートワークフローの完全なガイド — アイコンの選択から本番環境に即したフォントファイルの生成まで。

エクスポートダイアログを開く

左サイドバーメニューのエクスポートボタンをクリックします。エクスポートダイアログがモーダルとして開き、出力ディレクトリの設定、含めるアイコングループの選択、出力フォーマットと付属ファイルの選択が行えます。すべての設定はセッション間で記憶されるため、一度エクスポート設定を行えば、以降は1クリックでエクスポートが完了します。

出力ディレクトリの選択

最初のステップは、エクスポートファイルの保存先を選択することです。デフォルトでは、Bobcorn はデスクトップを使用します。パスの横にあるフォルダーボタンをクリックして別の場所を参照できます。

ヒント
プロジェクトの fonts/ または assets/ ディレクトリに直接エクスポートすると、毎回手動でファイルをコピーする手間が省けます。アイコンセットを繰り返し更新する開発中に特に便利です。

アイコングループの選択

エクスポートに含めるアイコングループを選択できます。デフォルトではすべてのグループが選択されています。フォントに含めたくないグループのチェックを外してください — たとえば、作業中のアイコンが含まれる「drafts」グループを除外する場合などです。

各グループにはアイコン数が名前の横に表示されます。グループのオン/オフを切り替えると、リスト下部の合計アイコン数がリアルタイムで更新されるため、エクスポートされるフォントに含まれるグリフ数を常に把握できます。

フォントフォーマット

Bobcorn は5種類のフォントフォーマットを生成できます。プロジェクトのブラウザーサポート要件に合わせて選択してください。

フォーマットデフォルト有効にする条件詳細
.woff2 常に有効 常に — 必須のウェブフォーマット WOFF2 →
.woff 任意 IE 11 のサポートが必要な場合 WOFF →
.ttf 任意 デスクトップアプリ、OS フォントのインストール TTF →
.svg 任意 デバッグ、レガシー iOS SVG Font →
.eot 任意 IE 6-8 のレガシーサポートのみ EOT →

WOFF2 は常に含まれます。これはウェブフォントに不可欠なフォーマットであり、ウェブフォントのエクスポートで WOFF2 を除外するシナリオは存在しません。その他のフォーマットはすべて、要件に応じてオプトインで追加します。

付属ファイル

フォントファイル本体に加えて、Bobcorn はインテグレーションとコラボレーションを容易にするいくつかの付属ファイルを生成できます。

CSS（icons.css）

@font-face 宣言とセット内のすべてのアイコンの .icon-* CSS クラスを含みます。このファイルをプロジェクトに追加するだけで、シンプルなクラス名でアイコンが使用できます。生成された CSS の仕組みについては CSS @font-face ガイドを参照してください。

JS（icons-symbol.js）

スクリプトが読み込まれるとすべてのアイコンをインライン SVG シンボルとして登録する SVG シンボルスプライトです。マルチカラーアイコンや SVG 特有の機能が必要な場合に、フォントアイコンと併用できます。使用パターンについては SVG Symbol ガイドを参照してください。

HTML（demo.html）

エクスポートされたすべてのアイコンを名前、CSS クラス名、Unicode コードポイントとともに表示するインタラクティブなプレビューページです。ブラウザーで開くと、アイコンセット全体を閲覧できます。アイコンライブラリを確認するデザイナーや、インテグレーション中にクラス名を調べる開発者に役立ちます。

ICP（project.icp）

Bobcorn のプロジェクトファイルです。チームメンバーとアイコンプロジェクトを共有したり、バックアップとして保存したりするためにエクスポートします。Bobcorn で ICP ファイルを開くと、エクスポート時の状態 — すべてのアイコン、グループ、メタデータ、設定 — が完全に復元されます。

ZIP パッケージング

ZIP オプションを有効にすると、エクスポートされたすべてのファイルを単一の .zip アーカイブにまとめられます。チームメンバーとアイコンフォントを共有したり、CDN にアップロードしたり、デザインのハンドオフ資料に添付したりする際に便利です。ZIP には通常のエクスポートと同じディレクトリ構造が含まれ、ネストや再編成はありません。

推奨設定

一般的なプロジェクトタイプ向けの3つの実用的なプリセットを紹介します。

モダンウェブプロジェクト

  • WOFF2（常に有効）+ CSS + HTML デモ
  • 最小のフットプリントで 97%+ のブラウザーをカバー

完全互換性プロジェクト

  • WOFF2 + WOFF + CSS + HTML デモ
  • IE 11+ およびすべてのモダンブラウザーをカバー

デザインシステム / コンポーネントライブラリ

  • WOFF2 + TTF + CSS + JS シンボル + HTML デモ + ICP
  • CSS 使用向けフォント、デスクトップツール向け TTF、マルチカラーバリアント向け JS シンボル、プロジェクトバックアップ向け ICP
ヒント
「モダンウェブプロジェクト」プリセット — WOFF2 + CSS から始めましょう。ブラウザーの利用統計やプラットフォームの要件で必要になったときだけ、追加のフォーマットを加えてください。余分なフォーマットはビルドサイズを増やしますが、すでに WOFF2 をサポートしているユーザーには何のメリットもありません。

出力ファイル構造

すべてのオプションを有効にした場合、Bobcorn は次のファイル構造を生成します。

エクスポート出力 
output/
├── MyIcons.woff2        # Font files
├── MyIcons.woff
├── MyIcons.ttf
├── MyIcons.css          # @font-face + icon classes
├── MyIcons-symbol.js    # SVG symbol sprite
├── demo.html            # Interactive preview
└── MyIcons.icp          # Project backup

フォントファミリー名（例：「MyIcons」）は Bobcorn のプロジェクト名から取得されます。生成されたすべてのファイルは、一貫性のためにこの名前をプレフィックスとして使用します。

エクスポート後の手順

Bobcorn がファイルを生成したら、以下の手順でアイコンフォントをプロジェクトに組み込みます。

  1. フォントファイル + CSS をコピーしてプロジェクトの assets または fonts ディレクトリに配置する
  2. HTML で CSS をリンクする: <link rel="stylesheet" href="MyIcons.css">
  3. マークアップ内でアイコンを使用する: <i class="icon icon-home"></i>
  4. 初回レンダリングを高速化するために WOFF2 ファイルをオプションでプリロードする

完全なインテグレーション例を以下に示します。

完全なインテグレーション例 
<head>
  <link rel="preload" href="MyIcons.woff2" as="font"
        type="font/woff2" crossorigin>
  <link rel="stylesheet" href="MyIcons.css">
</head>
<body>
  <button><i class="icon icon-save"></i> Save</button>
</body>

rel="preload" ヒントにより、ブラウザーは CSS 内の @font-face ルールに到達する前にフォントファイルのダウンロードを開始します。これにより CSS の解析とフォントのダウンロードの間の遅延がなくなり、アイコンが表示された状態での初回描画が高速化されます。フォントが同一オリジンであっても、crossorigin 属性はフォントのプリロードに必要です。

ヒント
生成された demo.html をブラウザーで開くと、エクスポートされたすべてのアイコンを閲覧できます。任意のアイコンをクリックすると CSS クラス名がコピーされます — 開発中に特定のアイコンのクラスを調べる際に重宝します。
Bobcorn での使用
エクスポートダイアログは最後に使用した設定を記憶します。フォーマット、付属ファイル、出力ディレクトリをプロジェクト用に設定すれば、以降のエクスポートはすべて1クリックで完了します。頻繁に反復する場合は、出力ディレクトリをプロジェクトの assets フォルダーに設定すると、摩擦ゼロで更新できます。