今回は、フォントに関連するお役立ちオンラインツールをいくつかまとめてみました。

オンラインツールはわざわざインストールする必要なく、インターネットにつながってさえいれば、いつでもどこでも利用できるので便利ですよね。

フォントのプレビューや、フォントが作れるツール、などなどデザインにとっても役立つツールがいっぱいです。

Font Viewer

とっても良くできているフォントビューアーですね。インストールされているフォントを自動的にリストアップして、並べてくれます。ロゴをデザインする時や、見出しのデザインでフォント選びに重宝するツールです。インストール不要。オンラインでいつでも使えます！

STC :: fontBROWSER ::

こちらもFont Viewer同様に、お使いのマシンにインストールされているフォントをリスト化してくれます。テキストやサイズも調整してプレビューできるのでフォント選びに最適。Font ViewerかfontBROWSERお気に入りの方を使えば良いかと思います。個人的には、Font Viewerの方が好きですが…。fontBROWSERもシンプルで使いやすいですね。

fontcapture

すでにIDEA*IDEAさんの記事、『無料かつ会員登録不要で自分の手書きフォントが作れるという『fontcapture』を試してみた件』で、紹介されてますが。手描きのフォントが簡単に作れるオンラインツールです。

Font Generator – Make Your Own Handwriting Font With Your Fonts

こちらも、手順はfontcaptureと同様みたいですね。手描きのフォントを作れるツールです。こちらは、自分で作った手描きフォントを販売することも出来るアフィリエイトシステムもあるみたいですね！文字に自身のある方、味のあるフォントを作れる自身のある方などは、挑戦してみる価値あるかもしれませんね！

The Graffiti Creator – Home Of Graffiti Art

ファンキーなグラフィティーのテキストが作れるジェネレーターです。フォントを選択して、テキストを入力、スタイルを設定してプリントやダウンロードができます。フォントによっては、ダウンロードできないものもあるみたいです。

FontStruct | Build, Share, Download Fonts

ピクセルを塗りつぶして、フォントを作っていくツールです。自分だけのオリジナルフォントを作ってみたい方は、このツールでどうぞ！

FontEditor BitfontMaker

こちらも、ピクセルを塗りつぶしてフォントを作れるツールです。

flipping typical

トップに表示されている文字を書き換えるだけで、あらかじめ設定されている複数のフォントで、見栄えをプレビューする事が出来ます。

WhatTheFont! « MyFonts

画像ファイルをアップロードするだけで、そのフォントを探してくれるオンラインツールです。

CopyPasteCharacter.com

コピー&ペーストで使えるキャラクターフォントがずらりと並んでいます。結構便利かも。

PXtoEM.com: PX to EM conversion made simple.

ピクセルからEMへの変換が簡単にできるオンラインツール。

Em Calculator

こちらも同様、ピクセルからEMへの変換が計算できるツール。

ロゴ制作において、フォント選びは最も重要な要素のひとつです。ロゴを生かすも殺すもフォント次第といっても過言ではありません。

かっこいいロゴを見つけても、そのロゴがどんなフォントを使っているのかわからない事がほとんどではないでしょうか。

今回は、そんなイライラが少しでも解消できるように、ロゴに使われているフォントがわかるサイトをいろいろとまとめてみました。

Fonts Used In Logos of Popular Websites

有名サイトのロゴとフォントが一目瞭然です。

TypeNow.net Themed Commercial Fonts Download Movie and Music Fonts

人気映画やテレビ番組などで使われているロゴとフォントがまとめられています。

The Logos of Web 2.0

少し前の記事ですが、Web2.0サイトのロゴとロゴに使用されているフォントが集められています。

40 Excellent Logos Created with Helvetica

Helveticaを使ったクールなロゴが40種類集められています。

WhatTheFont! « MyFonts

画像をアップロードするとフォントを特定してくれるお役立ちサイトです。

Identifont – Identify fonts by appearance, find fonts by name

質問に答えていくだけでフォントが特定できるサイトです。

104 Free Fonts for Web Designers and Logo Artists

こちらは、104種類のロゴにそのまま使えそうなフォントを集められています。

105 Free Grunge Fonts for Web Designers and Logo Artists

105種類ものグランジ系フォントは、ロゴに重宝しそうです。

50 Free Handwritten Fonts for Web Designers and Logo Artists

手描き風のロゴに使えるフォントがたくさん集められています。

昨年から人気のグランジ系のウェブデザイン挑戦してみたい方も多いのではないでしょうか？

しかし、なかなかグランジデザインは難しいですよね。

今回は、グランジデザインに挑戦してみたい初心者の方に。そのまま使える、テクスチャ、フォント、ブラシ、チュートリアルなどをまとめてみました。

みなさん是非挑戦してみては？

200+ Free Grunge Photoshop Brushes

200種類を超えるグランジPhotoshopブラシまとめ

25 Free Photoshop Grunge Brushes – Vol. 1

25種類のグランジブラシ

Grunge Photoshop Brushes Set

こちらもグランジブラシのセットです。

50 Most Extreme Free Grunge Fonts

