この記事では、Kajabi（カジャビ）を使って簡単にページ上のテキストのフォントサイズを最適化する方法を、ステップバイステップでご紹介します。デスクトップとモバイルで別々に設定する技やプロのデザイナーが使うポイントまで、読者を引き付ける魅力的なページ作りのコツをお教えします。さらに、よくある疑問にも答えているので、すぐに実践できること間違いなし。コンバージョン率アップにつながる、読みやすくプロフェッショナルなランディングページを作る秘訣、ぜひ最後までお読みください。
はじめに：読みやすいウェブサイトの重要性
あなたは自社の商品やサービスを紹介するランディングページを作成しているけれど、思うように成果が出ないと感じていませんか？
その原因の一つに、ウェブサイトの読みやすさがあるかもしれません。
実は、フォントサイズの設定一つで、ウェブサイトの印象は大きく変わります。適切なフォントサイズを使用することで、以下のような効果が期待できます：
- 読者の滞在時間が増加
- コンバージョン率の向上
- ブランドイメージの向上
特に、年配の方や視力に不安のある方にとって、文字（テキスト）の大きさは非常に重要です。しかし、若い方でも小さすぎる文字は読む気を失わせてしまいます。
そこで今回は、Kajabiを使ってテキストのフォントサイズを簡単に調整する方法をご紹介します。この方法を使えば、デスクトップとモバイルで別々にサイズを設定することも可能です。
あなたのランディングページを、より多くの人に読んでもらえる魅力的なページに変身させましょう。
次のセクションでは、Kajabiでフォントサイズを変更する2つの方法について詳しく解説していきます。あなたのウェブサイトが、読者を引き付ける魅力的なページになるよう、一緒に学んでいきましょう。
Kajabiでテキストのフォントサイズを変更する2つの方法
Kajabiでフォントサイズを変更する方法は主に2つあります。基本的な設定方法と、より詳細な設定が可能なスタイルガイドを使う方法です。それぞれの特徴と使い方を見ていきましょう。
1.エディター内での基本的な設定方法
まず、最も簡単な方法から説明します。これはKajabiのエディター画面から直接行える設定です。
- ランディングページの編集画面を開きます。
- 文章を選択し、画面上部の「Formats（フォーマット）」メニューをクリックします。
- 「Headings（ヘディング）」オプションから、Heading1(H1)からHeading6(H6)までの6種類の見出しサイズを選択できます。
この方法のメリットは：
- 操作が簡単で直感的
- すぐに変更結果を確認できる
一方で、デメリットもあります：
- 選択肢が限られている（6種類のみ）
- 本文のフォントサイズを変更できない
- デスクトップとモバイルで別々の設定ができない
2.スタイルガイド（Style Guide）を使った詳細設定
より細かい調整が必要な場合は、スタイルガイド（Style Guide）を使用します。この方法では、ページ全体のデザインを詳細に設定できます。
スタイルガイドの特徴：
- 本文を含む全てのテキストのフォントサイズを調整可能
- デスクトップとモバイルで別々にサイズ設定が可能
- ピクセル単位で細かい調整が可能
スタイルガイドにアクセスする方法：
- ページ編集画面の左側にある「Setting（セッティング）」をクリック
- 「Style Guide（スタイルガイド）」を選択
ここでは、Headings（H1〜H6）と本文（Body）それぞれのフォントサイズを、デスクトップとモバイルで個別に設定できます。
この方法を使えば、あなたのブランドに合わせた一貫性のあるデザインを作ることができます。また、デバイスごとに最適化された表示を実現できるので、より多くの読者に快適に閲覧してもらえるでしょう。
次のセクションでは、このスタイルガイドを使ったフォントサイズの調整方法を、ステップバイステップで詳しく解説していきます。あなたのランディングページを、プロフェッショナルな見た目に仕上げていきましょう。
ステップバイステップ：スタイルガイド（Style Guide）でフォントサイズを調整する
ここでは、スタイルガイドを使ってフォントサイズを細かく調整する方法を、具体的に説明していきます。デスクトップ版とモバイル版の設定方法をそれぞれ見ていきましょう。
1.デスクトップ版の設定
- スタイルガイド（Style Guide）へのアクセス
- ページ編集画面の左側にある「セッティング」（Setting）をクリック
- 「スタイルガイド」（Style Guide）を選択
- フォントセクションの確認
- スクロールダウンして「フォント」（Font）セクションを見つけます
- 「デスクトップのフォントの大きさ（Desktop Font Sizes）」の項目があります
- ヘディングの調整
- H1からH6までの見出しサイズを個別に設定できます
- 例：H1を64px、H2を48pxに設定
- 本文（Body）の調整
- 「ボディ（Body）」の項目で本文のサイズを設定
- 推奨サイズは18px〜24px程度です
- 変更の保存
- 調整が終わったら、必ず「セーブ（Save）」ボタンをクリック
ポイント: デスクトップ版の設定は、タブレットにも適用されます。
2.モバイル版の設定
- モバイル設定へのアクセス
- フォントセクション内の「モバイルのフォントの大きさ（Mobile Font Sizes）」を見つけます
- モバイル用サイズの調整
- デスクトップと同様に、H1からH6、ボディのサイズを設定
- 通常、モバイルではデスクトップよりも小さめのサイズを選択します
- 例：ボディを21pxに設定
- 変更の保存
- 調整後、忘れずに「セーブ（Save）」ボタンをクリック
重要なポイント:
- デスクトップとモバイルで別々に設定することで、各デバイスに最適化された表示が可能になります
- 変更を加えるたびに、実際のページで確認することをおすすめします
- 設定変更後、反映までに少し時間がかかる場合があります。焦らずに待ちましょう
この方法を使えば、あなたのランディングページをどのデバイスでも読みやすく、プロフェッショナルな印象に仕上げることができます。
次のセクションでは、フォントサイズ調整時の重要なポイントと注意点について詳しく解説します。これらを押さえることで、さらに効果的なランディングページを作成できるでしょう。
フォントサイズ調整のポイントと注意点
フォントサイズを調整する際には、いくつかの重要なポイントと注意点があります。これらを押さえることで、あなたのランディングページはより効果的になるでしょう。
読みやすさを優先する
- 本文は18px以上を推奨: 小さすぎるフォントは読者の負担になります。18px〜24pxが一般的に読みやすいサイズです。
- 行間を適切に設定: フォントサイズの1.5倍程度の行間が読みやすいとされています。
- コントラストを確保: 背景色と文字色のコントラストを十分に取り、読みやすさを確保しましょう。
階層を明確にする
- 見出しと本文のサイズ差を付ける: H1 > H2 > H3 > … > 本文 という順で、適切なサイズ差をつけることで、文章の構造が明確になります。
- 強調したい部分は大きく: キャッチコピーやCTAボタンなど、特に注目してほしい部分は大きめのフォントサイズを使用しましょう。
デバイス別の最適化
- デスクトップとモバイルで別々に設定: 画面サイズの違いを考慮し、それぞれに最適なサイズを設定しましょう。
- モバイルではやや小さめに: 小さな画面でも全体が見やすくなるよう、デスクトップよりも1〜2px小さめに設定するのが一般的です。
テストと改善
- 実際のデバイスで確認: 設定後は必ず実際のデスクトップ、タブレット、スマートフォンで表示を確認しましょう。
注意点
- 過度に大きなサイズは避ける: 大きすぎるフォントは逆に読みづらく、不自然な印象を与える可能性があります。
- 変更反映に時間がかかる場合がある: Kajabiの設定変更後、反映までに少し時間がかかることがあります。焦らずに待ちましょう。
- 全体のバランスを考慮: フォントサイズだけでなく、ページ全体のレイアウトやデザインとのバランスも重要です。
これらのポイントと注意点を押さえることで、あなたのランディングページはより読みやすく、効果的なものになるでしょう。読者を引き付け、メッセージを確実に伝えるランディングページを作成していきましょう。
次のセクションでは、フォントサイズ調整に関するよくある質問とその回答をご紹介します。疑問点を解消して、さらに自信を持ってページ作成に取り組めるようにしていきましょう。
まとめ：魅力的なランディングページを作成しよう
ここまで、Kajabiを使ったフォントサイズの調整方法について詳しく見てきました。適切なフォントサイズの設定は、読者の体験を大きく向上させ、あなたのメッセージをより効果的に伝えることができます。ここで、重要なポイントを振り返りましょう。
主要なポイント
- 読みやすさが最優先: 18px以上の本文サイズを基本とし、デバイスごとに最適化しましょう。
- 階層を明確に: 見出しと本文のサイズ差をつけ、情報の構造を視覚的に表現します。
- デバイス別の最適化: デスクトップとモバイルで別々に設定し、各デバイスでの体験を向上させます。
- 一貫性の維持: 同じ要素には同じサイズを使用し、プロフェッショナルな印象を与えます。
- テストと改善: 実際のデバイスで確認し、必要に応じてA/Bテストを行いましょう。
次のステップ
フォントサイズの調整は、魅力的なランディングページ作成の第一歩に過ぎません。以下の点にも注目して、さらなる改善を目指しましょう：
- コンテンツの質: 読みやすいサイズに加え、価値ある内容を提供することが重要です。
- 視覚的要素: 適切な画像や動画を使用し、テキストと視覚要素のバランスを取りましょう。
- カラースキーム: フォントカラーと背景色のコントラストを確保し、読みやすさを向上させます。
- レスポンシブデザイン: フォントサイズ以外の要素も、各デバイスに最適化されているか確認しましょう。
最後に
フォントサイズの調整は、一見些細なことに思えるかもしれません。しかし、ユーザー体験を大きく左右する重要な要素です。適切なフォントサイズ設定により、あなたのランディングページは：
- 読者の注目を集め
- メッセージを明確に伝え
- プロフェッショナルな印象を与え
- コンバージョン率を向上させる
ことができるでしょう。
今回学んだテクニックを活用し、読者のニーズに応える魅力的なランディングページを作成してください。そして、常に改善を続けることで、あなたのビジネスの成長につながるはずです。
フォントサイズの調整は、優れたランディングページ作成への第一歩です。この基礎を固めた上で、さらなる改善と最適化に取り組んでいきましょう。あなたの努力が、ビジネスの成功につながることを心から願っています。
Kajabiの公式チュートリアル記事はこちら
https://help.kajabi.com/hc/en-us/articles/1260802034670-How-to-Customize-the-Font-on-Your-Page
