menu

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

ディレクター心得

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

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

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

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

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

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

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

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

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

小野 良勝 代表取締役

投稿一覧

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

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

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

関連記事

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

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

  2. アイコンもセットで、レスポンシブデザインにも対応。CSSフレーム…

    WordPressと同じくWebサイト制作の生産性アップに役立てたいのが、CSSフレームワークです。…

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

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

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

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

  5. スクロールエフェクトを実装できる、おすすめjQueryプラグイン…

    画面のスクロールにあわせて写真やサムネイル、テキストを自由に動かすことができるスクロールエフェクト。…

  6. 多種多様なメソッドも学べる、LP制作に使いたいフレームワーク3選…

    ユーザーの行動を喚起するランディングページにはストーリーの要素を加えるのが効果的ですが、もちろん方法…

  7. Webデザインを見極める目を養う、高品質のギャラリーサイト4選

    フラットデザインやマテリアルデザインなど、次々と新しい概念が生まれるWebデザインの世界。プロのWe…

  8. ユーザーの7割が直帰する?ファーストビューの効果的な改善その1

    Webサイトで最も大切な要素の1つが、訪問したユーザーが最初に目にするファーストビューです。あるWe…

PICKUP

PAGE TOP