CJコラム

海外Webサイトに学ぶ、大胆なタイポグラフィで魅せるWebサイト5選

多様なデバイスが出現し、それぞれに最適な対応をするため、Webサイトデザインはよりシンプルになることを求められています。
シンプルになるが故にごまかしが効かず、ともすると個性のない退屈なデザインになってしまうこともあります。良いデザインにするためにはテクニックが求められ、デザイナーが頭を抱えることも少なくないでしょう。

Webサイトデザインをシンプルで魅力的に見せる手法として、タイポグラフィをうまく活用する方法があります。

タイポグラフィとは、活字を配置した時にテキストの体裁を整える方法や技術全般のことであり、Webサイトデザインにとっては最も基本的であり、もっとも重要な要素のひとつです。テキストを最適な配置、文字間、行間で読みやすくすることもタイポグラフィとしての重要な役割ですが、単なるテキストに留めるのではなく、ビジュアルとして表現することで、Webサイトデザインを魅力的に見せることができます。

タイポグラフィを活かしたデザインは、Webサイトデザインに限らず古くから使われているものです。
特に海外では雑誌やポスターなどで美しいタイポグラフィを多く見ることができます。近年ではWebサイトでも表現方法の幅が広がり、Webサイトならではのすばらしい表現が多く見られるようになりました。

今回は、海外のWebサイトの中から、タイポグラフィを大胆につかった魅力的なWebサイトをご紹介します。

via https://titan.viita-watches.com/en/

様々な向きや大きさのテキストをうまく組み合わせ、動きのある背景と合わせてインパクトがあるファーストビューになっています。スクロールしたときの商品との組み合わせ方、背景に置かれたテキストの動きなど商品の世界観が良く表現されています。


via https://studioakademi.com/

スクロールされた画像にあわせてテキストがタイプされるように変化することで、うまくスクロールを促しています。画像とテキストのバランスがとても良く魅力的に見せています。


via https://vanholtz.co/

Topページのテキストにパースをつけた見せ方、ランディングした時やオンマウス、クリック時の動きがとても良く計算されていると思います。下層ページのテキストの表示の仕方も素敵です。


via  http://www.goodfortunestl.com/

オンマウス時の画像との組み合わせ方が大胆でユニークです。個性的なフォントと色使いでイメージをうまく伝えています。



via http://www.nurturedigital.com/

Nのロゴやキーとなるアルファベットが象徴的におかれ、イラストと組み合わせたり、動画のマスクになったりしています。配色やテキストの組み方やスクロールによる動きも小気味よく、好感がもてます。

 

タイポグラフィの魅力は尽きることがありません。
この他にも数多く素晴らしい表現を見ることができます。
最近では、日本のWebサイトでも縦書きや筆文字など日本語の特徴をうまく使ったタイポグラフィ表現を見ることができるようになりました。

シンプルなWebサイトデザインが必要になった時、タイポグラフィをひとつの候補にしてみてはいかがでしょうか。

最新5件の記事