シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > 筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
注目記事ピックアップ
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
share0
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
share0
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
share0
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
share0
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
share0
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
share0
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
share0
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
share0
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
share0
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
share0
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2017/03/28 19:40

筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!

calligraphr-01
どうも、まさとらん(@0310lan)です!

今回は、紙に書いた自分の文字を、Webフォントに自動生成してくれるサービスのご紹介です!

すでに類似のサービスがいくつかありますが、今回ご紹介するサービスは「手書き」をリアルに再現するために、自然な文字のバラつきを表現できるのが特徴です!

【 Calligraphr 】
calligraphr-02

基本的な始め方!

それでは、実際に「Calligraphr」を使いながら、どのようなサービスなのかを詳しく見ていきましょう!


まず最初に、サイトへアクセスして「GET STARTED FREE」ボタンをクリックします。
calligraphr-03

ユーザー登録を行うために、「メールアドレス」「パスワード」を入力しましょう!
calligraphr-04 登録したメールアドレス宛に、「認証URL」が送られてくるので、それをクリックすれば完了です!

これで準備完了なので、早速「自作Webフォント」の制作に挑戦しましょう!


「フォント」を手書きしよう!

「Calligraphr」は、紙に書いた自分の筆跡を元にして、オリジナルのフォントを作成することができます。
そのため、まずはテンプレートを印刷し、そこへ文字を手書きしていきたいと思います。

今回は、最も簡単な「英数字」だけのフォントを試しに作っていきましょう!


ユーザー登録後に表示される自分用の「管理画面」を開きます。
calligraphr-05

左側メニューから「英語」と「数字」を選択しましょう。
calligraphr-06 全部で「64文字が」選択されていますね。


次に、画面上部にある「① Download Template」ボタンをクリックし、「② PDF」を選択したら「③ DOWNLOAD」ボタンをクリックしましょう!
calligraphr-07

すると、「手書き」用のテンプレートPDFを取得することができます!
calligraphr-08

あとは、このPDFを印刷して、指示通りに「英数字」を手書きしていけばOKです!
calligraphr-09 (今回の64文字の場合だと、用紙が2枚になると思います)


「フォント」を登録しよう!

手書きが終わったら、今度はスマホやデジカメで用紙を撮影しましょう!


その時、四隅にある「四角形」のマークが写るように撮影するのを忘れないように!
calligraphr-10
(今回はiPhone5で撮影しました…)


そして、メニューの「MY FONTS」から、「Upload Template」タブをクリックします。
calligraphr-11

先ほど撮影した「写真ファイル」をアップロードしましょう。
calligraphr-12 今回の場合「2枚」撮影したので、ファイルを2つとも一緒に指定します。


すると、写真が自動解析されて取り込まれるので、画面下段にあるボタンをクリック!
calligraphr-13

これで、見事に自分の筆跡を元にした「フォント」が登録されました!
calligraphr-14

「フォント」を編集しよう!

無事に自作フォントが登録されたので、このままでも問題ないのですが、もし文字のデザインが気に入らなかった場合は、専用の「フォントエディタ」で調整することも可能です!


例えば、「A」という文字が気に入らなかったら、そこをクリックします。
calligraphr-15

「A」の詳細画面が表示されるので、「EDIT CHARACTER」をクリック!
calligraphr-16

すると、エディタが表示されるので、そのまま「お絵描きアプリ」のようにマウスで線を描けるようになります。
calligraphr-17

また、「ADJUST BASELINE」をクリックすると…
calligraphr-18

文字の「高さ」や、「サイズ」の調整などが行えるエディタが起動します。
calligraphr-19 他の文字とのバランスを調整するのに便利でしょう。

大抵の場合は「デフォルト」状態でも問題ないと思いますが、もし気になるようであればこれらのツールを使いながら、自分好みに調整してみてください!


「フォント」を使ってみよう!

それでは、登録した自分のフォントを、実際にWebページで利用してみましょう!


メニューの「① Build Font」タブを選択し、好きな「② フォント名」を入力して「③ BUILD」ボタンをクリックします。
calligraphr-20

すると自動的に「フォントファイル」が生成されて、サンプルテキストが表示されるので、何か適当な文章を入力してみましょう!
calligraphr-21

実際に入力して問題なければ、「フォントファイル」をクリックしてダウンロードしましょう!
calligraphr-22 これで、PCに「myfont.ttf」というファイルが取得できたはず!

そして、同じディレクトリにHTMLファイルの「index.html」を作ります。
あとは、CSSの「@font-face」を使って、自作フォントを適用してみましょう!


次のサンプルは、フォントを適用して「h1タグ」を入力可能な状態にする例です。


こんな感じで、自作フォントが使えます!
calligraphr-23


筆跡に変化を付けてみよう!

ここまでの内容で、自作フォントを作ってWebで利用することが出来るようになりました。

「Calligraphr」では、さらに面白い機能として「手書き」をリアルに再現するため、「フォントの筆跡」に変化を付けられるようになっています。
これは、1つの文字に複数の「文字パターン」を適用することで実現されている機能で、利用するには次の2つの方法のどちらかを使います。


1つ目は、テンプレートをさらに印刷して複数枚手書きし、もう一度メニューの「① Upload」から「② 写真ファイル」を追加する方法です。
calligraphr-24 ファイルをアップロードすると、同じ文字は自動的に認識されて整理されます。


フォント登録時に「Create variants」にチェックが入っていることを確認してください。
calligraphr-25

2つ目の方法は、登録された文字を選択して「COPY CHARACTER」をクリックする方法です。
calligraphr-26

そして、マウスで違ったパターンの文字を自分で変更&修正します。
calligraphr-27 そうすると、複数の文字を追加することが出来るようになります。

このように方法は2通りありますが、恐らく1つ目の方法が簡単で手っ取り早いでしょう。


無料プランでは、1つの文字につき3つまで違うパターンの文字を追加することが可能で、3つ追加すれば文字の上部に「3」という数字が表示されます。
calligraphr-28 複数パターンの文字が追加できたら、あとは先ほどと同じやり方でWebサイトなどに利用することができます。


「複数パターン」の「あり・なし」で違いは一目瞭然でしょう!
calligraphr-29 上の例だと、「p」のように同じ文字が連続した時に「手書き」らしい自然なバラつきが上手く表現されているのが分かります。


実際に、入力しているところをGIFにしたので、ぜひ確認してみてください!
calligraphr-30


まとめ

今回ご紹介した「Calligraphr」は、すべて無料で利用できますが、「無料プラン」は作成できるフォントの文字数に制限があるので、まずは英数字だけでトライしてみるのが良いでしょう。

例えば、自分の筆跡によるプログラミングなどをしてみるのも面白いのではないでしょうか。

ぜひ、みなさんも自分だけのオリジナルフォントを自作してみてください!


<参考>
「Calligraphr」公式サイト

公式チュートリアル



written by まさとらん(@0310lan

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る