フォントセレクター

Fabrie · 機能デザイン事例

01 課題設定

ムードボードで初期の着想を探るときや、スライド、企画書を作るときなど、レイアウトとタイポグラフィが重要な場面では、ひとつのデフォルトフォントだけでは十分ではありません。

オンラインホワイトボードを複雑なプロ向けツールにせず、デザインをより正確かつ明確に表現できる多様なフォントが必要でした。

Miro、Keynote、Figma、Illustrator、Photoshopなどを調査し、フォントセレクターの機能を「基本」「高度」「プロ向け」の3種類に分類しました。

基本機能は多くの場合必須ですが、高度な機能やプロ向け機能は利用場面によって異なります。

Miroのようなオンラインホワイトボードでは、通常はウェイトを変更できず、太字だけが用意されています。一方、Photoshop、Illustrator、Figmaなどの専門ツールでは、ウェイトや複雑な組版機能を利用できます。

Fabrieはホワイトボードと専門的なデザインツールの中間にあります。専門的な組版機能は複雑すぎますが、太字、最近使ったフォント、ウェイト選択を提供すべきか検討する必要がありました。

中心となった論点は、「ウェイト選択」を含めるかどうかでした。

利点：

一方で、重要な欠点もありました。

ウェイト操作を増やさず表現の幅を補うため、豊富なデフォルトフォントを用意しました。

一部のフォントでは細字や太字を「標準」として登録し、UIをシンプルに保ちながらスタイルの幅を広げました。

「最近使ったフォント」はユーザーにも実装にも扱いやすいため、迷わず採用しました。

専門ツールではないオンラインホワイトボードでは、選択肢が多すぎると迷いにつながります。多くのスタイルと用途をカバーする一組があれば十分です。

WebベースのFabrieはユーザーのローカルフォントへアクセスできず、表示時にはキャッシュにないフォントを読み込む必要があります。

待ち時間と技術的負荷を抑えるため、フォント数を制限する必要もありました。

最終的にFabrie.cnでは中国語10書体と欧文10書体、Fabrie.comでは欧文20書体を提供しました。実際の利用場面をカバーできる最小構成だと考えています。

Fabrie.cnを例に、次の基準で選定しました。

リリース後、各フォントの利用率は非常に均衡していました。

選定した構成が機能し、過剰な操作に迷うことなく、ユーザーが積極的に文字表現を使っていることを示しています。

Fabrieの「デフォルトフォント」には、UIのフォントとホワイトボード上のテキストボックスのフォントという2つの問題がありました。

国際化にあたりTT Interfaceをブランド書体に選び、Fabrie.comのUIにも採用することを検討しました。

しかし周囲のアイコンと揃わず、TT Interfaceのベースラインが中国語フォントより大幅に高いことが分かりました。

そこでFontLabでTT Interfaceを編集し、PingFangのベースラインに合わせて調整しました。

当初はシステムフォントとしてMacのPingFangとWindowsのMicrosoft YaHeiを使っていましたが、文字幅と間隔が異なります。

Microsoft YaHeiはPingFangより早く改行され、広い領域を使います。UIではレスポンシブレイアウトが差を吸収できました。

ホワイトボードでは、文字はユーザーが調整したボックス内にあります。同じ文書を別のOSで開くと、フォント差によってレイアウトや改行が変わります。

社内PCがすべてMacだったため発見が遅れ、後からデフォルトをクロスプラットフォームのSource Han Sansへ変更しました。

ただし既存文書にはPingFang／Microsoft YaHeiが保存済みで、変更すると過去のレイアウトが崩れます。そのため3書体を残し、UI上ではPingFangとMicrosoft YaHeiを「システムフォント」と表示しました。