ブログ
Jun 9, 2015

KUSUKUSU 森の空中基地〜Koruriフォント(M+派生)Webフォント

kusukusu

KUSUKUSU 森の空中基地にKoruriフォントが使われていました。
KoruriフォントはM+の派生フォントWebフォントです。
Webフォント用にサブセットされたものもあるみたいなので
(または自分でサブセット化もできる)確かにWebフォントに
ピッタリかもしれません。

このKUSUKUSUというサイトはかなり上手に使っていると
感じました。妙に似合っているというかしっくりきます。
文字間隔をかなり空けることで、こんな雰囲気になるんだと
再発見をさせて貰いました。

koruriフォント(小瑠璃フォント)
http://koruri.lindwurm.biz/

Koruri Webfont Subsetter(小瑠璃フォントサブセッター)
http://koruri.font-face.jp/

KUSUKUSU 森の空中基地
http://risonare-atami.com/kusukusu/

 

Feb 22, 2015

秀英体12書体がWebフォントサービスFONTPLUSで追加、カタオカデザインワークス社の書体21種類も!

webfont-fontplus2015

Webフォントサービス「FONTPLUS(フォントプラス)」に
52書体も追加されています。
予想以上にラインナップの充実が早いです。

 

大日本印刷の「秀英体」12書体を、提供開始。

秀英体

ライセンス提供したのは「秀英明朝 L」「秀英明朝 M」「秀英明朝 B」「秀英初号明朝」「秀英初号明朝 M」「秀英初号明朝 B」「秀英角ゴシック金 L」「秀英角ゴシック金 B」「秀英角ゴシック銀 L」「秀英角ゴシック銀 B」「秀英角ゴシック L」「秀英角ゴシック B」。

 

カタオカデザインワークス社の追加書体

iroha-gothic

iroha gothic 丸丸ゴシック
Iroha 21popura 丸丸gothic A&Lr
Iroha 22momi 丸丸gothic A&Sr
Iroha 23kaede 丸丸gothic B&Lr
Iroha 24matu 丸丸gothic B&Sr
Iroha 25icho 丸丸gothic C&Lr
Iroha 26tubaki 丸丸gothic C&Sr
Iroha 27keyaki
Iroha 28kiri 佑字
Iroha 29ume 佑字【肅】
Iroha 30momiji 佑字【舞】
Iroha 31nire 佑字【朴】
Iroha 32sakura

 

フォントワークス社の2015年新書体(19種類)

UD明朝 ProL/M/DB/B 筑紫アンティークL明朝 StdL
UD丸ゴ_ラージProL/M/DB/B 筑紫アンティークS明朝 StdL
UD角ゴ_ラージProL/R/M/DB/B 筑紫B明朝 Pr6L / Pr6NL
ベビポップ StdEB あおかね StdEB

 

 

Jan 15, 2015

WordPressのフォント周りを便利にするプラグインまとめ

Wordpressのフォント周りを便利にするプラグインまとめ

webフォントプラグイン

ウェブフォントファンで公開しているプラグインです。
インストールするだけで日本語ウェブフォントが使えます。
http://webfontfan.com/webfont-plugin/

 

フォントサイズ変更ボタンをつけるWP-chgFontSize

ユーザーがフォントサイズを選択できるようになるので、
ウェブサイトの見やすさが高まります。親切設計。

 

Google公式のWeb Fontプラグイン WP Google Fonts

Googleが無料公開しているGoogle Web Fontsを
利用することのできるプラグインです。
プラグイン形式なので通常の設置よりも簡単です。

 

Font Awesome Iconsプラグイン

最もよく使われるアイコンFont Awesome Icons
のアイコンを利用できるプラグイン。
ショートコードも使えるので、面倒くさがり屋さんにぴったり。

 

WP Visual Icon Fontsプラグイン

Font AwesomeとGenericonsのアイコンフォント
ビジュアルエディターで使えるようにするプラグイン。
ドロップダウン形式で選べるので楽ちんです。

 

Fonts.com公認プラグインwebfonts

モノタイプを中心にFonts.comのwebフォント公式プラグイン
プラグインの設定画面からウェブフォントの指定ができる
プラグイン。Google Web Fontsにも対応してますよ。

 

wordpress公式fontプラグイン

