ブラウザ上でフォントを簡単にデザインして、実際にTTFファイルとして使うこともできる「Glyphr Studio」

目を引くポスターやウェブサイトを作る時に印象的なフォントは非常に重要な役割を果たしますが、自分好みのフォントはなかなか見つからず、かといって自分でフォントを作るのも大変。「Glyphr Studio」はGoogle Chromeに最適化されており、ブラウザ上で簡単にフォントがデザインできるという無料のウェブサービスで、作ったフォントはTTFファイルとしてダウンロードし利用することも可能になっています。

Glyphr Studio, the free HTML5 based font editor
http://www.glyphrstudio.com/

いくつかのフォントは以下から実際にデザインできるようになっています。

Glyphr Studio
http://glyphrstudio.com/sandbox/

フォント作成ページはこんな感じ。画面左側にメニュー、右側にデザインスペースがあります。

表示されているフォントをクリックすると、フォントが水色のラインで囲まれるので、これを変形させつつデザインを変えていきます。

文字の端を広げてみました。

デザインスペースの上部にはツールボタンが表示されています。例えば、フォント自体を変形させるだけではなく、要素をプラスすることも可能。

プラスした要素を移動させて……

さらに変形。

表示されているフォントを拡大・縮小することも可能です。

アーチや円など、アルファベット共通で使われている部分は、個別ではなく、一括で形を変化させていきます。ということで「edit this linked shape」をクリック。

以下のような画面が表示されるので、画面左から変更したいフォントのパーツをクリックして上記と同様に編集していきます。

なお、作ることができる文字は今のところ大文字のAと小文字のaからzまで。

文字の位置や高さなどは「NAVIGATE」にある「font settings」で調整すればOK。

「project settings」からそれぞれのプロジェクトに名前をつけて……

変更を保存。これで自分のPCにテキストファイルが保存されます。

フォントを再編集したい時は「open project」内にあるフィールドにテキストファイルをドラッグ＆ドロップすればOKです。

フォントはブラウザ上で実際に使ったり、作ったロゴなどをPNG形式で保存したりもできます。

作ったフォントは実際にTTFファイルに変換してPC上で使用することも可能なのですが、そのためにはまずTTXというコマンドラインツールをPC上で使えるようにする必要があります。GlyphrにはTTXの使い方も記載されていたので、実際に説明に従ってXMLファイルをTTFファイルに変換してみました。

Glyphr, the free HTML5 based font editor
http://www.glyphrstudio.com/ttx/

まず必要なのはPythonのインストールなので、Python公式サイトのダウンロードページに飛びます。

Download Python | Python.org
https://www.python.org/download

次は自分のPC環境にあったインストーラーをダウンロード。Windowsの場合、「Python 2.7.6 Windows Installer (Windows binary -- does not include source)」というリンクをクリックすると、必要なファイルのダウンロードが始まります。

インストーラーを起動。

「実行」をクリック。

「Next」をクリック。

ファイルのインストール先を選択し、「Next」をクリック。このフォルダーの場所は後に使用するのでメモしておきましょう。

さらに「Next」をクリックすると、インストールが始まります。

インストールが終了したら「Finish」をクリック。

次に、スタートメニューの「コンピューター」を右クリックして「プロパティ」を開きます。

「システムの詳細設定」をクリック。

「環境変数」をクリックします。

すると、「ユーザーの環境変数」と「システム環境変数」が表示されるので、「システム環境変数」にある「Path」を選択して「編集」をクリック。

現れたウィンドウの「変数値」の文字列の終わりにパスを区切るための記号「;」を入力。その後にPythonをインストールしたフォルダーの場所、今回だと「C:\Python27;」と入力します。このとき、変数値の欄に入っている他の内容を消さないように注意。完了したら、「OK」を押して変更を保存し、PCを再起動。

再起動後、スタートメニューの「プログラムとファイルの検索」からコマンドプロンプトを開きます。

真っ黒の背景に白地で「C:\Users\(各ユーザー名)>」と書いてあるので……

「>」の後ろに「python」と入力してEnterキーを押します。

以下のように「Type "help", "copyright", "credits" or "license" for more information.」という文字列まで出てくれば、Pythonのパスを通すのに成功したということなので、次に進めます。コマンド プロンプトはいったん閉じてOK。

続いて、以下のページから「Numerical Python v1.8.0 package」をダウンロード＆インストールします。

Numerical Python - Browse /NumPy/1.8.0 at SourceForge.net
http://sourceforge.net/projects/numpy/files/NumPy/1.8.0/

ここでも自分のPC環境にあったファイルを使用する必要があるので、Windowsの場合は「numpy-1.8.0-win32-superpack-python2.7.exe」を、Macの場合は「numpy-1.8.0-py2.7-python.org-macosx10.6.dmg」を選びます。今回はWindowsを使っているので、「numpy-1.8.0-win32-superpack-python2.7.exe」をクリックしてダウンロード開始。

ダウンロードしたインストーラーを起動。

「実行」をクリック。

「次へ」をクリック。

「次へ」をクリックします。

さらに「次へ」をクリックすると、インストールが開始。

終わったら「完了」をクリックします。

インストール後、Glyphrの説明ページにある「sourceforge.net/projects/fonttools/files/latest/download.」というリンクをクリックして、今度は「TTX/FontTools v2.4」をダウンロード。

ダウンロードしたファイルはTAR形式のアーカイブファイル(拡張子が.tar.gz)なので、ExplzhなどTAR形式に対応したソフトで解凍します。

今回はデスクトップに解凍しました。

次は、再度コマンド プロンプトを開きます。「C:\Users\(各ユーザー名)>」の後ろに「cd C:\Users\(ユーザー名)\Desktop\fonttools-2.4(解凍したフォルダーの場所)」と入力してEnterキーを押し……

行の左側が入力したフォルダーの場所になったことを確認して、「python setup.py install」と入力し、Enterキーを押します。

するとFontToolsのコンパイルが行われ、TTXを使う準備が完了。

Glyphr Studioの「export font」というメニューにある「Generate TTX XML File」をクリックして、作ったフォントのTTXファイルを保存します。

保存されたファイルはこんな感じ。

コマンドラインからTTXファイルを変換することもできますが、「fonttools-2.4」フォルダ内にある「Lib」フォルダをクリックし、その中にある「fontTools」に入っている「ttx.py」というファイルの上にダウンロードしたファイルをドラッグ＆ドロップしてもファイル変換が可能。

TTFファイルが完成。

コントロールパネルの「フォント」にTTFファイルを追加すれば、PC上でフォントを使用することが可能になるというわけです。

サービスはまだベータ版で全てのアルファベットがデザインできるというわけではありませんが、ブラウザ上で簡単に自分好みのフォントがデザインできるのはかなり便利。なお、ライセンスはGNU一般公衆ライセンスに準拠しています。