2010年6月21日 
ウェブデザインは、HTML5やCSS3などの登場によって今までは難しかった表現もできるようになり、めまぐるしく変化しています。
そんな中でもタイポグラフィーを利用したウェブデザインは増えており、2010年のウェブデザイントレンドのひとつとしても考えられています。
海外ブログTut Toasterでは、タイポグラフィーをうまく利用したウェブデザインを80個まとめたエントリー「Showcase of Excellent Uses of Typography in Websites」が公開されていたので、今回はご紹介します。
ウェブサイト制作を行うときのインスピレーション、アイデア用としてご覧になると良いかもしれません。
詳細は以下から。
タイポグラフィーを利用したクールなウェブデザインまとめ
質感の高いテクスチャ素材に方眼紙のようなラインをデザインしたダーク系ウェブサイト。
ピンクを基調に配色されているカラーリングは参考になりそうです。
やさひいグランジテクスチャをヘッダーに利用したシンプルなウェブデザインのひとつ。
ミニマルなデザインとなっている分、太字タイポグラフィーがうまくレイアウトされています。
鮮やかな青系グラデーションが美しいヘッダー部分に型押し風タイポグラフィーを利用しています。
型押し文字をPhotoshopでデザインしたいときはこちらの日本語チュートリアルでどうぞ。
ダーク系ウェブサイトのひとつですが、配色がとてもクールだったので、メモとしてエントリー。
画面いっぱいにPhotoshopで加工を加えたテキストをでかでかとレイアウトしたウェブサイト。
背景の淡いグラデーションなどを利用することでより立体感を演出することができます。
巨大なシンプルページでデザインされたユニークなウェブサイトのひとつで、みんな大好きHelveticaフォントを利用しています。
フラッシュでデザインされたウェブデザインのひとつですが、立体的なタイポグラフィーと巨大な背景用写真の相性も抜群です。
コンテンツごとに分けて巨大なタイポグラフィーを利用しており、見やすさやユーサビリティーの面においても良いのではないでしょうか。
極太フォントだけでなく、シンプルな細字フォントもイラストなどを一緒に使うことでやさしい親しみやすいウェブデザインとなります。
手書きで落書きされたようなデザインも最近よく見かけるデザインパーツのひとつではないでしょうか。
トップページにウェルカムメッセージを大きく表示させ、同時にメニューとして利用することができるユニークなウェブサイトのひとつ。
ヘッダー部分を大きく利用することで、メッセージ性の強いウェブサイトをデザインすることができそうです。
企業用ホームページ制作などを行う場合に参考になりそうなレイアウトです。
パステルカラーを中心とした配色を利用することで、誰にでも親しみやすいデザインになりますね。
フォントスタイルを揃えるという点もポイントになりそうです。
最近のウェブデザインの傾向のひとつとして、雑誌、マガジンのように余白スペースを十分利用し、タイポグラフィーをレイアウトするウェブサイトをよく見かけるようになりました。
メニュー部分も色を変更することでわかりやすくなっています。
タイポグラフィーをデザインとして利用している好例としてメモ。
全編フラッシュを利用して作成されたウェブサイトのひとつで、戻る、進むボタンはインパクトがあります。
ダーク系ウェブサイトのひとつですが、真っ黒(#000000)を利用しないなど配色がとても参考になったのでメモとして。
複数のフォントを組み合わせたロゴを利用したウェブサイトのひとつ。
目に優しい背景色を利用するなど細かい部分にこだわったデザインに仕上がっています。
ミニマルウェブデザインを制作したいときなどに参考になりそうです。
サイトのテーマカラーを決め、タイポグラフィーにもうまく利用することでサイト全体の統一感を持たせることが可能となります。
今回は黄色をテーマカラーとしていますが、よく見ると淡いグラデーションを利用していますね。
レイアウトの難しい細字フォントもユニークなイメージ画像と一緒にレイアウトすることでクールなデザインへと早代わりしてしまいます。
これは覚えておきたいテクニックかもしれません。
画面いっぱいにスライドするヘッダーがユニークでインパクトのあるウェブサイトのひとつ。
シンプルなウェブサイトデザインでは、タイポグラフィーに利用するカラーリングも重要になってきそうです。
参照元サイトには、今回紹介したウェブサイト以外にもアイデアになりそうなデザインがいくつも掲載されています。
よろしかったらこちらも一緒に合わせてどうぞ。
[参照元 : Showcase of Excellent Uses of Typography in Websites - Tut Toaster]
