Original

ノンデザイナーでも質の高いLPが作れる!「Webフォント」を活用すべき理由

広告やSEOなどの施策から集客したユーザーをコンバージョンに導くための「ランディングページ(LP)」。ランディングページは、主に自社のキャンペーンや新商品を発売する際に活用されます。

 

たった1ページのLPでコンバージョンに至るかが決まるため、「効果的なランディングページの作り方」に関して、悩みを抱えている担当者も多いのではないでしょうか。ランディングページ制作で特に重要なのがファーストビューの印象です。ランディングページを開いた直後に魅力を感じなければユーザーは離脱してしまうため、デザインが魅力的であることが前提です。とはいえ、予算の都合によりWeb制作会社に依頼せず自社で制作することもあるでしょう。

 

今回は、ランディングページを制作する上でのポイントを解説し、非デザイナーでもデザインの印象を改善できる「Webフォント」の魅力についてご紹介します。自社で制作を検討している担当者は、ぜひ参考にしてみてください。

 

効果的なランディングページを制作するためのポイント

ランディングページは、単なる縦長の商品紹介ページではありません。1ページの中で、ユーザーを離脱させないような工夫を行う必要があります。そこで、効果的なランディングページを制作するためのポイントを4つご紹介します。

 

1.ファーストビューの印象

ランディングページを制作する上で、最も重要なのが「ファーストビューの印象」です。ファーストビューとは、ページ開いた時に表示される部分です。広告や検索からたどり着いたユーザーは、ファーストビューの印象で読み進めるか離脱するかを感覚的に判断します。そのため、「自分が求めていたサイトだ」と認識してもらうことが大切です。

 

上記は「かてきょナビ」のホームページとランディングページのファーストビューの比較です。ホームページは様々なページへ遷移させるためメニューを充実させますが、ランディングページの場合、明確なキャッチコピーと連想しやすい画像、配色を施しています。

 

そのため、通常のホームページと異なり、「どんな商品なのか」「なにを解決するのか」をタイトルやキャッチコピー、画像で明確に伝える必要があります。また、その商材にあった雰囲気の配色やフォントデザイン、画像を用いるのがポイントです。


参考:

http://www.katekyo-navi.net/
http://www.katekyo-navi.net/arealp/index06.php

 

2.統一感のあるデザイン

ファーストビューの印象に関連して、ランディングページ全体のデザインも重要な要素です。1ページで構成するため、まず気を付けるべきポイントはデザインの統一感です。ユーザーがページをスクロールした時、ファーストビューで感じた印象をそのままにCTAにたどり着けることが理想です。

そのために、先に挙げたファーストビューを過剰にデザインし過ぎないこと、コンテンツのトンマナを揃えること、読みやすいレイアウトとフォントサイズにすることが大切です。

 

3.共感をクロージングに結び付けるストーリー性

ランディングページは、たったの1ページで商品の説明からクロージングまで行います。そのため、ユーザーに「これは私の悩みだ」と共感してもらい、「欲しい」と検討してもらえる構成でコンテンツを制作します。なので、断片的な情報を並べるのではなく、ストーリー性を持たせることが重要です。

例えば、「ユーザーの悩みや課題」→「その解決方法」→「解決方法の1つとして商材を提示」→「限定や特典でプッシュ」のように組み立てることで、ユーザーは共感からクロージングまで違和感なくたどり着けるでしょう。

 

4.ユーザーの課題を解決する具体的なノウハウや事例

ランディングページのコンテンツ制作において、「具体的なノウハウや事例」を掲載することも大切です。このノウハウや事例は、3つ目のポイントで紹介した「悩みや課題」を「商材で解決」するための「根拠」に当たります。

ユーザーが抱える悩みを、なぜ自社の商材で解決できるのか「商材を活用したノウハウ」や、利用者の「経験談や口コミ」を掲載します。情報に信憑性をもたせることで、コンバージョンへの一押しとなるでしょう。

 

 

ファーストビューの印象を簡単に改善できる「Webフォント」とは?

上記で紹介した4つのポイントを踏まえてランディングページを自社で制作する場合、コンテンツ面は問題なくとも、デザイン性を追求するにはスキルや時間的にも限界があるでしょう。

 

特に、商材のロゴデザインやバナーはIllustratorなど描画ソフトを利用するため、特に難易度が高い部分でもあります。そこで、描画ソフトを使わずにファーストビューの印象を改善できるのが「Webフォント」です。

 

Webフォントとは、ホームページ上に好みのフォントデータを表示させることができます。かつては、ブラウザに搭載されたフォントがそのままホームページのテキストに反映されていました。フォントを変えるためには描画ソフトなどでロゴを作成して対応するのが一般的でした。現在では、Webフォントを利用することでテキストを入力するだけで任意のフォントを表示させられます。

 

 

「標準フォント」と「Webフォント」の印象の変化

「標準フォント」と「Webフォント」の違いを確認してみましょう。標準フォントは良くも悪くも特徴があまり無いのに対して、Webフォント(UD黎ミン)を利用した場合、上品な印象を作り出せます。

 

