タイポグラフィをデザインするポイント。参考になるWebサイト3選

デザインにはさまざまな技法がありますが、その中の一つである『タイポグラフィ』をご存じでしょうか?タイポグラフィの概要やデザインする際のポイント、またタイポグラフィを学ぶ際に役立つWebサイトを紹介します。

Offers」は、時代の変化や環境にあわせてキャリアを築きたい、そんな人にぴったりのサービスです。副業にチャレンジしたい方や転職活動を始めたい方、フリーランスとして活躍したい方におすすめ!あなたも新しい環境/開発スタイルを経験しよう!

「Offers」をもっと詳しくみる!

タイポグラフィの基礎知識

タイポグラフィとはデザイン技法の一つです。タイポグラフィがどんなものなのか、まずは基礎知識について解説します。

タイポグラフィとは?

広告やWebサイトをデザインする上で、大切な要素の一つに『文字』があります。タイポグラフィとは、文字に関連したデザイン技法のことです。

タイポグラフィには『文字を読みやすく、美しい文章とレイアウトにすること』と『文字自体をデザイン要素として組み込むこと』の2種類があります。

タイポグラフィの歴史は活版印刷の開始された15世紀にまでさかのぼり、フォント・文字・大きさ・カラーリング・レイアウトなどのノウハウが蓄積されてきました。現在でもタイポグラフィはデザインには不可欠なスキルです。

デザインするポイント

タイポグラフィを用いたデザインで重要なのは『フォント』『空白』『文章のレイアウト』です。それぞれについて解説していきます。

フォントの選び方

フォント選びで重要なのは、『文章のイメージに合うこと』と『フォントを使いすぎないこと』です。それぞれの要素について見ていきましょう。

まず、フォント自体がイメージを持って作られています。ポップなイメージを与える丸ゴシックや、和風の行書体、欧文用のフォントも多くあるでしょう。それぞれの持つイメージを知ることが重要です。方向性の異なったフォントを用いると、ちぐはぐな印象を与えてしまうことになります。

同時に、フォントの数もある程度抑えていきましょう。複数のフォントを使うと、フォント同士の持つイメージが喧嘩してしまい、全体の統一感を損なう可能性があるのです。フォントの種類を抑え、複数使う場合には似たイメージを持つフォントを使うことが重要になります。

空白を意識する

文字と文字の間や、行間の隙間を意識することも大切です。文字によって余白の大きさは違ってきます。そのため文字同士の間隔を調整し、均一感を演出することがデザイン上の重要な要素です。

また、文章が何行にも渡る場合は、行間が狭すぎると全体としてごちゃごちゃした印象を与えてしまい、読みづらくなってしまうでしょう。

文字の大きさやフォントも意識した上で、適度な空白を作ることで、洗練されたデザインを演出できます。

文章は読みやすくする

文章は何よりも読みやすいことが、読者にとって重要になります。

そのためのポイントは『レイアウト』です。横書きの場合、文頭は左に寄せるようにしましょう。英語も日本語も横書きは左から始まります。開始位置を統一することで、文章全体が読みやすくなるのです。

また、最適な文字数についても考えていきましょう。一行の文字が多すぎるとその分空白が詰められて読みにくくなります。かといって少なすぎると、その分多く視線を動かさなければならないので、読んでいる方は疲れてしまうのです。

視線誘導と配列に気を付けて全体を調整していくことが、文章の読みやすさにつながります。

アイデアが浮かぶギャラリーサイト

どんなフォントを組み合わせるか、どんなデザインにするかは結局のところはアイデア次第です。参考になるギャラリーサイトを紹介します。

フォントの種類がわかるFonts In Use

『Fonts In Use』のサイトを訪れると、まずデザインギャラリーの一覧が目に飛び込んでくるでしょう。1ページ60もの異なったデザインと、どんなフォントが使われているかが確認できます。

カテゴリー別にギャラリーが分類されているので、理想のデザインを探しやすいのもポイントです。ただし、全て英語で書かれているので、日本語のデザインについて見たい場合は別のサイトを利用する必要があります。

Fonts In Use – Type at work in the real world.

情報をまとめたブログTypewolf

『Typewolf』も英語のサイトで、フォントに関する情報がまとめられたブログです。ギャラリーで利用されているフォントの名前はもちろん、ダウンロードができるリンクも設置されています。

その他にもフォントに関しての有益な情報がまとめられていて、海外のタイポグラフィッカーからの注目度の高いサイトです。

What’s Trending in Type・Typewolf

日本語Webフォントを使用している60のWebサイト

こちらは日本語のWebフォントを多数紹介しているサイトです。

『株式会社シロクロ』というWebデザイン系の会社が作ったブログで、『明朝体』『ゴシック』『丸ゴシック』『その他』という四つのカテゴリーに分類した上で、それぞれに該当するフォントと、フォントを使ったWebサイトを紹介しています。

別のブログからはグラフィックに関するノウハウや技術も学べます。日本語のタイポグラフィを勉強する上でとても有効なサイトです。

日本語Webフォントを使用している60のWebサイト | 株式会社シロクロ

まとめ

タイポグラフィは文字を読みやすく、そしてきれいに見せるためのデザイン技法です。フォントや余白、レイアウトなどさまざまな理論や技法があり、それらを学んでいくことで、洗練されたデザインを追求することができます。

参考になるデザインギャラリーを集めたWebサイトがいくつもありますので、それらを参考にしつつ独自のデザイン技術に磨きをかけていきましょう。

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。

いくつもの転職サービスを使って、企業を探し回るのはもう終わり。副業をきっかけとした新しい働き方を実現します!

あなたも新しい環境/開発スタイルを経験しよう!



この記事をシェア

関連記事


副業・フリーランス

プログラミング

デザイン

インタビュー

お金

採用・組織

転職

イベントレポート