トップ/プロダクト一覧/日本語のフリーフォントをまとめてためせる：ためしがき

日本語のフリーフォントをまとめてためせる：ためしがき

商用利用可能な日本語のフリーフォントが好きな文字・文章でまとめて試せるWebサービスです。ログイン不要で、試したフォントをそのままSNS等にシェアすることも出来ます。縦書きにも対応しており、ボタンひとつで切り替える事が出来ます。
 
https://tameshigaki.jp/
 
お好きな文字・文章を入力していただくと、
いろんなフォントをまとめて試せます
いろんなフォントをまとめて試せます
色んなフォントでの見た目をまとめて確認することが出来るサイトです。
 
サイトで使っているフォントは商用利用可能なフリーフォントとなっており、フォントをタップすると表示される画面から、配布先のサイトに遷移することが出来ます。
フォントを試してシェアするところ
フォントを試してシェアするところ
また、フォントをシェアするボタンを押してから、Twitterやfacebookでシェアすると
こんな感じで入力した文字とフォントのプレビューがされます。
SNS認証なども無いので気軽につぶやいてみてください！

技術的な話

基本的にフロントエンドの技術のみで作っています。
ざっくり図にするとこんな感じです。
 
「ためしがき」のシステム構成図
「ためしがき」のシステム構成図

アピールポイント

Firebaseで認証からDB、Functionsを使ってシェア時のSSRを行っており、Hostingもしています。Firebase最高！また、Nuxt.jsで開発したサイトをSSG機能を使って静的サイト化しています。
フォントファイルはそのまま使うと容量が大きいため、WOFF2形式にしつつ第一水準の漢字までにサブセット化してからContentfulで管理しています。
初期はFirebase Storageにシェア画像を保存していましたが、アップロードに時間がかかるためimgurに置き換えてシェア速度を向上しました。その際画像の生成はサーバー側で行うと時間がかかるため、クライアント側でhtml2canvasというライブラリを使って生成し保存しています。

フォントのシェア機能

  1. 画像の生成はhtml2canvas
  1. Firebase Authで匿名認証
  1. Imgurに画像をアップロード
  1. Firebase firestoreに認証した権限を使って画像パスを書き込み
  1. Firebase functionsを使ってDBを読み取りOGP表示用HTMLを生成
  1. アクセスがあったらTOPにリダイレクト
大体全部Firebaseを使ってどうにかしています！Firebase最高！
 
 
デザイナーさん、ブロガーさん、漫画家さんなど幅広い方々にご利用いただき、ローンチ時には各メディアに取り上げていただきTwitterトレンドにも入りました。現在サイトを買収してくださる企業様も募集していますのでお気軽にお問い合わせください！
Xでポスト