【第3回】Glyphsで作る和文フォント〜拗促音を作ろう〜 #Glyphs #グリフス
こんにちは！タイプデザイナーの吉田です。 今回は前回使ったコンポーネントを利用して拗促音（「っゃゅ」など小書きの文字）を制作していきます！ 目次 拗促音の作成 コンポーネントの配置 背景レイヤー 分解後の調整 縦組み用グリフの作成 フィーチャーの設定 vertグリフの応用 拗促音の作成 拗促音も前回覚えたコンポーネントを使って制作します。（忘れてしまった方は前回の記事をどうぞ！） 今回は、前回使ったタブを開いたまま、続けて編集をしてみようと思います。 上の［テキストツール］を選択、または［T］を押すとテキスト入力モードに切り替わります。 テキストツールで何か文字を打ってみましょう。例えば、「きゃ」と打ってみます。 すると画面に「き・ゃ」が出現しました。 上の［選択ツール］で編集したいグリフをダブルクリックで選択すると、今まで通りグリフの中を編集することができます。 まずは「き」と、「ゃ」の親字である「や」を作成します。「や」もテキストツールで入力して追加で編集してみましょう。 コンポーネントの配置 続いて「ゃ」のグリフに移動して、前回の濁音と同じようにコンポーネントを配置します。 右クリックから［コンポーネントを追加］または［command+Shift+C］で、「ya-hira」のグリフを検索して選択します。 このままでは拗促音で使うにはサイズが大きすぎるので、サイズ比を調整します。この書体の場合は、縦横比をそれぞれ77%に変形しています。（拗促音の縮小率は、明朝体だと75〜80%が多いです。） 拗促音の場合は、親字をそのまま縮小しただけだと他の文字と比べて細く見えてしまいます。 （下のプレビューで確認すると太さの違いが分かりやすいかと思います。） なのでコンポーネントで配置した後、分解して太くしたりアウトラインの調整が必要です。 拗促音を作成した後に親字を修正すると、再びコピペして縮小して位置を調整して…などの作業がどうしても発生してしまうため、位置やサイズ比が決まったら分解する前に背景レイヤーにコンポーネントのまま複製しておきます。 背景レイヤー 少し話が逸れてしまいますが、私は作業でよく使う機能なので、背景レイヤーについて少し説明しようと思います。 背景レイヤーはメニューの［パス］→［背景レイヤーを編集］または［command+B］で切り替えることができます。 背景レイヤーはこのようにピンクで表示されます。 こちらに描画したアウトラインはフォントの出力時には含まれないので、修正前のバックアップやガイドラインなど、好きなように配置しておけます。もう一度［command+B］を入力すると、通常のレイヤーに戻ります。 縮小したコンポーネントを選択し、メニューの［パス］→［選択内容を背景レイヤーに複製］または［command+J］で背景レイヤーに複製できます。 背景レイヤーはメニューの［表示］→［背景レイヤーを表示］にチェックを入れると薄いグレーで常に表示されます。 これで背景レイヤーには常に、位置やスケールを調整した状態で最新の「や」のコンポーネントが存在することになるので、親字の「や」が修正された時は背景レイヤーから表のレイヤーにコピペすればスケールや位置の調整はする必要がなくなります。 分解後の調整 ここからさらに分解して太さなどの調整をします。 この作業は人によって進め方が違うと思うので、あくまで参考程度にお願いします。 コンポーネントを選択し、右クリックから［分解］を選択し、コンポーネントを解除し、パスの状態に戻します。 メニューの［フィルタ］→［パスをオフセット］で値を指定して太らせます。余分なパスや、折れてしまったパスはその後修正します。 ※この時パスの方向が正しい方向（反時計回り）になっていないとオフセットが逆に作用して細くなってしまうので注意が必要です。パスの方向については第1回の記事の「パスの描画」 をご覧ください。 これで拗促音の「ゃ」が完成しました！ 次は縦組み用の拗促音を作成します。 縦組み用グリフの作成 日本語の拗促音は、縦組みと横組みで位置が異なります。なので縦組み用のグリフを別に新しく生成します。 縦組み用のグリフには、グリフ名の末尾に［.vert］と追記します。 ［yasmall-hira］を編集している状態で、メニューの［グリフ］→［グリフを複製］を選択して複製を行います。 ［yasmall-hira.001］というグリフが生成されるので、名前を変更して［yasmall-hira.vert］としてください。（001→vert） 複製が終わったら、元から配置されていた「ゃ」のアウトラインを消してしまって、グリフの中が空の状態にします。 そしてこの中に元となる［yasmall-hira］のコンポーネントを配置（右クリックから［コンポーネントを追加］）したら、縦組み用に適した位置にコンポーネントを移動させます。 […]
【第2回】Glyphsで作る和文フォント〜とっても便利なコンポーネント〜 #Glyphs #グリフス
こんにちは！ タイプデザイナーの吉田です。 今回は濁音・半濁音や拗促音などを作成する場合に便利な「コンポーネント」という機能を中心に進めていこうと思います。よろしくお願いします！ 目次 コンポーネントとは 作ってみよう コンポーネントの配置 濁点の配置 半濁点の配置 コンポーネントの長所 コンポーネントとは まず簡単にコンポーネントとは一体何なのか、そして具体的にはどうやって使うのかを解説します。 コンポーネントとは同じアウトラインを複数のグリフで効率よく使い回すことのできる機能です。（Glyphs公式ハンドブック より引用） それだけ聞くと上級者向けの機能のようですが、誰でもお手軽に使える、和文フォントの制作には欠かせない機能です。 ではまず、そのコンポーネントを使う場面からご紹介したいと思います。 和文フォントで一番使う機会があるのは、濁音・半濁音のグリフを作る時だと思います。 第一回の記事は平仮名の「あ」を使って説明しましたが、次は濁音・半濁音のグリフを一緒に作っていきましょう！ 作ってみよう ではグリフ一覧のメニューから「は、ば、ぱ、voicedcomb-kana、semivoicedcomb-kana」を同時選択してcommand+Tまたはダブルクリックで開きます。 「voicedcomb-kana」は下の［発音記号］の区分の中に入っています。 ではまず「は」から制作します。 「は」を描画したら隣の「ば」のグリフをダブルクリックして選択します。 コンポーネントの配置 「ば」を制作する時、「は」のグリフからアウトラインをコピー&ペーストで制作を始めてもよいですが、今回はコンポーネントを使っていきます。 ［command+Shift+C］、または右クリックから［コンポーネントを追加］で、「ha-hira」のグリフを検索して選択します。 これで「ha-hira」の中に入っているアウトラインがコンポーネントとして配置できました。 コンポーネントとして配置されたアウトラインはこのようにグレーの塗りで表示されます。 濁点の配置 次は濁点の制作です。2つ隣の「voicedcomb-kana」をダブルクリックし、こちらに濁点の形をパスで描画します。 そしてもう一度「ば」の編集に戻り、先ほどの手順で「voicedcomb-kana」をコンポーネントとして配置します。 配置したコンポーネントは右や上にあるツールで、拡大縮小、回転、反転などの変形ができます。 さあこれで濁音のグリフを作成できました！ 半濁点の配置 同じ手順で半濁音のグリフも作成しましょう。ここで軽くツールの説明もしたいと思います。 半濁点[゜]は円を使うことが多いので、今回は図形の描画もご紹介します。 先ほど編集した「voicedcomb-kana」の隣の「semivoicedcomb-kana」をダブルクリックで選択します。楕円の描画は上のツールアイコンの左から5つ目を選択してください。長押しするとプルダウンが出てきて、多角形か楕円のどちらかを選択できます。 そのツールの状態で画面をクリックし、幅や高さを入力すると、楕円を描画できます。（またはShift+ドラッグで正円を描画） パスで作ったオグジェクトを選択するには、パス全体をドラッグで囲うか、輪郭の付近でダブルクリックします。 円を選択→［command+C］でコピー→［command+V］でその場にペーストします。 同じ位置に円を2つ描画できたら、2つ重なったうちの1つの円を選択して右のツールバーの［変形］を使って縮小します。 しかしこれだけでは黒い円の上に小さい円が重なっているだけになってしまっているので、前回説明した「パスの方向を逆転」を使って小さい円を反転させます。内側の円を選択して、 ［右クリック］→［選択パスの方向を逆転］ すると、下のプレビューで分かるように内側の円が反転した半濁点ができました。 そして「ば」と同じ手順で「pa-hira」にコンポーネントを配置すれば「ぱ」の完成です！ コンポーネントの長所 さて、今の段階ではアウトラインをコピー&ペーストしたのと同じ状況です。果たしてこの機能の何が便利なのか。それをこれから解説していこうと思います。 コンポーネントの機能が最大限発揮されるのは、ズバリ「コンポーネント元のグリフの形に変更があった時」です。フォントを作っていると、細かいデザインの修正を何度を行います。 例えばコンポーネントを使わずに「ぱ・ば」を作成した場合、元となる「は」のデザインを修正したらそれに追随する「ば・ぱ」も同じような修正をしなければいけません。 「は」を修正した後「ば・ぱ」にコピー&ペーストすれば済む話ですが、修正が加わる度にそれをするのはかなり手間になってしまいますし、もしコピー&ペーストを忘れてしまったら大変なことになってしまいます！ では実際にどのように便利なのかをご覧ください。 […]
【連載第1回】Glyphsで作る和文フォント〜最初の設定が肝心〜 #Glyphs #グリフス
はじめまして！4月からアドビで書体デザイナーとして入社した吉田大成と申します。 私は大学の卒業制作で「はくれい」という明朝体を作ったのですが、その時に「Glyphs」というドイツのグリフス社のフォント作成アプリを使っていました。全ウェイトを含めると5,000字を超えるフォントの制作にGlyphsは欠かせない存在で、はくれいはパス（輪郭線）の描画からフォントデータの出力まですべてこのソフトだけを使って制作しました。 これまで卒業制作の一環としてGlyphs自体をずっと研究していたのですが、フォントの制作と展示準備を並行しながら進めていて、なかなかその研究についてを文章にすることができていなかったので、一度その内容をしっかりまとめたいと考えて、この記事をブログに書こう！という思いにいたりました。 Twitterでつぶやいてみたところ 、うれしいことに「ぜひ読みたい」という反響もあって、 Adobe Typekit 公式ブログで連載することにしました。記事は、数回に分けてゆるく不定期に投稿するつもりですので、しばらくお付き合いください。 記事の中身は、基本的な作業プロセスから、あまり知られていない機能の紹介、アドビの和文フォントのGlyphsでの制作秘話まで、幅広い内容にしたいと思っています。 ただ、学生時代の経験をつづったものなので、自己流で知識の足りない面も多々ありますが、その点はご容赦ください。 学生時代に、私がこのようにしてフォントを作っていたという、Glyphsを使った制作事例のひとつとして読んでいただければと思います。すでにGlyphsを使ったことがある方にも、この記事がおさらいのきっかけになればと思います。 目次 Glyphsについて 和文フォントのための準備 グリフの追加 パスの描画 フォントの出力 Glyphsについて Glyphsの機能は非常に充実していて、学生からプロの書体デザイナーまで、広い範囲の人にとって使いやすいソフトだと言われています。インターフェースもすっきりとしたデザインで、フォント制作の初心者でも直感的に使えると思います。 Glyphsは、下記のリンクから購入できます。 https://glyphsapp.com/buy ちなみに「Glyphs Mini」という縮小版も購入することもできます。こちらはフルライセンス版と違って和文フォントは作成できないので、このブログ記事ではフルライセンス版の「Glyphs2」についておもに紹介します。 Glyphsの使用には、Macの10.9.5以降が必要で、Windowsバージョンはありません。 最初に、アプリケーションを立ち上げたら、［ファイル＞ 新規フォント］または［command+N］で、フォント作成メニューが表示されます。 和文フォントのための準備 まず、和文フォントとして出力するための設定から始めましょう。 画面左上の［ i ］のアイコンを選択、または［command+i］で情報パネルを表示します。 パネルの上部に［フォント、マスター、インスタンス、フィーチャー］などのタブがあります。 まず、開いたままの［フォント］の項目を入力していきます。 画面下部の［カスタムパラメータ］の［+］をクリックして画像のようにプロパティを選択し追加します。 ［glyphOrder］は、フォントを作る上で必要な［.notdef］と［space］を、フォントに収録される文字の先頭に来るように設定しています。 値は手入力で［.notdef（改行）space］と入力してください。 ［ROS］は、フォントに収録される文字を定義する項目で［Adobe-Identity-0］と設定することで、日本語環境に対応したフォントを作ることができます。 続いて隣の［マスター］のタブを選択してください。 ［メトリクス］のアセンダーを880に、ディセンダーを-120と入力してください。 こうすることでグリフが入る枠の高さが1000に設定されます。 最後に［その他の設定］の［コンポーネントの自動整列を解除］にチェックを入れて、情報パネルを閉じてください。 和文フォントは欧文フォントと構成が違う点があるので、少し手間がかかるのですが、最初にこのように設定をしておく必要があります。 楽しい文字作りのために、もう一息がんばりましょう！ グリフの追加 さあ、フォント情報の設定が終わったらいよいよ文字の制作です。この状態だとアルファベットしか入っていないので、この中に日本語のグリフを追加していきます。 左のメニューの［和文］を開いて［かな］を右クリックすると［足りないグリフ］が出てきます。［command+A］で全選択して［生成］をクリックします。すると右のグリフ一覧にひらがなカタカナがすべて追加されます。 グリフの生成は上のメニューの［Glyph］＞［グリフを追加］または［command＋shift＋G］で入力ウィンドウが出てくるので、そこに入力して指定のグリフ生成を行えます。 ・任意のグリフを追加したい場合（半角または全角スペースで区切って入力） 例: 「愛 東 国」→ 愛国東 が生成！ ・ある範囲を一括で追加したい場合（:半角コロンで区切って入力） […]
可愛らしくも妖しい「貂明朝」登場
貂明朝はアドビのチーフ・タイプ・デザイナー、西塚涼子のデザインによる新しいアドビオリジナルの和文書体です。この新書体がTypekit の書体ライブラリーに追加されました。Typekitの書体ライブラリーのフォントは、Web 用フォントとしても同期することでデスクトップフォントとしても利用可能で、Creative Cloud の有料プランにご登録の場合、追加料金なしでご利用いただけます。
Typekitなら必要なフォントを見つけるのが、もっと簡単に
この度、Typekitでフォントのビジュアルサーチをおこなえる新しい機能をリリースしました。これには、Adobe Senseiの機械学習を用いた知的機能が活用されています。
看板やポスターの写真、平面のアートワークなど、文字列を含む画像をアップロードすると、利用できるフォントの中から類似するフォントがすべてリストアップされます。
日本語4 社のフォントがTypekit で利用可能に
Typekit の書体ライプラリーに日本の4 社のフォントが追加されました。
Typekit はアドビのCreative Cloud のメンバーシップサービスのひとつで、Web と印刷用に数千の多様なフォントを提供しています。新たに、視覚デザイン研究所、字游工房、大日本印刷およびフォントワークスがTypekit のパートナーとな ることで、日本語書体のコレクションが大幅に拡張されました。
モリサワ、TypeBankフォントをTypekitに追加
日本の代表的なフォントベンダーであるモリサワから、10種類のTypeBankフォントが提供され、Typekitのサブスクリプションライブラリーに加わりました（Webおよびデスクトップ用）。2015年秋（英語）にTypekitの仲間入りしたモリサワおよびTypeBankフォントの、待望のアップデートです。
新しいオープンソースの Pan-CJK 書体、源ノ明朝 (Source Han Serif) のご紹介
2014 年に源ノ角ゴシック（Source Han Sans）をリリースしたとき、Pan-CJK 書体を日頃用いて仕事をしている人々の間に、大きな衝撃が走りました。今日、それと対をなす源ノ明朝（Source Han Serif）をご紹介できることを、とてもうれしく思います。
バリアブルフォント – 柔軟なデザインを可能にする新しい種類のフォント
ワルシャワで開催中のATypIカンファレンスにて、バリアブルフォントと呼ばれる新しいタイプのフォントが世界に紹介されました。Apple、Google、Microsoft、およびアドビが共同で開発したバリアブルフォントは、ジョン ハドソン（John Hudson）の言葉を借りれば「ひとつのファイルでありながら複数のフォントのように動作する」フォントです。ひとつのフォントファイルを使い、ファイルサイズを拡大することなくウェイト（太さ）や幅やその他の属性を無限に変更することができたらどうなるか、またデザインにおいてそれがどのような意味を持つかを想像してみてください。
日本のお客様へ。日本および東アジアのWebフォントへの対応と新しいフォント選択ツールに関するお知らせ。
4つのチームが、3つの大陸、5つの時間帯に分かれ、その長年の作業を終え、TypekitのWebフォントサービスが拡張され、日本語、中国語、および韓国語用のフォントにも対応しました。
Source Han Sansの紹介：オープンソースのPan-CJK書体
アドビは、Googleとのパートナーシップにもとづいて、Source Han Sansのリリースを発表しました。この書体は、新しいオープンソースのPan-CJK書体ファミリーであり、Typekitからフォントを入手してデスクトップで使用できます。Typekitアカウントをお持ちでない場合でも、セットアップは簡単におこなえ、無料ですぐにSource Han Sansフォントを使い始めることができます。オリジナルのソースファイルを使用したい方は、GitHubのダウンロードページから入手できます。