web_800 (1)

Webデザインでも超重要!タイポグラフィの基本5つ


Webデザインをする上でも必要な知識がタイポグラフィです。
イラストが描けない、写真加工が苦手なんてデザイナーもタイポグラフィだけでかっこいいサイトが仕上がります。
Webデザインでも役立つタイポグラフィの基本を5つご紹介します。

 

基本1 フォント

文章を入れる際にフォント選びは重要です。見出しならアクセント部分にユニークなもの、インパクトのあるものを使用
しますが、本文で「読んでもらいたい」という時には適していなかったりします。
あまり飾りがきつい文字は読み物としてではなくここ!というポイントで使いたいですね。
また多くの方がミスをしがちなのは、フォントの乱用。色々なフォントを試してみたいのは分かりますが数種類混ざると
とてもうるさく、Webで言うなら直帰される可能性もあります。
ここはインパクトなのか?読み物なのか?も操作してあげれるのがタイポグラフィにおけるフォントの役割です。

web_801 (1)

基本2 行間

読み物として提供したい文章の場合、行間が狭いととても読みにくいです。
この行間は余白とのバランスが必要です。ついついサイト内に余白があると何か埋めたい気がしますがそこをあえて余白
にすることで読みやすさに繋がります。
わたしもデザイナーになりたての時に「余白もデザインの一部」と言われたことがあります。
ついつい情報量を稼ぎたいと思ったり、画面(紙面)いっぱいに言いたいことを入れたい!と思いがちです。
でも特に読ませたいなら余白のデザインは必要ですね。

基本3 文字列

以外に出来ていないのがこの文字列、アライメントです。
ここはセンター合わせでここは左合わせ。ん?左寄り?頭があってない?と情報を入れれば入れるほど揃わなかったりします。
でもこの文字列をキレイに整理するだけで一気に読みやすくなります。
きちんと整理整頓というイメージで整列でキレイに合わせましょう。ユーザーへの情報量が全然変わってきます。

基本4 文字の動き

文字には「長体」「平体」「斜体/イタリック」など変形させているものがあります。本来の印象を変えることができます。
「長体」はすっきり見せることができます。「平体」はどっしりと構えたような印象を与えます。
また「斜体」はスタイリッシュな印象を与えるために使われる場合があります。
ただ、この変形・動きですが、あまりやりすぎると格好悪く読みにくいという問題があります。
特にIllustratorをお使いの方ならお分かりいただけると思いますが、リサイズにもらったデータがアウトラインの場合、
打ち直すのが面倒でリサイズを簡単に引き延ばしたりしたことはないですか?
たまにそんなサイトの文字を見かけますがこれはいいデザインとは言えないですね。(わたしも怒られた経験あり)

基本5 文字の強弱

同じフォント、同じ種類のテキストでも文字の種類によってはサイズがかなり違います。
一般的には感じはひらがな・カタカナよりも大きく、またアルファベットや数字はひらがな・カタカナより小さいです。
また、和文と欧文では位置も違ってきます。そのバランスを取るためにこの強弱は必要になってきます。
もちろんどこを強調したいのか。にもよりますが、より読みやすくより見やすいようにするのもタイポグラフィです。
どの情報を伝えたいのかをしっかりと理解していれば簡単にサイズ変更が出来るようになります。

web_803 (1)

まとめ

フォント・サイズ・スタイル・文字列・行間などいくつも組み合わせがあり迷ってしまうかもしれません。
デザイナーに成り立てのときに「ベタ打ちはダメ!」とよく怒られました。
テキストからコピペで簡単に反映させていたのが原因ですね、それをいちいち打ち直したり、フォントやサイズを変更するのが手間だったり、、、
でもこの基本の5つを抑えていれば大丈夫です。
優れたタイポグラフィーはそれだけでデザインになり、それだけで情報量を大きく左右します。
でも言い換えれば、イラストが描けなくても、写真加工が苦手でも文字だけでユーザーに情報をしっかり伝えられます。
これからのWebデザイナーには必須のスキルかもしれませんね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


yamatama

紙面のデザイナーからWebデザイナーに転身。紙媒体とWebの違いに戸惑いながら制作・Web解析を学んできました。 現在はフリーで活動中。 一児の母(小学生の娘)

Next Articleclear:bothを使わずclearfixでfloat解除する方法