ランディングページのUIデザインを考える

 

今回の記事では、ランディングページのUIをテーマにデザインについて考えてみたいと思います。

 

 

 

ご存知のとおり、UIデザインの定義は広義にも狭義にもさまざまな解釈があります。この記事では、UIデザインを『ユーザーのアクションを起こすためのデザイン』という解釈のもと、考えてみたいと思います。

 

 

 

では、ランディングページの場合で言う『ユーザーのアクションを起こすためのデザイン』とは何かというと、『操作のためのデザインパーツのUIデザイン』という点が主になるかと思います。まずは、『操作』という観点からUIデザインを考えてみます。

 

 

 

 

操作のためのUIデザイン

 

 

 

主に下記の7つの要素がランディングページの『操作のためのUIデザイン』に当てはまります。

 

 

 

 

 

 

一見、ランディングページというと、たったの1ページじゃないか、あるいは、ページ遷移させる必要性が低いのにそんなにUIデザインなんて必要なんだろうか？と思われるかもしれませんが、上記のようにランディングページにおいてもいくつかのポイントにおいてUIデザインが必要になってきます。

 

 

 

さて、あげさせていただいた『7つのUIデザインが必要な要素』について、その役割やデザイン上の注意点について考えたいと思います。

 

 

 

コンバージョンエリアのUIデザインやボタンのUIデザイン

 

（役割）

 

申込・問合せなどのコンバージョン獲得に結びつけるUIデザイン

 

 

 

 

（デザインにおける注意点）

 

コンバージョンエリアやそのエリア内に配置されるボタンのデザインを考える際、重要なファクターになるのが、カラーです。カラーを決める上で前提になるのが、ランディングページ全体の中でどれだけ目につきやすいかという点です。もっと言うと目立つかどうかということになりますが、単に目立つ色を選べばいいかというとそうではありません。

 

 

 

ランディングページで紹介する商品やサービスのキーとなるメインカラー（ブランドカラー）を決定しつつ、更に補色としてランディングページ上で使うカラーをおおよそ決めながら、コンバージョンエリアやボタンでしか使わないカラーを決めていく必要があります。メインカラーとサブカラーとコンバージョンカラーの3つに分けてランディングページ上で使うカラーを決めていくと考えるとわかりやすいかもしれません

 

 

 

ランディングページにおけるカラー戦略については下記の記事で詳細をご覧ください。
『ランディングページのカラー戦略まとめ』

 

 

 

そして、そうやって選定したコンバージョンエリアやボタンのカラーについては、ひとつのランディングページ内で統一することが大切です。でないと、ユーザーが混乱してしまいかねないからです。

 

 

 

また、より厳密に言えば、コンバージョンエリアはキャッチコピーやキャンペーン情報、ボタンなどのコンバージョン領域の全要素を含めたものを指します。

 

 

 

その中でアクション・操作を示す要素はボタンになりますが、ボタンについてもう少し詳しく言うと、カラー選定のあとは、目線を促す矢印アイコンの設置やボタン自体の立体感などの装飾デザイン、および全体のコンテンツとバランスを考慮しての大きさや配置などの検証を経て、最終的な完成へと至ります。

 

 

 

 

ヘッダーのナビボタンや固定型のサイドメニューのUIデザイン

 

（役割）

 

ページ内の各コンテンツへの誘導を目的としたUIデザイン

 

 

 

 

（デザインにおける注意点）

 

まずヘッダーについては、コーディング・実装面での話で言うと、固定させるケースとそうでないケースがあります。固定させる場合は、特にランディングページの縦幅が長くなるケースなどで有効です。そして、ヘッダーを固定させるかさせないかによって、ヘッダー内のボタンの目立たせ方も変わってくると思います。固定させる場合は、ユーザーが下にスクロールする際に、上部にヘッダーがずっと表示されたままであるため、ヘッダー内にあるボタンを目立たせすぎても（主張しすぎても）、かえって邪魔になり、その結果、実際に見させたいコンテンツを見る上での障害になる可能性があります。そのため、ヘッダー内に配置するボタンの数などに応じて、ヘッダー自体の縦幅のサイズや色味などの調整が必要になります。

 

 

 