WordPress公式のWebフォントプラグイン。
クリックするだけで簡単にウェブフォントが適用できる。
Google Web FontsとTypekitに対応しています。
操作パネルもグラフィカルでわかりやすい。

 

WordPressを多言語化するWPMLとqTranslate

qTranslateはかなり有名な無料の多言語化プラグインです。
ついで人気なのがWPML。こちらは有料ですがお試しも
できるので好みの方を使ってみてください。

 

2言語化プラグインBogo

日本語と英語サイトの2つの立ちあげたいという時に
それぞれ記事を分けられるので便利です。
サイトだけでなく管理画面も「日本語」「英語」
と切り替えができるのもこのプラグインの特徴。

 

jQuery FLAutoKerningで文字詰め

wordpressプラグインでは無いのですが
HTMLのテキストに対して、文字詰めを行えるスクリプト
FLAutoKerningというのもあります。
以下のサイトで本文以外の部分に適用してみました。
http://webfontfan.com/mincho-font/
カーニングペアも自分で追加設定できます。

 

Dec 13, 2014

絶対WEBフォントの利用に役立つTIPS集〜ウェブフォントトラブル解決&設置のヒントまとめ

webfont-trouble

WEBフォントの利用に役立つTIPSをもとめてみました。
メモ的ですが、ウェブフォントトラブル解決&設置のヒントになると思います。

  1. Webフォントをassetとしてロード

  2. twitterやgithubのwebfont文字化け対策

  3. Webフォントは一度すべてをダウンロードさせる?

  4. 日本語のWebフォントを試して困った事

  5. Webフォントを使って三点リーダーを表現する際の注意点

  6. Webフォントのブラウザ対応

  7. WEBサイトで font-face で指定したフォントが適用されない

  8. 端末を横置きにするとウェブページのフォントが拡大されるのを防ぐ方法

  9. WPFフォントの読み込み

  10. 游ゴシック体をメインとする文字フォント表示に切り替えました。

  11. ベストマッチな組み合わせのWebフォントを提案してくれる『Type Genius』

  12. 明朝体ウェブフォントでサイトデザイン – 日本語webフォント

  13. Webフォント(.otf形式)を(.woff形式)にApache License

  14. Adobeが提供するWebフォントサービス『Typekit』とは?

  15. ウェブフォント和欧混植の条件分岐

  16. 国産サービス対応のアイコンフォント『Ligature Symbols』を実装してみた。

  17. ウェブアイコンフォントの作り方

  18. フォント指定はコレで決まり!最高のfont-family(CSS)-2014年

  19. ブログ投稿の日付・カテゴリ・タグをWebフォントを使ってシンプルに

  20. WebフォントとSVGフォント

  21. ウェブフォントファンをオープンしました&ウェブフォントで1年間サイトを運営してみて

  22. OTFをWOFFに変換して、Webフォント化する

  23. Webフォントを使ってみます(2)日本語フォント(ライセンスに注意)

  24. ウェブフォントの使い方・Google Fontsを使ってみる

  25. サイト上の文字をより魅力的に フリーwebフォントまとめ「23 Best Free Web Fonts Of 2014」

  26. 最新-2014.09:日本語WEBフォント情報。

  27. Webフォントをキレイに見せるテクニックを2つ紹介(Chrome編)【解決策 その1】似非アンチエイリアス

  28. フォトンとプラスのサービスを使ってウェブフォントを導入してみました。設定編です。

  29. イワタと電通、社団法人ユニバーサルコミュニケーションデザイン協会が作ったUDの「みんなの文字」が無料でWebフォントとして使える

  30. Webフォントありのブログを高速化した、たった1つのこと.htaccessに以下を追記

  31. 日本語のどんなWebフォントでも美しくカーニングできるスクリプト -jQuery.Kerning.js

  32. 好きな箇所に好きなWebフォントでテキストを表示しようGoogleフォントからフォントを選ぶ

  33. DirectWriteとフォントの固定化「Google Chrome」「Internet Explorer」「Firefox」

  34. googleドライブ上においたWebフォントを使用する方法あるいはいかにしてcssを読み込むか

  35. ディレクターのための日本語ウェブフォント覚書き

  36. Webフォント化させたアイコンが一部Android 4系で表示されない

  37. WebフォントをSVGからOTFに切り替えた際のハマりポイントあれこれ

  38. OperaでWebフォントを使うと日本語が明朝体になる

  39. Webフォントその概要とメリット・使い方など、ここで一度おさらい

  40. 意外と多い!? Web フォントに対応していない環境

  41. jQueryで横並びメニューを均等配置。でもWebフォントに足元すくわれた。

  42. IE9以降でwebfontが文字化けする原因と解決策

  43. Google Web Fonts が IE で適切に読み込まれない

  44. Google Chromeだけ、フォントサイズがおかしいんです!Chromeのフォントサイズのクセまとめ。

  45. WEBフォントとIE9.jsを併用すると、IE8で全体的にヤバいことになる

  46. 日本語フリーフォントをwebフォント化する4ステップ

  47. fonts.comの日本語Webフォント「AXISフォント」を導入してみた

  48. 文字を制限した軽量な日本語 Web フォントを作成する方法

  49. WebFonts として利用できるフリーの和文フォント

  50. 画像の代わりに使えるアイコンタイプのWebフォントのまとめ

  51. Webフォントで手に入れる新たな表現力

  52. Webページで自由にフォントを表示させるCSS3のWebフォント機能について

  53. CSSでの@font-face,つまりweb fontが使えない事でハマった

  54. TYPEKITトラブルシューティング

 

