デザイン未経験の新人が、LP制作に挑戦！！役に立ったポイント3選

はじめに

こんにちは！新入社員の谷邊です。
Webのコンテンツ制作を行なっているチームに配属されて半年が経過し、現在はWebサイトのコーディング業務に取り組んでいます。

実業務に入る前、部内でデザイン研修を行いました。
研修内容は、実際に過去にあった案件のLPデザインを制作してみるというものです。

大学ではITやデザインと無縁の学部だったため、
「デザインなんてやったことないのに、どうやって作るん？」
「センスも絵心もないけど大丈夫！？」
「そもそもLPってなんやねんーー💦」
が、率直な感想でした。

しかし、そんな私でも先輩デザイナーからたくさんアドバイスをいただき、最終的にはそれなりのデザインを完成させることができました！
本記事では、研修で学んだことをもとに、LPデザインを制作する上で役に立った3つのポイントをお伝えします。
私のようなデザイン未経験の方の参考になれば幸いです。

LP（ランディングページ）とは？

簡単に言うと、特定の目的を達成するために作成されたWebページのことです。
例えば、商品を購入してもらう、メルマガに登録してもらう、資料をダウンロードしてもらうなど、ユーザーに何らかの行動を促すことを目的としています。
そのため、「今すぐ登録」や「無料トライアルを開始」といったCTAボタン（特定の行動に誘導するために設置されるボタン）が目立つように配置することで、ユーザーが迷わず目的の行動を取れるように工夫されています。また、口コミや受賞歴などを示すことで信頼性を高めているのも特徴です。

LPデザインのポイント

1.基本的なデザイン知識をインプットする

デザインには「センスや絵心が必要なのでは？」と思っていましたが、それは大きな誤解でした。
なぜなら、アートとデザインは目的が異なるからです。

• アート
  自己表現や感情、思想を自由に表現するもの。感じてもらうことや考えさせることが目的。

• デザイン
  情報を伝えるために計画的に作られるもの。内容の理解や特定の行動に誘導することが目的。

つまり、センスや絵心がなくても、知識さえあれば誰でも効果的なデザインができる！ということを学びました。

デザイン知識として教わったのは、デザインの4原則（近接・整列・反復・コントラスト）と色の効果・色選びについてです。
これらを意識することで、視覚的に整ったデザインになります。

デザインの4原則では、特にコントラストを付けることが重要だと感じました。ユーザーは、一語一句丁寧に読むのではなく流し見する傾向があるため、キャッチコピーや重要な情報の文字サイズ、色使いに注意しなければ、見逃してしまう可能性が高まります。
実際に制作する中でも、文字サイズのメリハリが足りておらず、ジャンプ率（本文に対する見出しの文字サイズの比率）を高めに意識するようフィードバックをいただきました。

色の効果については、例えば食品を扱う企業のコーポレートサイトには赤が多いのですが、赤にはエネルギーや活力を感じさせる印象を与える効果があります。また、IT企業のサイトでは、青を多く使用して信頼感や安心感を演出しているなど、新たな発見があり面白かったです。
研修での要望は、赤を使って楽しい雰囲気のデザインにすることでした。赤をアクセントカラーに設定した場合、他の色との整合性やどの部分で使用するかなど、色選びが難しかったです。

2.とにかく参考サイトをたくさん見る

私はいくら知識をインプットしても、「全然思い付かん、、」という状態でした。デザイン未経験者ならおそらく同じ壁にぶつかると思います。
そこで、世の中にどのようなデザインのWebサイトがあるのかを知ることから始めるのが非常に有効でした。たくさんのデザインに触れることで、よく使用されているレイアウトやトレンドのあしらいを学びました。

私が利用した参考サイト集をご紹介します。

• SANKOU! sankoudesign.com

• Web Design Garden webdesigngarden.com

• Pinterest www.pinterest.jp

SANKOU!とWeb Design Gardenは、サイトの種類や業種、色、印象などから絞り込む機能がついています。Pinterestは自由なワード検索が可能です。
お気に入り（SANKOU!）や保存（Pinterest）を活用して、後から参考にしたいサイトを見返せるようまとめておくことがオススメです！

研修で参考サイトをたくさん見たせいか、日常でも気になった商品やお店のWebサイトを意識的に見るようになりました。
このように普段から注目しておくことで、今後Webのコンテンツ制作に携わる上で、さまざまなアイデアの引き出しを増やすことができると感じました。

3.目的を明確にし、視線の誘導を意識する

冒頭でもご説明したように、LPの最大の目的はユーザーに行動を起こさせることです。
そのためには、ユーザーの視線をどこに誘導するかを意識することがポイントであると学びました。

ここで、実際に私がLPデザインに取り入れた視線の誘導方法を、例として挙げたいと思います。

例1　レイアウトにメリハリを加える

人間の視線はページの上から下へ、左から右へ流れます。
単に左に画像、右に文章を配置するのではなく、交互に配置しています。

ページをスクロールしていく中で必要な情報を適切な順番で受け取ることができるため、重要な情報やCTAボタンはこの流れに合わせて配置されることが多いです。

例2　矢印を使用する

シンプルなボタンに比べて、矢印が付いている方が押したくなりませんか！？
これは「次に進みますよ」ということを明示的に伝える、矢印効果と呼ばれる手法です。 矢印を使用してユーザーの視線や行動を特定の方向に誘導し、ボタンであればクリックを誘発する効果があります。

矢印は他にも、左右にコンテンツが遷移することの示唆やスクロールを促すこと、トップページに戻るボタンにも使用しています。

例3　コントラストをさらに付ける

「1.基本的なデザイン知識をインプットする」のセクションで、コントラストを付けることが重要であるとお伝えしました。
文字に点や下線を付けて強調することで、その部分が他の文字よりも目立ち、ユーザーの視線を集めることができます。 その情報が重要であることを伝えるのに効果的です。

デザイン研修を終えて

初めはデザイン未経験の私がうまく作れるのか不安でいっぱいでしたが、上記3つのポイントを学んだおかげで時間を忘れて没頭してしまうほど楽しく取り組むことができました。
より良いデザインを目指すのであれば他にもテクニックが必要になりますが、デザイン未経験者はまず基本を学ぶことが１番だと感じました。
自分の好きな色使いや配置ではなく、依頼者がこのLPを通じでユーザーにどのような行動を促したいのか、またそれをユーザーにどのように伝えるかという点に着目してデザインしなければならないことを学びました。

デザインはデザイナーの仕事という固定観念がありましたが、ディレクターやコーダーなど、Webサイト制作に関わる人全てにデザイン知識が必要であるという認識に変わりました。
今後の業務でも、この研修での学びを活かしていきたいと思います。

最後までお読みいただき、ありがとうございました！

執筆者：谷邊 萌衣
入社１年目。HTML/CSS/Reactなど日々コーディングの勉強中です！