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

ランディングページ（LP）デザインを制作する上で考えなければならないのが、フォント。
「画像でデザイン性を高めたい！」
「でもサイトの軽量化やSEO対策をしたい･･･」
悩みどころだと思います。
デバイスフォントと画像フォントのメリット＆デメリットをご説明していきましょう。

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

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

デバイスフォントとは、PCに予めインストールされているフォントの事です。
Webサイトのフォントは基本デバイスフォントで表示されています。
デバイスフォントによる表示は容量が少なく、拡大しても荒れることがないのが特徴です。

1-2.画像フォント

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

画像フォントとは、画像ファイルで作成されたフォントの事です。
Photoshop等の画像編集ツールで文字を装飾したもので、大きさや色の細かい設定が出来、幅広いデザインにできます。
そして画像ファイルなので、デバイスやブラウザを選ばず同じデザインで表示できるのが特徴です。

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

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

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

【メリット】

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

【デメリット】

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

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

【メリット】

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

【デメリット】

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

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

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

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

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

例）

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

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

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

例）

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

まとめ

デザイン性、SEO、軽量化を両立させなければならないので、難しいですね。
しかしこれらを上手く両立させることにより、コンバージョンの効果が高くなるので、フォントについても考えながら制作していきましょう。

こちらの記事もよく読まれています

いつまでも広告に頼ってはいけない！！ショッピングサイトの広告以外の集客方法

ステップメールサービス「無料」と「有料」の違い！メリットとデメリットとは？

インターネット広告の種類と効果を把握する！主な４つの広告を比較

ユーザーを飽きさせない！LPデザインを制作する5つのコツ