ウェブデザインにおいてタイポグラフィーは重要なデザインパーツのひとつです。
現在ではHTML5やCSS3の登場、ウェブフォントの充実によって今まで以上にタイポグラフィーを利用したウェブサイトは増えているようです。
海外デザインブログWeb Design Ledgerで、タイポグラフィーをうまく利用したウェブサイトデザインを30個まとめたエントリー「30 Examples of Big Typography in Web Design」が公開されていたので、今回はこちらをベースに個人的に参考にしたいユニークなウェブデザインをご紹介します。
昨年のエントリー「タイポグラフィーをうまく利用したオシャレなウェブデザイン80個まとめ」よりさらに新しいウェブサイトが増えてきたので、再度まとめた形となります。
詳細は以下から。
タイポグラフィーを利用したオシャレ&ユニークなウェブサイトデザインまとめ
グリッドレイアウトを使い、カラフルなサムネイル画像が印象的なポートフォリオサイト。
それぞれのコンテンツ上部に巨大タイポグラフィーがデザインされています。
方眼紙テクスチャの上にデカデカとレイアウトされたグリーティングメッセージがインパクト大なポートフォリオサイト。
カラーリングの参考にメモとしてエントリー。
現在ウェブサイト準備中の段階ですが、レトロ具合をうまく表現したタイポグラフィーデザインが公開されています。
こちらもフリーランスデザイナーさんのポートフォリオサイトとなっており、タイポグラフィーと立体的なリボンデザインを組み合わせた目を惹くデザイン。
ポップなイラストと一緒にデザインされたタイポグラフィーは、遊び心あふれるたのしいウェブサイトを実現しています。
最近他のデザインブログなどでもよく見かけるカラフルデザインのウェブサイト、イラストとタイポグラフィーを組み合わせることで他にはないインパクトを表現。
トップページのヘッダー部分に実装されたスライダーに巨大タイポグラフィーデザインを利用した具体例のウェブサイト。
ウェブサービスアプリ用プロモーションページで、背景デザインとテキストエフェクトを適用したタイポグラフィーを使用しています。
タイポグラフィーとイメージ画像を一緒にデザインしたユニークなヘッダーデザインを使ったウェブサイトデザインのひとつ。
背景にぼかしを加えたイメージ写真をフルスクリーンで表示、その上にレイアウトされたテキスト文字に自然と目が行く工夫がされています。
アメリカ、マイアミにあるレストランのウェブサイトデザインで、手書きされたかわいい文字と背景を切り抜いたイメージ写真を合わせてスライドさせています。
「一番愛するもの」をロゴと一緒に投稿、共有する新しいウェブサービスのひとつで、テキストエフェクトを加えたロゴが印象的。
アメリカにあるウェブサイト制作事務所のポートフォリオサイトで、それぞれのコンテンツに分かりやすくタイポグラフィーを利用したイメージ画像を挿入しています。
さまざまなジャンルをインフォグラフィックを利用してデザインしているユニークなデザイン集団で、カラフルな色使いが参考になりそうです。
何度か紹介していますが、ビビッドな色使いのウェブサイト制作をお考えの方にオススメしたいウェブサイトデザイン。
各コンテンツのヘッダー部分に極太フォントを利用したウェブサイトデザイン、背景テクスチャを利用することで印象的な雰囲気に仕上げられています。
青を基調としたやさしい色使いのウェブサイトデザイン、色合いをまとめることでウェブサイト全体に統一感を与えることができます。
最近のウェブデザイントレンドのひとつとして、レタープレス（型押し）デザインを多く見かけます。
作り方に関しては「サンプルPSD付、フォトショップで「Photoshop CS4」の様な型押し文字を作る方法」を参考にすると良いかもしれません。
1ページ完結型のポートフォリオサイトで、トップ部分にこれでもかというくらい巨大なタイポグラフィーをレイアウトしています。
一切の不要なパーツを省きタイポグラフィーだけをレイアウトしたウェブデザイン。
上部にコンテンツ用トグルが用意されており、そこからコンテンツに移動することが可能。
ダーク系ウェブサイトデザインのひとつで、テキストカラーを灰色とすることでアクセントカラーの水色が引き立つデザインとなっています。
カリフォルニアでプロジェクトを進めた著者の近況をつづったブログ形式のウェブサイトデザインで、ヘッダー部分にクールなタイポグラフィーが利用されています。
実際にスケッチで描かれたデザインパーツのみを利用した面白いウェブサイトデザイン。
ユーサビリティーの面においては？ですが、イベント用特設ページなどのアイデアにいかがでしょう。
立体的にデザインされたリボン風ロゴデザインや縦長スタイルのフォントなどレトロな風合いを表現したウェブサイトデザインのひとつ。
オランダを拠点に活動中のフリーランスデザイナーさんのポートフォリオサイトで、すべてのタイポグラフィーをウェブフォントを利用して表示しています。
日本語表記では難しい部分もあるかと思いますが、アイデア次第でユニークなウェブサイトデザインを制作することができるのではないでしょうか。
[参照元 : 30 Examples of Big Typography in Web Design – Web Design Ledger]
