「ランディングページデザインが上手く出来ない…！」
そんな悩みを抱えるWeb制作初心者の方は多いと思います。このブログでは、筆者の失敗談を元にランディングページデザインのポイントを解説します。
デザインでつまづきやすい箇所の確認や、制作するサイトデザインの参考にどうぞ！
前提として、ランディングページは特性上、1つの情報について特化しています。そのため、デザインが単調化しやすいので注意しましょう。特に、コンテンツや配置、あしらいなどで単調化を防ぐ工夫が必要があります。
また、ランディングページのデザインは基本的にシングルカラムレイアウト。
1カラムはサイドバーのないレイアウトです。スマートフォンサイトではサイドバーを配置しにくいため、1カラムが主流となっています。縦長のランディングページでは、1カラムを採用している場合がほとんどです。
引用元：https://creator.levtech.jp/tips/article/52/
シングルカラムは、ランディングページと非常に相性が良いです。なぜなら、シンプルで分かりやすい構成が訴求に適しているためです。
筆者は、ペルソナ設定の年齢層を20~65歳とおおまかに想定しまいました。この結果、サイトカラーを決めた際、後にペルソナと一致しないことが判明し、カラー変更が起きてしまいました。
ペルソナとは、ズバリ商品やサービスの詳細なユーザー像のことです。
まるでその人物が実在しているかのように、年齢や性別だけでなく、職業、趣味、家族構成、休日の過ごし方など、細かい部分もリアルに設定して行きます。
引用元：https://alive-web.co.jp/blog/what-is-persona/
ペルソナが細かく設定されていないと、どんな人にサイトを見てもらうのかイメージが出来ません。従って、見てもらいたい人に合わせたサイトのデザインも出来なくなってしまいます。
ペルソナは細かく、実在しているプロフィールのように設定しましょう。この作業がいかに丁寧に行われるかで、この後のスピードも大きく変わるほど重要です。
上記のペルソナ設定の結果、デザインコンセプトが決まりきらないまま制作を始めてしまいました。ユーザーイメージが固まっておらず、どのようなコンセプトで訴求したら良いか分からない。そのため、万人受けするようなデザインで進めてしまい、後から違和感を感じました。
筆者が最も後悔したのは、サイトカラーのコンセプトです。ペルソナは20~65歳でしたが、訴求したい商品は女性向けのため、ピンクをベースカラーとしました。しかし、年齢層は65歳までと幅広く、高齢の方向けにはピンクは適切ではありません。そのため、最終的にベースカラーの変更が起きてしまいました。
以下のブログは、年齢や性別などに合わせた配色の参考になります。
ドコドア ターゲットに合わせた配色をしよう。：https://docodoor.co.jp/staffblog/color-scheme/
ランディングページのデザインは、シングルカラムレイアウトが主流です。しかし、そのままコンテンツを上から下へと貼り付けては単調になってしまいます。筆者は、そのまま貼り付けてしまい、視線の動きがないものになってしまいました。
コンテンツを配置する時、グリッドに合わせて少しづつずらしてみましょう。また、横幅を等分したレイアウトにするなども効果的です。
以下のサイトはコンテンツの配置を考えるときに参考になります。
あしらいはサイトの見栄えをよくすると同時に、ユーザーに注目を促すことができます。
しかし筆者は、あしらいをどう活かし、どういった配置にすれば良いのか分からず…。結果、思うように注意を誘導できず、寂しいサイトができ上がりました。
あしらいは自分で1から全て作る必要はありません！たくさんのフリー素材がサイトで配布されているのでそれらを使うのも良いでしょう。また、使い方は様々なサイトから、配置や色などを参考にするのが効率的です。
以下は、あしらいに使用できるフリー素材の配布サイトです。
以下は、あしらいの使い方の分かりやすいブログです。参考にして下さい。
デザインは、
上記の2つが上達するには欠かせません！
ランディングページのデザインは、デザインと一言で言っても様々な工程を含みます。筆者の失敗から、皆様がより効率的に良いデザインを作れるようになれたら幸いです。
関連記事
久保田 里佳子 
櫻井 邦則 
