タグ別アーカイブ: ウェブフォント

type.centerのウェブフォント。圧倒的に格好いい新しいフォント情報サイト

type.center

type.centerという新しい文字のサイトが公開されています。
大日本タイポ組合が編集長を務めていて、デザインもユニーク。
あと、これでもかと日本語WEBフォントが使われていて
いったいどうやってるんだろうと思うところがたくさんあります。
私のようなウェブに詳しくない人は、気になる部分が一杯です。

type.center は「文字による文字のための文字のサイト」。
「文字をつかう人」と「文字をつくる人」の両方に向けて
ニュースやインタビュー記事、独自の連載など
盛り沢山・文字だくさんの内容になっています。

現在上がっている記事だけでもお腹いっぱいの文字一杯。
今後のニュース、文字関連のイベントレポートやインタビュー記事も楽しみです。

またカレンダーは誕生日のタイプデザイナー、きょうが記念日の文字ウンチク
きょう行われる文字イベントなど、毎日楽しめそうです。

今後は「文字と著作権」「文字なぞりによる書体見本」の連載も予定とのこと。
実に楽しみですね。

英文表記 type.center(すべて小文字です)
和文表記 タイプ・センター(ナカグロが入ります)
読み タイプドットセンター(または タイプセンター)
URL http://type.center
サイト公開日 2014年10月1日
問合せメールアドレス [email protected]
twitterアカウント @type_center
facebookページ https://www.facebook.com/type.center.jp

オープンソースの日本語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

オノマトペラボ TypeSquare

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

B&B(bookandbeer) A1明朝(モリサワ)ウェブフォント

B&Bウェブフォント

明朝体を使ったサイトは、まだ少ないのですが
Windows8.1に游明朝が搭載されたことから
今後は増えていくことが予想されます。

B&B(bookandbeer)のサイトはA1明朝(モリサワ)を使用しています。
実はA1明朝は通常の明朝体レギュラーより、少し太めなんですよね。
それが、ウェブフォントとしてはプラスに作用しています。

明朝体というと伝統的な方向性にとらわれてしまうのけど
こういった、すごくモダンで革新的な表現にも合いますね。

http://bookandbeer.com/

日本語ウェブフォントって何?

日本語ウェブフォント

日本語ウェブフォントのファイルフォーマット

望みの日本語フォントで表示できるウェブフォント

今まではフォントを指定しても、見ている人の環境に同じフォントがインストールされていなければ、表示されませんでした。

そのため、好みのフォントをPNGやJPEGなどの画像に変えて表示していました。しかしそれには多くのデメリットがあります。

 

1.検索エンジンが読めないのでSEO的に不利

2.訪問者が文字サイズを変更・検索・文字をコピーができない

3.ホームページの修正・更新の作業量が増える

4.翻訳・読み上げソフトが使えない

5.サイト全体のイメージを決める本文には使えない

 

しかしウェブフォントを使えば、見ている人のパソコンに同じフォントがインストールされていなくても、指定したフォントで表示できます。
ただ海外ではすでに多くのサイトが取り入れていますが、日本ではまだ殆ど使われていません。それにはいくつか理由があります。まず日本語ファント自体の読み込みが重い(これは改善されつつあります)。有料で使用できるフォントがあるが使用料やアクセス数制限などの問題から、個人サイトでは気軽に使えない。ウェブフォントファンでは、こういった問題も解決していけるように、いろいろな話題を取り上げていきます。

 

日本語ウェブフォントのファイルフォーマット

ウェブフォントのファイル形式

TrueType(.ttf)

アップルコンピュータとマイクロソフトが共同開発した、パソコン環境で一般的なフォーマット。

OpenType(.otf)

TrueTypeの後継フォントとしてアドビ、マイクロソフトが共同で開発した一般的なフォントフォーマット。

EOT(.eot)

Microsoft開発のウェブフォント用フォントフォーマット。IEのみ対応。

WOFF(.woff)

軽量なウェブフォント用に開発されたフォーマット。モダンブラウザーが対応。

SVG(.svg)

以下は各ブラウザでの対応状況

TrueType
(.ttf)
OpenType
(.otf)
EOT
(.eot)
WOFF
(.woff)
SVG Font
(.svg)
IE 4~ × × × ×
IE 9~ × × ×
Chrome 4~ × ×
Chrome 6~ ×
Safari 3.1~ × ×
FireFox 3.5~ × × ×
FireFox 3.6~ × ×
Opera 10~ × ×
Opera 11.10~ ×
iOS4.0~ × × × ×
iOS4.2~ × ×
Android 2.2~ × × ×

この表で分かる通り少なくとも、2つ以上のファイルフォーマットを指定する必要があります。
(iOS4.0やIE9以前は個人的にはこの際、切りすすても良いと思います)

ウェブフォントについて

フロップデザインのサイトのウェブフォントについて(続)

日本語ウェブフォントまとめ+GoogleWebFont

最新WEBFONT事情〜日本語フリーウェブフォントを表示

日本語ウェブフォントでサイトを明朝体表示。CSSフォント指定

FLOP DESIGN

FONTGRAPHIC