タグ別アーカイブ: Web

オープンソースの日本語WEBフォントJapanSans。ウェブフォントファンからのフリーフォントの贈り物

japansans日本語webフォント

ウェブフォントファンの仮立ち上げから一ヶ月、ついに正式オープンです。
というわけでフリーフォントの贈り物です。
 
名前はJapanSans(ニホンノSans)でウェブフォント+印刷用フォントのセット。
どんな感じのフォントかはJapanSansのサイトでウェブフォントにJapanSans80を指定しているので見て頂けると一番わかりやすいと思います。
 
「源ノ角ゴシック (Source Han Sans )」をウェブフォント用に表示調整した「かなフォント」。商用・印刷なども含め、あらゆる条件で無償利用することが可能です。
 
JapanSansは100%、90%、80%、70%の幅が選べる等幅で無いフォント。「っ」などの小さな文字はより狭い幅になっています。そのため、使い方によっては狭いスペースに通常よりも文字数を多くできたり、文字間隔をあけて使えば、センスの良い雰囲気を演出できたりと、使うのが楽しいウェブフォント専用書体です。フォントファイルはサブセット化済みでOpenType、Truetype、eot、Woffを収録。漢字も入った印刷用フォントも同時収録しておりWord・Excel・Adobeフォトショップなどでも活用できるフリーフォントです。

 

JapanSansのサイトへ行く

AppleはiPhone6発売以後のウェブサイトを刷新。Webフォント(AXIS)とナビゲーションデザイン、レスポンシブの何が変わったのか知っていますか?

apple-website

ざっくりアップルのウェブサイトリニューアルについて個人的な意見を。
AppleはiPhone6発売以後のウェブサイトを刷新しました。
何が変わったのか?大きく分けて3点です

・ウェブフォントの採用(コーポレイトフォントであるAXISフォントに)
・フラットデザイン化(ナビゲーション・アイコン・フッター)
・レスポンシブ化(スマホ対応)

今まで、こうじゃ無かったのが不思議なくらいです。
よく考えるとアップルがウェブに関しては古典的だったのがよく分かります。
私もこれらの項目に懐疑的な部分も若干あるので(特にフラットデザイン)
見本的なウェブサイトであるアップルとして悩んだ部分もあると思います。

 

アップルのウェブフォントの採用

apple-webfont

ほとんどの部分で上の画像のようにテキストが選択できるようになりました。
いままで画像化していたAXISフォントがWEBフォントとして採用されています。
読み込みも非常に早く、IEでもかなり綺麗に表示されていて流石です。
(レイアウト的にはWinが綺麗、レンダリングはMacの方が綺麗で引き分け)
SEO的にもこちらの方が良いし、ブランディング上の当然の結果だと思います。
実は今多くのサイトでメイリオ・ヒラギノ・MSゴシック指定の上位指定が減ってきています。
もしかしたら、数年後はこれが主流になっているかもしれませんね。

 

アップルのフラットデザイン化

apple-flatdesign

個人的に驚いたのがメインメニューのフラットデザイン化です。
なぜならスマホのボタンは使い捨てのデザインでも良いのですが
ウェブサイトは5年スパンぐらいで見た方が良いと思うし
そもそも今までやらなかったのは、フラットデザインが
デザイン的に良くなく、ボタンは多少立体感がある方が
優れていると判断していたからだと思うんです。
とはいえ、さすがグレー1色に見えて、透明感のある仕上がりになっている。
フッターもメインメニューに合わせたのか薄いグレーに。
またストアのページなどがアイコンに変わり、個人的には萌える。
他社のようにいかにもフラットデザインですというレイアウトやカラーでなく
あえて、グレースケールで統一している事から、フラットと言うよりシンプル化
というのが正解なのかもしれません。

 

アップルのレスポンシブデザイン

iphone-website

これも驚いた点の一つ、アップルのスマホ対応。
今までアップルはスマホで見ても美しい非スマホ対応レイアウトを心がけてきた。
レスポンシブでなくても、ちゃんと考えればスマホで見ても奇麗。
まっとうな考え方だと思うし、実際スマホで見てる人少ないしと思う。
しかしウェブフォント・フラットデザインまでやって
これだけスマホユーザーが増えると流石にやるべきだと
いう意見が多数派になったのだと思います。
といっても、どんなユーザーが見ても伝わるデザイン・レイアウトである
という基本姿勢は変わっていないので、これらの3点の変更も
アップルにとっては、大きな変更の前の小さな変更と言えるかもしれません。

 

 

ウェブフォントのクロスドメイン問題について〜WEBフォントトラブルTIPS1

webfontトラブル

WEBフォントの記述において
IE、Firefoxの一部のバージョンではクロスドメイン問題が発生するようです。
つまり、フォントを利用するサイトのドメインと
WEBフォントを設置したサーバのドメインが異なる場合
上手く表示できなかったりするわけです。

この事を忘れていて、無駄に時間を費やしてしまいました。

この問題を解決するのに役立ちそうなページを記録しておきます。

クロスドメイン制約によりFirefoxでFont AwesomeなどのWEBフォントを表示できない
http://blog.lowaivill.com/development/cross-domain/

さくらのサーバーだとIE9以降でwebfontが文字化けする
http://qiita.com/ikedahidenori/items/a33236a40986cd22f37d

WEB フォントをクロスドメインで利用する
http://logicalerror.seesaa.net/article/198146322.html

