1. HOME
  2. メディア
  3. Web制作
  4. ランディングページデザイン失敗談|初心者必見!
Web制作 2022.8.29

ランディングページデザイン失敗談|初心者必見!

  • webサイト
  • web制作
  • デザイン
  • ランディングページ

ランディングページデザインのイメージ

「ランディングページデザインが上手く出来ない…!」

そんな悩みを抱える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つが上達するには欠かせません!

ランディングページのデザインは、デザインと一言で言っても様々な工程を含みます。筆者の失敗から、皆様がより効率的に良いデザインを作れるようになれたら幸いです。


この記事を書いた人

小川恵実
小川恵実

2022年8月に中途入社。IT未経験からの入社なので毎日勉強中です。

この人が書いた記事をもっと読む