サイドメニューについては、右利きのユーザーのほうが一般的に数が多いため、右側に実装することがほとんどです。デザインの際は、「コンテンツへの誘導を目的としたナビボタン」と「コンバージョンを誘導するためのナビボタン」と「トップに戻るボタン」の大きく3つの役割のボタンを縦に配置します。それぞれのボタンの役割が異なるため、デザイン上も変化をつけることがポイントになります。

 

 

 

 

下部に配置するバナー型のナビメニューのUIデザイン

 

（役割）

 

フォームへの遷移などを目的に、コンバージョン獲得に結びつけるUIデザイン

 

 

 

（デザインにおける注意点）

 

下部に配置する固定バナー型のナビメニューについては、コンバージョンラボのケースで言えば、制作のご依頼をいただく企業様の10社に1社くらいのため、設置すること自体がそこまで多くはありません。

 

 

 

下部に配置する場合は、実装面で言えば、邪魔にならないように開閉式にするケースが多く、UIデザイン上は、右側に開閉することが分かることを示すための矢印アイコンなどを配置します。考え方としては、後述するアコーディオンメニューのUIデザインと同じようなものであると思います。

 

 

 

さらに、開いた際に表示される要素としては、フォームへの誘導を行うためのコンバージョンボタンや、キャンペーン情報などの要素があげられますが、特に下部の固定バナー内に配置するコンバージョンボタンについては、ランディングページ上にあるコンバージョンエリア内のボタンやサイドメニューなどで使うカラーと統一させることが大切です。

 

 

 

また、下部の固定バナーを開いた状態は、PCなどのデザイン上での占有面積が大きくなるため、邪魔にならず、目立たせるデザインといった相反する側面を両立させる必要があります。それらを両立させるためには、カラーの検証などをはじめ、ヘッダーと同じように縦幅の長さの調整などを含めて検証することで最適なものに仕上げていくことが必要です。

 

 

 

 

ページ内遷移を促すアンカーリンクボタンのUIデザイン

 

（役割）

 

ページ内遷移を促すUIデザイン

 

 

 

 

（デザインにおける注意点）

 

アンカーリンクについては、ヘッダー内に配置するナビボタンやサイドメニュー同様、ページの縦幅が長くなるときに活用します。ヘッダーやサイドメニューとの違いはナビボタンを、ヘッダーやサイドの領域に配置するのではなく、コンテンツ内に配置する点です。なお、アンカーリンクの役割としては、下部に表示されるコンテンツの見出しとしての機能です。

 

 

 

デザインの注意点としては、ヘッダーやサイドメニュー内のナビボタンデザインと大きな違いはありませんが、細かいことを言えば、矢印アイコンを配置する際、コンバージョンエリア内のボタンのように右向きに矢印アイコンを配置する（※）のではなく、アンカーリンクの場合は、下のコンテンツへの誘導を目的としていることがよりわかりやすいように、矢印アイコンを下向きにすることがあります。

 

※コンバージョンエリアの矢印は右向きにデザインすることが多いです。

 

 

 

 

アコーディオンメニューのUIデザイン

 

（役割）

 

ランディングページの縦幅の省略を目的とし、かつ、より詳しくコンテンツの中身を知りたいユーザーのアクションを促すためのUIデザイン。支店ごとの地図や住所などの同一の用途で多数展開されるコンテンツなどで使用します。

 

 

 

（デザインにおける注意点）

 

アコーディオンメニューは、Web制作の現場において一般的には活用するケースが減ってきているとも言われているようですが、1ページ完結型の縦長のランディングページにおいてはコンテンツの縦幅を省略するために活用するケースが実際には数多くあります。

 

 

 

デザイン上の注意点としては、開閉するという機能をしっかりとユーザーに認識してもらうことです。ですから、開閉の動作を示すアイコンやテキストなどに目線が行くようにデザインを行います。

 

 

 

また、アコーディオン展開をさせるコンテンツ自体のサイズ感によってもデザインが変わってきます。たとえば、960〜980pxの幅で1コンテンツそのものをアコーディオンにするのか、部分的なサイズ感でアコーディオンにするのかによってデザインが変わるということです。特に横幅いっぱいの1コンテンツそのものとなると、ユーザーにきちんとアコーディオンになっていること自体を気づいてもらうようなUIデザインが必要になります。そうでないとアコーディオンの存在に気づかずにそのままスルーされてしまいます。

 

 

 

