2010年1月28日 
タイポグラフィーは文字の書体という枠だけでは収まらない、デザインにもすぐれたアートのひとつではないでしょうか。
ウェブサイトデザインにおいても、ロゴがタイポグラフィーを使用したデザインの一例と考えることができます。
今回は印象的なタイポグラフィーの使い方をしているウェブサイトを40個まとめた「40+ Examples of Typography Inspired in Web Design」をご紹介します。
英語サイトがメインとなっていますが、言葉に関係なくウェブサイトを見ているだけでわくわくしてくるデザインがたくさんです。
アニメーション要素などを強くしているため、フラッシュを使用しているものが多いかもしれません。
詳細は以下から。
タイポグラフィーをうまく使ったウェブサイトデザインまとめ
手書き風フォントをカラフルな色使いで表現しています。
とてもポップなイメージに仕上がるので、子供服、ペット用品サイトなどの参考になります。
淡い灰色グラデーションを使った背景画像を使うことで立体的、エレガントに表現されます。
各ページごとに使われているフラッシュアニメーションがとてもコミカルで、かわいいですよ。
ユニークなクリーム色のフォントがインパクトになっているデザイナーブログサイトのひとつ。
ダーク系デザインなのですが、各所に極太タイポグラフィーを配置することでうまく中和したやさしいデザインに仕上がっています。
色の選択にとても参考になるカラーリングです。
今年のウェブトレンドのひとつになるかもしれないと予想されているサンセリフ系フォントが印象的なウェブサイト。
色使いもめずらしく、かわいいクジラのイラストがあたたかい気持ちにさせてくれます。
見たそのままのストレートさ、好きです。
アドレスがblog、、考えたことなかったです、、。
あまり見続けていると目が回ってしまいそうになりますが、アイデアがユニークなサイトのひとつ。
毎日更新するブログサイトなどよりもポートフォリオとして活用などがよさそうですね。
細幅のフォントを使用することで、エレガントな印象を与えてくれます。
これならTypeKitなどで記事ごとにタイトルだけ表示する、そんなことも可能なのでしょうね。
Abduzeedoが運営するデザインオフィスのホームページ。
大きくタイポグラフィーをレイアウトし、残りの情報をうまくグリッドを使って並べています。
テクスチャの上にタイポグラフィーをデザインすることで、ペイントしたような質感を出すことができます。
オレンジ色を使っているホームページのデザインは自然と元気をくれている気がするのですが。
以前ご紹介したかもしれないですが、壁紙の色使いが個人的にとても好きだったのでリマインダーとして。
自然をテーマにした土色デザインが効果的に演出されているサイト。
画面中心部にタイポグラフィーを全面的にデザインすることでインパクト大です。
色使いもとても参考になるサイトではないでしょうか。
フォントを中心にオンライン販売されている会社のロゴがとても印象的だったのでエントリーです。
筆記体は可読性が悪いので使うのを控えていますが、デザインとしてはとてもまとまりがあります。
多くのウェブデザインにおいて、タイポグラフィーのレイアウトだけでなく、テクスチャを一緒に使ったり、配色を考えたり細かいところまで気を配っています。
デザインを使わずフォントのスタイルのみで勝負するには、こういうところがポイントなのかもしれませんね。
奥の深いタイポグラフィーをもっと知りたい人は「クールなのにあまり知られていないタイポグラフィーを極めたサイト10個まとめ」で紹介したサイトをRSS購読するといいですよ。
毎日、たくさんのタイポグラフィーに関するニュースをきっと届けてくれます。
ちなみに当サイトPhotoshop VIPのRSSもよろしくお願いします。
参照元にはまだまだたくさんの印象的なタイポグラフィーデザインをしたウェブサイトがまとめられてます。
よろしかったら、一緒にどうぞ。
[参照元 : 40+ Examples of Typography Inspired in Web Design – Naldz Graphics