Dec 8, 2014

ゲームやアプリでウェブフォントを使えば効果的!フォント埋め込み

ゲーム・アプリ埋め込みフォント
Lineやグリーのゲームでもフォントをうまく使っているゲームが増えてきています。
フロップデザインのサイトでも、今年になってから
いわゆるソーシャルゲーム系の会社の問いあわせが、すごく増えてきている気がします。

オンラインゲーム等でもウェブフォントをうまく使えば、印象の違う
他のゲームとの差別化ができたゲームができそうです。
似たようなシステムのゲームが多いので見た目のインパクトは大きいと思います。

同人ゲームでもフォントをうまく使っているのは
ちょっと気になります。

ゲーム・アプリに役立ちそうな記事を集めてみました。

【関連記事】

tmlib.js で Webフォント を使ってみるよ!

http://qiita.com/YFukuyama/items/3a4a1d4b7b395cc32bd4

ウェブフォントのロードが終わったことを知るには

http://www.dev7.jp/?p=289

ゲームで使える font サービスいくつか

http://goo.gl/Lm00n8

Unityにもつかえる!アプリに使える商用利用可能・再配布可能なフォントまとめ

http://8450423.info/qun/unity_font/

フリーで利用可能な「Webフォント」iOSやAndroidでも使えます-日本語も少し。

http://plus.appgiga.jp/ramone/2011/08/17/1267/

Webフォントサービス – ソフトバンク・テクノロジー

https://www.softbanktech.jp/service/list/fontplus/

にフロップデザインの4フォントを公開しています。
http://webfontfan.com/webfont-japan/

ワードプレスのプラグイン版のように設定は不要では無いので
多少知識のある方向けです。

 

Nov 12, 2014

FGノーマル半角フォントを使ったサイト作り

FGノーマル半角フォント

FGノーマル半角フォントを使ったサンプルブログを作りました。
このwebフォントは私の大好きなフォントでもあります。
全角カタカナがすべて半角という大胆なデザインは
私には考えもつかないアイデアです。

半角なので結果的に文字数も入れられるし
全体的な雰囲気も激変すると思います。
レトロっぽい雰囲気も出るし
見方によっては可愛く見えたり,真面目に見えたりと
万華鏡のように色々な側面をもっていて
一筋縄ではいかないwebフォントです。

ワードプレスのプラグイン版ならば、ほぼ1クリックで
設定は終了。本当に簡単にユニークなブログが。

http://webfontfan.com/webfont-plugin/fgnormalhankaku/

 

Nov 8, 2014

GMO WP Cloudでウェブフォントが使えるらしい…情報求む

GMO-WP-Cloud

GMO WP Cloudとはワードプレスにウェブサイトやブログの表示速度
を向上するシステムを搭載したクラウドウェブサービスのようで
プラグインなど色々な機能が使えるみたい。

その機能の一覧の中で
「スライダーやWebフォントなど、WordPressで人気のある機能が
簡単に使えるパワフルなプラグインを開発しています。」
という記載が気になっています。Webフォント使えるの?使えないの?
何か新しいプログラムなの?記載が無いので気になるのです。
かといって有料プラン以上じゃないと、使えないので保留です。