Webフォントを導入せず同様のデザインを反映させるのであれば、Photoshopなど画像編集ソフトを使い、画像の上にフォントを配置したデータを書き出す必要があります。ソフトを使いこなせることを前提にローカル環境での作業が発生するため、見栄えだけでなく作業効率にも差が生じるでしょう。

 

 

非デザイナー向け「Webフォント」を活用すべき理由

Webフォントは専門知識を使わず簡単に導入できる

Webフォントはデザインの専門知識やスキルを使わず導入できます。利用したいWebフォント購入しホームページのサーバー上にアップロードし、CSSに適用させるだけで完了です。

また、Webフォントはロゴやバナー画像ではないため、文言の修正や文字サイズの変更も簡単に行えるのが魅力です。ホームページやブログの更新作業を行っているのであれば、特段難しく感じることはないでしょう。

 

ユーザーの環境に左右されないWebフォント

「標準フォント」は、ユーザーが利用している端末やブラウザに準拠するため、時として思いもよらぬフォントで表示されることがあります。そのため、ランディングページのデザインにそぐわないフォントになってしまう可能性も考えられるでしょう。

一方で、Webフォントを利用すれば、ユーザーの端末やブラウザなど閲覧環境に左右されること無く同じフォントが表示されます。

 

ランディングページ全体のデザインイメージに合わせたWebフォントが利用できる

Webフォントは種類が豊富に揃っているため、ランディングページ全体のデザインイメージに合わせて好みのフォントを選ぶことができます。

例えば、柔らかい雰囲気には丸めのフォント、男性向け商材ならかっちりとしたフォントのようにイメージに合わせたフォントでコンテンツ制作ができます。簡単にフォントの変更が行えるので、ランディングページのプレビュー画面を使って吟味できるのも魅力です。

Webフォントは、株式会社モリサワが提供する「TypeSquare」やアドビシステムズが提供する「Adobe Typekit」などが日本語に対応しており一般的です。どちらも有料ですが、近年、Googleが無償提供する「Google Fonts」も日本語版が対応したので活用してみるのも良いでしょう。

 

 

ferret Oneで無料のWebフォントを使ってみる

ここまででWebフォントのメリットや導入方法について多少のイメージは持っていただけたと思います。ただ、今までWebフォントを使う習慣のなかった方の場合、メリットや簡単に使えることが理解はできても、制作時にはなんとなく既存のフォントで済ませてしまうことも多いかもしれません。特に制作時は納期が迫っていることも多く、そこまで気を回す余裕がなかったり少しでも時間を節約しようと見過ごしてしまうこともありますよね。

 

弊社ベーシックの提供するWebマーケティングツールferret Oneなら一般的なエディタやオフィス系ソフトでフォントを選択するのと同じ感覚で26種類のWebフォントを無料で利用することができます。

 

ferret OneはWebマーケティングを実施するのに必要な、サイト制作(CMS)、ランディングページ作成、ブログ作成、フォーム・リード管理、メール配信など必要な機能がこれ一つで利用できるツールです。ferret Oneを使って様々なコンテンツを作成する際に、デフォルトのフォントと同じようにWebフォントを選択し、表現することができます。

例えば、ランディングページを作る場合を例としてWebフォントの設定方法を紹介します。

 

1.ランディングページを作成する

サイト制作機能(CMS)でランディングページを作成します。ゼロからでもパワーポイント感覚で作ることも可能ですし、先日リリースされた「簡単アシスト」機能を使えば、質問に答えていくだけで簡単にランディングページを作ることができます。

 

サイト制作(CMS)ランディングページを作成する

2.Webフォントを適用する画面を選択、フォントを指定

ページができたら(完成しなくてもWebフォントは利用可能です)スタイルを選択します。テーマのカスタマイズ画面からフォント選択ウィンドウを表示し、使用したいフォントを選びましょう。

 

Webフォントを選択する

これだけで簡単に26種類のWebフォントを設定することができます。最初はとにかく気になるフォントを試しに当ててみながら、ページで訴求するイメージと合ったフォントを絞り込んでいきましょう。最初は物珍しさからいろいろ変えたくなってしまいますが、最終的にはベースとなるフォントを1つ決めるくらいがちょうど良いと思います。

 

 

まとめ

ランディングページで1番重要なのは言うまでもなく「何を誰に対してどう訴求するか」ですが、それと同じくらい重要なのが「伝えたいことを伝えきれるデザインと世界観」です。どちらが欠けていても成果の出るランディングページは手に入りません。また、最近はレスポンシブ対応の重要性も増しており、数年前のように何でもかんでも画像で表現することも難しくなってきています。ページのHTML構造を維持しながら表現力の高いページを作る上ではWebフォントはもはや避けて通れない仕組みともいえます。

 

「Webフォント、知ってはいたけどなんとなく使う機会がなかった」という方、ぜひ一度試してみてください。

 

また、Webフォント機能を含めた機能のデモも行っております。
・どんなことができるツールなのか?
・自社の課題が解決できるのか?

などアドバイスもさせていただきますので、お気軽にこちらのフォームからご相談ください。(もちろん無料です)

 

ferret Oneは、月々5万円からご利用できるサービスです。
すぐにでもホームページを公開したい企業様には、一部制作代行サービスも承っております。