NewspaperXでLPを作る【基本編】ランディングページの横幅と文字サイズはどう決めればいいのか?

この記事ではNewspaper10を使って、超簡単に1カラムレイアウトのデザインを作る方法をご紹介します。

一般的なランディングページを作る際に最も基本でありながら重要なのは、横幅と文字サイズです。
ランディングページは基本的に1カラムになりますので、横幅を自由にとることができます。

問題になってくるのは、1カラムで横幅が長すぎるとユーザーは見づらいと感じてしまうことです。

lp2 NewspaperXでLPを作る【基本編】ランディングページの横幅と文字サイズはどう決めればいいのか?
http://lp-web.com/

こういったサイトでLPをいくつか見てみると、たいていの場合はヘッダーを全画面にして、その下の文字はフルサイズではないパターンになっています。

もしくはこういったサイトのように

lp3 NewspaperXでLPを作る【基本編】ランディングページの横幅と文字サイズはどう決めればいいのか?
https://break-seminar.com/

横カラムとその下の文字も全て同じサイズで調整する方法もあります。
ちなみに、このサイトの横カラムはぴったり1000pxみたいです。

NewspaperXでLPを作る際はどちらのやり方でもできます。
個人的にはヘッダーはフルの方がかっこいいかなとは思っていますが、読むユーザーからしたら特に気にしていないかもしれませんし、スマホから見るユーザーが多ければ、そっちを中心に考えてPCはそれに合わせてもいいかもしれません。

さて、LPを数サイト調べた中で、文字をきちんと入れているランディングページを見てみると、レイアウトはこんな感じでした。
*あくまで一例です。

1カラム横幅

マージン(実際の文字幅)

文字数の最大

読ませる大きめの文字

LPその1

980

5050
実質880

51

23

LPその2

960

50+50
実質860

LPその3

930

50+50
実質830

48

34

LPその4

950

40+40
実質870

51

40

本文の横幅は950前後
マージンは左右50px前後
実際の1カラムの幅は850前後

そして、気になる横幅の文字サイズは18pxで50文字前後が多いです。
太文字や少見出しぐらいになると40文字前後になります。

PCの場合、通常noteのような1カラムサイトだと、横幅700〜800pxで35文字ぐらいを基本にしています。
35文字になるように調整するのは、それが見やすい文字だからです。

しかしながら、文字量の多いLPで35文字で作ってしまうととんでもない長さになります。
またヘッダーは全画面(大体1000px〜1200pxぐらい)にしておいて、本文が700px〜800pxになると、ヘッダーと本文のサイズ差が激しく、なんかかっこ悪くなります。

そのため、PCの場合は850px前後にして、文字サイズを18px、50文字以内ぐらいを1行にするのが基本のようです。
スマホの場合は大見出し、小見出し、本文などの文字のジャンプ率に差をつけることが難しいため、本文は16px、大見出しでも30px以下が多くなります。

実際にニュースペーパーでレイアウトを作ってみる

というわけで、カラムや文字サイズがある程度見えてきた所で、NewspaperXでレイアウトを作ってみたいと思います。
newspaper10 21 NewspaperXでLPを作る【基本編】ランディングページの横幅と文字サイズはどう決めればいいのか?
まずは管理画面からNewspaper10の固定ページ、もしくはcloudテンプレートにいき、ページビルダーのレイアウトになるrowを選びます。

newspaper10 22 NewspaperXでLPを作る【基本編】ランディングページの横幅と文字サイズはどう決めればいいのか?
基本的なカラムのレイアウトはデフォルト、1200pxなど色々選べます。サイドめいいっぱいにしたい場合は、下から2番めを選んでください。
今回は本文なのでデフォルトのサイズでいきます。

newspaper10 23 NewspaperXでLPを作る【基本編】ランディングページの横幅と文字サイズはどう決めればいいのか?
で、現時点だとこのようにカラムめいいっぱいに文字が入っています。
デフォルトのレイアウトサイズでも横幅が問題なければこれでいいですが、1カラムレイアウトの横幅はデフォルトで1068pxあります。
さすがにこのレイアウトは大きすぎるため、横幅を狭くしたいですよね。

