どや!?カッコいいWebサイトをつくる方法『フォントは3種類までにする』

11 8月

  • このエントリーをはてなブックマークに追加

カッコいいWebサイトをつくる方法『フォントは3種類までにする』

カッコいいWebサイトをつくる方法の1つとして、フォントの選び方や使い方があります。
この世には、沢山のフォントがあるので、選び方や使い方のコツをご紹介。
 

①デザインの方向性を踏まえてフォントを選ぼう!

フォントには沢山デザインがあります。
人に与えたい印象を決めてから近いフォントを選んでいきます。
例えばこんな感じ。

和、洗練されたの印象
フォントファミリー「明朝体」

男性的な印象
フォントファミリー「太ゴシック」

女性的な印象
フォントファミリー「細ゴシック」

あたたかさ、優しさの印象
フォントファミリー「丸ゴシック」

自分の好きなフォントだから使う!ではなく、
これから制作するWebサイトのデザインに適したフォントを選びましょう。

②サイズとウェイトの差異でメリハリをつけよう!

画像に使用するフォントは、1種類だけでも十分のクオリティの高いサイトのデザインが可能です。大見出し、中見出し、小見出しのサイズとウェイトの差異を利用して、情報を仕分けしましょう。

例:サイズとウェイトの差異でメリハリをつける(株式会社サンロフト

サイズとウェイトの差異でメリハリをつけよう!

③フォントの使いすぎは禁物!

多くのWebサイトは複数のフォントを使ってデザインされています。
フォントを使いすぎると、フォントの持つ印象が薄れていき、方向性が定まらないデザインになってしまいます。2種類、多くても3種類にして、目的をもって使用しましょう。

例:フォントは3種類までにする(納得住宅工房

フォントの使いすぎは禁物!

④フォントのマナーを知ろう!

本文テキストに明朝体のフォントを使用しているサイトをたまに見かけますが、PCのモニタではやはり少々見づらい・・・特別な理由でもない限り、標準的なゴシック体のフォントを使ったほうが無難です。

例えば、印刷された本では明朝体のフォントが主流。
文庫本とかは、ほとんど全てが明朝体で印字されていますよね。
信頼感を演出したいという意図で使いたくなる気持ちも分かります。
しかし、PCのモニタでアンチエイリアスの効いていない明朝フォントを読むのは、ちょっとシンドイのです。

明朝フォントを使用したページ
(スタイルシート – “font-family: MS P明朝, 細明朝体;” )
標準のゴシック系フォントを使用したページ
(スタイルシート – “font-family: MS Pゴシック, Osaka;” )

この4つのポイントを抑えるだけで、
あなたのサイトの印象もガラッと変わるでしょう。
 

フリーフォントのご紹介

Category Japanese | FontPark.net
FontPark.netの日本語カテゴリ。
沢山のフォントがダウンロードできるので、ブックマークしておきたい。

Category Japanese | FontPark.net
 
 
Photoshop Vip » 筆記体からゴシックまでグランジ系フリーフォント、70個あつめました。
海外デザインブログCruzineで、筆記体やゴシック体までさまざまなスタイルのグランジフォント70個をまとめたエントリー「70 Free Quality Grunge Fonts」が公開されていた。

Photoshop Vip » 筆記体からゴシックまでグランジ系フリーフォント、70個あつめました。
 
 
日本語 フォント複数
fonts2uの日本語カテゴリ。
こちらも沢山のフォントがストックされている。

fonts2u 日本語 フォント複数
 
 
手書き風フォント|みおFont
女性の手書き文字を元にして作成した書体です。女の子の文字の特徴を取り入れつつもデザインとして統一感のあるフォント。そして、真面目でしっかりものだけど、恥ずかしがり屋。そんな女性像をイメージしています。読みやすさより、手書きらしいライン、遊び心を重視しました。ひらがな、カタカナ、アルファベット、記号のみの書体ですが、一般的な丸ゴシックの漢字と組み合わせて使える、最適な線の太さになっています。アルファベットも手書き風のデザインです。

手書き風フォント|みおFont
 
 
40 Free Minimalist And High Quality Fonts
スタイリッシュでカッコいい英語フォント。
こちらも抑えておきたい。

40 Free Minimalist And High Quality Fonts
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">

トラックバックURL

この記事のトラックバック URL