Advertisement

80typographysite

 

ウェブデザインは、HTML5やCSS3などの登場によって今までは難しかった表現もできるようになり、めまぐるしく変化しています。

そんな中でもタイポグラフィーを利用したウェブデザインは増えており、2010年のウェブデザイントレンドのひとつとしても考えられています。

 

海外ブログTut Toasterでは、タイポグラフィーをうまく利用したウェブデザインを80個まとめたエントリー「Showcase of Excellent Uses of Typography in Websites」が公開されていたので、今回はご紹介します。

ウェブサイト制作を行うときのインスピレーション、アイデア用としてご覧になると良いかもしれません。

 

 

詳細は以下から。

 

 

タイポグラフィーを利用したクールなウェブデザインまとめ 


 

 Design Wise

質感の高いテクスチャ素材に方眼紙のようなラインをデザインしたダーク系ウェブサイト。

ピンクを基調に配色されているカラーリングは参考になりそうです。

designwise

 

 

Jeroen Homan

やさひいグランジテクスチャをヘッダーに利用したシンプルなウェブデザインのひとつ。

ミニマルなデザインとなっている分、太字タイポグラフィーがうまくレイアウトされています。

jeroenhoman

 

 

Seven Little Design

鮮やかな青系グラデーションが美しいヘッダー部分に型押し風タイポグラフィーを利用しています。

型押し文字をPhotoshopでデザインしたいときはこちらの日本語チュートリアルでどうぞ。

stevenlittledesign

 

 

Giorgio Molinaro

ダーク系ウェブサイトのひとつですが、配色がとてもクールだったので、メモとしてエントリー。

giorgiomolinaro

 

 

K-Win

画面いっぱいにPhotoshopで加工を加えたテキストをでかでかとレイアウトしたウェブサイト。

背景の淡いグラデーションなどを利用することでより立体感を演出することができます。

kwin

 

 

Charles Elena Design

巨大なシンプルページでデザインされたユニークなウェブサイトのひとつで、みんな大好きHelveticaフォントを利用しています。

charleselena

 

 

Adhemas Batista

フラッシュでデザインされたウェブデザインのひとつですが、立体的なタイポグラフィーと巨大な背景用写真の相性も抜群です。

adhemas

 

 

Filip Slovacek

コンテンツごとに分けて巨大なタイポグラフィーを利用しており、見やすさやユーサビリティーの面においても良いのではないでしょうか。

slovaczech

 

 

Pagers

極太フォントだけでなく、シンプルな細字フォントもイラストなどを一緒に使うことでやさしい親しみやすいウェブデザインとなります。

gandrweb

 

 

Tyler Finck

手書きで落書きされたようなデザインも最近よく見かけるデザインパーツのひとつではないでしょうか。

sursly

 

 

Dream Lines

トップページにウェルカムメッセージを大きく表示させ、同時にメニューとして利用することができるユニークなウェブサイトのひとつ。

dreamerlines

 

 

Squarespace

ヘッダー部分を大きく利用することで、メッセージ性の強いウェブサイトをデザインすることができそうです。

企業用ホームページ制作などを行う場合に参考になりそうなレイアウトです。

squarespace

 

 

Squared Eye

パステルカラーを中心とした配色を利用することで、誰にでも親しみやすいデザインになりますね。

フォントスタイルを揃えるという点もポイントになりそうです。

squaredeye

 

 

Freehand Futurist

最近のウェブデザインの傾向のひとつとして、雑誌、マガジンのように余白スペースを十分利用し、タイポグラフィーをレイアウトするウェブサイトをよく見かけるようになりました。

メニュー部分も色を変更することでわかりやすくなっています。

freehandfutorist

 

 

72nd Ave.

タイポグラフィーをデザインとして利用している好例としてメモ。

72ave

 

 

RVLT

全編フラッシュを利用して作成されたウェブサイトのひとつで、戻る、進むボタンはインパクトがあります。

rvlt

 

 

Blake Allen Design

ダーク系ウェブサイトのひとつですが、真っ黒(#000000)を利用しないなど配色がとても参考になったのでメモとして。

blakeallendesign

 

 

Established & Sons

複数のフォントを組み合わせたロゴを利用したウェブサイトのひとつ。

目に優しい背景色を利用するなど細かい部分にこだわったデザインに仕上がっています。

ミニマルウェブデザインを制作したいときなどに参考になりそうです。

establishedandsons

 

 

Bukar!

サイトのテーマカラーを決め、タイポグラフィーにもうまく利用することでサイト全体の統一感を持たせることが可能となります。

今回は黄色をテーマカラーとしていますが、よく見ると淡いグラデーションを利用していますね。

bukar

 

 

VI

レイアウトの難しい細字フォントもユニークなイメージ画像と一緒にレイアウトすることでクールなデザインへと早代わりしてしまいます。

これは覚えておきたいテクニックかもしれません。

wearevi

 

 

Mammoth

画面いっぱいにスライドするヘッダーがユニークでインパクトのあるウェブサイトのひとつ。

シンプルなウェブサイトデザインでは、タイポグラフィーに利用するカラーリングも重要になってきそうです。

mammothadvertising

 

参照元サイトには、今回紹介したウェブサイト以外にもアイデアになりそうなデザインがいくつも掲載されています。

よろしかったらこちらも一緒に合わせてどうぞ。

 

[参照元 : Showcase of Excellent Uses of Typography in Websites – Tut Toaster]