menu

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

ディレクター心得

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

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

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

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

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

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

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

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

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

小野 良勝 代表取締役

投稿一覧

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

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

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

関連記事

  1. WordPressの初期設定で最低限押さえておきたい2つのポイン…

    レンタルサーバーとドメイン、FTPクライアントを準備し、インストールするだけで手軽に利用できるWor…

  2. 無料&レスポンシブ対応済みのWordPressテンプレート3選

    Webディレクターの業務のなかでも意外と頭を悩ませることが多いのがレスポンシブ対応ではないでしょうか…

  3. 読まれるコンテンツに欠かせない、分かりやすい文章の3つのポイント…

    良質なコンテンツを配信することによってユーザーの行動を喚起するコンテンツマーケティングが主流となった…

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

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

  5. WordPressの効果を最大化する、レンタルサーバー選びのポイ…

    WordPressを利用するうえで最低限必要となるのが、「Apache」と「MYSQL」の両方に対応…

  6. あらためて整理しておきたい、ワイヤーフレームを作成するメリットと…

    キャッチコピーや画像、リンクボタン、SNSボタンなど、さまざまな要素が取り入れられるWebサイト。W…

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

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

  8. Webサイトの配色に取り入れたい「70・25・5の法則」

    Webサイトの配色を決めるためには、それぞれの色の特徴・効果とあわせて効果的な配色パターンを知ってお…

PICKUP

PAGE TOP