50種類もの欧文グランジフォントがまとめられております。

Grunge Textures – Free Stock Photos, Textures and Backgrounds

グランジ系に特化したテクスチャ集です。

200+ Textures, Brushes, and Fonts: Ultimate Grunge Roundup

200種類を超えるクオリティの高いテクスチャまとめです。

High-Resolution Grungy Paper Textures

高画質のグランジペーパーのテクスチャ

50 Dirty, Filthy Grunge Photoshop Effects

50種類ものハイクオリティなPhotoshopチュートリアル。

40 Beautiful Grunge Photoshop Tutorials

かぶってるものもたくさんありますが、こちらもクオリティの高いチュートリアルたくさんです。

Grunge Photoshop Tutorials

こちらもたくさんのグランジテクスチャがいっぱいです。

本日は、フォントのまとめです。

最近では、かなりクオリティの高いフォントが無料で配布されているので、ついついたくさんフォントをインストールしてしまいますね。

結局、何がなんだか分からなくなって…

というわけで、最初にフォント・マネージメント・ツールをいくつかご紹介。

フォント・マネージメント・ツール for Windows

AMP Font Viewer

インストールされているフォントが一覧でずら〜っと見れるので、結構便利です。もちろんフォントのインストールや削除も出来ます。いくつか試してみた中で、これが今のところ一番使い勝手が良かったです。

Font Xplorer

こちらも同様フォント・マネージメント・ツールです。コンパクトにまとまっているので見やすいです。

The Font Thing

機能が豊富なフォント・マネージメント・ツール

フォント・マネージメント・ツール for Mac

FontExplorer™ X

Macユーザーの方には、こちら。今後、Windows版も公開される予定だそうです。

フォント・プレビュー

fontBROWSER

フォント・マネージメント・ツールをインストールするほどでもないけど…っという方には、こちら。flashアプリケーションが、アクティブになっているフォントをプレビューしてくれます。これは便利ですね。

日本語フォント

フォント・マネージメントの準備ができたら、早速いろいろなフォントをインストールしてみましょう〜。なるべく見やすいサイトをまとめてみました。フォントによって、いろいろと利用規約が違うので、よく注意して利用してください〜。

無償で商用利用できて品質の高い日本語フォント一覧

フリーフォント最前線

和文フォント大図鑑[フリーフォント]

FLOPDESIGNフロップデザイン

日本語フリーフォント 和文フォント カタカナフォント フリーフォント | Artbir

漢字が使える日本語フォント 無料ダウンロード 46種類 : 4GALAXYのメモ

フォントブログ: フリー日本語フォント配布サイトリンク

日本語TTFフリーフォント for X11

窓の杜 – フォント

欧文フォント

欧文フォントがダウンロードできるサイトもまとめておきました〜。

Fawnt

Fonts | Smashing Magazine

dafont.com

urbanfonts.com

TypeNow.net Themed Fonts Download Free Movie and Music Fonts

Search Free Fonts – over 13,000 free fonts available for download

1001 Free Fonts – Download Free Fonts

Download Free Fonts @ 1001 Fonts .com

Neat fonts – Discover Free fonts from all over the web

Better fonts – over 10,000 fonts for free!

ShowFont.net | Download 10,000 Free Fonts

9800 Free Fonts, fonts for free, font finder, download free fonts, free typography

Dingbat Depot | free dingbat fonts

ちょっとした、イラストやアイコンが必要な時にシンボルフォントは便利かも。

フォントファイルをダウンロードして、インストールするだけ。

キーをたたけば、きれいなシンボルが。

っちゅうわけで、本日はシンボルフォントをまとめてみました。

1. dafont.com

2. SearchFreeFonts.com

3. Dingbat, Symbol Fonts

4. MILITARY FONTS and SYMBOLS

こちらからは有料になっちゃいますが・・・ご参考までに。

5. Linotype.com

6. Fontscape

7. FontHaus.com

8. Mac Font Vault

9. The Font Pool

10. Fonts.com

【追記】

現在SmashingMagazineさんで、人気を集めているエントリ『Icons For Your Desktop and Icons For Your Web Designs』

こちらは、フォントではなくアイコンですが。

それにしても、クオリティの高いアイコンばかりですね・・・

これから、デザインの勉強を始める方、ちょっとデザインに興味がある方、プログラムはできるけどデザインの方はちょっと苦手な方々。。。

『Most common mistakes made by new designers』という記事を見つけました。。

っちゅうわけで、本日は、デザイン初心者の方が気をつけると良いかも？っという、ポイントとお手軽に使えそうなツールをあわせてご紹介。。

色の選択
色味って、人それぞれ好みがあるので、一概にどれが正しいとかって言い切るのは難しいですが・・・あまりにもドギツい配色のサイトは見ていて疲れますよね。。。

最近は、配色関連のツールがいろいろ充実してますね。。

kuler

COLOURlovers

以前、こちらでもご紹介した、『デザインの配色に迷ったときに使えるツールのまとめ』も参考になるかも。。。

フォントの選択
今では無料でかなりクオリティの高いフォントがダウンロードできるので、いろいろなフォントを試して、お気に入りのフォントを見つけてください。。

