タイポグラフィーを使ったクールなウェブサイトデザイン40個まとめ

40typowebsiite

タイポグラフィーは文字の書体という枠だけでは収まらない、デザインにもすぐれたアートのひとつではないでしょうか。

ウェブサイトデザインにおいても、ロゴがタイポグラフィーを使用したデザインの一例と考えることができます。

今回は印象的なタイポグラフィーの使い方をしているウェブサイトを40個まとめた「40+ Examples of Typography Inspired in Web Design」をご紹介します。

 

英語サイトがメインとなっていますが、言葉に関係なくウェブサイトを見ているだけでわくわくしてくるデザインがたくさんです。

アニメーション要素などを強くしているため、フラッシュを使用しているものが多いかもしれません。

 

 

詳細は以下から。

 

 

タイポグラフィーをうまく使ったウェブサイトデザインまとめ


 

Kid 81

手書き風フォントをカラフルな色使いで表現しています。

とてもポップなイメージに仕上がるので、子供服、ペット用品サイトなどの参考になります。

14-cool-typography-website

 

Jam Hot

淡い灰色グラデーションを使った背景画像を使うことで立体的、エレガントに表現されます。

各ページごとに使われているフラッシュアニメーションがとてもコミカルで、かわいいですよ。

13-cool-typography-website

 

Elysium

ユニークなクリーム色のフォントがインパクトになっているデザイナーブログサイトのひとつ。

ダーク系デザインなのですが、各所に極太タイポグラフィーを配置することでうまく中和したやさしいデザインに仕上がっています。

色の選択にとても参考になるカラーリングです。

1-cool-typography-website

 

Festival Boreal 2009

今年のウェブトレンドのひとつになるかもしれないと予想されているサンセリフ系フォントが印象的なウェブサイト。

色使いもめずらしく、かわいいクジラのイラストがあたたかい気持ちにさせてくれます。

11-cool-typography-website

 

Blog

見たそのままのストレートさ、好きです。

アドレスがblog、、考えたことなかったです、、。

8-cool-typography-website

 

Jlern Design

あまり見続けていると目が回ってしまいそうになりますが、アイデアがユニークなサイトのひとつ。

毎日更新するブログサイトなどよりもポートフォリオとして活用などがよさそうですね。

21-cool-typography-website

 

Things that are Brown

細幅のフォントを使用することで、エレガントな印象を与えてくれます。

これならTypeKitなどで記事ごとにタイトルだけ表示する、そんなことも可能なのでしょうね。

26-cool-typography-website

 

Zee

Abduzeedoが運営するデザインオフィスのホームページ。

大きくタイポグラフィーをレイアウトし、残りの情報をうまくグリッドを使って並べています。

29-cool-typography-website

 

Think Do Create

テクスチャの上にタイポグラフィーをデザインすることで、ペイントしたような質感を出すことができます。

オレンジ色を使っているホームページのデザインは自然と元気をくれている気がするのですが。

34-cool-typography-website

 

Brooklyn Fare

以前ご紹介したかもしれないですが、壁紙の色使いが個人的にとても好きだったのでリマインダーとして。

38-cool-typography-website

 

Giant Creative

自然をテーマにした土色デザインが効果的に演出されているサイト。

画面中心部にタイポグラフィーを全面的にデザインすることでインパクト大です。

色使いもとても参考になるサイトではないでしょうか。

6-cool-typography-website

 

TypeJockyes

フォントを中心にオンライン販売されている会社のロゴがとても印象的だったのでエントリーです。

筆記体は可読性が悪いので使うのを控えていますが、デザインとしてはとてもまとまりがあります。

42-cool-typography-website

 

多くのウェブデザインにおいて、タイポグラフィーのレイアウトだけでなく、テクスチャを一緒に使ったり、配色を考えたり細かいところまで気を配っています

デザインを使わずフォントのスタイルのみで勝負するには、こういうところがポイントなのかもしれませんね。

 

奥の深いタイポグラフィーをもっと知りたい人は「クールなのにあまり知られていないタイポグラフィーを極めたサイト10個まとめ」で紹介したサイトをRSS購読するといいですよ。

毎日、たくさんのタイポグラフィーに関するニュースをきっと届けてくれます。

ちなみに当サイトPhotoshop VIPのRSSもよろしくお願いします。

 

>> Photoshop VIPをRSS購読する

 

参照元にはまだまだたくさんの印象的なタイポグラフィーデザインをしたウェブサイトがまとめられてます。

よろしかったら、一緒にどうぞ。

 

[参照元 : 40+ Examples of Typography Inspired in Web Design – Naldz Graphics