強い印象を与えるタイポグラフィ参考サイト6選

初めまして、デザイナーのchiakiです。

今回は今年流行っていて個人的にも気になっていた、タイポグラフィデザインのサイトをいくつか紹介したいと思います。

タイポグラフィとは

同じ文章でも、文章の書体、配置など構成や表現の仕方を変えることで、見る人に与える印象は大きく変わってきます。

フォントを文章として読ませたいのか、それともグラフィックとして見せたいのかによって、適切なタイポグラフィを選択しましょう。

可読性の高さを優先させる文章(商品の説明文など)なのか、そのwebページのイメージを優先させるのか(キャッチコピーなど)を考えると、フォントが選択しやすいかもしれません。

タイポグラフィ参考サイト

 

makespace.

webサイト:https://makespacegroup.com/

フォントは同じですが、サイズを2種類にすることで、まず読んでほしいキャッチにまず目がいくようになっています。

Houndstooth

webサイト:https://www.houndstoothsc.com/

このサイトは写真は最低限しか使用しておらず、ほぼテキストで構成されています。

読んでほしいフォントと、グラフィックとしてのフォントの違いが分かりやすく使い分けられていると思います。

Chocolaphil

webサイト:https://chocolaphil.com/

目立たせたいフレーズを明朝体で表現しており、チョコレートのような柔らかい印象を見る人に与えています。

説明文のところはゴシック体ですが、フォントサイズや文字間をあけることで、明朝体の柔らかさを壊さずに、非常に読みやすいです。

Studio Akademi

webサイト:https://studioakademi.com/

ファーストビューは大きなテキストのみです。最初にみたときにメッセージが強く伝わってきますね。

こちらのサイトはスクロールするとそれぞれのメニュータイトルが同じように大きなテキストで表示され、またテキストのアニメーションも印象的です。

Deskpass

webサイト:https://www.deskpass.com/

二種類のフォントを使い分けており、可愛らしさと清潔感があります。テキストごとに色分けもしており、読みやすさもあります。

Museum of wi-fi

webサイト:http://museumofwifi.com/

ファーストビューで、フォントでwi-fiマークを表しています。全体的にゴシック系を使用しており、統一感がありまとまっているサイトです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です