ランディングページのデザインに必要な7つの心がけ

高塚 結子のプロフィール画像
デザイナー 高塚 結子

5,482 view

これまで何度もランディングページ制作に携わる機会があったが、特に入社して1年ほどはうまくデザインをまとめることができず、苦しい思いをすることが多かった。

つまずいたことを思い返すと数え切れない。訴求ポイントをしっかり把握しないまま手を動かしていたこと、提供された原稿やワイヤーフレームをそのまま反映して発想に自由さがなかったこと、表現の引き出しが少なく全体的にワンパターンになることなどは、特に記憶している。

しかし2年の経験を重ねた今は自分なりに気をつけるポイントが見えてきた。そこに注意することで、魅力的で内容が伝わりやすいデザインに仕上げることができる。振り返りとして、私が心がけているポイントをまとめてみたい。

1. 細かい説明を読ませる前に見出しで結論を伝える

内容に興味を持ってもらうためには、まずタイトルに目を留めてもらわなければならない。提供された原稿に見出しが無い場合、必ず結論やユーザーにとってのメリットを抜き出して、なるべく簡潔な表現でタイトルとして入れるようにしている。私はこの作業を、友人に自分の見てほしいものを語りかけるような感覚で作成している。

2. 見出しの中でも特に読んでもらいたい文字を装飾する

その見出しの中でも一番ユーザーに伝えたい言葉や文章が読み飛ばされないように、セクションタイトルをその他の文字サイズよりも大きめに設定し、なおかつその中で最も読んでほしい部分を抜粋しアクセント表現を付けることでメリハリが生まれ、目に留まりやすくなる。蛍光ペンで下線を引いたり、文字の頭にドットを付けたりする表現は汎用的に使いやすい表現だ。

3. 写真のトリミングや加工に一工夫を加える

例えば、写真を使用する際に四角くトリミングした写真をただ並べるだけだとどことなく単調で、ランディングページ特有の”スペシャルページ感”が出ない。画面に動きを出すためには、円や角丸で写真をトリミングをしたり、写真の一部をあえてはみ出させる加工を施したりすると、単調な印象から抜け出すことができる。

4. メリハリのある広めのマージンを設定する

デザインの4つの基本原則のうちの一つ「近接」を徹底させてメリハリのあるマージンを設定する。例えば、それぞれのセクションが近いと別の情報グループとして認識しづらい。ランディングページはどんどんスクロールして読み進められるので、全体的に各要素を大きくして広めのマージンをとるのがポイントだと考えている。

5. ワイヤーフレームや原稿を過信しない

クライアントやディレクターから提供されたワイヤーフレームの構成や指示が絶対に正しいとは言い切れない。提供された元情報があっても「このタイトルで読んでもらえるか?」「この構成で伝わるのだろうか?」と、再度考えることを心掛けている。自分ならどう考えるか?と常に問い続けることが大切になる。

6. 平凡・単調・飽きるデザインにしない

ランディングページは1ページ内に多くの情報が掲載されるため、読んでいて飽きさせないための工夫が必須だ。なにも奇抜な装飾にしなければいけないわけではないが、文字サイズや色、セクションごとのデザインには明確な差をつける、同じレイアウトパターンを使いまわさないといった工夫で、見ていて飽きの来ないデザインに仕上げることができる。

7. いろいろな参考ページをたくさん見て引き出しを増やす

自分の頭の中だけで表現を考え続けていてもなかなか答えは出ないし、時間だけが過ぎてしまって焦りが募る。先輩から特に言われ続けているのは、たくさんの参考を見て表現を盗み、自分の引き出しの中にストックしておくこと。この積み重ねが作業時間を大幅に縮めることになる。デザイン作業を開始する前に、すでに作業は始まっていると言える。

最後に

これらは最初からできたわけではなく、制作の回数を重ねた上で徐々に身についてきたものだ。ネット上に数多くあるデザインの参考を見ると、さまざまなTIPSや工夫が紹介されていてとても勉強になるが、やはり実際にアウトプットの経験が増えないと身についていかない。

工夫された魅力的なデザインを、先輩の力を借りずに自分だけで考え出すのは現在も決して楽なことではない。しかし、まずは自分自身の経験をひとつひとつ振り返って記録し、そのノウハウを活用しながら楽しんで制作する、ということが大切だ。

今後も「この商品だったらお問い合わせしたい!」と感じるようなデザインやコピーを第三者の目線に立って考えつつ、今度は後輩が制作で悩んでいる時にアドバイスできるようにしたい。

関連する日報

    フリー素材のアイコン・イラストを流用する時のコツ

    2,582 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
    経験やスキルがなくても、デザインのフィードバックはできる

    2,222 view

    原浦 智佳のプロフィール画像
    原浦 智佳 デザイナー
    「壁打ち相談」をうまく使って、情報設計を効率よく進めよう!

    1,538 view

    高島 藍子のプロフィール画像
    高島 藍子 デザイナー
    BtoBサイトにおける「ファーストビュー攻略法」

    2,930 view

    池田 彩華のプロフィール画像
    池田 彩華 デザイナー
    デザインを複数案作る時の心得

    6,406 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
上に戻る