本文へスキップ
HELLO!
HIGASHIYUKI®.COM
0   /   100

G®yph

書体を知る、調べる、観察する、比べる、触る、実装する。書体の魅力と表現の可能性を、Webブラウザで自由に楽しく体験する。「Gryph - グリフ」Designed and Developed by HIGASHIYUKI®

SCROLL DOWN

仕事にも学びにも遊びにも使える、書体にまつわるハイパーキュレーションウェブアプリケーション。

書体を知る、調べる、観察する、比べる、触る、実装する。G®yph(グリフ)は、書体選びにまつわるこれらの行為を1ページで行えるWebアプリケーションです。

扱えるのは、Google Fontsの1,813書体(うち和文68書体)だけではありません。パソコンに入っているローカルフォントや手元のフォントファイルも読み込み、Google Fontsと同じ画面・同じ操作で、並べて見比べ、触ることができます。

自分で打った言葉を大きく表示し、書体名にカーソルを乗せるだけで、文字はWebGLのトランジションで次の書体へと形を変えます。

「並べ見る」で書体を一覧で見比べ、「Info」で書体の来歴や文字展開を調べ、「Effects」ではフォントファイルから読み出した本物の輪郭をつまんで伸ばしたり、17種類の変形とエフェクトで崩したりできます。

Google Fontsの書体は「+Web <>」から、そのままWebに実装するためのコードを取り出せます。

仕事にも学びにも遊びにも使えるよう、UIは最小限まで削り、主役である文字の美しさだけが残るように設計しました。

Google Fontsと、手元の書体を、同じ画面で。

書体選びの現場では、Webで使える書体と、パソコンに入っている書体(OS標準の書体や、購入してインストールした書体)を行き来しながら比べることがよくあります。G®yphは、誰が見ても同じGoogle Fontsの一覧から始まり、ボタンひとつで、そのパソコンの書体を同じ一覧に加えます。

  • 読み込む:上のバーの「ローカルフォント」を押して許可すると、パソコンに入っている書体を一覧に加えます(Chrome/Edge/Local Font Access APIを使用)。フォントファイル(.otf/.ttf/.woff/.woff2)は、画面にドロップするだけで加わります
  • 同じ操作で:ホバーでのプレビューとトランジション、ウェイトの切り替え、大きさと字間、「並べ見る」での一覧、「付箋」、Effectsの変形とエフェクト、SVG・PNGの書き出しまで、Google Fontsの書体と同じ操作で使えます(書体の情報とWeb用のコードは、Google Fontsの書体のみ)
  • 分けても、混ぜても:読み込んだあとは「Google/ローカル」の切り替えで、出どころごとにも、混ぜたままでも見比べられます。Google Fontsと同じ名前の書体は、重ねて並べません。
  • 手元の書体:書体のファイルはブラウザの中だけで扱い、どこにも送信も保存もしません。付箋には書体の出どころも記録し、読み込んでいないときは読み込むためのボタンを添え、別の端末では「この端末に見つかりません」と知らせます。

G®yph - システム要件

推奨ブラウザ
Google Chrome/Microsoft Edgeの最新版G®yphのパソコンに入っている書体を読み込む「ローカルフォント」機能は、Chrome/Edgeのみ対応しています(はじめて使うときに、フォントへのアクセスの許可を求められます)。フォントファイルのドロップは、どのブラウザでも使えます。JavaScriptを有効にしてください。書体の切り替えにWebGL2を使うため、ハードウェアアクセラレーションも有効のままでご覧ください。
対応ブラウザ
Chrome / Chrome for Android / Edge / Safari / iOS SafariG®yphのご利用は、可能な限り最新バージョンのブラウザをご利用ください。モバイルデバイスの場合は、iOSバージョン16以上/AndroidOSバージョン7以上を目安としてください。対応ブラウザ以外のご利用では、グラフィックの描画やインタラクションが正しく機能しない場合があります。
ブラウザの設定
CPU6コア以上/RAM8GB以上/独立したGPU搭載のコンピューター、またはiPhone 12以降のProシリーズ端末、Snapdragon 700以上/RAM4GB以上のAndroid端末 G®yphは、WebGL 2対応ブラウザが必要です。端末のGPU性能やメモリ使用状況によって、動作速度が異なる場合があります。

G®yphで使用・読み込み可能なフォントは、各フォントのライセンスおよび利用規約に準拠してご利用ください。
G®yphへのフォントファイルの読み込みによって、フォント自体の利用許諾が与えられるものではありません。外部から読み込むフォント(.otf/.ttf/.woff/.woff2等)については、各フォントのライセンス条件をあらかじめご確認ください。

G®yphは、フォントの変形・加工・アニメーションなどの処理に加え、WebGLを使用した描画処理を行います。端末のCPU/GPU性能、メモリ容量、ブラウザの実装などによって、描画速度や操作レスポンスに差が生じる場合があります。
スペックの低いまたは古い端末では、フレームレートの低下、画面のカクつき、操作時の遅延などが発生する場合があります。

G®yphを快適にご利用いただくため、PCではCPU 6コア以上/RAM 8GB以上/独立GPU搭載、iPhoneではiPhone 12 Pro以降、AndroidではSnapdragon 700シリーズ以上/RAM 4GB以上を推奨しています。
また、WebGL 2に対応したブラウザが必要です。

G®yphをスマートフォンやタブレットでご利用の場合、バッテリー・熱制限がある機器では、長時間利用時に性能が落ち、フレームレートの低下や操作フィードバックの遅延などが生じる可能性があります。また、描画処理によってバッテリーの消費が早くなったり、端末が熱を持つ場合がありますが、これらは端末の仕様による正常な挙動です。長時間または高負荷な処理を行う場合は、デスクトップ・ラップトップパソコンでのご利用を推奨します。

G®yphでは、選択したフォントやエフェクト、文字数、描画内容などによって処理負荷が変化します。特に複雑な変形やアニメーションを使用した場合、端末によっては描画負荷が高くなる場合があります。
動作が重い場合は、エフェクトの種類や設定、文字数などを変更することでレスポンスが向上する場合があります。

G®yphに外部から読み込んだフォントファイルは、ユーザー自身が利用権限を有するフォントをご使用ください。
フォントファイルの無断配布、共有、再配布その他、各フォントのライセンスに反する利用は禁止されています。

G®yphはアカウント登録など不要でどなたでも無料でご利用いただけます。

G®yphは定期的にアップデートを行い、新しいフォントやエフェクトを追加するほか、ブラッシュアップや仕様変更、一部機能の削除を行う場合があります。

*G®yphのご利用に際し、当方の定める利用規約*の一部が適用されます。

G®yphを使ってみましょう。

文字を知り、選び、動かし、変形させる。G®yphは、フォントを自在に操り、静的な文字を動きのある表現へと変えていきます。直感的な操作で、文字の新しい可能性を今すぐ体験してください。