【LP制作サンプル】新製品紹介・販促用ランディングページ【Web制作の解説】

デザインのポイント

ホームセキュリティ用の監視カメラを紹介する特設サイトのサンプルです。
ホームセキュリティについて大げさなものではなく、もっと身近で手軽に、20代の若い方にも導入してほしいというコンセプトで堅くなりすぎず、やわらかい・ポップな雰囲気でデザインをしました。

サンプルを見る

アニメーション表現のポイント

フェードアニメーション(各要素を際立たせる)

要素を流し読みすることをできるだけ防ぐため、スクロールをすると各要素がフェードインして表示されるようにしています。スクロールアニメーションを入れることで、各要素を注目させる効果があります。

マウスホバーアクション(フォームへの導線)

申し込み・お問い合わせなどのフォームのリンクには、マウスホバーのアニメーションを取り入れました。
マウスホバーアニメーションを取り入れることで、クリックできると認識させ、コンバージョンとなるフォームへのアクセスを促します。今回はホバーするとグラデーションが流れ、ボタンも「押している」という感覚を持ってもらえるようにcssで設定をしています。

アコーディオン(Q&Aをコンパクトに表示)

class= Q&Aはサイトによってはたくさんあるため、アコーディオンにして最初はコンパクトに表示させておき、クリックをするとアンサーが表示されるようになっています。情報をまとめるだけでなく、ユーザーが自分の見たい製品についての詳細を探しやすくする効果もあります。

サンプルを見る

【LP制作サンプル】コスメ商品販促ランディングページ【Web制作の解説】

デザインのポイント

美容・化粧品市場において重視される「透明感」を強く感じられるようなデザインで作成しました。

化粧品は、薬機法により効能効果の過剰表現が禁止されているため、注釈表記を行う必要があったりと、繊細な作りが求められます。文章での表記に制限があるぶん、うるおいや、柔らかさを感じられるようなテクスチャやイメージ画像を多く配置し、視覚的に化粧品の良さを訴求します。

また、単純に商品の良さをうたうだけでなく、画面全体を通してストーリー性のある構成となっています。化粧品に関する悩みを挙げ閲覧者の共感性を高め、ポイントで商品の良さ・安全性を記述し、購入意欲を高めます。

サンプルを見る

アニメーション表現のポイント

メインビジュアル

この特設サイトに使用されているアニメーションはこちらのブラーインのパターンのみです。ブラーインとは、ぼかし効果のことを言います。このサイトでは、この効果をゆったりとした速さで使用し、ラグジュアリーなイメージを演出します。

また、美容用品や化粧品を扱うWEBサイトは、商品のイメージを訴求しなければならないため、画像が大きく使用される傾向にあります。スライドのような移動を伴うアニメーションを広い面積で使用すると、過剰に感じる場合があるため、ブラーインがより効果的な演出と言えます。

商品コンセプト

コンセプトを掲載しているこちらのセクションは、人物などのイメージ画像を大きく使用し個性を強調します。例えば、商品の特長に関連したしずくの形状や、クリームの切り抜き画像は、世界観の演出に役立ちます。

箇条書きの内容を時間差で表示

こちらのセクションでは、各文章を1文ずつ時間差で表示します。並列の情報をリズミカルに表示することにより、複数の文章が存在することを無意識のうちに認識することが可能です。また、悩みとはいっても、暗い表情の写真を使用してしまうと過剰な印象になってしまうため、通常の写真のトーンを落とす程度にとどめています。過剰に煽るとネガティブに作用してしまう場合があるため、注意が必要です。

サンプルを見る

ポイント

今回は、成分と安全性をうたう、2つのポイントを掲載しました。アニメーション表現では、お悩みのセクションと同様に並列の情報は時間差で表示し、単調にならないように情報の流れを作ります。各成分のイメージ写真を挿入し丁寧に説明することにより、品質が高いように感じるようになります。

東証一部部品製造メーカー様のコーポレートサイトレスポンシブ対応

東証一部部品製造メーカー様のコーポレートサイトのレスポンシブ対応をご依頼いただきました。
PCサイトはそのままデザインを崩さずに、スマートフォン、タブレット端末で閲覧した場合のみ、各端末に最適化表示されることが作業のオーダーでした。

NORENというCMSで管理されており、NORENに反映することも考慮しての作業となりました。

大手製品メーカー様会員向け自社製品紹介サイトリニューアル

大手メーカー様の会員向け自社製品紹介サイトのリニューアルをご依頼いただきました。
3,000ページ以上の大規模なサイトで、CMSの入れ替えと共にデザインも一新するという制作となりました。

すでにデザインテンプレートは完成している状態で、3,000ページ以上のページへのデザイン反映および、新しく導入するCMSへの反映方法の検討から携わらせていただきました。

CMSについては「Salesforce」というCRM(顧客管理システム)をカスタマイズして導入しております。
カスタマイズについてはSIer会社様が担当されており、HTMLの反映などについて、相談をしながら進めさせていただきました。

大手製品メーカー様動画オウンドメディア新規構築

大手製品メーカー様の動画オウンドメディア(ムービーチャンネル)の新規構築をご依頼いただきました。
「Brightcove(ブライトコーブ)」という動画配信サービスで管理していた動画を、ムービーチャンネルとして活用したいとのご要望で、UI設計からデザイン、HTMLコーディングまで、すべて弊社で制作をおこないました。

Brightcove(ブライトコーブ)のAPIを経由し、ムービーチャンネルへソート表示させるという機能の実装もおこないました。
サイト構築後は、メーカーのご担当者様がBrightcoveへ動画をアップするだけで、サイトに反映されるようタグ付け等の運用仕様についても検討を行いました。

動画を使ったオウンドメディアやムービーチャンネルのご依頼は増えております。
YouTubeチャンネルの開設なども行っておりますので、是非弊社へご相談ください。