FGWEBミライ連のウェブ化

続・和文フリーフォント集収録のFGWEBミライ連フォントのWEBフォント化テスト中です。いま、このfontgraphic.jpサイト全体に表示させています。横のラインが全部繋がるという日本語でありながらアラビア文字のような特殊な雰囲気を持つ珍しいデザインのフォントとなります。

FGミライ連

「FGWEBミライ連」の基本骨骼である「FGWEBミライ」は欧文と混植した場合のバランスに配慮してデザインしています。ウエイトはFGミライよりも細く、OSXヒラギノW3、Windowsメイリオ相当ですが、各OSブラウザのフォントレンダリングの違いを考慮したベストバランスにてウエイトチューニングしています。フォントフォーマット化においてはベジェの1ドット単位、極限まで容量を絞り込み無駄のないフォントデータ構造となり、欧文フォント並み、或は小さなGIF画像並み(30〜60KB程度)にまで軽量化を計り、瞬時にブラウザ表示させます。回線を問わずネットのブラウザ表示速度にまったく影響を及ぼすことがありません。

FGWEBミライイメージ
FGWEBミライイメージ
FGWEBミライイメージ
FGWEBミライイメージ
FGWEBミライイメージ
FGWEBミライイメージ

デザインの特徴

一般的なフォントが全角あるいはプロポーショナルに対し、このFGWEBミライは、横幅が仮名84%、欧文67.5%の変則等幅構造、縦の高さは仮名欧文ともにベースライン・アセンダーラインを揃えるという他に類を見ない設計となっており、その狭い文字幅は欧文と並んだ場合の統一感を持たせ、日本語の仮名を新しく美しく、格好よくリデザインするというコンセプトの元に創ったフォントです。一見、ひとつひとつの文字は「る」や「ろ」、「が」など仮名のデザインルールからは大きく逸脱するような独創的な形状ですが、読む人はグリフ単体で認識するのではなく文章の流れで認識するものですので人の目はすぐに慣れるものだと思っています。

その文字幅のコンパクトさはスマートフォンのような小さな面積の画面では20%ほど多めに文字を表示させることが可能です。細かい部分では視認性の向上を高めるため欧文の墨溜まり部分は適度に削っています。

FGWEBミライイメージ
FGWEBミライイメージ
FGWEBミライイメージ

FGミライとFGWEBミライのウエイトの比較

FGミライとFGWEBミライのウエイトの比較

※左の「あ」はFGミディアムオールドです。FGミライとFGミディアムオールド系は仮名のいくつかは共通です。

実際WEBに表示させてみると見慣れない文字組みで、他に類をみたことがない斬新な日本語デザインです。このWEBフォントは書籍収録版よりもウエイトが細いバージョンとなっておりOSXとWindows、iPhoneなどのシステム漢字フォントとのウエイトバランスを最適化しています。近日発売予定。

パソコン用オープンタイプフォントFGミライ連が必要な方は「続・和文フリーフォント集 」をお買い求めください。わずか2,100円+税でネットでは入手できないフリーフォントが多数入手可能です。

Read more...

Webフォントをアプリへ実装

Webフォントアプリ

iPhone公式サイトアプリ開発者向けに提供しました。

アプリ実装例(FGラブリー)〜アイコンメモ

アプリ開発者〜http://setoh2000.com/

iPhone用メモアプリ↓
iPhoneアプリ「アイコンメモ」

現在、FGポップ、ラブリー、モダン選択可能↓
iPhoneアプリ「アイコンメモ」

漢字グリフはヒラギノ角ゴProN W3を合体↓
iPhoneアプリ「アイコンメモ」

*FGウェブフォントシリーズは「30〜50KB」と非常に軽量のためWeb経由でもトラフィックに負担をかけません。

Read more...

Wordpress日本語webフォントプラグイン[FGノーマル半角]

NEWFGノーマル半角ウェブフォントWordpressプラグイン

このプラグインはWordpress用の「日本語Webフォント」です。

FGノーマル半角フォントがWebフォントのWordpressプラグインになりました!

特徴

