【MBTI診断】16タイプ別・フリーランスに向いてる仕事/働き方
- コラム
- フリーランス/個人事業主
- 働き方
Webデザインでは、基本的に見出し用と本文用で2種類のフォントを使います。前者は目をひくこと、後者は読みやすさを重視して、バランスを考えながら選ぶ場合が多いのではないでしょうか。
こうした基本から一歩踏み出したデザインに挑戦したいなら、輪郭線のみを抜き出した「袋文字」を取り入れるのがおすすめ。デザインの統一感を保ったまま、コントラストをつけられる優れものです。
今回は、袋文字と通常の文字を組み合わせた、スタイリッシュなWebデザインを12事例ご紹介します。
目次
最初にご紹介するのは、Romain Murschelのポートフォリオサイト。各プロジェクトのタイトルを強調する目的で、袋文字のフォントが使われています。
液体のようにゆらめく背景の画像など、こだわりを感じる要素が取り入れられた画面に、袋文字がうまく溶け込んでいますね。
また、袋文字にはタイトルを強調しつつ、悪目立ちしないという利点も。この例では背景が文字をとおして透けており、袋文字の長所がよくあらわれています。
次にご紹介するのは『Production Portugal』のWebサイト。動画の上に配置されたスローガンに、袋文字が使われています。
スローガンは2つの単語で構成されています。上記の例では、普通の文字フォントで書かれた「Nothing(なにもない)」がまず目に入ったあと、袋文字の「Justify(正当化する)」に視線が移動することで、全体の意味が把握できるという仕組みです。
2. Production Portugalとおなじく、『Addict Rave』も背景に動画を使っています。Production Portugalのフォントはどちらかというと控えめでしたが、こちらの文字は大きく、ビビッドなデザインです。
『Coveo Music』は、選択中の文字に袋文字を採用。画面に大きく表示される作品のタイトルにカーソルをあわせると、背景に画像が表示され、文字が袋文字に変化します。スマートできちんとした印象をあたえるデザインです。
『Tilt Story』が袋文字にしているのは、エージェンシーのロゴである「TILT」の文字。コントラストをつけることによって目立たせながらも、エレガントで洗練された雰囲気を演出しています。
袋文字を使う利点のひとつは、ちょっとした工夫で、デザインに自然なアクセントをつけられるという点でしょう。
『NourishEats』は、スプリットスクリーンレイアウトを採用したフロントページに袋文字を採用。より目を引くべき左側のセクションに通常の文字を、右側のセクションに袋文字を配置し、ヒエラルキーをつけています。
こちらの例では、背景に大きく書かれた「2018」に袋文字を使用しています。存在感を保ちつつ、通常の文字で書かれた情報も見やすくまとまっていて、賢いデザインですね。
Year in Review by Green Chameleon
こちらも『Year in Review by Green Chameleon』とおなじく、「2018」に袋文字を採用。袋文字は、フォントの大きさを変えることなくヒエラルキーをつけられる、便利な存在であることがわかります。
『Wanted for Nothing』のWebサイトでまず目に入ってくるのは、大きく表示された「wanted for nothing」の文字。ほかの要素の色やサイズをあえておさえ、タイトルを強調したデザインです。ここではユーザーにアクションを要求する「start」に袋文字が採用されており、ユーザーを自然に行動に導く役割を担っています。
ここまでご紹介した例では、複数の単語のうちの一部が袋文字になっていました。しかし、この例ではひとつの単語の半分を袋文字にしています。背景の画像と文字を巧みに組み合わせ、タイトルをデザインにうまく溶け込ませていますね。
Vincent Saissetのポートフォリオサイトは、作品のタイトルリストに袋文字を採用。ただタイトルを羅列するだけではく、袋文字を使うことによってタイトル自体が装飾的な役割を果たしています。アーティスティックな雰囲気が印象的です。
『Betamatters』のWebページは、ワイヤーやシリンダーが登場するデジタル風のデザイン。左上の「BETAMATERS」と右下のメッセージでデザインを変えることにより、どちらもうまく目立たせています。右下のしっかりとした書体も、作風にマッチしていますね。
袋文字の特徴は、シンプルさとスタイリッシュさ。今回ご紹介した例を見ていると、フォントを増やしたり派手な装飾をしたりするよりも、袋文字を使うほうがスマートに思えてきませんか?
または、いま使っているフォントを袋文字に作り変えてみるのも面白いかもしれません。ちょっとしたアクセントが、デザインの問題をスッキリ解決してくれるでしょう。
(原文:Nataly Birch 翻訳:Nakajima Asuka)
こちらもおすすめ!▼
袋文字を取り入れたWebデザイン12選。ちょっとしたアクセントで洗練されたフォントを
Workship MAGAZINE
タイポグラフィーのデザイン基本16ルール&作り方。原則は時に”破られる”
Workship MAGAZINE
袋文字を取り入れたWebデザイン12選。ちょっとしたアクセントで洗練されたフォントを
Workship MAGAZINE