今回お届けするノウハウはこちら
- 1. ポンコツなカバーページのアウトライン
- 2. カバーページの写真を修正する
- 3. カバーページの写真をSquarespaceから選択する
- 4. 背景写真の違和感を「チルト」で取り除く
- 5. カバーページのヘッドラインを修正する
- 6. レスポンシブに対応した写真のフォーカルポイントを移動する
- 7. オプトインページのヘッドラインに使う写真は超重要
- 8. オプトインページの写真をSquarespaceで編集する方法
- 9. オプトインページのヘッドラインを修正する
- 10. オプトインページの文章を見やすくする
- 11. オプトインページの訴求文章を変更する
- 12. 白背景に白文字は読みにくい
- 13. 視認性の高い写真とは？
- 14. ストックフォトは使わない。モックアップを使う。
- 15. 太字と下線を使って読みやすさを調整する
1. ポンコツなカバーページのアウトライン
Videocreation.cloudのサイトで修正が必要が箇所がいくつかあるので、それを変更していこうと思います。ちなみに、セールスレターは、Squarespaceを使っています。
2. カバーページの写真を修正する
このページは被写体が左を向いているのに、左側に空間がないので、窮屈な印象を与えてしまいます。なので、左側に空間のある写真に変更します。
このページはカバーページで作成しているので、「MEDIA」から「Add Images」、「Upload Image」をクリックして画像を追加します。
そして、追加したのが、上記の画像です。あとは、ボックスを左に持っていきます。
3. カバーページの写真をSquarespaceから選択する
先ほどのボックスを左に持っていきます。「Style」から「POSITIONINGS」を「Left」に変更します。
4. 背景写真の違和感を「チルト」で取り除く
先ほどの写真の背景の線が斜めになっているので、それを変更していきます。「MEDIA」で変更する写真をの上で編集のアイコン(鉛筆のアイコン)をクリックします。すると、編集画面に遷移します。
そして、画面の右上にあるクロップのアイコンをクリックします。画面の下にチルトする線があるので、ツマミをずらして調整します。
5. カバーページのヘッドラインを修正する
カバーページのブランディングが「DIDEOCREATION.CLOUD」で、ヘッドラインにも「VIDEOCREAITION」の文言が入ってしまっているので、ヘッドラインの方を「山田道存と石崎力也のっこーすを受講する」に変更しました。
6. レスポンシブに対応した写真のフォーカルポイントを移動する
フォーカルポイントを変更することで、写真の中心をずらすことができます。なので、レスポンシブに対応するときは使ってみてください。カバーページでは、「MEDIA」から写真にカーソルを合わせると、丸いフォーカルポイントが表示されますので、それで中心を調整します。
7. オプトインページのヘッドラインに使う写真は超重要
写真の背景が白っぽくなっていて、文字の色も白いと読みにくくて成約率が落ちてしまうので変更する必要があります。
Canvaで黒背景のボックスを入れ、斜めに配置します。そして、透明度を70くらいにします。これで、白文字でもみやすくなります。
8. オプトインページの写真をSquarespaceで編集する方法
上の写真に変更したんですけど、上にある窓が斜めに写っているので、これをクロップします。
まずは、編集したいページのセッティングアイコンをクリックします。そして、「Media」で「IMAGE EDITOR」をクリックします。
画面右上にあるクロップアイコンをクリックします。あとは、必要ない部分をクロップするだけです。
9. オプトインページのヘッドラインを修正する
オプトインページのヘッドラインが、ちょっとバランスが悪いので、それを修正していきます。文字の大きさを変更するという方法もありますが、テキストの幅を変更して調整しました。
10. オプトインページの文章を見やすくする
1つのセクションに文章を詰め込みすぎると、ほとんどの人が読みません。ましてや、オプトインページでは特に。なので、文章が長くなる場合は、2つに分けたりしましょう。
上のように、2つのセクションに分けて、サブヘッドを追加することにしました。サブヘッドに関しては、次に追加していきます。
11. オプトインページの訴求文章を変更する
上記のように1つ目のサブヘッドに「完全なパッシブインカムです。」という文言を、2つ目のサブヘッドに「のべ10万人の受講生にコースを届けてきました。」という文言を追加しました。あとは、そのほかの文章も少し調整しました。
12. 白背景に白文字は読みにくい
上の写真は、ソファーの色が白なので、文字が見えづらくなっています。
なので、Canvaで上のように文字が入る部分にボックスを追加しました。
13. 視認性の高い写真とは？
先ほどの写真を変更して、上の背景を入れることにしました。目線が合うので、文章を読み進めてしまいます。全部が全部目線が合うような写真でなくても良いですが、積極的にそういった写真を使うようにしましょう。
14. ストックフォトは使わない。モックアップを使う。
上の画像のように、ストックフォトを使わないようにしましょう。特に、情報コンテンツの場合は、どんなものか想像してもらえるようなモックアップを使うようにしましょう。
例えば、こんな感じです。
15. 太字と下線を使って読みやすさを調整する
モックアップを追加すると、こんな感じになりました。あとは文章が読みにくいので、適宜、太字や下線を引いて読みやすさを調整します。
それで修正したのが上のスクショです。
