月別アーカイブ: 2015年9月

宣伝効果大!売上UP!ランディングページがすごい
2015年9月28日

宣伝効果大!売上UP!ランディングページとは

始めまして!WEBデザイナーのWATANABEです!


早速ですが、皆さん「ランディングページ」って聞いたことありますか?

今回は、インターネットを使って「商品」や「サービス」を販売・宣伝する上でとても重要な役割を持つ、
「ランディングページ」についてお話しさせていただきます!


ランディングページってどんなもの?


ランディングページあつめました
※参考サイト ランディングページ集めました様




インターネットで、こういったチラシのような縦長の宣伝ページをよく見かけませんか?


一般的に「ランディングページ」とは、このような
商品やサービスを売る為の、一枚の長いWEBページを指します。

楽天市場など通販サイトの商品の紹介や、イベントの告知ページ、
エステや保険といったサービスや契約を促すページでも多く使われていますよね!


では何故、インターネット上で商品やサービスを宣伝する上で、
このランディングページが多く利用されているのでしょうか。



ランディングページがなぜ必要なのか?


ランディングページがなぜ必要なのか?


ランディングページの「ランディング」は、直訳すると「着地」を意味します。


これは、ユーザーが「最初に開く(着地する)ページ」という意味でつけられていて、
googleやyahoo!などの検索結果や、
広告のバナーをクリックした際にリンク先として開かれるページ=ランディングページとなります。



例えば、多くの食料品を取り扱う通販サイトがあるとします。

ダイエットに興味のある女性が「ダイエット ドリンク」というキーワードで検索し、
ヒットした検索結果をクリックした際のリンク先が、その通販サイトのトップページだった場合、
この女性は、そこからまたダイエット関連商品を探さなくてはなりません。
こうした場合、大半の訪問者はそのサイトから離脱してしまいます。



ランディングページの重要性



特に検索エンジンの場合、
半数以上のユーザーが8秒以内に訪問したページから立ち去ってしまうとも言われています。
ある検索結果(または広告)をクリックして表示されたページ(=ランディングページ)で、
一目で自分の目的の商品・情報が見つけられなければ、検索画面に戻って別のサイトに移動する・・・。

皆さんも、欲しい商品や情報を探している時、こういった経験があると思います!

このように、せっかく
費用をかけて広告を出したりSEO対策を行ってサイトに訪問者を誘導しても
一番最初に開いたページで必要な情報が得られなければ、
サイトに留まって、さらにそこから注文や問い合わせをしてくれる訪問者はいなくなってしまいます。


効果的なランディングページで集客・購買率をUP!

ランディングページがなぜ必要なのか?


そこで必要となってくるのが、訪問者を逃さない・効果的なランディングページです。


前述したダイエット商品を探している女性の場合、検索してクリックしたページに

・人気のダイエットドリンクの紹介
・どれだけ売れているか
・ダイエットに効くどんな成分が入っているのか
・実際に使った人の感想


こういった内容が書かれていれば、欲しかった情報がすぐに手に入り
「買ってみようかな!」という気持ちになるユーザーも多くなります。



ランディングページの最大の目的は、
問合せ・資料請求・注文(これらをコンバージョンといいます)を得ることです。



ページからの「離脱」を最小限に抑え、滞在時間を延ばして、
コンバージョンにつながる工夫を行うことを、
「LPO」(Landing Page Optimization=ランディングページ最適化)といい、
特に検索エンジン広告やSEOの分野で注目されています。


せっかくサイトまで来てくれた人が、即時に必要な情報を得て、スムーズに目的を達成できるとしたら
ネットを利用しているユーザーにとっても嬉しいことですよね!


ただやみくもにアクセスを集めるだけではなく、
ユーザーの使いやすさを考え、無駄なくコンバージョンに結びつけるために、
とても重要な役割を持つのがランディングページなのです。


弊社では、これまでに様々な商品・業種のランディングページを手掛けています!
販売する商品やサイトの宣伝・広告に導入をお考えの方は、ぜひ一度お問い合わせ下さい♪


次回は、売り上げに直結する効果的なランディングページの構成や見せ方など、
ランディングページの中身にせまります!(`・ω・´)v

2015年9月15日

素敵!自分のPCに入っているフォントを一覧表示できるWEBサービス

こんにちは、DESIGN OFFICE TIGHTのWEBデザイナーANAです!

今日は、すごく素敵!自分のPCに入っているフォントを一覧表示できるWEBサービスをご紹介します。

WEBデザイナーだけでなく、フォントを使用するお仕事の人はわかっているはずです。
フォントの重要性を・・・

フォントもデザインの一部であり、フォントが変わるだけで、デザインのイメージがガラッと変わってしまったりします。
こだわる方や、ポスターなどを仕事としているかたはご自分で文字を創られることも多いのではないでしょうか?

それでも、もともとPCの中に入っているフォントを使用したい場合、一つ一つを並べてどのフォントが今作成中のデザインに合うのか見極めるのは大変です。

そこでご紹介したいのが、私が一番お世話になっているサイト。
『Wordmark』です。

とにかくシンプルで使いやすい!
さらに表示も綺麗で、もちろん日本語にも対応しています。

知っている人も多いんではないでしょうか?

09151

上の画像の”Wordmark”に表示したいテキストを入力すれば表示されます。

リンクを貼っておくので、ぜひ利用してみてくださいね。
デザインの作業が捗ること間違いなしですよ!

【Wordmarkサイト】http://wordmark.it/

それではまた~。

ANA(*´ω`)




2015年9月4日

【CSS3】素敵な演出!ぼかしを使用したWEBデザイン

こんにちは、ANAIです。

9月に入り、季節も徐々に秋へと色めいてきましたね♪
ANAIは秋物のお洋服が欲しくてたまりません。


今日は、CSS3で簡単にぼかし効果を行う方法を書いていきます。
背景を少しぼかすだけでサイトのイメージが全然違いますよね(*´ω`)


「CSS3って、まだよくわからない!」って方も、filterプロパティを利用すると、
ぼかしの効果を難しい記述をすることなく簡単に実装することができます。

では、実践していきましょう。
WEBデザイナーの卵さんなら、やりながら覚えるのも楽しいですよ!

もし、これからホームページをつくろうと思っている方が見られているならば、
これからつくる理想のサイトに素敵なぼかし効果を使ってみてください♪

●CSS3のfilterでblur効果を実装
filter
filter2

-webkit-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);


はい、これだけです(笑)
これをスタイルシートに記述するだけで簡単に指定した画像や背景がぼけてくれます。

すばらしいですね~( *´`)

問題点はwebkitブラウザしか対応していないことです・・・。
ベンダープレフィックスで-webkit-をつけても動きます。
つけなくても動きますが。

webkitブラウザしか対応していないのは結構致命的・・・。
使うのもすこし注意が必要ですが、簡単にひと手間加えるだけで素敵な演出ができるのはうれしいですよね♪

スマホ向けであれば大丈夫なのでもしスマートフォンサイトをつくろうとお考えの方は試してみてください♪

下にデモページをつくっているので、見てみてくださいね。
ちなみにブラウザがIEの方は、GooglechromeかFIrefoxでご覧ください。

btn



それではANAIでした~(*’▽’)ノ