アミアンインターナショナル

貴社の売り上げアップをとことん支援します。オンラインショップ専門コンサルタント

CMS コンテンツ ネットショップ 新着情報

ランディングページを作り込むテクニック ⇒ カスタマイズの手順と方法を順番に解説

投稿日:2019年5月23日 更新日:

ランディングページとは

ランディングページは、ネットショップの生命線とも言えるものだ。

【ランディングページとは│10分で理解できるLPの基本】ランディングページとは、「様々なネット広告やリンクをクリックした際に表示されるする、サイトを含むWEBページ全般」を指す言葉で、LP、ランペ、などとも呼ばれています。

しかし、一般的に「ランディングページ」や「LP」が指すものは、一つの商品やサービスを売るための、一枚の長いWEBページです。

ランディングページはズバリ「ネットで売り上げを上げるための最重要要素」であり、ランディングページを改善しただけで、ネット上での顧客獲得数が6倍になったという事例もあります。

【ランディングページとは│10分で理解できるLPの基本】から引用

大切な物だけに、通常は業者に頼んで制作してもらうべきだろう。

しかし、それなりの費用は覚悟する必要がある。

【ランディングページとは│10分で理解できるLPの基本】ランディングページ制作の費用は依頼する制作会社や制作会社によって10万円~60万円とピンキリです。この費用感の違いは、分析サービス有無やデザインの品質から生まれます。

もちろん自分で作成してしまえば無料なのですが、成果の出るランディングページを制作するためには、特定のユーザに対して最適化する必要があるため、個人的にはプロにおまかせする事をお勧めいたします。

【ランディングページとは│10分で理解できるLPの基本】から引用

そこで、このランディングページを自分で作成できるよう、ステップバイステップで解説する。

ランディングページ制作も業務として請け負っている身としては、禁断の企画だ。

だから、よい子はマネしないように(笑)

制作にあたっての制限事項

今回、このブログのトップページをランディングページにするにあたって、自らに3つの制限を課した。

  1. 動画を使わない
  2. 画像を撮影しない
  3. 画像を加工しない

ランディングページはネットショップにとって一番大切なものなので本来ならこの3つを使うことは必須ともいえるのだが、お手軽に、誰でも、すぐに、できるということを証明するために、敢えてこの制限を課してみた。

もっとも1つだけgif動画を作ったのだが、これは作り方のサンプルと言うことでご容赦頂きたい。

使った写真は撮影したものではなく、全て無料素材サイトから拝借した。

photoshopでの加工などは一切していない。

できあがったページを見て、どう思うだろうか。

昨今は動画を使うホームページがほとんどなのだが、使わなくてもこの程度にはなることが分かっていただけただろう。

動画を使えば、さらに本格的なページになる。

今回、3つの制限を課した。

仕事で請け負っているクライアントのランディングページは、動画を使ったり適切な写真撮影をしてもっと作り込みますよ、という宣言でもある。

連載一覧

  1. cssのanimationで文字に変化を付ける ⇒ トップページの作り込み1 – アミアンインターナショナル
  2. パララックス効果で画像を動かす ⇒ トップページの作り込み2 – アミアンインターナショナル
  3. ピクトグラムでアイキャッチfontawsomeで簡単設定 ⇒ トップページの作り込み3 – アミアンインターナショナル
  4. 問い合わせボタンの設置 ⇒ トップページの作り込み4 – アミアンインターナショナル
  5. 燃えるgifアニメーション文字の作成 ⇒ トップページの作り込み5 – アミアンインターナショナル
  6. 説明文の加筆 ⇒ トップページの作り込み6 – アミアンインターナショナル
  7. cssで2段組にする方法 ⇒ トップページの作り込み7 – アミアンインターナショナル
  8. marqueeで電光掲示板風に文字を流す ⇒ トップページの作り込み8 – アミアンインターナショナル
  9. アイコンを大量に並べる ⇒ トップページの作り込み9 – アミアンインターナショナル
  10. バッジの表示 ⇒ トップページの作り込み10 – アミアンインターナショナル

-CMS, コンテンツ, ネットショップ, 新着情報
-

執筆者:

関連記事

code-prettify

google code-prettifyでコード表示をハイライト(動作しないので焦るが解決済み) ⇒ STINGER8設定その2

google code-prettifyを導入 設定その1の記事内で、コードを記載した。 wordpessテーマのSTINGER8にしてみた ⇒ 設定その1 これを見てみると、preタグで囲んだだけだ …

HDMIケーブル

HDMIケーブルにて価格破壊を考える

11月の話で恐縮だが、テレビを買った。 ご多分に漏れず、エコポイントを意識して駆け込みで購入したのだ。 ところが、その時点でテレビの納期が1ヶ月先とのこと。 そりゃあないでしょ! という気持ちになった …

Format Link

引用を効率化するため拡張機能Format Linkをgoogle Chromeに入れる ⇒ STINGER8設定その7

他のサイトからの引用の仕方 ブログを書く時に、他のサイトから引用することは多い。 この時に気をつけるべきなのは、SEO的な視点だ。 引用する時にblockquoteタグを使わないと、googleからマ …

二科展

弊社専属デザイナーが第98回二科展で特選を受賞しました

弊社専属デザイナーが第98回二科展で特選を受賞しました。 弊社のデザインにおけるレベルの高さを証明する受賞であると、謹んでご報告申し上げます。

H2タグ

H2タグを修飾 ⇒ STINGER8設定その9

H2タグの設定 サイドバーのデザイン設定はひとまず終えたので、コンテンツエリアの設定を始める。 まず気になっていたのが、H2のバランスが悪いことだ。 STINGER8のデフォルトでは、上下にsolid …