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. プレゼンや打ち合わせに活用したい、無料モックアップ作成ツール3選…

    ワイヤーフレームと同様に情報共有やプレゼンテーションの精度を高めてくれるのがモックアップです。クライ…

  2. 手軽に作ってWebサイトにアクセントを。無料のGif画像作成サー…

    複数の静止画を組み合わせてコマ送りで表示することによって、画像に動きをつけることができるGif。We…

  3. 即戦力のコーディングチェックツール3選

    デザイナーへの発注やクライアントとの連絡・調整に加えて、Webページのコーディングをチェックするのも…

  4. Webページの統一感がUP。クリック率改善も期待できるグリッドデ…

    既存のWebサイトの一部をリニューアルしたり、コンテンツを追加したりする場合、課題になってくるのがそ…

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

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

  6. 無料&レスポンシブ対応済みのWordPressテンプレート3選

    Webディレクターの業務のなかでも意外と頭を悩ませることが多いのがレスポンシブ対応ではないでしょうか…

  7. コンテンツ制作に集中できる、SEO対策済みWordPressテン…

    ユーザーの役に立つ情報を発信することによって検索上位獲得を狙うコンテンツSEO対策が主力となった今で…

  8. Webディレクターなら知っておきたいWordPressのデメリッ…

    ソフトウェア使用料が0円で、デザインのテンプレートやプラグインも豊富に提供されているWordPres…

PICKUP

PAGE TOP