しかし、こういうアイデアは参考になるし
なかなか良いサービスだと思います。

https://www.wpcloud.jp/

Posted in ブログNo Comments » 

 

Oct 15, 2014

Windows10以降のOS・IEの変化動向の予測まとめ。デザイン・開発のために

windows10日本語

次期Windows10・IE日本語版の個人的予想を検証するために
近々いろいろと細かくレポートする予定です。

今日は個人的なたんなる予想と
現在で噂されている事項をまとめてみます。

WindowsとMacの今後のOSで言えることは
デザインはフラットへ、フォントは細めへ
あらゆるモニタサイズ・デバイスへ対応に

この方向でデザイン的に良いのかは別として(個人としてはNO)
iOS、Andoroidもしばらくはこの傾向と思って間違いないでしょう。
ウェブサイトやアプリも含めてデザイナーは認識が必要です。

今月のMac OS Yosemiteの評判によってWinOSも
影響は出るかもしれませんね。なにしろWin10は来年ですから。

 

OSのレンダリングが変わる

フォントレンダリングは多少変わるみたいです。
次期のMacでもOS標準フォントは(HelveticaNeueに)変わりますが
Windowsはさらに今後はモダンな方向性を目指してきそうです。

windows10(新しいレンダリング)

IEのレンダリングが変わる

Internet Explorerも大きく変わりそうです。
レンダリングは大きく変わりMacより
シャープでコントラスト強めな予感です。
(今までよりはソフト)
Chrome・Firefoxにも影響があるかもしれません。

とりあえずフォントレンダリングが
このように、普通になってくるとメイリオの存在意義が…
しかしディスプレイがフォントレンダリングの問題を
解決しそうな今後の状況では当然の事態。

ますます既存のメーカーのフォントを
組み込んでいくことの方がメリットが大きくなる。

 

Windows10の標準フォント

「游ゴシック体」「游明朝体」はWindows8.1より
入ったので、それを踏まえてのレンダリング環境でも
あると思うのですが、標準フォントはまだメイリオかもしれません。
MacでYosemiteにヒラギノW1、W2が入ると予想がされており
Windowsでも細めに向かう雰囲気が出ていますが
日本語フォントは「游ゴシック体」自体が通常のレギュラーよりも
細めなので、なにか新しく加わるかは未知数。
MacのOSの方がリリースが先なのでそちらも気にした方が良いでしょう。
MacYosemiteはHelvetica Neueが標準フォントなのですが
個人的にイヤだ。和文と合わないし、なんかダサい。
Helvetica Neueは好きだ、モダンなフラットデザインと合わないだけ。
別件ですがAndroidのOSフォントなんとかなりませんか?
(アンドロイドは源ノ角ゴシックにしてほしい)

 

さらにフラットデザイン化

アイコン類もフラットデザイン化され、完全にモダンなPCの雰囲気です。
エクスプローラーのバーもかなりフラットなデザインです。
Windowsはカスタマイズできるので、それほど気にすることでもないかも。

 

ディスプレイ解像度への対応

大型ディスプレイ用にWindowsの2分割・4分割機能ができる。
またメトロも継続なのでタブレットでも使いやすい。

 

スタートボタン

仮想デスクトップ・コマンドプロンプト・スタートボタン復活

UNIXのようにデスクトップ画面を複数持つことができます。
コマンドプロンプトがより便利になって復活します。
一番の朗報「スタートボタン」が復活します。わーい。

 

microsoft

Microsoft Windowsのサイトの変化

MacでWindowsのページをみてください。
面白い変化に気づきます。游ゴシック体という細身の
ゴシック体で、文字サイズの強弱が強いフラットデザインです。
http://windows.microsoft.com/ja-jp/windows-8/meet

AppleでもそうですがHPを見ると、今後の方向性が
見えてきたりするので、ちょくちょく見てます。

そういう意味ではMacのYosemiteの次のOSでは
AXISフォントを搭載するとかであれば話題性あって面白そうです。
たぶん、無いですけど(あくまでコーポレートイメージとしてのフォントなので)

 

 

Posted in ブログNo Comments » 

 

Oct 3, 2014

Hello world!

WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください !

Posted in ブログNo Comments »