「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

モノスペースの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を選んでみました。

オノマトペラボ TypeSquare

オノマトペラボ
オノマトペラボ。オノマトペラボはオノマトペの力でコミュニケーション上の「むずむず」を「しっくり」に変えることを目指すプロジェクト。オノマトペというテーマからして文字好きにはグッときてしまう。やっぱりいろいろなフォントが訪問の度に変わるのも、ウェブフォントを有効に活用している感じでダイスキ。今のところ目立ったウェブフォントを有効に活かしているサイトが少ない中で、頭一つ抜けているデザイン。
http://onomatopelabo.jp/