文字フォントをデザインする方法

sentence_type_02

スマートフォンが主流となる今、テキストの重要性はさらに高まっていく一方、日本のサイトは、世界のサイトとまったく違う傾向があります。
それは、スマートフォンのモバイル時代に突入している現代では、昔ながらの日本のサイトでは情報量が多すぎることで、閲覧者が迷う可能性が高いため、UX(ユーザーエクスペリエンス)の重要性が今後さらに評価されることでしょう。

情報量が多い有名な日本のサイトの多くを見てみると、次のような傾向が見られます。

  • 文字が敷き詰められている
  • 画像が小さい、画質の悪い
  • 3カラムなどの、多くのカラム
  • きらきら光るバナーや、赤、黄色といった派手な色使い
  • 画像に頼った装飾

例えば、 Yahoo Japan、楽天、ニコニコ動画など
多くのサイトで上記のようなサイトがまだまだたくさんあるのが現実です。

日本独自のサイトの特徴とは

海外との違いはなんといっても文字。「日本語」と「英語」の違いが大きいと言えます。文字量が増える中で、文字の大きさはとても重要な意味を持ちます。雑誌などでは、ヘッドライン、小見出し、ボディーコピーといった文字の大きさを変えることで、読み手が読みやすいようにすることが普通ではあるが、インターネット上では、なかなかこの「基本的な文字のサイズ」を無視する傾向があります。サイズを調整して整理することは、読む順序や構成を読み手に伝えることができ、探している情報を見つける手助けをしていることであり、UXの考え方の基本です。具体的には、読みやすさを改善し、操作性をアップすることができるようにするには、文字テキストの階層(大きさや太さを段階で分ける)を利用すること。

図の文字サンプルのように、大きさの変化を利用しない場合では、一目見ただけでは、何が重要なメッセージなの分かりません。自分が調べたい内容であっても、文字量が多くなる日本語では、メリハリをしっかりとつけないと、相手は理解できません。すべての文字を読んでいると思い込んでいれば大間違いで、読み手はすべての文章の6割程度しか、読んでいないことも少なくないのです。

効果的に文字の大きさを構成するには

では、どのようにデザインの中で、効果的な構成をしていけば良いのでしょうか。その答えは、文字テキストを3つに区切ることで、多くのデザインに十分対応することができます。

  • レベル1: 通常、コンテンツや情報の中でもっとも重要な文字テキスト。雑誌でいう見出しに当たる部分です。ですので、デザインの中でも、すぐに分かるようにすることが重要。
  • レベル2: セクションやグループごとに分けられた項目を、整理する「小見出し」の役割を担います。もちろん、文字自体はあまり大きくなく目立たないようにし、うまく読み手を誘導するためのものです。
  • レベル3: たくさんの文字テキストを利用する部分、ような説明なども本文にあたります。記事全体を表示したり、ちょっとした注意書きや、簡単な説明など、文章は長くても、短くてもかまいません。文字が小さすぎすると見えません。ウェブにおける大きさの基準は13〜15px程度の大きさが見やすいです。

sentence_type_02

アップルのサイトはとても分かりやすいですよね。

商品ページのサンプルでは、シンプルなデザインで、うまく文字テキストの3段階層を利用しています。セクション内で一番上部のセンタリングしている文字(iTunes Store毎日がフィルムフェスティバル)がレベル1、画像の左にある大きな文字(あなたのすべての画面で上映中)レベル2、商品の説明がレベル3となります。

文字の太さではなく、大きさだけで言いたいコピーを見やすくデザインしているのが、サイトがシンプルですっきり見える要素と言えます。

デザインにおいて、最大のインパクトを与えることができる、文字テキストをつかった構成方法を、今回は見ていきましょう。

視覚的なコンテンツの整理テクニック

01. フォントサイズの調整

