Advertisement

typographyweb2

 

タイポグラフィーを使ったデザインのウェブサイトをよく見かけます。、

特に最近は、ヘッダースペースを大きく活用することで、大胆でクリエイティブなタイポグラフィーが多いように感じます。

 

 

今回はタイポグラフィーを使った魅力的なウェブデザインをまとめた2つの記事「A Showcase of Beautiful Typiography in Web Design」と「55 Examples of Huge Typography in Web Design」をまとめてご紹介します。

 

 

以前にも「タイポグラフィーを使ったクールなウェブサイトデザイン40個まとめ」で取り上げていますが、まだ未紹介のウェブサイトを中心にまとめています。

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

どのサイトもフォントの使い方やレイアウト方法など参考になるポイントが多いのではないでしょうか。

 

 

 

詳細は以下から。

 

 

 

タイポグラフィーを使った魅力的なウェブサイトまとめ

 


 

Stack OverFlow

ナチュラルなアース色を使ったミニマルなウェブデザインに、インパクトのある赤色タイポグラフィーを使ったユニークなウェブサイト。

オリジナリティにあふれるウェブサイトではないでしょうか。

hugetypo27

 

 

 

Charles Elena

先日紹介したシングルページ完結型のポートフォリオサイトです。

みんな大好きヘルベチカフォントを大きくレイアウトしたレイアウトとなっており、コンテンツごとにユニークなデザインが見ているだけでもたのしませてくれます。

無造作にレイアウトされているようなタイポグラフィーも、グリッドを使えばすっきりと整列することができます。

hugetypo01

 

 

 

Teez

ウェブサイトのトップ画面にデカデカと筆記体フォントをレイアウトしたユニークなデザイン。

ページをクリックすると、リキッド型レイアウトで組まれており、まるでカタログを広げたようなデザインは参考になるかもしれません。

hugetypo05

 

 

 

Digital Podge

複雑なデータなどをデザインを使って表現するインフォグラフィックスは個人的に集めています。

使われているカラーの配色もとてもやさしく仕上がっており、なによりシンプルで分かりやすいデザインが好印象です。

hugetypo07

 

 

 

Rareview

極太系タイポグラフィー以外にも、細いフォントを使うことでエレガントな印象を与えてくれるウェブサイトのひとつ。

半透明ボックス枠を使うことで、グラデーションのきれいな背景画像が透けて見えており、ナイスです。

hugetypo10

 

 

 

Rich Brown

イギリスを拠点に活動をされているデザイナーさんのポートフォリオサイト。

落ち着いたイメージの配色は特に参考にさせてもらいたいところです。

hugetypo12

 

 

 

Barney Funk.com

ポップコーンをオンライン販売しているユニークなウェブサイトのひとつ。

すべてフラッシュで組み込まれていますが、太めのフォントデザインとダウンボールテクスチャを使ったラフなグランジデザインがとてもよい質感を演出しています。

hugetypo14

 

 

 

Sketch Odopod

手書風デザインをウェブサイトに加えると、アート性の高いデザインに仕上げることができます。

背景に使われている色も、真っ白(#ffffff)ではなく、薄灰色(#dfdfdf)などを使うことで、淡い手書き感をデザインできますね。

hugetypo21

 

 

 

The Plant

ヘッダー部分をウィンドウ幅すべて使ってデザインしているのですが、使われているかわいいイラストとフォントのバランスがとても好印象です。

企業用ウェブサイトデザインはもちろん、イラストを中心に作成されているデザイナーさんのポートフォリオなどにも参考になるレイアウトではないでしょうか。

hugetypo22

 

 

 

Gummisig

こちらは何度か紹介しているのですが、デザインがとても参考になるので再度エントリー。

透明感のある大きな背景画像デザインと、ヘルベチカフォントの組み合わせがオシャレです。

hugetypo28

 

 

 

Ryan Keiser

レトロな配色を使ったウェブデザインとなっており、あまり他では見ないデザインのひとつ。

方眼紙テクスチャを全体に使い、すっきりとしたレイアウトはお手本にしたいところです。

hugetypo29

 

 

 

Bullet PR

こちらもシングルページ完結型ポートフォリオデザインのひとつ。

サムネイル画像では分かりにくいのですが、スライドしてコンテンツを移動するのですが、長いリボンを使ったデザインアイデアはユニークではないでしょうか。

hugetypo33

 

 

 

Electric Pulp

質感の高いウッドテクスチャを背景に使ったデザイン性の高いウェブデザインのひとつ。

タイポグラフィーをウッドテクスチャに掘り込んだようなリアル感は面白いですね。

hugetypo34

 

 

 

Flash Gamming Summit 2010

フラッシュゲームに特化したウェブデザインとなっており、ビビットな色使いがウェブサイトのテーマともばっちりはまっています。

配色ひとつでイメージがまったく変わってきますので、カラーリングには気をつけたいところです。

hugetypo43

 

 

 

Grow

カラフルでポップな切り抜き画像と太字フォントの組み合わせがシンプルですが、かわいいウェブデザインのひとつ。

apple風のシンプルなデザインはいろいろなレイアウトで応用されていますね。

hugetypo44

 

 

 

Word It

立体的なリボンをタイポグラフィーと一緒に使うことでさらに3D感が増したロゴがナイスです。

使われているエレガントな色の配色も参考になるのではないでしょうか。

hugetypo46

 

 

 

Polar Gold

このサイトはぜひ一度チェックしていただくことでタイポグラフィーのよさが分かります。

サムネイルでは分かりませんが、実はこんなにカラフルなんですよ。

hugetypo48

 

 

 

David Jonson

ヘッダー部分にカラフルなタイポグラフィーを使っており、一度見たら忘れることのできないデザインが素敵です。

こちらもグリッドを使って、全体をすっきりとまとめていますね。

24

 

 

 

Huge Inc.

こちらも何度か紹介していると思いますが、もう一度個人的メモとしてエントリー。

アクセントカラーのピンクと極太タイポグラフィーの組み合わせがかわいいです。

27

 

 

 

Lorem Ipsum

タイポグラフィーというよりもフォントを並べただけのスタイリッシュなデザインがかっこいいウェブデザインのひとつ。

こちらで使われているフォントは、Photoshop VIPでもサムネイル画像などでたびたび使っており、重宝しています。

35

 

お好みのデザインを使ったウェブサイトは見つかりましたか。

ウェブサイトデザインを制作するときなどのインスピレーションの参考となれば幸いです。

 

また「黒を基調としたダーク系デザインの美しいウェブサイト50個まとめ」においても、デザイン性に優れたウェブデザインをまとめて確認することができますよ。

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

 

(参考記事) Photoshop VIP >> 黒を基調としたダーク系デザインの美しいウェブサイト50個まとめ

50darkimageweb

 

参照元サイトにもタイポグラフィーを利用したデザインサイトがいくつも紹介されています。

こちらもぜひ覗いてみてください。

 

[参照元 : A Showcase of Beautiful Typography in Web Design – Line25]

[参照元: 55 Examples of Huge Typography in Web Design – Web Design Ledger]