UNIQLOフォントを作ってみる

この記事は、解説&ブログになっているので、フォントの作り方だけ知りたい人は文字の色の違うところだけ読んでください。ユニクロが「世界のユニクロ」となるべく佐藤可士和をディレクターに迎えて、NY店を皮切りに世界進出したのはほんの数年前の話です。その際に行われたいくつもの戦略のウチに、世界に向けた店のロゴのリメイクがありました。

そのロゴは俗にユニクロフォントと言われ、ネットの至るところで「あのフォントは何ですか?どこで手に入りますか?」など話題になっていたり。しかし、はっきりとした答えがあるものはありません。それもそのはず、元々は佐藤可士和?が作ったフォントなので一般には出回っていないようです。しかしレタリングした設計図と思しきものは発見できました。

今回はそれを元にいちからユニクロフォントをレタリングの要領で作っていこうという地道な肉体作業を皆さんに紹介しましょう。

このユニクロフォントですが、海外支店向けのフォントで制作されたもので使用されている赤は日本の日の丸を表しているそうです。今回つくったフォントを商業用に使っていいかは正直僕が訊きたいところです。どうなんでしょう?完全にいちからつくっているという点ではオリジナルですが、レタリングのアイデアは本家を参考にしているので…将来的にはフォント作成ソフトを使ってフォント形式で書き出して、クリエイティブ・コモンズで配布なんかしてみたいものです。今回は皆自分で作ってみてデジタルなレタリングの楽しさを実感しましょう。

それではここからが、ユニクロフォントの作り方です。作業は全てillustratorで行います(CS2以上推奨)。

  • 1.縦横比が3:2の四角を描く
  • 2.1.の四角を4行*6列の正方形で分割
  • 3.1.の四角の対角線を結ぶ
  • 4.2.の正方形2個分と4個分の直径を持つ円を2つずつ描く
  • 5.下図のように4つの円を配置したら土台となる設計図は完成です

あとはひたすらこの設計図に乗っ取って26個のアルファベットの必要な箇所を塗りつぶしていくだけです。といっても、これがなかなかめんどくさいですね。長方形ツールや楕円形ツールを複雑に使いパスファインダーで組み合わせるのはちょっと非効率的かもしれないです。そこでこんな時に登場するのは、便利なのに以外と知られてない可哀想な機能「ライブペイントツール」。CS2より登場したこのツールは、いわばペインターなどのお絵描きソフトをベクターデータでやっているようなものです。自動でパスで囲まれた範囲を検出してその範囲を塗り絵のように塗っていけるというもの。詳しい使い方はここでは割愛です。なお、ライブペイントツールを適応したオブジェクトはライブペイントのブレンドツールの時のように特殊なレイヤーに配分されます。なのでライブペイントツールを使用した後は必ずオブジェクトメニュー>分割・拡張でオブジェクトの拡張を行ってください。CS2以下のバージョンで完成データを扱う時は必ず行う必要があります。もう予想がついたかもしれませんが、要はこのライブペイントツールを使って設計図の必要な箇所を塗っていくというのがこのユニクロフォント作成のキモです。

では、UNIQLOの”U”の文字をはじめに作りましょう。”U”はレタリングの難易度でいうと超簡単なものです。”U”の作り方は…
  • 1.設計図全体を選択
  • 2.ライブペイントツール(K)で”U”の字の該当箇所をクリックしていく
  • 3.この時塗りの色は設計図の線の色と変えた方がいいでしょう
  • 4.該当箇所をすべて塗ったら、オブジェクトメニュー>分割・拡張でオブジェクトの拡張

ここまで終わったら一度ツールの設定を確認します。まずは自動選択ツール(Y)です。

自動選択ツールをダブルクリックして設定タブを表示させ、カラー(塗り)の許容値を念のため0に。次にパスファインダーのタブの右上のオプション設定から”パスファインダーオプション…”へ、そして余分なポイントを削除にチェックを入れます。これでパスファインダーの統合などによって無駄なアンカーポイントができるのを防ぎます。

精度に関しては必要に応じて変更を(僕は変えたことありませんが)。このふたつだけではありませんが、オプション設定は起動するたびに初期化されるので、その度に変更する必要があります。さらにワークスペースの保存でも適応外なんですね。見つけにくいうえに初期化されるという困った設定方法です。

ちなみに”パスファインダー”はCS4まで”パスファインダ”でした。CS5になって”ー”が追加されました。

ここまでくれば、あとはパスファインダーで統合してひとつの複合パスとするだけです。ライブペイントから拡張したものはグループ化されるので、自動選択ツールを使って文字の部分だけ選択して別の階層に持っていきます。それからパスファインダーで統合しましょう。できましたね!文字の塗る色を設計図の線の色と変えたのは文字だけを自動選択ツールで抽出する際につ都合がいいからです。許容値を0にしたのもそのためです。これは僕のワークフローでよくやることなので、独自の適した方法でも構わないです。

次回はこの方法でアルファベット全26文字を解説していきます。