サイト全体を日本語Webフォントに変換するプラグインです。お使いのテーマに合わせてフォント指定する場合は、Wp3.xは「外観→テーマ編集」でテーマCSSを編集するか、Wp4.Xは「外観→Custom CSS Editor」でCSSを追記してください。

管理画面キャプチャー↓

FGBゼロWebフォント管理画面

読み込み速度について

サイトを構成する要素は、画像、テキスト(ソース)が主です。そこにWebフォントが加わるわけですが、フォントグラフィックの日本語Webフォントは漢字以外のグリフをプラグインとして読み込ませる方式で、容量はわずかに70KB程度とテキスト並、画像よりも遥かに軽いため、Webサイトの表示速度にほとんど影響を与えることはありません。

読み込み時間軸

上図は、FGノーマルウェブフォントWordpressプラグインをインストールしたサイトへアクセスした時の読み込み時間軸の例です。ピンクで囲んだ部分がWebフォントプラグインですが、このようにサイト全体の要素に占める割合はごくわずかだというのがおわかりいただけるでしょう。この時は0.027秒しかかかっていません。全体読み込みが2.36秒ですから、サイト全体要素の100分の1しか占めていないことになります。

WordPressへのFGノーマル半角プラグインインストール

http://www.moda-inc.com/news

http://fontgraphic.jp/wordpress/

http://www.buelco.com〜ノーマル&半角混合型

↓購入はこちらのサイトでお願いします。

ウェブフォントファン


利用条件

WebフォントはIPAライセンスではなくフォントグラフィック独自ライセンスとなります。

*サイトの場合はURLの登録が必要です。Webデザイナー、制作会社などが委託として第三者のサイトに実装する場合もURL登録が必要です。

・1アプリにつき、1フォントデータの購入が必要です。

・1サイトにつき、1フォントデータの購入が必要です。

・ユーザーが無断でワードプレスへプラグイン登録申請することはできません。

・再配布及び再販禁止。

・不許複製


任意の書体でのWebフォント化お任せください。

フォントグラフィックオリジナルフォントのほか、デザイナーが作成した文字などオリジナル書体をWebフォント化、およびWordpressプラグイン化するサービスも行っております。フォントをWeb化する場合にはまず第一にライセンスの問題に当たるはずですが、フォント開発ノウハウ豊富なフォントグラフィックにご相談ください。各企業へ独自のWebフォントプログラムを提供しています。

お問い合わせ


WordPressへのインストール例

運営中のワードプレスサイトにインストール。テーマはデフォルトのTwenty Thirteenなどを使用。特にカスタマイズすることもなくメニューの色とヘッダー写真のみ変更し、全体をWebフォントプラグイン。

ラ・エピセ
http://www.moda-inc.com/news/
愛媛県松山市にある銀天街の中にあるzakka store[la・epice]から生まれたオリジナルの雑貨メーカーのBLOGです。FGBノーマル半角を使用しています。

バウダンススタジオ
https://www.vaw-ds.com/
「VAW栄光ハイスクール」の10年間の教育のノウハウとHORIE HARUKIの ダンス業界での30年を超える経験を最大限に生かして完成したダンススタジオのサイト。

祐天寺の美容院アンティリカ
祐天寺の美容院アンティリカ

http://antilica.com/blog/
祐天寺の美容院アンティリカのブログです。FGラブリーを使用しています。

その他、FGBノーマル半角はこのfontgraphic.jpサイト全体に使用しています。

フロップデザインBLOGにもこのプラグインを試験実装中です。〜http://www.flopdesign.com/blog/

Read more...

Wordpress日本語webフォントプラグイン[FGBゼロ]

NEWFGBゼロウェブフォントWordpressプラグイン

このプラグインはWordpress用の「日本語Webフォント」です。

FGゼロフォントシリーズがWebフォントのWordpressプラグインになりました!

特徴

サイト全体を日本語Webフォントに変換するプラグインです。お使いのテーマに合わせてフォント指定する場合は、Wp3.xは「外観→テーマ編集」でテーマCSSを編集するか、Wp4.Xは「外観→Custom CSS Editor」でCSSを追記してください。

