menu

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

ディレクター心得

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

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

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

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

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

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

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

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

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

小野 良勝 代表取締役

投稿一覧

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

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

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

関連記事

  1. SNSの拡散(バズ)を視覚化。今すぐ役立てたい効果測定ツール3選…

    オウンドメディアとならんで、Webマーケティングの重要な要素の1つがSNSの活用です。「SNSを使っ…

  2. 即戦力のコーディングチェックツール3選

    デザイナーへの発注やクライアントとの連絡・調整に加えて、Webページのコーディングをチェックするのも…

  3. メンバーへの共有もより簡単に。ワイヤーフレーム作成ツール3選

    クライアントを含め複数のメンバーが携わるWebサイト制作において、情報共有やプロジェクトの進行に大き…

  4. キービジュアルはイメージより具体性。ファーストビューの効果的な改…

    多くの場合、Webサイトのファーストビューは、「メインコピー」、「キービジュアル」、「サブ要素」、「…

  5. 「まだ東京で消耗してるの?」に学ぶ、オウンドメディア成功の秘訣

    オウンドメディアの重要性が指摘されるなか、注目を集めているのが管理人・イケダハヤト氏によるWebサイ…

  6. WordPressのメリットを活かす、アクセス解析プラグイン5選…

    Webサイトの運営に必須となるアクセス解析。ページ作成やコンテンツ更新が手軽にできるWordPres…

  7. サブ要素&導線に盛り込むべき情報は?ファーストビューの効果的な改…

    Webサイトの「顔」ともいえるファーストビュー。「メインコピー」と「キービジュアル」に加えて、「サブ…

  8. Appleのロゴにも活かされているデザインの「黄金比」とは?

    WordPressや各種フレームワークが普及し、ぐっと身近になったWebサイト制作。WordPres…

PICKUP

PAGE TOP