Webフォントを利用する際に知っておくと役立ちそうなTips
http://kachibito.net/web-design/web-font-tips.html

日本語ウェブフォントを作ろう!Notosans(源ノ角)で日本語webフォント

webfontmaking

ウェブフォントを作ろうと思っても、実際フォントを作るのはたいへん。
とはいえ実際に公式に無料でウェブフォントとして使えるフォントは
M+フォント
Source Han Sans(源ノ角ゴシック)(Noto Sans

IPA FONTは再配布あたるとの回答が出ているので
通常の方法では難しいかもしれません。
そして無条件で改変して、再配布しても大丈夫なのは
おそらく、M+と源ノ角という事になります。

というわけで源ノ角ゴシックを使ってウェブフォント
の作り方を紹介します。

今回はレギュラーに加えて90%、80%、70 %の細長い書体
も同時に作ってみました。普通じゃつまらないので。

フォントを触るときは、やっぱり1つはフォント作成ソフト
があると便利です。
・OTEditかTTEdit
・Fontographer
・Glyphs

ぐらいがメジャーどころでしょう。今回程度であれば
なくてもなんとかなりそうですが。

1.フォントのサブセット化

日本語フォント全部をアップすると数メガ、いや10メガを越えてしまう
場合が多いので、まるごとアップすると、表示に時間がかかり
ウェブサイトしては致命的です。
なので、「かな」やアルファベットやよく使う記号などのみにして
漢字は「メイリオ」や「ヒラギノ」などが自動的に表示される様にします。
これはサブセットフォントメーカーを使って文字を減らします。
ウェブサービスでも、できる所もあります。

今回は4種類のフォントを作りました。
横幅が100%~70%までの4段階を作っています。

webfont作成

サブセットフォントメーカーはすごく簡単です。
フォントを選んで、フォントにしたい文字をテキストで記述するだけ。
日本語ウェブフォント

 

2.ウェブフォントに変換

ウェブフォントの変換にはWOFFコンバータを使います。

日本語ウェブフォント作る

もしすでにインストール済みであれば自動的に立ち上がります。
フォント名はJapanSansとしておきました。
あとは「変換開始」をクリックするくらいです。はいできあがり。
できあがったファイルは以下。サンプルのHTMLファイルも書き出されます。
これは必要ないので削除してください。

webfont作成

 

TrueTypeが必要なら、フォントソフトなどで書き出してください。
ここまで30分。そして適用してみたウェブサイトがこちら。
http://webfontfan.com/japansans/

実際には、調整にかなりの時間を要します。
というのもWindowsはフォントレンダリングが独特なので
多くの場合綺麗に表示されないからです。
とくに今回のフォントのように、微妙で、繊細なラインは
表示の調整が難しくなりがちです。
どちらかというとM+の様に水平のラインが平行な方が
調整はしやすいです。
フォントレンダリングの確認はMac、Windowsの各OSや
IE、Safari、Chrome、Operaなどのブラウザで一通り確認します。
あとはiOSやAndroidなどでも実機で確認できたらしておいた方が良いでしょう。

モノスペースのGoogleフォントをセンス良く使いたい〜ゴシック体に合わせるwebフォント

monofont-googlewebfont欧文モノスペースフォント(等幅フォント)は使い方によっては
日本語のウェブフォントに合わせるフォントとして面白いと思います。
通常、日本語ウェブフォントは等幅です。しかし欧文フォントは
プロポーショナル(可変幅)でウェブページ全体の濃淡にバラツキが出て
それが好まれない場合もあると思いますし、使い方によっては
モノスペースフォントは、単純にかっこいいんですよね。

そこでウェブフォントが簡単に無料で使えるGoogleFonts
良さそうなモノスペースフォントを紹介します。

Anonymous Pro

Anonymous Pro

 

Cousine

Cousine

 

Share Tech Mono

 

firemono

Fira Mono

 

DroidSansMono

Droid Sans Mono

 

Inconsolata

Inconsolata

 

Lekton

Lekton

 

UbuntuMono

Ubuntu Mono

いかがですか?ちょっとした見出しから本文にも使いやすそうな
GoogleFontsを選んでみました。

無料でダウンロードできるWebアイコンフォントFont Awesomeの使い方〜サイズ変更とボタン化

fontawesome

実は日本でよく使われているウェブフォントはアイコンフォントです。

Font Awesome はサイト上でよく使われるアイコンを
ウェブフォントにしたものです。ちょっとした場面で役立ちます。

サイズや色など CSS で様々に調整して利用することができます。
http://fortawesome.github.io/Font-Awesome/

Font Awesome のトップページの『Download』よりダウンロード。

zipファイルを解凍し、サーバーにCSSフォルダ内の
「font-awesome.css」か「font-awesome.min.css」のどちらかと
fontフォルダのフォントをアップロード

難しすぎてよくわからないという人はワードプレスの場合
プラグインもありますのでインストールするのもあります。

例えば<i class=”icon-pencil”></i>やショートコードで鉛筆を表示したサンプル

[icon name=icon-pencil]

センター配置にしつつ、160pxにして、行の高さを160pxにして、リンクを貼ってみたサンプル。

[icon name=icon-pencil]

 

Bootstrapのボタンの中に入れてみたサンプル
[icon name=icon-pencil] 鉛筆です

ちなみにBootstrapのボタンおよびアイコン付きのボタンが簡単に作れるサイト
http://www.thiagocanudo.com.br/bootsbutton/