そのため、［色］や［アコーディオンボタンの大きさ］や［フォントの大きさ］や［開閉アイコン］をバランスよく・わかりやすくデザインすることがポイントです。なお、開閉アイコンについては［矢印上下］のアイコンデザインの場合や［開く・閉じる］というテキストによるデザインを行う場合と大きく二つあります。使い分けについては厳密に決まっていませんので、コピーの量や全体のデザインのバランスとの兼ね合いで決めていただければ良いかと思います。

 

 

 

 

スライダーのボタンUIデザイン

 

（役割）

 

横の動きを主としたコンテンツの展開を促すUIデザイン。ユーザーボイス・体験談・事例紹介コンテンツなどで使用します。

 

 

 

 

（デザインにおける注意点）

 

役割で示した通り、横の動きを促すためのボタンデザインです。3つなり4つなりの同一のコンテンツ（例：体験談1、体験談2、体験談3、体験談4）を右に遷移させていくための右向きの矢印ボタンを配置します。左側には戻るボタンとして左向きの矢印ボタンを配置します。

 

 

 

ちなみに、面白いことにさまざまなランディングページをPt engine（Ptエンジン）などの解析ツールで分析すると、スライダーの右側の矢印は非常にクリックされている傾向があることがわかります。

なお、左右の矢印ボタン以外に、図のように、同コンテンツの上か下に、バナーボタンを3つなり4つなり配置することで更にUIが高まります。

 

 

 

 

タブ切り替えのUIデザイン

 

（役割）

 

同一のコンテンツを複数並べる際に、活用するUIデザイン。挙動としては横の動きではありませんが、役割としてスライダーと近い役割を果たします。

 

 

 

（デザインにおける注意点）

 

タブデザインは、スライダーに比べて、気づかれにくい特性があるため、現在地が表示されている際のタブボタンは、大きめにデザインするなどの工夫をすることで、よりUIの高いデザイン（緩急のあるデザイン）になります。

 

 

 

 

ここまで7つの主要なUIデザインを見てきましたが、このように、一口にランディングページのUIデザインと言っても、コンバージョンを促進させるためのUIデザインやページ内のコンテンツへの誘導を促進するためのUIデザインなど、目的に応じて各パーツ・要素のデザインの役割や方法は異なります。

 

 

 

また、あくまで上記の要素の説明については、ポイントとなる点のみを記載したため、これですべての要件ではありませんし、よりよいUIを目指していくためには、常に新たな表現方法を模索していく必要があります。

 

 

 

 

広義のUIデザイン

 

 

 

さて、『操作性』という観点からUIデザインを捉えてみましたが、さらに、広義の意味合いで言えば、『ユーザーのアクションを起こすためのデザイン』とは、ランディングページのコンテンツ全体のデザインを指すとコンバージョンラボでは考えています。

 

 

 

その意味合いとしては、縦に長い1ページ完結型のランディングページを『スクロールというアクション』をし続けてもらうためのUIデザインということになります。

 

 

 

特にランディングページは1ページに全要素を詰め込み、飽きずに見続けてもらうことが前提になりますから、ランディングページ全体のコンテンツすべてをUIデザインと捉えても差し障りはないと思います。

 

 

 

ですから、大きなポイントとしては、［デザインの緩急を高めること］や［単調なレイアウトをしないこと］や［余白の活用］などといった点がポイントになってきます。

 

 

 

目線を誘導しつつ、下のコンテンツまで見てもらうデザインが必要になります。テキストなどはすべての文量を読んでもらえないという前提で見せたいところを強調するなどしながら、ユーザー視点に立ってデザインしていくことが大切です。

 

 

 

これらの点については、下記の記事で、より詳細な内容を書いていますので、気になる方はご覧ください。
『デザインや動的な表現が立ちすぎているとコンバージョンが出づらい？？』

 

 

 

 

以上、ポイントのみとなりましたが、今回の記事では、このように狭義の意味合いと広義の意味合いでランディングページにおけるUIデザインを考えてみました。

 

 

 

まずは、今回自社で新たに制作するランディングページがどういったターゲットに対して訴求していくものか？そして、出来上がった構成・シナリオに対して実装する機能がどんな役割を果たすものなのか？

 

 

 

その上で、デザイン全体におけるカラー選定や各パーツ・要素の作り込みといった形で、全体視点から細部に至る点まで捉えながら行っていくのが、ランディングページにおいてのUIデザインということになります。

 

 

 

 

>> 前回の記事　ランディングページと検索キーワードの関係