>デザインキャンペーン系ページデザインのコツ!「流し読み」を意識して作ろうツイートこんにちは。デザイナーチームのユウコです。弊社は受託案件として、数多くのランディングページを制作してきました。そこで今回は、キャンペーン系ランディングページをデザインするときのコツをご紹介します。重要なポイントは「流し読み」ができること!です。一般的にWebページは「見て3秒、読んで7秒」で心をつかまなければユーザーは離脱すると言われています。そんな状況でじっくり読んでもらわないと内容が伝わらないランディングページなんて作ってる場合じゃありません。・FIXです!って送られてきた構成案が...・ユーザーに伝えたいことが沢山あるのは分かるんだけど...っていう状況、ありますよね。テキストばっかりのページは、構成案見た瞬間にうんざりします。そんな時は、デザインで何とかいたしましょう。目指せ!頑張って読まなくても伝わるページ!要素は小分けに突然ですが、マンガってあまりじっくり読まないですよね。マンガは基本的に流し読みされるものだと思います。!1コマに1目で理解できる情報量(画とテキスト)しか入っていないからです。状況を表す画に適切な量のテキスト(せりふ)、「読もう」と意識しなくても、ぱっと見ただけで理解できるから、ポンポンとリズムよく次のコマへと読み進むことができるのです。長ーいランディングページも、マンガのようにポンポンとリズムよく下まで見ていって、ついでにポンっとコンバージョンのボタンを押して欲しい!ということで、構成案をランディングページのレイアウトに落とし込んでいくときには、なるべく1つのブロック(情報のまとまり)には1つの内容だけになるようにします。構成案に書かれてある情報は、入れ子になっていることが多いです。レイアウトの際には、その入れ子構造が分かるように、なおかつ、入れ子構造の最下層の1ブロックには1つの内容だけが入っているように、整理整頓していきましょう。「見出し」を看板化しようある程度の文字数までであれば、人は「読もう」と意識しなくても、ぱっと見だけで書かれてあることを理解できます。ページ全体を読まなくても、見出しだけを目で追っていけば、なんとなくそのページの訴求内容が分かる!という風になっていると、ユーザーはとっても楽ですね。いうことで、見出しと本文のテキストにメリハリをつけて見出しを強調し、一目でわかる看板のようなものにしてみましょう。具体的には...・見出しと本文のジャンプ率を大きくつける・フォント、ウェイト、文字色を変えてメリハリをつける・枠をつけたり、背景を敷いたり、吹き出しにしたりして、テキストを画像的な要素にする実際に先ほどのサンプルでやってみましょう。見たときに目に入ってくるテキスト要素が限られてきたと思います。見出しの文字数が多いときは、さらに要素を小分けにして、見出しにくっついてる別の要素にすると読みやすくなります。装飾的な要素にもなって、一石二鳥!画像をつけて、イメージで伝える情報伝達の手助けとして、テキスト情報の内容に合ったイメージ画像やアイコンを配置すれば、テキストと画像をセットで目にしたときに、一目で何を意味するかが理解できるようになります。文字を読まなくても「困ってること」について書かれてるんだって分かります。当たり前、当たり前なんですけど、大事なことです。見た目の文字文字しさも軽減されて、一石二鳥です。そのうちお会いしましょう。ツイート記事作成者の紹介ユウコ(デザイナー)デザイナーが所属するクリエイティブDivのマネージャーをしています。プロモーションなど多数のキャンペーンサイトやランディングページの制作実績があります。×SNSでも情報配信中!ぜひご登録ください。Market花火大会シミュレーターSHARESHAREWeb制作・アプリ開発に関する、UI/UX情報、イラストテクニック、エンジニア向け情報をお届けしています。