ふきだま 使い方

フォントを指定する

文: 堂捺 餡
Twitter @Anne_Donut

ふきだしとテキストラベルでは、テキストのフォントを指定できます。

自分で調べて自分で入れます。

編集パネルの文字タブを開いてください。ここのフォント欄に フォント名を直に書きます。 使えるフォントは、端末にインストールされているフォント、または ふきだま で用意している Web フォント です。

なお、フォント名を指定しないとき、Windows では 游ゴシック、Mac と iOS ではヒラギノ角ゴシック、Android では Noto Sans Serif (和文) と Roboto (欧文) になると思います。

太さは最大 6 段階から選べますが、選べる太さはフォントによって異なります。通常は 2 (Regular) または 5 (Bold) と思っておくと、ガッカリしなくて済むでしょう。

Web フォントは、フォントを初めて使う時にフォントファイルをダウンロードしているため、編集パネルを閉じてから 反映されるまでに数秒の時間がかかることがあります。ご承知おきください。

フォント名の入力補助

すべてのフォント名を自分調べて入れるのは大変なので、2 つの入力補助を用意しました。フォントリストフォント名フィルター です。

フォントリスト

フォント欄の下にある 和文 または 欧文 のボタンを押すと、ふきだま で使える Web フォントと一部の OS 組み込みフォントのリストが表示されます。

リストの文字サンプルを見て、お気に召したフォントを選んでください。すると、フォント欄に自動で入ります。Web フォントを指定した場合、更新 で決定してからフォントファイルをダウンロードしています。このため、実際に文字に反映されるまでに数秒かかることがあります。

リストにないフォントでも、端末にインストールされていれば問題なく使えます。他に使いたいフォントがありましたら、ご自身でインストールしてそのフォント名を指定してください。

フォント名フィルター

フォント欄に入力していると、入力した文字に一致するフォント名が一覧で出てきます。たとえば、「明朝」と入れると、名前に「明朝」を含むフォントだけがピックアップされます。

Windows の Firefox のフォント名フィルターの例。

欧文フォントと和文フォントの組み合わせ

欧文フォントには、平仮名・片仮名・漢字がありません。この場合、適当なゴシックフォントで補われます。使いたい欧文フォントと、それに似合う和文フォントを一緒に使うには、Gabriola, うつくし明朝 のようにフォント欄に 2 つのフォントをカンマで区切って並べる方法が使えます。

(上) 欧文フォントを単独で指定したときの例。(下) 欧文フォント, 和文フォントと 2 つのフォント並べて指定したときの例。

この方法は欧文と和文の組み合わせだけでなく、平仮名や片仮名しかないフォントに漢字を合わせるときにも有用ですので、ぜひ活用してください。

使える Web フォント

ふきだま で使える Web フォントの説明と文字サンプルです。

M+ のようにフォント名がカッコで括られているフォントは、フォントリストに載っていないものです。これらのフォントを使いたいときは、フォント欄に直接フォント名を打ち込んでください。

なお、ふきだま の主力フォントである源暎フォントシリーズには、面白い外字がいろいろ定義されています。一覧から外字を選んでコピーするツール も用意しましたので、よろしければお使いください。

和文フォント

M+

M+ Mono

源暎エムゴ

源暎モノコード

欧文も固定幅。

源暎アンチック

漫画でよく使われるアンチック体。

遊べる外字が充実していて、 源暎フォント外字コピャー が活躍する。

源暎アンチック 詰

源暎アンチックのプロポーショナル版。

源暎ラテミン

ロゴたいぷゴシック

ロゴたいぷゴシック
コンデンスド

Rounded Mgen+

Rounded M+

Rounded-L M+

さつき源代明朝

しっぽり明朝

はんなり明朝

漢字は IPA 明朝。完全に IPA 明朝に戻すには、フォント名にIPA明朝を指定する。

こころ明朝体

漢字は IPAex 明朝。完全に IPAex 明朝に戻すには、フォント名にIPAex明朝を指定する。

うつくし明朝体

フロップデザイン 商用ライセンス

うつくし明朝体は漢字を持たないため、コプル明朝の漢字を合わせている。

コプル明朝

アプリ明朝 の派生フォント。アプリ明朝のグリフのサイズを 96% に縮小したもの。(ダウンロード)

源ノ明朝

源界明朝

フォントファイルが 10 MB と特大で、フォントが反映されるまで数秒かかる。

源暎Nuゴシック

ひらがな・カタカナ部分について源暎エムゴの前身であるフォント。

モボ

にくまるフォント

マメロン

マメロン Hi-Regular

花鳥風月

もとはジオシティーズで公開されていたようで、2020 年時点ではウェブアーカイブに残されているのみ。

あずきフォント

たぬき油性マジック

後継となる Yusei Magic が Google Fonts にて公開されている。しかし、オリジナルのほうが味わい深い。

黒薔薇シンデレラ

廻想体

廻想体ネクスト UP B

851ゴチカクット

キルゴUかなNA

GN's Side 独自ライセンス

キルゴUかなNB

GN's Side 独自ライセンス

かな NA よりひらがなの頂点の数が多く、可読性はやや高い。

きんいろサンセリフ

GN's Side 独自ライセンス

こはるいろサンレイ

GN's Side 独自ライセンス

PixelMplus

欧文フォント

Playfair Display

Zilla Slab

Josefin Sans

Tenor Sans

Dosis

Stardos Stencil

Gruppo

Gugi

Fredoka One

Peace Sans

Pinyon Script

Prida02Calt

文字の位置によって字形が変わる仕様 (Contextual Alternates) を持つが、これが有効なのは Firefox (Windows, Android) のみ。

GL-Morris

Srisakdi

Delius

Resphekt

Bilbo

The Eighteenth Amendment

Agreloy Almond

色つきフォント。しかし残念なことに、2020 年 4 月の時点では Windows と Android の Firefox でしか色が出ない。

Agreloy Asparagus

Agreloy Azure

Agreloy Turquoise

Agreloy

Agreloy Decor を上に重ねて遊ぶフォント。

Agreloy Decor

Agreloy の上に重ねて遊ぶフォント。

Agreloy と Agreloy Decor を重ねる

Agreloy と Agreloy Decor はそれぞれ単体でも面白いフォントですが、2 つを重ねて使うことが想定されています。下図のように、Agreloy フォントの文字と Agreloy Decor フォントの文字を置いて、同じ位置に重ねます。そうすると、ツートーンの文字が出来あがります。

Agreloy の 上に Agreloy Decor を重ねると、2 色文字ができる。

Agreloy Decor のほうにキャンバスとのコントラストの強い色を載せると、輪郭が明確になるのでおすすめです。

文字を重ねるときの位置の調整は、次の手順で行うのが簡単です。

  1. Agreloy の文字でキャンバス上の位置を決める。
  2. Agreloy の文字の編集パネルを開き、位置タブでXYの値を確認する。
  3. Agreloy Decor の文字の編集パネルを開き、同じ値を設定する。

また、製作元の Gluk FONTS には 自由に色をつける Web ツール があります。これを使って文字画像 (SVG 形式) を作るのも良いでしょう。この文字画像は、ふきだま で取り込めます。