SEO?デザイン?デバイスフォントと画像フォントのメリット&デメリット

lp-font_01

この記事は約 2 分で読めます。


ランディングページ(LP)デザインを制作する上で考えなければならないのが、フォント

「画像でデザイン性を高めたい!」
「でもサイトの軽量化やSEO対策をしたい・・・」

悩みどころだと思います。

デバイスフォントと画像フォントのメリット&デメリットをご説明していきましょう。

1.デバイスフォントと画像フォントとは

1-1.デバイスフォント

lp-font_04

デバイスフォントとは、PCに予めインストールされているフォントの事です。

Webサイトのフォントは基本デバイスフォントで表示されています。

デバイスフォントによる表示は容量が少なく、拡大しても荒れることがないのが特徴です。

1-2.画像フォント

lp-font_05

https://www.meiji.co.jp/sweets/snack/karl/otonakarl/

画像フォントとは、画像ファイルで作成されたフォントの事です。

Photoshop等の画像編集ツールで文字を装飾したもので、大きさや色の細かい設定が出来、幅広いデザインにできます。

そして画像ファイルなので、デバイスやブラウザを選ばず同じデザインで表示できるのが特徴です。

2.メリット、デメリット

デバイスフォントと画像フォント比較

画像フォント デバイスフォント
容量 ×
SEO
デザインの幅 ×

2-1.デザイン性を重視するなら、画像フォント

【メリット】

  • 幅広いデザインで表現でき、表示の統一ができます。

【デメリット】

  • テキストデーターが減ってしまい、SEOに弱くなります。
  • 画像が増える分容量が大きくなるので、表示速度が遅くなります。

2-2.SEO、表示速度を重視するなら、デバイスフォント

【メリット】

  • SEOにも強く、表示速度も気にする必要はありません。

【デメリット】

  • 全てデバイスフォントにしてしまうと、デザインの幅がなくなります。

極端な話になりましたがつまり、2つのフォントの特性を理解し、使い分けることが大切です

3.デバイスフォントと画像フォントの使い分け方

画像フォントが適している

  • ファーストビュー、見出しなどのインパクトを要する部分

例)

lp-font_02

左:http://www.isehan.co.jp/heroine/cc_cream_powder/ 右:http://tareya.jp/

 

デバイスフォントが適している

  • 凝った装飾を必要としないテキスト
  • 書き換える頻度の高いテキスト部分(編集しやすい方がいい為)

例)

lp-font_03

上:http://hamidashi-pj.com/ 下:http://www.dc-fudosan.jp/

 

まとめ

デザイン性、SEO、軽量化を両立させなければならないので、難しいですね。

しかしこれらを上手く両立させることにより、コンバージョンの効果が高くなるので、フォントについても考えながら制作していきましょう。

LP(ランディングページ)制作の教科書4ステップガイド

本書を読むとできるようになること
・LPの基礎知識と制作手順が分かります。
・ユーザーが求めるLPデザインの制作方法が分かります。
・LPのコンバージョン率UPさせるコツが分かります。

主な内容
1.LP(ランディングページ)とは?
・1-1.Web サイトとLP の目的の違い
・1-2.制作の流れ
2.戦略設計
・2-1.ターゲットユーザー像(ペルソナ)の設定
・2-2.競合調査
3.情報設計
・3-1.シナリオを考える
・3-2.レイアウトを考える
4.デザイン
・4-1デザインに入る前の3 ステップ
・4-2.デザインの5つのコツ
・4-3.訴求力の高いファーストビューの制作方法
・4-4.効果的なコンバージョンエリアの制作方法

ダウンロード

最新の記事情報が取得できます。