弊社サービス「リビンマッチ」のロゴでフォントを作ってみた

2024年に創立20周年を迎える弊社のサービスの1つである「不動産一括査定サイト リビンマッチ」のロゴでフォントを作ってみました。
「リビンマッチ」のカタカナ6文字はベクターデータが存在するので、これを使用してフォントを作成します。
![logo_charra_white.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/5db06ea9-bd9c-56b5-85b0-2a7bc3173524.png)
## フォント作成ツールの選択
フォントを作成するツールはいくつかありますが、オープンソースのツールとしてはFontForgeやBirdfont、商用のツールとしてはGlyphsやFontLabが有名です。今回は既存のベクターデータを取り込めるという理由でFontForgeを使用することにします。

https://birdfont.org/

https://www.fontlab.com/ja/

https://glyphsapp.com/

## FontForgeの特徴
FontForgeは、グリフ（文字や記号の形状）を作成、編集することができるツールで、ベクターグリフの作成、スケーリング、回転、アウトラインの編集、ノードの調整など、多くのフォントデザイン作業に対応しています。
### 1）多くのフォントフォーマットのサポート
さまざまなフォントフォーマット（TrueType, OpenType, PostScriptなど）をサポートしており、これらのフォーマット間でフォントを相互に変換することができます。
### 2）インポートとエクスポート
外部フォントをインポートしたり、自分の作成したフォントをエクスポートしたりすることができます。他のフォントデザインツールで作成したフォントをFontForgeで編集することも可能です。
### 3）スクリプト言語サポート
FontForgeはPythonスクリプトをサポートしており、スクリプトを使用することで自動化やカスタム処理を行うことができ、効率的な作業を可能にし、複雑なタスクを容易に処理する手段となります。
### 4）マルチプラットフォーム
Windows、Mac、Linuxなどのさまざまなオペレーティングシステムで利用可能で、無料でダウンロードして利用することができます。

## ステップ 1: 環境を整える
FontForgeのダウンロードは以下の公式サイトからおこなってください。
30日間無料体験が可能なので、一通り触ってみて必要であれば購入することをお勧めします。

https://fontforge.org/en-US/

日本語の解説はこちら。

https://fontforge.org/docs/old/ja/overview.html
## ステップ 2: 文字のデザイン
フォントのデザインはアルファベット、数字、記号など、フォントに含める文字セットを決定することが一般的です。今回は登録するベクターデータは存在するのでデザインは省きますが、登録する文字のベクターデータを1文字ずつのsvgファイルに分けて保存しておきます。

## ステップ 3: ベクターデータの取り込み
ソフトを起動すると「フォントを開く」ウィンドウが開くので、「新規」ボタンをクリックすると文字の一覧ウィンドウが開きます。
![newfile.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/b3148830-d336-d67b-6f75-0c322ef1df91.png)
![fontlist.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/0ab72431-a257-cce7-51d1-b5489978589e.png)
一覧ウィンドウが開いたら、①対応させるキーをダブルクリックで選択すると、更にウィンドウが開くので、②左上のファイル ＞ 取り込み を選択します。
![fontlist2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/06e58628-5002-0b46-01d1-d69b87199ad1.jpeg)
![svgファイルの取り込み.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/9e7b8efa-4220-1c3e-9c96-c61576991133.png)
③登録するファイルを選択して④取り込みをクリックします。
![読み込み2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/ce428958-93d6-33bc-ba8c-334037b164b1.png)
すると図のように対応させるキーに文字が表示されます。
![リ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/0f821ad4-4233-e7a5-caf0-a5916431d04c.png)
他のすべての文字についても同じ要領で登録します。
## ステップ 4: 文字セットの完成
すべての文字を登録し終えたら完成です。
今回は「リビンマッチ」の6文字のみにします。日本語のフォントはアルファベットに比べて必要な文字数が多く時間がかかります。
![リビンマッチ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/496b6789-7971-5e02-19ca-af65ad5f9373.png)
## ステップ 5: フォントの出力
最後に、フォントを実際に使用できる形式にエクスポートします。一般的な形式としては、TrueType（.ttf）やOpenType（.otf）があります。フォントデザインツールによっては、エクスポートオプションや設定項目が異なる場合があるので、適切な設定を行いましょう。
ファイル > フォントの出力を選択して任意の場所に保存します。
![フォントを出力.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/bb52abae-1789-b883-3dd0-2d3f958f33ec.png)
![truetype.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/e938b44b-1596-06cd-37d6-91c9a9d93da2.png)
フォントとして出力すると以下のようなフォントのアイコンが生成されるので、ダブルクリックしてインストールしてください。
![ttfファイル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/87b8a480-4d2b-666e-2286-1aa1dbd95a09.png)
## フォントのテスト
作成したフォントを実際にテストしてみましょう。テキストエディタなど入力した後で作成したフォントを選択して文字を表示してみます。
![コンポ 1_com.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/7b082b9f-e031-9e08-ac2e-f9bbc615ffac.gif)
これでロゴ画像を使わなくてもいろいろなドキュメントの文中に「リビンマッチ」というサービス入力することができるようになりました！！