menu

ランディングページの成功事例その1「DHC 公式オンラインショップ」

ディレクター心得

効果的なランディングページを制作するためには、ファーストビューに加えて、Webページ全体のレイアウトに気を配るのも大切です。ただ、ランディングページとひと口にいっても、用途や目的はさまざま。ランディングページに求められる役割も、クライアントの商況やトレンドなど外部要因によって左右されるため、その都度最適にプランニング・制作するのは簡単ではありません。

そうした場合、すでにリリースされているWebサイトを1つのモデルとし、必要なレイアウトやコンテンツを考えるのが有効です。実際、多くのWebディレクターやWebデザイナーが参考にしている、ランディングページの成功事例をご紹介します。

DHC 公式オンラインショップ
化粧品販売大手のDHCの公式オンラインショップのランディングページです。いわゆる自社ECサイトですが、企業のランディングページの成功事例としてさまざまなメディアで取り上げられるので、目にしたことがある方も多いかもしれません。

このページの特徴は、ユーザーのアクションを導くうえで欠かせない「ストーリー」の要素がバランスよく配置されていること。ECサイトによく見られるようなスタンダードな縦長のレイアウトに「メインコピー」、「キービジュアル」、「サブ要素」などが順番に配置され、ターゲットに合わせたピンクと白を基調としたデザインで的確に情報がまとめられています。

また1ページのなかで複数の商品が紹介されており、ページ全体の情報量は多いものの、画像の容量が抑えられスムーズに表示されるのもポイントです。レスポンシブ対応もしており、スマートフォンでもストレスを感じることなく閲覧できます。

縦長ページの弱点とも言える、アクションまで時間がかかる点に対しては、コンテンツの各所にリンクボタンを設けることで、よりスムーズに購入できるよう工夫されています。

またECサイトにおける工夫として見逃せないのが、ページ下部の約1/4がレコメンド商品の掲載スペースに充てられていること。目的別に常時約40種類ほどの商品が掲載され、そのほとんどがワンクリックでショッピングカートに追加できるので、非常に高いクロスセル効果を生んでいます。

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

Webサイトをより洗練された印象に。海外のWebサイトで人気の合字フォント5選

バリアフリー社会にBeaconを活用する。ルーマニア「Smart Public Transport」

関連記事

  1. アイコンもセットで、レスポンシブデザインにも対応。CSSフレーム…

    WordPressと同じくWebサイト制作の生産性アップに役立てたいのが、CSSフレームワークです。…

  2. サブ要素&導線に盛り込むべき情報は?ファーストビューの効果的な改…

    Webサイトの「顔」ともいえるファーストビュー。「メインコピー」と「キービジュアル」に加えて、「サブ…

  3. WordPressのメリットを活かす、アクセス解析プラグイン5選…

    Webサイトの運営に必須となるアクセス解析。ページ作成やコンテンツ更新が手軽にできるWordPres…

  4. Webサイトの配色に取り入れたい「70・25・5の法則」

    Webサイトの配色を決めるためには、それぞれの色の特徴・効果とあわせて効果的な配色パターンを知ってお…

  5. Webサイトの制作スケジュールを見える化&一元管理。無料ガントチ…

    Webディレクターのメイン業務の1つであるスケジュール管理。クライアントに加えてプロデューサーや外部…

  6. WordPressの効果を最大化する、レンタルサーバー選びのポイ…

    WordPressを利用するうえで最低限必要となるのが、「Apache」と「MYSQL」の両方に対応…

  7. 食品、文具、レンタルスペース‥幅広い業界で活用されるオウンドメデ…

    コンテンツマーケティングの重要性が指摘されるなか、規模・業種を問わずさまざまな企業がオウンドメディア…

  8. マイクロコンバージョンによってWebサイトを評価する際の2つのポ…

    Webサイトや広告のランディングページを改善する手法として最近注目を集めているマイクロコンバージョン…

PICKUP

PAGE TOP