カテゴリー別アーカイブ: ディレクション

インパクトあるウェブサイトを作るためにタイトが使った3つの手法
2017年3月29日

インパクトあるウェブサイトを作るためにタイトが使った3つの手法

1.アニメーション

最近、当社のデザイナーではやっているのが、ホームページでのちょっとしたアニメーションの作成です。
昨年完成したホームプラス様の時は、TOPページからしっかりアニメーション、初めて来た方へのインパクトを与えることに成功しておりますが、後藤博多人形様のサイトでは、はじめから映像でまずインパクトを。その後、スクロールするたびに表示される画像で、デザインの動きを多用しています。



動くデザインといえば、ひと昔前はフラッシュを多用していました。
見た目はいいのですが、その当時の回線が細く、表示するまでに一苦労。また、セキュリティ的な面から見ても、淘汰されていくという、アニメーションと離れたデザインになっていきました。



1
http://f-homeplus.com/

2
http://www.hakata-doll.co.jp/



今は、別の手法としてJavascript、jQueryを使って、アニメーションを実現しています。
映像も取り入れることが出てきました。
ホームページに入ったらまず映像が流れる、なんてホームページも増えています。



2.映像コンテンツ

当社グループのスマイル検索隊が開始したストリートビューのランディングページでも、大胆な手法をとっています。



3
http://smaken.jp/streetview/

はじめに流れる映像は、当社の”元ミュージシャン”の社員が担当。
「ルールに沿って映像を作るのは初めて。」と言ってましたが、間のとり方はばっちり。
映像を作っていたとは聞いてましたが、いい作品ができたと思ってますよ。



3.Googleストリートビュー

さらにストリートビューを初めてページに埋め込みました。
Googleストリートビュー(屋内版)の登録からホームページへの埋め込みまで、当社で問題なくできるようになりました。
Googleストリートビュー(屋内版)の登録からホームページへの埋め込みまで、当社で問題なくできるようになりました。



大事なことなので2回書きました。



Googleストリートビュー(屋内版)の登録からホームページへの埋め込みまで、当社で問題なくできるようになりました。



これ、とても強烈なことです。



Googleストリートビュー(屋内版)は、おそらくこれからスタンダードになります。
他のお店との差別を図るなら、早めの登録がいいでしょう。



実は、ここには書けない、タイトでは紹介できない実績もあります。
これからくるであろう、動的なコンテンツ作りにもっともっと、対応していかないとですね。



より効果的なランディングページを作ろう!
2015年11月10日

より効果的なランディングページを作ろう!②~

こんにちは! WATANABEです。 今回は、前回の投稿の続きで
「より効果的なランディングページの構成②(後半)」です!

ランディングページの構成
ランディングページ(以下LP)の基本構成
※①~④についての詳細は前回の投稿をご参照下さい。



④実績・お客様の声

事実に基づいたデータで信用を得よう!
③のベネフィットのセクションでお話しさせて頂いたように、 ユーザーが求めている物は、目的である「ベネフィット」です。
(ベネフィット:商品を購入することによって得られる良い状態や体験)

これに対して、
企業が販売するのは、あくまでもその手段である「商品」

実績エリアでは、
売り手と買い手のこの意識の差を埋めるべく、
下記のような事実に基づいたデータを記載し、
信用できる商品・サービスであることをアピールします!

 

メディカルコート株式会社

メディカルコート株式会社様 URL : http://www.fleuri.cc/lp/a02/

[ 実績エリアに記載するデータの一例 ]


・販売本数〇本達成

・通販サイトなどののランキング受賞履歴
・芸能人の愛用情報や、雑誌の掲載情報



実態のある商品であれば、製造工程や原材料をしっかりと明記したり、
その道の権威のお墨付きコメントなどを載せるのもいいですね!

また、こういった数字などのデータ以上に、
近年ユーザーが重要視しているのが、お客様のレビューや口コミです。 自分と同じ悩みを抱えていた人が、
この商品を買って解決したのであれば試してみたいと思いますし、
買おうか迷っている、まさに今の自分と同じ境遇である人の「買ってよかった!」という感想ほど、
購入を後押しするものはありません。

