デザイン参考にしたい!サインアップに導く見事なランディングページデザイン20選ランディングページとはコンバージョン、つまり何かの目的を達成するために存在します。Webサイト訪問者を購入ページへ移動させたい、問い合わせをしてもらいたい等ですね。目的は単純ですが、実際に動いてもらうためにはWebサイト訪問者の心理に合わせた導線をデザインする必要があり、これがなかなかに難しいものです。皆さんのランディングページがどのようなものであれ、他のランディングページを見てインスピレーションを得ることは無駄にはなりません。Ledgerで素敵なランディングページを紹介していたのでご紹介します。WistiaWistiaの無料アカウント用ページには、アカウントを作成するためのワンフォームフィールドが印象的です。簡単なパターンを持つ薄い青色背景は、明るい白いフォームのフィールドとうまく対比され、無料のアカウントにサインアップすると、リンク先ページの目標がはっきりと示されます。中央配置で入力欄の少ないフォームは、目的がはっきりしていてサインアップに導きやすくなっています。下の記事部分は、フォーム部分とハッキリとした色のコントラストによって分離されているので、意識の切り替えがしやすく設計されています。Basecampプロジェクト管理ツールBasecampのページです。このページはフォーム以降もとてもたくさんの情報がある、長く深いランディングページという構成になっているのですが、「このツールを使うと何が得られるか」ということをトップの面白い漫画イラストが端的に表現しています。Zendeskデザインとコピーの両方でシンプルさとミニマリズムなスタイルが素敵なランディングページです。ここで重要なのは、2つのCTAボタンだけです。上に描かれているよ卵の絵がぷるぷるします。フォーム自体はシンプルで簡単です。アカウント作成用のメールアドレスとパスワードを入力するか、GoogleアカウントorMicrosoftアカウントでログインするだけのシンプル構造であるため、コンバージョンまでの経路が非常に短くてすみますね。DesignインパクトのWebページはインスピレーションの大きな源になる可能性があります。大きくて大胆なコピーや詳細な機能イメージから、フォームを囲む輪郭や、ユーザーの目に気に入っている対照的な色やフォントなど、レイアウトのシンプルさが気に入っています。原文ではブログを購読するためのチェックボックスがありますがチェックを外してオプトインすることをお勧めしています。WebDAMWebDAMのランディングページには多くの機能はありませんが、青緑色の土台によって大きな写真からフォーム部分をハッキリ区分けし、ダウンロードボタンは明るい青緑色の補色である暗いピンク色の背景色にすることで目立たせているのが特徴です。Unbounce高コンバージョンのランディングページを作成するための書籍も書いているUnbounceのランディングページです。このランディングページデザインにはすばらしいことがたくさんあります。Courseというサポート画像からCTAボタンまでの自然な方向性、2)フォームの下にある詳細な、しかしうまくグループ分けされた情報です。Squarespace他のランディングページとは異なり、Squarespaceは1つの大きな背景イメージを使用し、実際の製品を大きく表示しています。フォームを記入する必要がないぐらいデザインをシンプルにしたランディングページは上手く使えばとても効果的に働き、Squarespaceは美しくシンプルで使いやすいものになっています。H.Bloom高解像度の美しい写真や空白を上手く利用したページデザインです。このページは美しさだけでなく大きなコンバージョン要素がいくつかあります。ファーストビューにあるフォームや明確かつ簡潔な説明、さらには明るい赤色の「送信」ボタンです。Ledgerでは更に多くのページデザインを紹介しています。デザインは課題を解決するための設計で、レイアウトというのはデザイン作業の中の一部です。装飾やレイアウトだけでなく視線誘導やインパクトの与え方など表現方法は様々ですので、自分の殻に閉じこもらずに色々なサイトの表現方法を見ることでインスピレーションを働かせ、自分なりの表現に昇華させていきたいですね。全て(64)Web制作(7)よらのつながり(3)よらの価値観(10)よらの生き様(22)イベント(5)デザイン(3)水野会議室(2)素材(3)絵本構想(1)黒門カルチャーファクトリー(8)新着記事2020.2.13暇人感謝祭2020の会場までの道案内と出展者配置案内2020.2.4【#佐賀ハレノヒ応援】あれから2年。はれのひ騒動を今振り返る2020.2.3里親制度の基礎研修初日を受けて思ったこととやりたいこと2020.1.26初脚本に挑戦して感じた共3つのこと2020.1.22020年の水野嘉彦の目標を宣言します一覧を見る筆者プロフィールアニメの制作進行、リクルート代理店の営業を経てWeb・DTPの業界に入門。