newspaper10 24 NewspaperXでLPを作る【基本編】ランディングページの横幅と文字サイズはどう決めればいいのか?
そこでrowカラムのCSS部分をみて、ここでこのように調整します。◯◯%で調整を入れると、その分だけ差がなくなります。
簡単に言えば1000pxなら5%でマージンを取ると、1000px – 50px – 50pxで900pxに調整されるわけです。

こうやって調整を入れるとかなりラクにできます。CSSを書く部分もありますが、私のようにCSSのコードをかけない人はここで%でやってしまえば、いいわけですね!

newspaper10 25 NewspaperXでLPを作る【基本編】ランディングページの横幅と文字サイズはどう決めればいいのか?
1点、確認しておきたいことは、Newspaper10の場合は行であるrowでまずは大枠のレイアウトを整えた後に、それぞれの要素(ブロック)を入れていきます。

つまり、CSSで横幅を決める際はrowでの設定とブロックでの設定が可能なのです。

違いは何かといえば、ブロックはあくまでブロック単位、rowはその行間にブロックをいくつ詰め込んでも全てにレイアウトが適応されます。

LPを作る際は横幅をある程度同じにしておきたいと思いますので、rowで横幅を確定させてしまうのがいいでしょう。
そうすれば一つ一つのブロック単位で調整を入れる手間が省けます。

lp111 NewspaperXでLPを作る【基本編】ランディングページの横幅と文字サイズはどう決めればいいのか?
このようにカラムで差をつけたい場合は2パターンあります。

1つ目は1つのrowを1200pxなど大枠にしておいて、inner rowのブロックをrowの中に入れてレイアウトを%や数字で調整していくパターン。
こうすることで外の大枠を確定させれます。

もう一つはそもそもrowを2つ入れるパターンです。
つまり、基本的に900pxに調整を入れているrowを使っていて、はみ出したいデザインが出てきた場合は別の1068pxのデフォルトのrowを入れていけばOKです。

ページビルダー的にどっちが軽いかは正直体感ではわかりませんが、入れる数は一緒なのでほぼ変わらないように思います。
この辺のやり方はクラウドテンプレートにデモが多数あるので把握するのは難しくないでしょう。

ぜひ色々試してみましょう。

SAITO JUN
SAITO JUN
株式会社reminisceの代表 中央大学数学科を中退、25歳までフリーター、26歳で1年通販のネットショップで働いた後にアフィリエイトで独立。 1年後、目標のボーダーラインに達し、また1日1〜2時間前後で済む流れができたのでフィリピン留学を決意。 留学するまでTOEIC300点台、英会話力ほぼゼロだったが、4ヶ月の留学で英会話力が伸びるコツを会得。 独学で全然身につかなかった英会話が、フィリピン留学で身につけれたことに感動を覚え、帰国後多くの方にフィリピン留学のすばらしさを知ってもらいたく、自身の経験を元に2013年から俺のセブ島留学(マナビジンの前身)としてサイトを立ち上げる。 幸いほとんどライバルらしいライバルがいなかったこともあり、フィリピン留学関連サイトとしてアクセス数トップクラス。アフィリエイトサイトはそれを機に一部を残して売却し、留学メディアとコンサル事業に集中。 コロナ後は自社メディアをいくつかと、クライアントのメディア立ち上げ、コンサル(アドバイスだけでなく、企画・集客、ディレクションまで)を行っています。

Similar Articles

Comments

Most Popular

MailChimpとConvertkitを比較!初心者の私がステップメールを組む際、どっちが使いやすかったか

↑サムネ、苦労した挙げ句にやっとメルマガフォームを設置することができた例↑ 恥ずかしながら今まで私はいわゆる「ファ...

1日10時間勉強をする画期的な方法

最近ひろゆき氏の動画に食い入るように見ている私、サイトウです。 大変面白いのですが、1動画当たり1時間〜2時間ある...

海外留学でみた英会話力が向上しない人たちのよくある3つの原因

なぜ英会話は伸びる人と伸びない人がいるのか? 8年間フィリピン留学に関わってきて、数千人、数万人の留学生を色々な角...