楽天のお客様レビューなどはこまめにチェックを行い、
とても良い実体験による喜びの声を頂いた場合は、ぜひ積極的に使わせて頂きましょう!



⑤アクションボタン

思わず押してしまうボタンで購買率を上げよう!


これまでのエリアをまとめ、
実際に、購入やお申し込みなどのアクションをユーザーに求めるエリアです。
これまでの長い文章や写真でいくらアピールしても、
最後にこのエリアでコンバージョンに結びつかなくては意味がありません!
このアクションボタンもとても重要役割をもっています。


ボタン①
ボタン②






上のボタンを例にとってみてみると、どちらがクリックしやすいでしょうか?

ネットで買い物をすることを「ポチる」と言ったりしますが、
多くの方が、右の方が「ポチっと」押してしまうような印象を受けると思います。

大手ECサイトでは購入の前に「買い物カゴに入れる」というボタンが存在しますが、
「購入する」よりも「カゴに入れる」の方が、気軽にクリックできますよね! こういった文章や、
ボタン画像の質感の1つをとってもユーザーへの印象がずいぶん違います。

ボタンの色は、一般的にはグリーンやオレンジがクリック率が高いと言われていますが、
しかし、ページ全体の色と比べた場合、ボタンの色が埋もれてしまう場合もあるので

サイトの中で目立つような配色や、
若い女性向けの通販サイトであればピンク、
限定セールで緊急性を求めるものであれば赤・・・など
販売する商品によって適したボタンを配置するのがベストです!

LPというと縦長でスクロールして読む場合がほとんどですので、
ページを回覧している中で、
ユーザーの購買意思が決定してすぐ購入ページへ誘導できる様、
LP内の最初や、途中途中にこの購入ボタンを配置することもあります。


このように、LPの各セクションはそれぞれに大事な役割を持っています。

やたら長くて読むのが大変だったり、
強引に購入を促してくるページも多くありますが、

ユーザーの知りたい情報を解り易く伝え、
また、商品に対して興味のなかった人にも、
「こんなのあったんだ!欲しい!」「申込みしたい!」という気持ちに自然に誘導できれば
それが一番、買う側にとっても嬉しいLPであると考えます! デザインオフィスTIGHTは、
企業様にもユーザーにも嬉しいランディングページを考え、制作を手掛けています。

どのような情報を載せたらいいか解らない、自分たちだけで文章を考えるのは難しい・・・ という場合もお任せ下さい!

購入や成約といった目的地へ導くためのストーリー作りも、スタッフがお手伝い致します!
企業様、店舗様の広告に効果的な良いページを一緒に作りましょう! 詳しくはぜひ一度お問い合せ下さい♪

ランディングページ 料金プランページはこちら

より効果的なランディングページを作ろう
2015年11月6日

より効果的なランディングページを作ろう!①~

皆さんこんにちは!
WEBデザイナーのWATANABEです。

ネット広告や通販、SEO対策に効果的なランディングページ。
今回のテーマは「より成果をあげるランディングページの作り方」!

効果的な構成や演出方法など、ランディングページの詳細に迫っていきます!


※ランディングページって何?という方は、
前回の投稿「宣伝効果大!売上UP!ランディングページとは」をぜひご参照ください。

名称未設定-1

上図がランディングページ(以下LP)の基本構成です。


販売する商品やサービスによって細かい部分は異なりますが、
この基本構成に、商品毎のプラスアルファを付け加えていく形になります。

この基本構成をマネして作っていけば、 とりあえずそれらしいLPが完成します!

しかし、LPの最終的な目的は、「ランディングページとは」でもお話しした通り 、
コンバージョン(問合せ・資料請求・注文などのこと)を得ること!


短時間で訪問者の心をつかみ、コンバージョンを得る為には 上図のセクションそれぞれが、
とても重要な役割をもっています。 効果的な演出はもちろん、説明の流れなどももちろん超重要です!

それでは、1つ1つのセクションを見ていきましょう!


①キャッチコピー

印象的なファーストビューで興味をひこう!


