ジーニアスブログ – WEB制作会社ジーニアスウェブのお役立ちブログ

今すぐ使えるテクニックお教えします。ーフォント編ー


みなさんこんにちは、ジーニアスウェブ長友です。
気がつけば1月も後半戦ですね。
最近私の思うことは、「今年も去年のようにあっという間に終わってしまうのだろうか」ということをよく考えてしまいます。
一日一日を大切にしながら過ごしていきたいと思います。
また先日体調を崩してしまったので私としては、体のメンテナンスと案件で行うメンテナンス両方共完璧にしたいです。(笑)

さて前回のブログでは、フォントについてご紹介しましたが、今回はこちらのフォントをもっとよく見せれるようなテクニックについてご紹介させていだきます。
多くのテクニックがございますが、今回はその中の
・ジャンプ率
・文字組み
・フォントサイズ
について詳しくご紹介させていただきます。

ジャンプ率
まずはこちらの画像をご覧ください。

それぞれの画像を見ていただきましたが、どうでしょうか?
そもそもジャンプ率とは「一番大きいテキストと一番小さいテキストの大きさの比率」したものです。
簡単に言うと「本文のサイズに対するタイトルや見出しサイズの比率のこと」です。

ジャンプ率を高くすることよって
・大衆的
・行動的
・ダイナミック
・若々しい
のような印象を与えます。

またジャンプ率を低くすることによって
・知的
・保守的
・信頼
・大人っぽい
のような印象を与えます。

一般的にこのジャンプ率の差が大きい程、要素と要素の区切りが掴みやすくなります。また読み飛ばしやすくなります。つまり要素から要素へ視線がジャンプしているということです。

さて以下のポイントをおさえてジャンプ率を活かしましょう!
・ジャンプ率とは本文のサイズに対するタイトルや見出しサイズの比率のことです。
・ジャンプ率を高めることによって必要なところを強調しつつ、拾い読みできる状態が作成できる。
・フォントサイズの調整以外に、装飾を加えることでジャンプ率を調整することが可能になる。

————————————————————————————————

・文字組み
文字組みとは、文字と文字の間を調整して、美しく文字を配置することです。
ここでのポイントとしては、
・ひらがな、カタカナは原則詰める

あまり気にしない方がいますが文字の間の余白、実は文字の形式に応じて調整する必要です。
漢字の場合は、文字間を調整せずとも問題ないことが多いですが、ひらがな、カタカナの場合は原則、詰め、隣り合う文字との余白を少なくします。
理由としては、漢字に比べてひらがなやカタカナの余白が大きいためです。
漢字と並べた時、余白がある分、間延びしたように見えてしまいます。
特に、タイトルを書く際、短い文章を大きく表示する際に違和感が目立ってしまいがちですので十分に注意してください。

・記号は適度に詰める

よく忘れがちである記号。記号も適度な感覚に詰めることによってよりプロっぽいデザインに仕上げることができます。
、・「」。といった記号はひらがな・カタカナ同様に横に余白ができてしまいますので文字間の調整が必要になります。
タイトルや見出しで大きく扱う際には、隙間があると特に悪目立ちしますので、全体のバランスを見ながら適切な余白に整えましょう。

————————————————————————————————

フォントサイズ
ここでのポイントとしては、

・1つのデザインに使用するサイズは4種類
多くのWebサイトは複数のフォントを使用してデザインされています。
注意点としてはフォントを使いすぎると、フォントの持つ印象が薄れ、方向性がはっきりしないデザインになってしまいます。
目的を決めてからフォントを使用しましょう。

・デザインの方向性を踏まえた上でフォントを選ぶ
御存知の通り、多くの種類のフォントがあります。
人に与えたい印象を決めてから近いフォントを選んでいきましょう。
また注意点としては、「私、ゴシック体が好きだからゴシック体にする!」ではなく、これから制作するWebサイトのデザインに適したフォントを選ぶということを覚えといてください。

————————————————————————————————

まとめ
いかがでしたでしょうか?
普段何気に使用しているフォントですが一工夫をすることでより一層、磨きの掛かったフォントにすることができます。
次回は、レイアウトについてご紹介させていただきます、それでは。