管理画面キャプチャー↓

FGBゼロWebフォント管理画面

WordPressプラグイン

「WordPress日本語サイトのためのWebフォントプラグインです。

FGノーマル半角フォントがWebフォントのWordpressプラグインになりました!Wordpressでは一般的に日本語フォントを変更するにはユーザー側のパソコンにインストールしてあるシステムフォントで指定するしか方法がありませんが、このプラグインはwordpressでフォントグラフィックオリジナルの日本ウェブフォントで指定する画期的なプラグインです。

サイト全体をWebフォントに変換します。WordPressデフォルトテーマの、「TwentyThrteen」や「TwentyFourteen」用にスタイル指定しています。お使いのテーマに合わせて調整する場合は、プラグイン→編集→「example.css」を編集してください。

読み込み速度について

サイトを構成する要素は、画像、テキスト(ソース)が主です。そこにWebフォントが加わるわけですが、フォントグラフィックの日本語Webフォントは漢字以外のグリフをプラグインとして読み込ませる方式で、容量はわずかに70KB程度とテキスト並、画像よりも遥かに軽いため、Webサイトの表示速度にほとんど影響を与えることはありません。

読み込み時間軸

上図は、FGノーマルウェブフォントWordpressプラグインをインストールしたサイトへアクセスした時の読み込み時間軸の例です。ピンクで囲んだ部分がWebフォントプラグインですが、このようにサイト全体の要素に占める割合はごくわずかだというのがおわかりいただけるでしょう。この時は0.027秒しかかかっていません。全体読み込みが2.36秒ですから、サイト全体要素の100分の1しか占めていないことになります。

料金について

初期費用や月々の利用料はかかりません。1サイト(ドメイン)につき、1プラグインの購入が必要です。

1ワードプレスサイトにつき¥2,000円で販売中。

↓購入はこちらのサイトでお願いします。

ウェブフォントファン


利用条件

WebフォントはIPAライセンスではなくフォントグラフィック独自ライセンスとなります。

*サイトの場合はURLの登録が必要です。Webデザイナー、制作会社などが委託として第三者のサイトに実装する場合もURL登録が必要です。

・1アプリにつき、1フォントデータの購入が必要です。

・1サイトにつき、1フォントデータの購入が必要です。

・ユーザーが無断でワードプレスへプラグイン登録申請することはできません。

・再配布及び再販禁止。

・不許複製


任意の書体でのWebフォント化お任せください。

フォントグラフィックオリジナルフォントのほか、デザイナーが作成した文字などオリジナル書体をWebフォント化、およびWordpressプラグイン化するサービスも行っております。フォントをWeb化する場合にはまず第一にライセンスの問題に当たるはずですが、フォント開発ノウハウ豊富なフォントグラフィックにご相談ください。各企業へ独自のWebフォントプログラムを提供しています。

お問い合わせ


WordPressへのインストール例

運営中のワードプレスサイトにインストール。テーマはデフォルトのTwenty Thirteenなどを使用。特にカスタマイズすることもなくメニューの色とヘッダー写真のみ変更し、全体をWebフォントプラグイン。

ラ・エピセ
http://www.moda-inc.com/news/
愛媛県松山市にある銀天街の中にあるzakka store[la・epice]から生まれたオリジナルの雑貨メーカーのBLOGです。FGゼロを使用しています。

バウダンススタジオ
https://www.vaw-ds.com/
「VAW栄光ハイスクール」の10年間の教育のノウハウとHORIE HARUKIの ダンス業界での30年を超える経験を最大限に生かして完成したダンススタジオのサイト。

祐天寺の美容院アンティリカ
祐天寺の美容院アンティリカ

http://antilica.com/blog/
祐天寺の美容院アンティリカのブログです。FGラブリーを使用しています。

その他、FGBノーマル半角はこのfontgraphic.jpサイト全体に使用しています。

フロップデザインBLOGにもこのプラグインを試験実装中です。〜http://www.flopdesign.com/blog/

Read more...