dafont.com

better fonts

日本語のフォントが使いたい～！って方は、
『無料で使える日本語フォント11選』も合わせてどうぞ～。

フォントのサイズ
あまりにも小さすぎたり、大きすぎるフォントサイズは読み難いですよね。。

こちらで、フォントとサイズを設定すれば、ブラウザ上でどんな感じで見えるのかお試しできます。日本語が使えるともっと良かったんですが…

Typetester

ドロップシャドウ・光彩
Photoshopなどを使えば、簡単にドロップシャドウや光彩などのエフェクトがかけられますが、使いすぎると逆にチープに見えてしまいますよね。。

↓のチュートリアルのように影のつけ方にもひと工夫してみると、また違った感じに見えていいですね。。

グラデーション
グラデーションもやりすぎに注意しましょう。。色決めに自信が無い方は、配色ツールなどであらかじめ色を決めてからの方がいいかも。。

↓こちらのツールは簡単にグラデーションを作ってくれるツール。。

Photoshopをお持ちの方は、『Photoshopのグラデーションファイルを日本の伝統色で作ってみた』こちらから、グラデーションファイルをダウンロードしてお試しください～。

まだまだ、ポイントはいっぱいあると思いますが・・・

アルファベットのフォントは、無料で結構配布されているのですが・・・
日本語のフォントは、なかなかクオリティの高いものを探すのは大変。。。

アルファベットは26文字プラス記号などで構成されているので、
フォントファイルを作られる方にも、作りやすいのでしょうね。。

日本語フォントとなると、ひらがな、カタカナ、漢字と・・・印刷関連のプロの方々が使われる文字数は17,000文字くらいになるそうで。。。

どおりで、日本語フォントがお高いのは、納得できますね。。

週末、早急に日本語フォントが必要になったので調べてみたところ、
意外とクオリティの高い無料日本語フォントってあるんですねぇ。。

っちゅうわけで、本日は無料の日本語フォントをご紹介。

1. 青柳衡山フォント

書家の青柳衡山先生が作られたフォントだそうな。。

2. あくあPフォント

手書き風のかわいらしいフォント。

3. しねきゃぷしょん

映画の字幕風フォント。

4. Mona Font

スタンダードなゴシック系フォント。

5. さざなみゴシック

スタンダードなゴシック系フォント。

6. Y.OzFontK

はらいの部分がシャープな手書き風フォント。

7. YS 手書き(YS handy writing)

ゴシックに近い手書き風フォント。

8. S2G殴り書き

太めのマジックで書きなぐったような手書き風フォント。

9. S2Gらぶ

ハートをちりばめた、かわいらしいフォント。

10. S2Gメモ

メモ風の手書きフォント。

11. S2G月

細いラインの手書き風フォント。

関連ページ
かぶってるフォントもいくつかございますが･･･
こちらのページにも、まだまだたくさんございますね。。

「脱力系フォントのまとめ」
「Design Font（デザイン・フォント）」
「フリーフォント最前線」

日本語のフォントって、ブラウザで表示させるとギザギザに表示されて、綺麗じゃないんですよねぇ。。。

かといって、画像を毎回作るわけにも行かず。。。

どうしたものかなぁ。。っと悩んでおったところ。。
発見いたしました～！！

BJKit(BeautifulJapaneseKit)
JavaScriptと日本語のフォントを埋め込んだswfを用意することで、動的にアンチエイリアスの効いたフォントに入れ替えてくれます～。

いやぁ～。。待ってました。こんなん。
かなり画期的です。もう、お気づきの方も多いかもしれませんが。。。

試しに、このブログでも導入してみました。。

どうせなら、全部のフォントに適用して、きれいきれいなブログにしようと思っておったのでございますが。。。

とにかく、重い！。。swfファイルが重い！英語だけなら、アルファベットだけで済むので、かなり使える方法なのですが。。。

数千文字ある日本語のフォントを丸々埋め込むので、まだまだ、実用レベルではないのです。。。
でもでも、タイトル部分くらいなら、なんとか、いけるかなぁ～っと。。。

まぁ、とりあえず、肝心の導入方法をご紹介じゃ！

1. BJKit(BeautifulJapaneseKit)をダウンロード
BJKit(BeautifulJapaneseKit)
のサイトから、zipファイルをダウンロードして、解凍する。解凍したファイルをサーバにアップロード。

2. ↓のコードをhtmlの<head>から</head>の間にコピーして、beautifulJapanese.jsを読み込みます。

3. ↓のコードをhtmlの</body>の上にコピーします。

↑赤字の部分は、それぞれの設定の値を入力します。

左から、変換対象タグのid、変換対象のタグ名、flashファイルのファイル名、表示領域の幅、フォントのサイズ、行間サイズ、一行あたりに表示する文字数、フォントの色、リンク時のフォントの色、ロールオーバー時のフォントの色をそれぞれ指定します。

そしたら。。。

もう少し簡単に設定できて、フォントサイズが縮小されるようになったら、かなり使えそうですねぇ。。

デザインblogランキング