menu

Webサイトの文章に+αの効果をもたらすフォントサイズ&位置の工夫

ディレクター心得

特定の文字や語句を強調する場合、Boldやアンダーラインが使われることが多くなりますが、タイポグラフィで文字や記号のサイズ・太さを調整するのも1つの方法です。この手法はBoldなどと比べても全体のバランスを損なわず、より自然にユーザーへの印象付けができるのが特徴です。コンテンツマーケティングで成功している多くのWebサイトで取り入れられています。

・「円」はひと回り小さいサイズで
大手ECモールや有力ECサイトの多くで導入されている手法です。商品ページなどに価格や送料を記載する場合、「円」や「¥」を金額の数字よりひと回り小さいサイズに調整することで、金額をより分かりやすく示すことができます。

数字と単位を同じフォントサイズで並べると数字の方が小さく見えてしまうことも多いので、単位の文字サイズは数値の1/2もしくは1/3程度まで小さくしてもいいかもしれません。数量・個数といった単位の場合も同じやり方で数字を強調することができます。

・カギ括弧は細く、記号&句読点は詰め気味に
引用や固有名詞などでカギ括弧を使う場合、文字の太さ(ウェイト)を一番細くするとスマートですっきりとした印象を与えることができます。この方法はWebサイトだけでなく広告や印刷物のキャッチコピーなどでも広く取り入れられています。

また、カギ括弧や中黒(・)、句読点はカーニングによって文字よりもやや間隔を詰め気味にするとテキスト全体が締まり、読みやすさにも繋がります。タイトルや見出しでは間延びした印象を与えないためにもぜひ活用したい手法です。

・小さい文字はさらに小さく
「っ」、「ィ」といった小さい文字は、ベタ打ちではなく通常の文字より小さいサイズを選ぶのがポイントです。コントラストが強調され、メリハリの効いた美しい見た目の語句に仕上がります。

・助詞の文字サイズは小さく&位置もひと工夫

「○○は▲▲です」というテキストの場合、助詞に当たる「は」の文字サイズを小さくすることで「○○」と「▲▲」が強調され、よりスムーズに要点を伝えることができます。文中にセリフを用いる際や長い文章にメリハリを与えたいときは、積極的に使ってみてもいいかもしれません。

この場合、小さくした助詞の位置もポイントで、全体が左揃えの文章なら下寄せに、中央揃えの文章なら真ん中寄せに調整すると、違和感なくまとめることが可能です。

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

検索クエリ活用によるコスト削減&マッチング向上

グッドミート★バル|ビストロやバル業態をより身近なものにしたい

関連記事

  1. Webデザインの初稿チェックで押さえておきたいポイント

    Webページの制作・修正のやりとりのなかでもとりわけ重要なのが、デザイナーから最初に提出されてきた初…

  2. コンテンツの品質管理に役立つ無料の文章チェックツール3選

    ライターや外部の制作会社から納品されてきたコンテンツの品質管理もWebディレクターの大切な仕事の1つ…

  3. もうデザイナーの「勘」には頼らない!イメージを視覚化する3つの工…

    Webデザイナーへのディレクションでは、イメージを言葉で伝えるだけでなく、視覚化してひと目で理解でき…

  4. Webデザイナーへの発注で最初に伝えたい、デザインの「背景&スト…

    「思い描いたイメージと全然違う」、「あれだけ強調したのに全く伝わっていなかった」…。Webディレクタ…

  5. 食品、文具、レンタルスペース‥幅広い業界で活用されるオウンドメデ…

    コンテンツマーケティングの重要性が指摘されるなか、規模・業種を問わずさまざまな企業がオウンドメディア…

  6. Webディレクターなら知っておきたいWordPressのデメリッ…

    ソフトウェア使用料が0円で、デザインのテンプレートやプラグインも豊富に提供されているWordPres…

  7. WordPressの表示速度をアップさせるプラグイン5選

    アクセス解析やセキュリティなど豊富な機能が提供されているWordPressのプラグイン。使い方によっ…

  8. ランディングページの成功事例その1「DHC 公式オンラインショッ…

    効果的なランディングページを制作するためには、ファーストビューに加えて、Webページ全体のレイアウト…

PICKUP

PAGE TOP