Sketchで文字詰めを簡単に適用できるプラグインを作りました。

以前、Sketchで文字詰めをする方法を記事にしました。確かに文字詰めはできるのですが、パネルを表示したりテキストを選択したりと、やや手順が面倒です。これがスクリプトで変更できることがわかったため、プラグインを作ってみました。

インストール

Sketch ToolBoxを使ってインストールするか、ZIPをダウンロード・伸張し、フォルダにある.sketchpluginファイルをダブルクリックしてインストールします。

使い方

テキストレイヤーを選択し、プラグインを実行します。プラグインのウィンドウが表示されたら項目を選び、OKボタンで適用できます。

ちなみにOSの言語設定が日本語以外だと、英語で表示されます。もちろん表示が異なるだけで、機能は同じです。

日本語であれば、「5: 代替プロポーショナル幅」もしくは「8: カーニングなし」のいずれかを使用しましょう。

TypographyパネルのText Spacingの項目と同等です(ただしフォントが持っていない機能も表示されます)。項目名の前にある数字は、キーボードの数字キーに対応しています。

フルキーボードアクセスを「すべてのコントロール」にしている場合は、上下の矢印キーで切り替えも可能です。

注意点

OpenTypeフォントの機能を使っているため、そもそもOpenTypeフォント以外では使えません(プラグイン自体は実行できます)。

また、OpenTypeフォントでも必要な字形や設定が含まれている必要があるため、フォントによって設定が反映されない場合があります。
例えば、macOS標準のヒラギノ角ゴシックとヒラギノ明朝でみてみると、「半角」は両方とも適用できますが、「代替プロポーショナル幅」は角ゴシックのみに適用できます。

適用できるかどうかを正確に知るには、Typographyパネルを表示して、Text Spacingの項目を表示してみてください。

  1. 「View → Show Fonts」でFontsパネルを表示する
  2. Fontsパネルの歯車アイコンから「Typography…(タイポグラフィ…)」を選択する
  3. 「Text Spacing(文字間隔)」を展開する
  4. テキストレイヤーの内容を選択すると適用できる内容が表示される

OSにバンドルされている、ヒラギノ角ゴシックProNとヒラギノ明朝ProNの比較。ヒラギノ角ゴシックProNは使える項目が多い。ちなみに項目が最後まで表示されず切れているのですが、私だけですかね、コレ。

蛇足

「Sketchではカーニングが効かない」と言われていますが、これは間違いです。日本語でもフォントにペアカーニング情報が含まれていれば、きちんとカーニングされます。

Noto Sans CJK JP Mediumを使った例。上がカーニングを無効、下がカーニングを有効にした状態。差は小さいものの、カーニングの有無で幅が変わっている。

憶測ではありますが、この誤解が広まった原因は、モリサワフォントがペアカーニング情報を持っていなかったためでしょう。ちなみに、新しく配信されるフォントには情報が含まれています。

このプラグインで利用を推奨した「5: 代替プロポーショナル幅」を適用した場合、フォントに設定されているプロポーショナル情報を基に、文字前後のスペースを詰めるもので、ただ単に「カーニング」しているのではありません。そしてプロポーショナル幅を有効にすると、OpenType Feature tagsの仕様により自動的にペアカーニングも有効になります。
[2017/1/10 23:45追記]「代替プロポーショナル幅(palt)」を有効にした場合は、「カーニング(kern)」は必須ではない(自動的に有効にならない)とご指摘いただきましたので、訂正します(ご指摘ありがとうございました)。仕様をきちんと読めてなかったのと、「kernを有効にしたらpaltは必須」というのをなぜか逆に捉えてしまっておりました、申し訳ありません。[追記おわり]

また、「1: プロポーショナル幅」も「プロポーショナル幅」となっていますが、こちらは文字自体をプロポーショナルなものに切り替えます。簡単にいうと、Illustrator等で使える異体字があると思いますが、プロポーショナルの異体字を使っている状態です。

ほかの全角・半角など「代替」と付かないものも異体字を使っており、例えば全角の文字列に「半角」を適用して見た目を半角のテキストにしていても、テキスト自体をエディタへコピー & ペーストすると、半角ではなく元の文字列がペーストされると思います。(厳密にいうと違うところもあるので、鵜呑みにはしないでください)

そして「文字は全て詰めろ!」という方は、ぜひ次の記事をご覧になってください。「Illustrator」とありますが、実はそれほど関係なく、文字を扱う上での基礎知識が詰まっている記事です。

また、前述の勉強会で講師をされていた大石さんのブログでも、文字の扱いについてたくさんの知見が詰まっているので、こちらも参考にしてみてください。

ご指摘等ありましたら、@littlebustersまたはFacebookページまでお知らせください。

tags