どんなフォントにも対応できるステンシル風加工のやり方と考え方

先日twitterであるデザイナーさんから「TOPページのメインビジュアルに使っているフォントを教えてください！」というDMをいただきました。

しかしこのフォントは既存のフォントをそのまま使っているわけではなく、「Rokkitt」というフォントをステンシル風に加工したものなんです。

フリーランスデザイナーになる前はDIY関係の会社でインハウスデザイナーをしていたので、思えばよくいろんなフォントをステンシル風に加工してきました。

けっこう需要がありそうなので今回のブログでは、Adobeのグラフィックソフト「illustrator（イラストレーター）」を使って既存フォントをステンシル風にする加工のやり方と加工するときの考え方を紹介しようと思います。

そもそもステンシルとは？

まずは「ステンシル」というものを説明します。
ステンシルとは型をつかって文字やイラストをいろんなものにプリントするための技法のことです。主にDIYや塗装などでよく用いられます。

金属やビニールのプレートを使ってフォントやイラストの「型」をつくり、その型にスプレーやインクなどの塗料を吹きかけてプリントします。なのでまずはプレートをフォントのディティールでくり抜いた型をつくらなければいけません。そうなってくると、フォントをそのまま使ってしまうとどうしても型がつくれない（くり抜けない）部分が出てきます。それが文字の「空洞」の部分です。

英字の場合は「O」や「Q」のような輪になっている文字や「D」、「P」、「B」、「A」、「R」といった文字に空間があるものはそのままくり抜くとこのような表現になります。

これはこれでいい感じになる場合もあるのですが、文字のディティールをもっとハッキリとさせたい場合は、こうならないために空洞のある文字はステンシル用に加工しなければいけません。

どこを切り抜くのか？を考える

まずは先ほど挙げた空洞のある文字（この表現が正しいのかはわかりませんが 笑）をステンシル加工していきましょう。illustratorを開き、ステンシルしたいフォントを選びます。今回は例としてゴシック体の「FUTURA（フーツラ）」というフォントを選び、空洞のある文字「O」「P」「A」を打ちます。

たまたまピックアップしただけですが、商業モール「OPA（オーパ）」になってますね・・気にせずいきましょう（笑）。

文字の上に線を引く

文字をアウトライン化してテキストからベクターデータに変換したあと、ステンシル加工するために文字の上に線を引きます。引くラインのコツとしては文字のディティールに沿って引くとやりやすいです。

切り抜く線の太さは好みでいいと思います。ボクの場合はよくフォントの太さに合わせることが多いです。

線もアウトライン化して文字と一緒に分割

この線も文字と同じくアウトライン化し、文字を一緒に選択してパスファインダで分割します。

パスファインダでの分割方法は、分割したい複数のオブジェクトを選択後、パスファインダパネルの左下のアイコンをクリックすると分割できます。

分割後はくり抜く部分以外を削除して完成

分割後、不要な部分は削除してステンシル風フォントの完成です。

この流れで「O」「P」「A」以外の空洞のある文字をステンシル風に加工していきます。

すべての文字をステンシル化して統一感を出す

プレートにフォントの型をつくるためにやることがメインなので、ステンシルをする目的だけならこれで特に問題はないのですが、グラフィックとして使用する場合、空洞のある文字だけではちょっと物足りないですね。

「A」から「Z」までのすべてのアルファベットをステンシル加工したほうがよりフォントに統一感を出すことができ、全体的なクオリティの向上にもつながります。

ゴシック体フォントの場合、「I」や「J」といった加工のしようがない文字は加工せずそのままで問題なしです。英字を使うときは数字も一緒に使うことがよくあるので、「0」から「9」までの数字もやっておくと後々便利です。

これができれば応用でオリジナリティを出せる

ここまでが従来のステンシル加工のやり方です。
これができるようになればよりオリジナリティのある表現ができます。

例えば文字によって引く線をアレンジします。
「O」のラインを横に引いてみたり、「P」の片方だけに引いてみたり、2本線を引いてみたり・・。ボクのメインビジュアルに使っているフォントもステンシルを少しアレンジして遊び心を加えています。

アレンジすることで従来のステンシルフォントよりアーティスティックな印象を与えることができますね。いろんな方法を試して自分なりのオリジナリティを出してみてもいいと思います。自由に楽しんでみてください。

ひらがなや漢字でもできます

今までは英字でのステンシル加工のやり方を紹介しましたが、もちろんひらがなや漢字といった日本語でも可能です。

特に漢字は空洞の部分が多いのでステンシルのしがいがあると思います。日本語の場合は英字よりも複雑になりがちなので、タイトルの文字だけにするとかでいいと思います。それだけでも通常の文字とは違う印象を与えることができます。

ということで、いろんなフォントをステンシル加工できる方法と考え方を紹介しました。
ステンシル風フォントを使いたい人は、ぜひチャレンジしてみてください。