feb19.jp

Nobuhiro Takahashi
Designer / Engineer

UI デザインのための Sketch Plugin「Font Size Checker」を作りました

iOS / Android 標準フォントサイズ外の指定がされたテキストレイヤーがないかチェックする Sketch プラグイン「Font Size Checker」を作成しました。UI デザインのリファクタリングツールです。
操作ミス等でアートボードに想定外なフォントサイズのテキストレイヤーが混入されていないか検知できます。


例えばもしあなたが、 Android / iOS のドキュメントにできるだけ忠実にあろうとした場合に便利です。以下のページを参考にして定義しました。

Android Material Design / Typography
iOS Developer Center / Typography and Colos

ファイルの全テキストレイヤーフォントサイズをチェックし、標準フォントサイズ例として提示されている以外のものがあれば、そのレイヤー名とアートボード名を表示し、確認を促します。


「意図的なものでなく、操作ミス等で混入していないか」を確認するためにお使いください。

以下のコマンドがあります。

  • iOS ... iOS 基準でフォントサイズを調べます。11pt 以上でバリデートします。
  • Android Mobile ... Android モバイル基準でフォントサイズを調べます。
  • Android Desktop ... Android デスクトップ基準でフォントサイズを調べます。
  • Custom ... 自由なフォントサイズセットで調べます。カンマ区切りで調べます。自由なフォントサイズのセットを指定できるので、通常のデザインでも余計なフォントサイズのテキストレイヤーが混入していないかチェックできます。


なお、アートボード外のテキストレイヤーは無視されます。

厳密な UI デザイン行いたい際に、チェックツールの一つとしてこちらをご活用ください。

 

導入方法

1. git clone で導入する

GitHub - Font Size Checker
/Users/ユーザー名/Library/Application Support/com.bohemiancoding.sketch3 に clone してお使いください。

2. Sketch Toolbox で導入する

Sketch プラグインをワンクリックで導入できるプラグイン管理ツール「Sketch Toolbox」の検索フィールドで「Font Size Checker」と入力して Install ボタンで使えるようになります。

 

付録:iOS / Android のフォントサイズでどういうものが適切とされているか、その他 UI デザインに関して、公式ドキュメント等からの抜粋や目コピで研究している内容を下記にまとめています。随時更新していますので良かったらこちらもご覧ください:

Design: iOS UI Design 要点まとめ
Design: Android UI Design / Material Design 要点まとめ

Navigation

prev: iPhone / iPad 向けのクロマチックチューナーアプリ「Tuner」を作りました。
next: 会員登録フォームにセキュリティ脆弱性を産む UI デザイン美人局

Recently Entries