Advertisement

 

海外デザインブログWeb Design Ledgerで、素敵なタイポグラフィーを使ったWebサイトを21個まとめたエントリー「21 Inspiring Examples of Typography in Web Design」が公開されていたので、今回はご紹介します。

 

あまり見かけないレイアウトや配色の組み合わせなどWebデザイン制作の参考にしてみてはいかがでしょう。

 

 

詳細は以下から。

 

 

タイポグラフィーを使ったWebサイトデザインまとめ

 

Kantt

すっきりとしたレイアウトに鮮やかなカラーリングが印象的なWebデザイン、要所にCSSアニメーションを使っており見ていて飽きません。

web.typog16

 

 

Think Moto

フルスクリーンに映し出されたモノクロ写真とタイポグラフィーの組み合わせがオシャレなWebデザイン、ページの展開もユニークです。

web.typog19

 

 

Shaw & Shaw

撮影した写真をスライドショーで魅せるポートフォリオサイト、デザインパーツの配色が参考になりそうな一押しサイト◎です。

web.typo17

 

 

Rogge & Pott

カラフルなタイポグラフィーが重なるアニメーションがインパクト大なWebデザイン、ドイツのデザイン事務所のようです。

web.typo02

 

 

Games We Played

やさしい色使いでアルファベット順にコンテンツを並べたウェブサイト、子供が喜びそうなデザイン。シンガポールです。

web.typog10

 

 

La Wine

画像を使わずにWebフォントのみを使ってデザインされたタイポグラフィーが印象的なサイト、配色の参考としてメモ。

web.typo04

 

 

Moody International

アース色のやさしい配色や中央にレイアウトされたロゴなど企業用Webサイト作成の参考としていかがでしょう。

web.typog14

 

 

Fuzzco

画面いっぱいにレイアウトされたシンプルなグリッドデザイン、余白スペースの取り方など参考にしたいサイトのひとつ。

web.typog12

 

 

McFarlane Change Management

水平方向にスライドしコンテンツ展開をおこなうWebデザイン、Webフォントを利用しているサイトを多く見かけるようになりました。

web.typog21

 

 

Outside the Wire

手描き文字とミニマルなフォントを組み合わせたロゴが印象的だったWebサイト、トップページのみフルスクリーン写真を利用しています。

web.typog20

 

 

The Cocktails App

カクテルの作り方レシピをまとめたiPhone用アプリサイト、グラス越しのロゴがゆがんでいます、。

web.typog18

 

 

Unlisted Collection

落ち着いた配色とタイポグラフィーの効果的なレイアウト方法が参考になりそうなので。各ページの配色が個人的にツボでした。

web.typog11

 

 

Henry & Co. Real Estate

不動産のWebサイトということが分からないくらいにオシャレなレトロテイストなデザインサイト。

web.typog15

 

 

Kansas City Creep Fest

シングルページに情報をつめこんだイベント告知用デザイン、いろいろな用途、ジャンルに応用できそうです。

web.typo05

 

 

Give Beyond Me

ややかすれたグランジテイストとレトロな配色、手描きフォントをオシャレにまとめたWebデザインのひとつ。

web.typog01

 

 

Austin Beerworks

ビール工場のWebサイトなのですが、タイポグラフィーとテクスチャの使い方がインパクトなデザイン。個人的にメモとしてエントリー。

web.typog09

 

[fancy_box][参照元 : 21 Inspiring Examples of Typography in Web Design – Web Design Ledger][/fancy_box]