袋文字を取り入れたWebデザイン12選。ちょっとしたアクセントで洗練されたフォントを

Webデザインでは、基本的に見出し用と本文用で2種類のフォントを使います。前者は目をひくこと、後者は読みやすさを重視して、バランスを考えながら選ぶ場合が多いのではないでしょうか。

こうした基本から一歩踏み出したデザインに挑戦したいなら、輪郭線のみを抜き出した「袋文字」を取り入れるのがおすすめ。デザインの統一感を保ったまま、コントラストをつけられる優れものです。

今回は、袋文字と通常の文字を組み合わせた、スタイリッシュなWebデザインを12事例ご紹介します。

1. Romain Murschel

最初にご紹介するのは、Romain Murschelのポートフォリオサイト。各プロジェクトのタイトルを強調する目的で、袋文字のフォントが使われています。

液体のようにゆらめく背景の画像など、こだわりを感じる要素が取り入れられた画面に、袋文字がうまく溶け込んでいますね。

また、袋文字にはタイトルを強調しつつ、悪目立ちしないという利点も。この例では背景が文字をとおして透けており、袋文字の長所がよくあらわれています。

Romain Murschel

2. Production Portugal

次にご紹介するのは『Production Portugal』のWebサイト。動画の上に配置されたスローガンに、袋文字が使われています。

スローガンは2つの単語で構成されています。上記の例では、普通の文字フォントで書かれた「Nothing（なにもない）」がまず目に入ったあと、袋文字の「Justify（正当化する）」に視線が移動することで、全体の意味が把握できるという仕組みです。

Production Portugal

3. Addict Rave

2. Production Portugalとおなじく、『Addict Rave』も背景に動画を使っています。Production Portugalのフォントはどちらかというと控えめでしたが、こちらの文字は大きく、ビビッドなデザインです。

Addict Rave

4. Coveo Music

『Coveo Music』は、選択中の文字に袋文字を採用。画面に大きく表示される作品のタイトルにカーソルをあわせると、背景に画像が表示され、文字が袋文字に変化します。スマートできちんとした印象をあたえるデザインです。

Coveo Music

5. Tilt Story

『Tilt Story』が袋文字にしているのは、エージェンシーのロゴである「TILT」の文字。コントラストをつけることによって目立たせながらも、エレガントで洗練された雰囲気を演出しています。

Tilt Story

6. NourishEats

袋文字を使う利点のひとつは、ちょっとした工夫で、デザインに自然なアクセントをつけられるという点でしょう。

『NourishEats』は、スプリットスクリーンレイアウトを採用したフロントページに袋文字を採用。より目を引くべき左側のセクションに通常の文字を、右側のセクションに袋文字を配置し、ヒエラルキーをつけています。

NourishEats

7. Year in Review by Green Chameleon

こちらの例では、背景に大きく書かれた「2018」に袋文字を使用しています。存在感を保ちつつ、通常の文字で書かれた情報も見やすくまとまっていて、賢いデザインですね。

Year in Review by Green Chameleon

8. The Sate of European Tech

こちらも『Year in Review by Green Chameleon』とおなじく、「2018」に袋文字を採用。袋文字は、フォントの大きさを変えることなくヒエラルキーをつけられる、便利な存在であることがわかります。

The Sate of European Tech

9. Wanted for Noting

『Wanted for Nothing』のWebサイトでまず目に入ってくるのは、大きく表示された「wanted for nothing」の文字。ほかの要素の色やサイズをあえておさえ、タイトルを強調したデザインです。ここではユーザーにアクションを要求する「start」に袋文字が採用されており、ユーザーを自然に行動に導く役割を担っています。

Wanted for Noting

10. Dolly – Agency

ここまでご紹介した例では、複数の単語のうちの一部が袋文字になっていました。しかし、この例ではひとつの単語の半分を袋文字にしています。背景の画像と文字を巧みに組み合わせ、タイトルをデザインにうまく溶け込ませていますね。

Dolly – Agency

11. Vincent Saisset

Vincent Saissetのポートフォリオサイトは、作品のタイトルリストに袋文字を採用。ただタイトルを羅列するだけではく、袋文字を使うことによってタイトル自体が装飾的な役割を果たしています。アーティスティックな雰囲気が印象的です。

Vincent Saisset

12. Betamatters

『Betamatters』のWebページは、ワイヤーやシリンダーが登場するデジタル風のデザイン。左上の「BETAMATERS」と右下のメッセージでデザインを変えることにより、どちらもうまく目立たせています。右下のしっかりとした書体も、作風にマッチしていますね。

Betamatters

おわりに

袋文字の特徴は、シンプルさとスタイリッシュさ。今回ご紹介した例を見ていると、フォントを増やしたり派手な装飾をしたりするよりも、袋文字を使うほうがスマートに思えてきませんか？

または、いま使っているフォントを袋文字に作り変えてみるのも面白いかもしれません。ちょっとしたアクセントが、デザインの問題をスッキリ解決してくれるでしょう。

（原文：Nataly Birch　翻訳：Nakajima Asuka）

こちらもおすすめ！▼