Advertisement

 

 

ウェブデザインにおいてタイポグラフィーは重要なデザインパーツのひとつです。

現在ではHTML5やCSS3の登場、ウェブフォントの充実によって今まで以上にタイポグラフィーを利用したウェブサイトは増えているようです。

 

海外デザインブログWeb Design Ledgerで、タイポグラフィーをうまく利用したウェブサイトデザインを30個まとめたエントリー「30 Examples of Big Typography in Web Design」が公開されていたので、今回はこちらをベースに個人的に参考にしたいユニークなウェブデザインをご紹介します。

昨年のエントリー「タイポグラフィーをうまく利用したオシャレなウェブデザイン80個まとめ」よりさらに新しいウェブサイトが増えてきたので、再度まとめた形となります。

 

 

詳細は以下から。

 

 

タイポグラフィーを利用したオシャレ&ユニークなウェブサイトデザインまとめ

 

Gerren Lamson

グリッドレイアウトを使い、カラフルなサムネイル画像が印象的なポートフォリオサイト。

それぞれのコンテンツ上部に巨大タイポグラフィーがデザインされています。

 

 

Chris Thurman

方眼紙テクスチャの上にデカデカとレイアウトされたグリーティングメッセージがインパクト大なポートフォリオサイト。

カラーリングの参考にメモとしてエントリー。

 

 

Forefathers

現在ウェブサイト準備中の段階ですが、レトロ具合をうまく表現したタイポグラフィーデザインが公開されています。

 

 

Mark Hobbs

こちらもフリーランスデザイナーさんのポートフォリオサイトとなっており、タイポグラフィーと立体的なリボンデザインを組み合わせた目を惹くデザイン。

 

 

Polecat

ポップなイラストと一緒にデザインされたタイポグラフィーは、遊び心あふれるたのしいウェブサイトを実現しています。

 

 

Pioneers

最近他のデザインブログなどでもよく見かけるカラフルデザインのウェブサイト、イラストとタイポグラフィーを組み合わせることで他にはないインパクトを表現。

 

 

Hugo Rodrigues

トップページのヘッダー部分に実装されたスライダーに巨大タイポグラフィーデザインを利用した具体例のウェブサイト。

 

 

Tower

ウェブサービスアプリ用プロモーションページで、背景デザインとテキストエフェクトを適用したタイポグラフィーを使用しています。

 

 

Dotvita

タイポグラフィーとイメージ画像を一緒にデザインしたユニークなヘッダーデザインを使ったウェブサイトデザインのひとつ。

 

 

Campaign Monitor

背景にぼかしを加えたイメージ写真をフルスクリーンで表示、その上にレイアウトされたテキスト文字に自然と目が行く工夫がされています。

 

 

Marie Catribs

アメリカ、マイアミにあるレストランのウェブサイトデザインで、手書きされたかわいい文字と背景を切り抜いたイメージ写真を合わせてスライドさせています。

 

 

Love of My Life

「一番愛するもの」をロゴと一緒に投稿、共有する新しいウェブサービスのひとつで、テキストエフェクトを加えたロゴが印象的。

 

 

Sparkbox

アメリカにあるウェブサイト制作事務所のポートフォリオサイトで、それぞれのコンテンツに分かりやすくタイポグラフィーを利用したイメージ画像を挿入しています。

 

 

Pop Chart Lab

さまざまなジャンルをインフォグラフィックを利用してデザインしているユニークなデザイン集団で、カラフルな色使いが参考になりそうです。

 

 

Carsonfied

何度か紹介していますが、ビビッドな色使いのウェブサイト制作をお考えの方にオススメしたいウェブサイトデザイン。

 

 

Stephen Caver

各コンテンツのヘッダー部分に極太フォントを利用したウェブサイトデザイン、背景テクスチャを利用することで印象的な雰囲気に仕上げられています。

 

 

Jeremy Church

青を基調としたやさしい色使いのウェブサイトデザイン、色合いをまとめることでウェブサイト全体に統一感を与えることができます。

 

 

3 Slided Cube

最近のウェブデザイントレンドのひとつとして、レタープレス(型押し)デザインを多く見かけます。

作り方に関しては「サンプルPSD付、フォトショップで「Photoshop CS4」の様な型押し文字を作る方法」を参考にすると良いかもしれません。

 

 

Milk

1ページ完結型のポートフォリオサイトで、トップ部分にこれでもかというくらい巨大なタイポグラフィーをレイアウトしています。

 

 

Grafik

一切の不要なパーツを省きタイポグラフィーだけをレイアウトしたウェブデザイン。

上部にコンテンツ用トグルが用意されており、そこからコンテンツに移動することが可能。

 

 

Jon Brousseau

ダーク系ウェブサイトデザインのひとつで、テキストカラーを灰色とすることでアクセントカラーの水色が引き立つデザインとなっています。

 

 

Notes From California

カリフォルニアでプロジェクトを進めた著者の近況をつづったブログ形式のウェブサイトデザインで、ヘッダー部分にクールなタイポグラフィーが利用されています。

 

 

Kyle Steed

実際にスケッチで描かれたデザインパーツのみを利用した面白いウェブサイトデザイン。

ユーサビリティーの面においては?ですが、イベント用特設ページなどのアイデアにいかがでしょう。

 

 

Ben Darby

立体的にデザインされたリボン風ロゴデザインや縦長スタイルのフォントなどレトロな風合いを表現したウェブサイトデザインのひとつ。

 

 

Karel-Jan Tolsma

オランダを拠点に活動中のフリーランスデザイナーさんのポートフォリオサイトで、すべてのタイポグラフィーをウェブフォントを利用して表示しています。

 

日本語表記では難しい部分もあるかと思いますが、アイデア次第でユニークなウェブサイトデザインを制作することができるのではないでしょうか。

 

[参照元 : 30 Examples of Big Typography in Web Design – Web Design Ledger]