(右)オーガニックサイバーストア URL : http://www.rakuten.ne.jp/gold/ocs/
(左)メディカルコート株式会社 URL : http://www.fleuri.cc/lp/a02/


画像のサンプルサイトのように、提案する商品を、解り易く簡潔に伝えるエリアです。
特別キャンペーンや激安セールなど、 訪問者が一目見て何のページが解るように、
文章は極力少なく簡潔・明快であることが望ましく、
印象的で「なんだろう?」と気を引くキャッチコピーが多く用いられます。

食品であれば、美味しそうな良い感じの写真をメインにドーンと載せるのもいいですね!

サイトを訪れるユーザーは、 自分の求めている情報がそのサイトに掲載されているかどうかを
7秒以内に判断すると言われています。

ページ開いた際に、 スクロールせずに表示される画面(ファーストビュー)が購入率アップのカギとなる為、
このセクションは、文章の演出やデザイン面においても LPの中で最も重要な部分であると考えます!

②気づき・共感

ユーザーの不安や要望に気づかせよう!

名定-2
ケヤキインターナショナル様 URL : http://www.store-mix.com/ko-bai/product.php?pid=1508921

まずお伝えしたいのは、
「ページを訪れる訪問者のほとんどが、最初は商品を買う気はない」ということです。


痩せている女性に、いくら「ダイエットに効くよ!」と説明しても、買わないですよね!?
どんなにいいものを薦めても、困っていない、必要としていない人には価値はありません。

}このように購入などのアクションに至らない最大の理由は
「困っていない」「必要としていない」ということです。

逆に言うと、人が「困っている」「不満がある」所には大きな市場があるといえます!

上記の女性の例でいえば、
「便秘で困ってませんか?」「肌のトラブルで悩んでませんか?」と言われると、
あてはまる(=困っている)人がかなり多くなるはずです。

他にも、 「最近疲れていませんか?」「こうなったらいいと思いませんか?」といった具合に
ユーザー自身も把握していなかった要望や不安に「気づかせ」
「必要かも」「あったらいいも・・」と、まずユーザーに気づかせ、思わせることが重要になります。

訪問者の中には、自分の欲しいものを検索ページに行きついた方もいますので、
そういうもともと興味のある方に対しては、
「こういう事で困っていませんか?」という投げかけをして、
「そうそう!そうなの!」とガッツリ共感を得ましょう!

③ベネフィット

買うのは商品ではなく、ベネフィット!


商品を購入した後、お客さんにどんな良いことがあるのかを分かりやすく説明するエリアです。

ユーザーは商品事態を求めているのではなく、
商品を購入することによって得られる良い状態や体験を求めています。
(この良い状態のことを、ベネフィットと言います)

例えば、健康器具を購入する人は、器具を「使うこと」が目的ではなく 、
それを使った結果の「健康になること」が最終目的です。

ユーザーはベネフィットを求めていますが、売り手が販売しているのはあくまでも商品。
健康は売る事はできません。
絶対健康になります!と謳うことはできず、保証もできませんよね。

ユーザーはベネフィットを購入する気でいるのに対し、 売り手は賞品を販売している・・・。

別のものを売り買いしようとしているから、
購入するときに不安を感じるし、 期待と違うと不満を感じたりします。

だからこそ、信用のおける会社から買いたくなるわけです。 この売り手と買い手の意識のズレを埋める「信用」。


この信用を得る為に、
ネット広告や通販の世界では、
商品の品質ですとか原材料の説明、購入者のレビューや口コミを用います。

この信用にかかわってくるのが、④番目のセクション「実績」です!

長くなってきたので、今回はここまで!
次回は④番目のセクションから詳しく解説いたします!( `・ω・´)/



デザインオフィスTIGHTは、
ランディングページの制作も数多く手掛けています。
どういった内容を載せたらいいか解らない・・という場合もお任せ下さい!

購入や成約といった目的地へ導くためのストーリー作りも、
スタッフがお客様と一緒に考えます!
詳しくはぜひ一度お問い合せ下さい♪ ランディングページ 料金プランページはこちら