縦横対応Webフォント

Webは通常、左上から右に向かって横書き表示します。パソコンで見た時は縦書き、スマートフォン(iPad横)以下で見た時は横書きに対応するWebフォントがようやく試作として完成。FGゼロWebフォントバージョンです(有料)。ブラウザ左上から右斜め下に向かって読みます。縦組みになった時に半角英数字が中心に揃うように配置されます。そして記号類は斜め+45度に傾けて配置します↓。

FGゼロWebフォント

見慣れない文字組みかもしれませんが、日本語は時代によってそして環境によって変化してきています。例えば昭和初期、いまから80年以上前の新聞。横書きは右から左へ向かって組まれていました。戦時中50年以上前の資料では、当時の活字の「、」や「。」は縦にも横に組んでも真ん中に配置されるようなものもありました↓。

昭和7年の日日新聞

iPhoneでは横組みになります↓。

iPhone

それらの資料がヒントになり、横書き文化のWebブラウザと縦書き日本語を融合させました。Webフォントでデモンストレーションがご覧いただけます。

HTMLデモ

Yahoo!API-PHPデモ

Read more...

WordPressプラグイン

ワードプレスサイト

いくつか作っているワードプレスサイトにインストール。テーマはほぼデフォルト使用。特にカスタマイズすることもなくメニューの色とヘッダー写真のみ変更し、全体をWebフォントプラグイン。

ラ・エピセ
デフォルトテーマTwentyForteen使用。愛媛県松山市にある銀天街の中にあるzakka store[la・epice]から生まれたオリジナルの雑貨メーカーのBLOGです。営業日はGoogleカレンダー使用のためGoogle側で管理。主にスマホでの見え方を中心に設定中。本体はBootstrapベースのJoomla!です。

バウダンススタジオ
デフォルトテーマTwentyTherteen使用。「VAW栄光ハイスクール」の10年間の教育のノウハウとHORIE HARUKIの ダンス業界での30年を超える経験を最大限に生かして完成したダンススタジオのBLOGです。本体はBootstrapベースのJoomla!です。

祐天寺の美容院アンティリカ
http://blog.antilica.com/
グリッドレイアウトテーマベースに日本語最適化カスタマイズ。祐天寺の美容院アンティリカのブログです。

ヴァンケット動物病院
http://www.banquet-tokyo.jp/blog/
デフォルトテーマTwentyTherteen使用。ヴァンケット動物病院のブログです。本体はBootstrapベースのJoomla!です。

フロップデザインのBLOG
http://flopdesign.com/blog
フロップデザインのブログです。こちらのサイトはfontgraphicとflopdesignの協同製作で、FLOPDESIGNフォントをWebプラグイン化しています。本体サイトは会員制のためJoomla!です。本体にはさらに複雑なWebフォントの仕組みを入れてます。

Read more...

新フォント「FGレトロ」

Webフォント組見本(fittext.js)

レトロ
 れとろ
  レトロ
レトロれとろレトロ
レトロれとろレトロれとろレトロ

かな120PX組見本

うねりを効かせたグリフデザイン。Webフォントとして組んだ時に濁点やストローク先端処理なども含めて調整しています。

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわゐゑをんぁぃぅぇぉゃゅょっアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヰヱヲンァィゥェォャュョッ

濁点や半濁点はWebの本文として表示された時にかすれないようしっかり判読できるよう可能な限り大振りなデザイン

がぎぐげござじずぜぞだぢづでどばびぶべぼぱぴぷぺぽヴガギグゲゴザジズゼゾダヂヅデドバビブベボパピプペポ

欧文56PX組見本

欧文は和文1000emに対して720em等幅構造。FGモダン、ポップ同様。

abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789`!@#$%^&*()-_=+;:'"[]{}\<>,./?\
Read more...
Subscribe to this RSS feed

ログイン or 会員登録

登録前に「よくある質問サイト利用規約フォント利用規約ページを熟読ください。登録者は全ての規約に同意したものとみなします。

fontgraphic.jpからのメールを受信できる設定にしてから登録してください。