文字テキストのサイズ調整は、サイト内の構成されたテキスト同士のコントラストを作成する、もっともシンプルな方法です。日本語の場合、OSによってフォントが異なりますが、できる限り書体は限定することが良いでしょう。通常は、サイト内でもっとも大きなフォントサイズ(レベル1: もっとも重要な情報)からはじまり、ページを進めるにつれて、文字サイズも小さくなっていきます。

このレイアウトは、文庫本や雑誌から、オンラインの記事コンテンツまで幅広く利用されています。

フォントを調整することは、もっとも重要な情報を、視覚的に目立たせる手助けをします。ブログや記事の見出しタイトルを始め、セールの広告、キャンペーン情報などに応用することができます。ただ、フォントの大きさがあまり変わらない、同じ大きさがたくさんあれば、目立ちません。文字サイズをレイアウトの中でより大きくすることで、確実に注目を集めることができるるのです。

02. 異なるスタイルやウエイトを使用する

多くのフォントが、さまざまなスタイルやウェイトが、一緒に収録されています。日本語ではあまり使わないイタリック体などがあります。英語部分だけに絞れば、小文字、コンデンス(英: Condensed)、エクステンド(英: Extended)などがありますが、基本的に日本語においては、スタイルを使用することは難しいです。なので、基本はウェイトを利用します。ウェイトは、書体の視覚的に普通と重い(英: Bold)があります。

文字フォントのデザイン要素ごとに、異なる役割を割り当てるときなどに有効です。見出しタイトルにもっとも太いウェイトを利用することで、もっとも重要な情報ということを示すことができます。他サイトからの記事を引用する場合はどは、イタリックのスタイルを利用することもあります。

03. フォント書体を選ぶ

新聞を思い出していただきたい。見出しには、太字サンセリフ・フォントが、小見出しや本文はイタリック体やセリフ・フォントをつかった新聞。文章で状況を説明するには、見出しの使い方が重要です。うまいフォントの組み合わせで必要なのは、コントラストなのです。

またサンセリフ・フォントと、セリフ・フォントの組み合わせは、長いあいだ使われている最高の方程式です。これまでの経験から得られたクラシックなルールで、どんなデザインのはじまりとしても最適です。

04. 色を変える

フォントのスタイルやウエイトと同様に、もっとも一般的な方法として、色を変えるテクニックがあります。色といっても、種類はたくさんありますし、色自身がもつ意味合いも表現できるので、デザインのブランドイメージや目的、雰囲気と合っているか確認することも重要です。

色によって、「刺激的」「おとなしい」「無邪気」など、様々な表現ができ、サイトにあった色を選ぶ必要もあります。

05. ホワイトスペースをつくる

デザインにおいて、文字間と行間が文字におけるスペースを意味します。文字のバランスを読みやすく整えることもでき、デザインをわかりにくく台無しにもしてしまいます。ホワイトスペースとは日本語では余白ということになります。

何も書かれていない部分、行を大きく開ける、文字間を開けないと、読みにくくなり、デザインを演出することができません。ホワイトスペースを設けることは、文章内のセクションを分けるだけではなく、読み手が「読みやすい」と感じる理由になります。

ホワイトスペースをうまく活用している場合、デザインのどこから読みはじめるのか、すぐに分かります。目に入る情報量が厳選されればされるほど、目立たせたい文字を目立たせることができます。もちろんスペースを確保していなければ、読みやすさを損なってしまい、ごちゃごちゃとしていて、すぐに見つけることができないでしょう。

どうしても大きさや、色などに目が行きがちですが、そこだけではなく、何もない部分であるホワイトスペースも重要なのです。

これらのテクニックを効果的に採用することで、デザインをより魅力的にするだけでなく、読み手が読みやすいUXの効果も得られます。さらには、スマーフトフォンでは、画像ではなく、文字のテキストも重要ですので、このテクニックを利用することができます。
英語とは違い、日本語は太さやスタイルに制限が多いですが、その分、よりシンプルに分かりやすいUXを実現しましょう。