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. 競合サイトの調査に活用できるGoogleの3つの機能

    大手調査会社ニールセンが2015年12月に発表したリサーチ結果によれば、日本におけるインターネット利…

  2. ツールを使って効率的に配色。カラーパレットのWebサービス4選

    ベテランのWebデザイナーでも頭を悩ますことの多いWebサイトの配色。256種類のカラーコードによる…

  3. オウンドメディアを成功させるために、Webディレクターがやってお…

    ブログなどの情報発信を続けることによって見込客を獲得し、ブランディングに成果をもたらすオウンドメディ…

  4. Web運用を委託した方がいい企業5つの特徴!!と、1つの注意点

    Webサイト運用って何かと手間がかかるので、出来れば制作会社に委託したいと考えている企画担当の方が多…

  5. プレゼンや打ち合わせに活用したい、無料モックアップ作成ツール3選…

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

  6. Webコンテンツの印象を大きく変えるタイポグラフィの4原則

    フォントを効果的に使うにはタイポグラフィ(書体の配置や構成といった表現)も大切です。デザインやレイア…

  7. ジャンル・目的に合わせて幅広く利用可能。高品質なWebフォントサ…

    OSやデバイスを問わず制作サイドの意図通りのフォントを表示することができ、レスポンシブ対応にも相性の…

  8. 縦長レイアウトはもう古い?スクロールエフェクトを活用したWebサ…

    CSS3やHTML5によってWebサイトには以前にも増して多くの情報量を盛り込めるようになってきてい…

PICKUP

PAGE TOP