ヨネックス バドミントンラケット ボルトリックzフォース

「あたりまえ」をアップデートしつづける

VALENTINO ヴァレンティノ ビーズ 刺繍 ブラウス 豪華 白 ホワイト">

【Chick】ボルトリックZフォースⅡ

ヨネックス最新ラケットのボルトレイジを使ってみたら、爆音\u0026史上最速だったwwww【ソフトテニス】

【バドミントン】初心者VS経験者で100点マッチやったら何点差がつくの…??

ヨネックス バドミントンラケット ボルトリックzフォース

  • 投稿日 :
  • 最終更新日 :

読了目安 : 5分

加藤
デザイナー(ビジネス・アーキテクツ)

プロフィールアイコン(写真):デザイナー 加藤

Webサイトを見ていて、「文章が読みにくいな」と感じたことはありません​か?
いくらWebサイトのコンテンツが良くても、文章が読みにくいと、ユーザーが読むことに疲れてしまい、ページから離脱してしまうこともあります。
Webデザインをおこなう上で、フォントの設計はユーザーに情報を的確に伝えるという重要な役割を担っているので、最適化することが必須です。

Webサイトの文章を読みやすくするデザイン 〜押さえておきたい5つのポイント〜

文章の読みやすさを決める基本の要素として、主に下記の5つが上げられます。

フォントの設計をする上で、押さえておくべきポイントを理解するだけで、視覚的にぐっと読みやすいWebサイトを作ることができます。

  1. フォント
  2. フォントサイズ
  3. 行間
  4. 一行あたりの文字数
  5. コントラスト比

4U 美品 限定 ガット張りたて ボルトリックZフォース2 BP ヨネックス YONEX VOLTRIC(ボルトリック) - ホーム大きい割引 YONEX バドミントンラケット ボルトリック Zフォース2 バドミントンラケット ボルトリックzフォース2 限定有り 3本セット ヨネックス ボルトリックZフォース LTD 2012 限定モデル バドミントン 大きい割引 YONEX バドミントンラケット ボルトリック Zフォース2 大きい割引 YONEX バドミントンラケット ボルトリック Zフォース2 バドミントンラケット ボルトリックzフォース2 限定有り 3本セット 送料無料!ヨネックス ボルトリック Z フォース 2 4UG5 ガット赤 の Amazon | ヨネックス(YONEX) バドミントン ラケット フレームのみ バドミントンラケット ボルトリックzフォースⅡ 限定バドミントンラケット!ボルトリックおすすめ8選【感想や評価】 | ActivelAmazon | ヨネックス(YONEX) バドミントン ラケット フレームのみ Amazon | ヨネックス(YONEX) バドミントン ラケット フレームのみ ヨネックス ボルトリックzフォース2 ほぼ新品 4u | フリマアプリ ラクマAmazon | ヨネックス(YONEX) バドミントン ラケット フレームのみ バドミントンラケット ボルトリックzフォースⅡ 限定大きい割引 YONEX バドミントンラケット ボルトリック Zフォース2 YONEX VOLTRIC(ボルトリック) - ホームYONEX VOLTRIC Z-FORCE Ⅱ ヨネックス ボルトリック ジーフォース 2

日本語フォントの代表格は「ゴシック体」と「明朝体」があります。それぞれのフォントの特徴は以下の通りです。

複数のフォントを組み合わせる場合は、フォントの種類は最低限に抑え、サイト全体のバランスを考慮して選定することをおすすめします。

ゴシック体と明朝体の違い

Googleが推奨している基本のフォントサイズは16pxです。そして日本の多くのWebサイトでは、14px〜16pxを採用しています。

このことを踏まえ、フォントサイズは14px~16px程度をおすすめします。

またユーザーは、さまざまな画面サイズや解像度のデバイスからアクセスします。閲覧環境が異なることで、フォントの見え方は変化するのです。

そのため、すべての画面サイズで読みやすさとユーザビリティを保つためには、スマートフォンなどの小さい画面でも読みやすいフォントサイズを設定する必要があります。

デバイスごとのフォントの変化

行間も文章の読みやすさに大きく影響します。

行間が広すぎると文章のまとまりとして認識しづらくなり、詰めすぎると読みにくさが増してしまいます。

そのため設定したフォントサイズに応じて行間を適切に空けるようにしましょう。

一般的に、行の高さ(line-height)は1.5〜2.0までが読みやすい行間とされており、これを目安に間隔を取れば、ゆとりのある見やすいコンテンツとなります。

もちろん、行間によってデザインの印象も変わるので、Webサイトの目的に合わせて調整しましょう。

行間の設定別での文章の読みやすさ比較

人には、視覚的に読みやすい一行あたりの文字数があります。

フォントサイズや字間などにもよりますが、横書きの場合、一行に30文字〜50文字程度が読みやすさの基準と言われています。

一行が長すぎると、ユーザーは端から端まで視線を大きく動かさなければならないため、次の行を見失う確率が高くなり、文章を目で追うことに疲れてしまいます。
逆に一行に文字が少な過ぎても、読みづらくなってしまいます。

ちなみにスマートフォンでは、1行あたり30〜50文字が読みやすいと言われています。

一行あたりに読みやすい文字数

背景色が白もしくは白に近い場合は、フォント色はグレーから黒を指定すると読みやすくなります。ここで重要なのは、背景色と文字色のコントラストです。

フォントのコントラスト比較

Webサイトにおいて、文章をスムーズに読んでもらうためには、フォントの基礎知識を理解した上で設計することが大切です。

ユーザーにとって読みやすく伝わりやすいコンテンツ作りの参考にしてみてください。