Web制作会社のマーズデザイン  »  Web制作会社のブログ  

 

Web制作会社のブログ

お客様に最適なWEB戦略で、 ブランド価値の向上、お問い合わせの増加、迅速な情報の配信、 営業・広告費用の削減、顧客満足の向上、リピート率の増加 の成功事例を実現しております。

2012年3月31日

2900はてブを当社のブログで達成!

2900はてブを当社のブログで達成!

はてなブックマークでデイリー1位を達成!
Twitter、Facebook、Google+でも拡散・共有が発生。


3月26日の夜、当社で1つのブログ記事をアップしました。

超簡単! 髪の毛の画像を1分で切り抜く方法まとめ

翌日の27日には、はてなブックマークにてデイリー1位を獲得し、
3月30日までの5日間で、ソーシャルメディア内で拡散が起こり、

 2,914ユーザーから「はてなブックマーク」を獲得し、
 Twitterで1,365ツイート、Facebookで1,930シェアという

ユーザー間での共有が行われ、結果的に多くのPVに繋がり、
今なお、その数字は伸びています。

これを機に当社は、新たなブログメディアを構築し、
来週より、新ブログにて、社会にとって有益な情報を
配信していく予定です。

詳しい情報は、来週お知らせいたします。



2012年3月29日

30秒でカッコ良くできる文字エフェクトの小技

30秒でカッコ良くできる文字エフェクトの小技

時間が無い! でも、もう少しカッコ良くしたい!
レイヤースタイルとフィルタの合わせ小技で実現。


WEBサイトや印刷物のタイトルを作っていると、
作り込んでいる時間も無いけど、このデザインだと
ちょっとインパクトが無く、間抜けだということがある。

「タイトル文字をもう少し何とかしないと・・・」

そんな時は、すぐにできる小技が便利。
そういう小技をまとめた本もたくさん出ているが
「内容」と「本の金額」と「効果」が釣り合わず
購入を断念して、立ち読みしたりする。

今日は、以前何かのタイトルで使った
文字に対するエフェクトを紹介したい。

空いた時間にPhotoshopで遊んでいて出来たものなので
本当に小技だが、機会があれば活用いただきたい。

というわけで今日は、
Photoshopのレイヤースタイルとフィルタを活用した
「30秒でカッコ良くできる文字エフェクトの小技」をご紹介。
(加えて、小技の整理・保管術も最後に少しご紹介。)


今回のお題


グラデーションの背景に白い文字がのった状態。
このままでは間抜け過ぎる。

30秒でカッコ良くできる文字エフェクトの小技「お題画像」

この状態をレイヤースタイルとフィルタで何とかしたい。


30秒でタイトル文字をカッコ良くする方法


1)文字に「レイヤースタイル」を適用

レイヤーパネルを開き、文字レイヤーを選択してから、
「レイヤースタイル」をクリック。

30秒でカッコ良くできる文字エフェクトの小技「レイヤースタイル」

一覧が表示されるので、「光彩(外側)」を選択する。

30秒でカッコ良くできる文字エフェクトの小技「レイヤースタイル光彩外側」

「レイヤースタイル」が表示されるので、
光彩の色(今回は白)と
エレメント(今回はスプレッド:0%・サイズ:5px)を
設定して「OK」をクリックする。

30秒でカッコ良くできる文字エフェクトの小技「レイヤースタイル光彩外側設定」

そうすると、文字レイヤーに「効果」が追加される。

30秒でカッコ良くできる文字エフェクトの小技「レイヤースタイル適応」

ちなみに、これを適応したイメージは、こんな感じ。

30秒でカッコ良くできる文字エフェクトの小技「レイヤースタイル適応画像」

では、次のステップに移ろう。


2)文字レイヤーのコピーにフィルタを適用

レイヤーパネルで、文字レイヤーを複製する。

30秒でカッコ良くできる文字エフェクトの小技「レイヤー複製」

複製した文字レイヤーを選択してから、
「フィルタ」>>「スマートフィルタ用に変換」を選択。
※このステップは、省略可能

30秒でカッコ良くできる文字エフェクトの小技「スマートフィルタ用に変換」

そうすると、文字レーヤーが少し変化する。

30秒でカッコ良くできる文字エフェクトの小技「スマートフィルタ用に変換したレイヤー」

Tips:この状態にしておくと、適応したフィルタの数値を
    後から修正できるので、非常に効率的。
    後から「失敗した。戻らないと。」と思わなくて良い。

複製した文字レイヤーを選択したまま、
「フィルタ」>>「ぼかし」>>「ぼかし(移動)」を選択。

30秒でカッコ良くできる文字エフェクトの小技「ぼかし移動フィルタ」

「ぼかし(移動)」が表示されるので、
角度(今回は0°)と距離(今回は15px)を
設定して「OK」をクリックする。


30秒でカッコ良くできる文字エフェクトの小技「ぼかし移動フィルタ設定」

これで作業は完了。簡単! 完成イメージはこんな感じ。
(お好みに合わせて、数値は要調整。)

30秒でカッコ良くできる文字エフェクトの小技「完成画像」

この作業にかかる時間は、たったの30秒!
時間が無い時に、もし使えそうなら、
思い出して、活用していただきたい。


まとめ


このような小技は、たくさん知っておくと
時間の節約もできて、非常に効率的です。

私は時間がある時に、「アクション」を使って
自分の作業を記録しながら遊んで、
うまくいったらアクションを整理してから、
保存しておくようにしています。

また、もし汎用的にアクションを作れそうなら、
整理してストックしたり、ドロップレットを作成して、
いつか使えるように保管しています。

更に、過去の小技を何個か組み合わせることで、
更に良い仕上がりになることもあるので、
このアクションによる整理・保管術はおすすめです。

このように、「ノウハウの蓄積」と「作業の効率化」によって
より効果的なデザイン制作に集中できます。

この方法が、多くのデザイナーさんの
素晴らしいWEBサイト・LP・印刷物の制作に役立てば幸いです。




2012年3月28日

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法+アクションDL配布

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法

いきなりグレースケールに変換? それは勿体無い!
RGBを活かしたままで、カラー写真を変換する方法。


印刷物ではちょくちょくあるが、WEBサイトでも
イメージとして、モノトーンやダブルトーンの写真を
使用することが時々ある。

「いきなり、グレースケールに変換してませんか?」

RGBとグレースケールを比べた時、
それぞれが持つことのできる画像としての情報には
大きな差がある。

グレースケールに変換した段階で、多くの情報が失われてしまう。
これは、非常に勿体無いし、実は後からの補正も大変だ。

しかし、今ならRBGのままモノトーン画像を作ることができる。

今日は、Photoshopの調整レイヤーと白黒機能を活用した
「RGBのままモノトーン・ダブルトーンにする方法」を紹介したい。


お題の写真

前回の「髪の毛の画像を1分で切り抜き」同様、
こちらが今回のお題の写真。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「お題画像」

先ほども書いたように、勿体無いので
いきなりグレースケールには変換しない。

また、後から再度補正できるように
「イメージメニュー」の「色調補正」も使わない。

ここでは、Photoshopの「調整レイヤー」を使う。


RGBのままモノトーン・ダブルトーン画像を作る方法


1)レイヤーパネルで「調整レイヤー」を作成

レイヤーパネルを開き、「調整レーヤー作成」をクリック。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「調整パネル」


2)調整レイヤーの「白黒」で補正

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「白黒調整レイヤー」

「白黒」の補正ウインドウが表示されるので、
大体、デフォルトで問題無いが、必要に応じて補正して
「OK」ボタンを押す。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「白黒調整ウィンドウ」

そうすると、レーヤーパネルに「白黒」調整レイヤーが作られ、
これで、いつでも自由に補正をやり直すことができる。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「白黒調整レイヤー」

ちなみに、現時点ではこのような仕上がり。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「白黒調整写真」

現状だと、写真が少しモヤっとしているので、
ここから、更に補正を行っていく。


3)調整レイヤーの「トーンカーブ」で補正

「白黒」と同様に、
「トーンカーブ」調整レイヤーを作成する。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「トーンカーブレイヤー」

「トーンカーブ」ウインドウが表示されるので、
左右の空白部分(=グレーのグラフの塗りがない部分)を
三角のつまみを動かして、詰める。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「トーンカーブウインドウ」

これによって、写真のトーンが引き締められ、
写真自体の仕上がりもこのように良くなる。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「トーンカーブ補正写真」

ちなみに、こちらも白黒同様に、
「トーンカーブ」レイヤーが生成されるので、
後から、いつでも自由に補正をやり直すことができる。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「トーンカーブレイヤー生成」

オプションとして、先ほどのモノトーン画像に
不透明度15%のピンク色の塗りをレイヤーで重ねると
このようなダブルトーン風の画像ができる。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「ダブルトーン画像」


追記:アクションを活用してより簡単に!


今回ご紹介した操作をアクション化したので
このブログで配布したい。ご自由にお使い下さい。

◆ファイルダウンロード:MonoAndDoubleToneAction.zip

念のため、PhotoshopCS3で読み込む方法をご紹介!


1)アクションパネルを開いてメニューを出す

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「アクションパネル」

2)メニューから「アクションを読み込み」を選択

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「アクション読み込み」

3)ダイアログでファイルを選択し、読み込む

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「ダイアログアクション読み込み」

4)読み込まれたのを確認し、内容を展開

今回、モノトーン用とダブルトーン用の2種類の
アクションを入れているので展開して、内容を確認。

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「2種類のアクション読み込み」

5)どちらかのアクションを選択し「再生」ボタンをクリック

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法「2種類のアクション読み込み」

このようにアクションを作って管理しておくと、
同じ様な作業があった際に非常に便利で、とっても効率的!


まとめ


調整レイヤーは、大分前のバージョンから存在するが、
実際、使っている人は少ないかもしれないですね。

特に、Photoshopの初期シリーズから使っている人は
その傾向が強そうですが、この機会に活用して欲しいです。

自分で納得できなかったり、クライアントの要望で
後から補正が必要になった時、非常に効率的です。

また、レイヤーとして複数パターンの補正を管理できるので
比較しながらより効果的なものを制作できます。

この方法が、多くのデザイナーさんの
素晴らしいWEBサイト・LP・印刷物の制作に役立てば幸いです。




2012年3月27日

とうとう?Chromeがブラウザシェア1位に!

海外のWEB分析会社StartCounterの調べによると、
WEBブラウザ ChromeのシェアがIEを抜いて1位になったとの
発表がありました。

1332366059.png


記事によると1位になったのは、僅か1日だけだったとの
ことですが、記事にもある通り、いつまでも崩せなかった
IEのシェアを破ったのはすごいことだと思えます。


この結果はStart Counterが集計してる世界のWEBブラウザ利用
シェア調査のデーターからで、インド、ロシア、ブラジルの国で
シェア1位となったことで、総合1位になったようです。


最近IEのシェアが減少しているというニュースは聞くものの
クライアント企業内などまだまだIEの利用率は高いなと言う
実感がありましたが、実数値データーでも証明されることに
なりました。


一部の国とその分析会社のデータだけなので、これだけを
真実とすると語弊があるのかもしれませんが、より軽くて
便利なブラウザを利用者が選ぶということが
当たり前のようになってきています。


PCにバンドルされたものをそのまま使うところから
ブラウザにも使い勝手を求め、自分にあったものを
選びツールとして使いはじめているということでしょうか。
この先、他のアプリケーションの世界にもいろいろと
改革が起こっていくと、更にWEBまわりの技術等は
面白くなっていくような気がします。


Web 分析会社のアイルランド StatCounter





2012年3月26日

超簡単! 髪の毛の画像を1分で切り抜く方法まとめ

超簡単! 髪の毛の画像を1分で切り抜く・マスクする方法まとめ

切り抜き・マスク作業で、もうイライラしない!
誰でも、切り抜き30秒・調整30秒で完成できる方法。


WEBサイトやLPのキービジュアルでは画像を使うことが多い。
しかし、お客様から素晴らしい画像の支給があるとは限らない。

「これ、マスクしないといけないじゃないか!」

昔からマスク専用のアプリケーションがあるほど、
マスク作業・切り抜き作業というのは
利益にならないのに、手を抜けない根気が必要な作業。

しかし、今なら誰でも簡単に、1分あればできる

今更だが、やっとAdobeのCS5シリーズをまともに使い始めたので
ここで、Photoshop CS5を使った、超簡単マスク術を紹介したい。


お題の写真

こちらが今回のお題の写真。
見事に背景の上に、髪の毛がのっている。

超簡単! 髪の毛の画像を1分で切り抜く・マスクする方法まとめ「お題画像」

昔だったら、拡大して、調整して、
拡大して、調整して、頑張ってマスクをかけていた。

しかし、その割に誰も評価してくれないという
非常に寂しい作業に時間を割いていた。

それが、Photoshop CS5の新技術で劇的に変わる。


誰でも1分で、髪の毛のマスクができる方法


1)クイック選択ツールを選択

超簡単! 髪の毛の画像を1分で切り抜く・マスクする方法まとめ「クイック選択ツール」


2)必要な部分をクリックして選択

まずは、必要な部分をクリックしていこう。
普通の選択ツールと違って、shiftキーを押す必要は無い。

超簡単! 髪の毛の画像を1分で切り抜く・マスクする方法まとめ「クイック選択ツールクリック」

Tips:ここでは必要な領域より少なめに選択しよう

超簡単! 髪の毛の画像を1分で切り抜く・マスクする方法まとめ「クイック選択ツール領域」

このぐらい選択したら、次のステップに移る。


3)マスクパネルで「ピクセルマスクを追加」をクリック

超簡単! 髪の毛の画像を1分で切り抜く・マスクする方法まとめ「ピクセルマスクを追加」

そうすると、画像がラフにマスクされる。

超簡単! 髪の毛の画像を1分で切り抜く・マスクする方法まとめ「ラフマスク」

これでは使いものにならないが、凄いのはここからだ。


4)マスクパネルで「マスクの境界線」をクリック

超簡単! 髪の毛の画像を1分で切り抜く・マスクする方法まとめ「マスクの境界線」

そうすると、「マスクを調整」ウィンドウが出てくるので、
「エッジの検出」で「スマート半径」にチェックを入れて
半径の値をとりあえず、マックスの値にする。

超簡単! 髪の毛の画像を1分で切り抜く・マスクする方法まとめ「エッジの検出」

そうすると・・・

超簡単! 髪の毛の画像を1分で切り抜く・マスクする方法まとめ「スマート半径」

これだけの作業で、このレベルまでマスクできる。
ここまで、早ければ30秒かからない。

しかし、プロとしては、このレベルで満足できない。
まだ、少しだけ気になる部分がある。

超簡単! 髪の毛の画像を1分で切り抜く・マスクする方法まとめ「マスク修正」

これから、残り30秒でこの部分を調整していく。


5)「マスクの調整」の「半径を表示」をチェック

超簡単! 髪の毛の画像を1分で切り抜く・マスクする方法まとめ「半径を表示」

そうすると、画像がマスク画面に切り替わる。

超簡単! 髪の毛の画像を1分で切り抜く・マスクする方法まとめ「マスク切替」

この画面を見ながら、マスクの境界線を調整していく。


6)エッジの調整ツールで境界線を修正

「半径調整ツール」と「調整消去ツール」を使って調整する。

超簡単! 髪の毛の画像を1分で切り抜く・マスクする方法まとめ「半径調整ツールと調整消去ツール」

「半径を表示」のチェックを入れたり外したりしながら
最良の境界線になるように、微調整を行っていく。

超簡単! 髪の毛の画像を1分で切り抜く・マスクする方法まとめ「境界線調整」

ここまで来れば、もうほぼ完成。


7)「マスクの調整」の「エッジを調整」で仕上げ

この段階は、重ねる背景に合わせてお好みで調整する。
「半径を表示」のチェックを外してから
「エッジを調整」で画面を見ながら境界線の微調整を行う。

超簡単! 髪の毛の画像を1分で切り抜く・マスクする方法まとめ「エッジを調整」

最後に、今後のために「設定を保存」にチェックを入れ、
「OK」ボタンを押すと・・・

超簡単! 髪の毛の画像を1分で切り抜く・マスクする方法まとめ「設定を保存」

たったの1分で、このレベルのマスクされた画像が完成!
ちなみに、背景と合わせると、こんな感じ。

超簡単! 髪の毛の画像を1分で切り抜く・マスクする方法まとめ「背景と合成」

昔の苦労は一体なんだったのだろう・・・と思うぐらい
本当に簡単に、誰でもマスク作業が可能になった。


まとめ


新しい技術を常に取り入れていけば、
作業効率を飛躍的にアップできます。

そして、その浮いた分の時間を
より効果的なキービジュアルのデザイン制作に費やすことで
より価値のあるページを制作できます。

この方法が、多くのデザイナーさんの
素晴らしいWEBサイト・LPの制作に役立てば幸いです。


追記
より良い記事を発信していくために、新規ブログを開始しました。
売上をアップさせるWEB制作ブログ
もし良かったらRSS登録をお願いします。今後共よろしくお願いいたします。






2012年3月25日

お問い合わせを増やすエントリーフォームの作り方まとめ

見込み客を逃さずにコンバージョンさせる
エントリーフォームとは?


どんなにSEOを頑張っても、
どんなにソーシャルメディアを活用しても
せっかく集客した「見込み客」
お問い合わせ、資料請求、お申し込み、ご注文というかたちで
コンバージョンさせられなければ何の意味もありません。
サお問い合わせを増やすエントリーフォームの作り方まとめ

さて、どうやってコンバージョン率をアップさせ、
売上アップに繋げれば良いのでしょうか?


まずは、エントリーフォームから見直しましょう。
お問い合わせを増やすエントリーフォームの作り方をまとめます。

お問い合わせを増やすエントリーフォーム作成の
3つのポイント



 1)人が見えないエントリーフォームにしない
 2)流れの分からないエントリーフォームにしない
 3)ユーザーが面倒だと思うエントリーフォームにしない


それでは、それぞれについて詳しく説明していきます。


お問い合わせを増やすエントリーフォームタイトル

1)人が見えないエントリーフォームにしない

まず、何と言ってもキービジュアル(=タイトル)部分が重要です。

特に、BtoCビジネスモデルの場合は、
人の写真があることで、安心感・信頼感を生み、
実際のお問い合わせを増やす結果に繋がります。

一般的には、男性より女性の方が良いでしょう。
更に、「私が担当です」というかたちで
実際の担当者の顔が見えれば、更なる安心感に繋がります。
過去の事例で、この施策を行っただけで、
コンバージョン率が3倍になった事例もあります。

もし、BtoBビジネスモデルにおいて、
ブランドイメージの問題で写真が使えないならば、
対応時間や担当者のお名前を入れると、
それだけでも、お客様からすれば安心感に繋がります。

WEBだからこそ、人の存在というのは、
見込み客の背中を押す上で、大きな力となります


お問い合わせを増やすエントリーフォームタイトル

2)流れの分からないエントリーフォームにしない

次に大事なのは、ユーザーを迷子にさせないということです。

みなさんも経験があると思いますが、
WEB上で注文や申し込みをしている途中で
完了せずに止めてしまうことがあると思います。

このフォーム入力中の離脱というのは、
実はかなり多く存在しています。
みなさんも、是非一度、自社のフォームについて
アクセス解析を行ってみてください。

このフォーム入力中の離脱は、最も勿体ない状態ですが、
この現象が起きる原因の1つは、ユーザーが迷子になるからです。
「自分は後、どのぐらいのプロセスを行う必要があるのか」
疑問に思い、面倒になって止めてしまうというパターンです。

特にBtoBビジネスモデルにおいて、写真(上図)の事例のように、
予めユーザーが行うプロセスの内容とステップ数を明確にし、
その上で、アクションを行ってもらえれば、
フォーム入力途中の離脱率を軽減でき、
結果的に、コンバージョン率アップに繋がります。


お問い合わせを増やすエントリーフォーム詳細

3)ユーザーが面倒だと思うエントリーフォームにしない

最後に、最低限の入力数で送信まで行ってもらうことが重要です。

こちらも、みなさん経験があると思いますが、
「これどこまでスクロールするの?」
「ここまで情報を入力するのはちょっと・・・。」
というエントリーフォームが存在します。

まず、WEB担当の方は、
ターゲットに最も近い、ご自分のご家族の方
自社のフォームを埋めてもらってください。
その方が、面倒だと思ったら、それは質問数が多過ぎです。
今すぐ、フォームを改修した方が良いでしょう。

とはいえ、しっかり情報を聞かないと、
お問い合わせ対応が大変になったり、
漏れがありクレームに繋がる
という方に、
1つ良い方法をご紹介します。

写真(上図)の事例のように、
質問数が少ない簡易版をデフォルトで表示させ、
詳しい情報を入力することができる方のみに、
質問数が多く、より細かな情報を取得できる詳細版
表示するという仕組みを作る方法です。

これであれば、フォーム入力途中の離脱率を軽減でき、
加えて、どちらのフォームを選ぶかによって、
メール受信段階で、見込み客の質を振り分けることもでき、
結果的に、コンバージョン率アップに繋がります。


【まとめ】

このように、最適なエントリーフォームがあれば
大切な見込み客を逃さず、ユーザーの離脱率を下げ、
コンバージョン率を上げる
ことができます。

上記は、基本的なことかもしれませんが、
0.1%の改善の積み重ねが、大きな成果へと繋がります



「WEB担当様・プロモーション担当様へ」
 ◆自社のエントリーフォームを診断してほしいという方は
  どうぞお気軽に、お問い合わせフォームからご相談ください!




2012年3月22日

シングルページの方が有利?ランディングページの気になるポイント

ランディングページ、プロモーションページはシングルページで
一枚ですべての情報が見られる方が良いと思っていませんか?
訴求したい商材などによりそれは違ってくるようです。

ポイントは直感的に応募や申込み、購入しやすい商材の場合は、
1ページで完結させるプロモーションが十分に可能になります。

一方、決定までに吟味を重ねるような商材については、
複数ページのプロモーションサイトや、本体サイトの
コンテンツ詳細ページへリンクさせたりと、ランディングページが
プロモーション活動の入り口ページとして機能する方が
有効だったりします。

1ページ完結型は1回の訪問で、確実にアクションを起こしてもえる
ことを狙います。
ただユーザーの心理としては、何度かの訪問を繰り返して
決定するという行動があるため、何度も訪れさせると言う
工夫が必要となります。

再度訪れてアクションを起こす行動を想定し、本体コンテンツへの
リンクやメルマガ登録をさせておいたり、お気に入りに登録しやすかったりと
いろいろと対策をたてておくとよいでしょう。

商材とユーザーの行動にあわせてランディングページの構成を
検討するとコンバージョン率アップには良いと思います。





2012年3月21日

あなたの売れないセールスコピーを販促に繋げる3つのルール

「あなたのセールスコピーは、なぜ売りに繋がらないのか?」

WEBサイトを活用して販促を実現する上で、
重要な要素の1つである「セールスコピー」

あなたのセールスコピーは売りに繋がっていますか?

WEBサイト、チラシ、DM、POPなどの販促物に使う
セールスコピーを売りに繋げる3つのルールをご紹介します。

 1 企業側の視点を捨てる

 2 購入意欲をそそる明確な言葉を使う

 3 伝える情報を欲張らない

それでは、まずは1番について詳しくお話しをしていきます。

1 企業側の視点を捨てる

大切なのは、使う側・利用する側にとって、
「その商品・サービスを選ぶと、どんなメリットがあるか?」
ということだけです。

企業が自分の自慢をしても、それはセールスコピーとしては不適格です。

どんなに性能が良いかどうかは、ほとんどの消費者に響かず、
重要なのはその性能によって、どんな利益を得られるかです。

例えば、最新技術によって、ものすごく滑らかに書けるペンがあったとします。

次の内、どのセールスコピーが消費者に最も響き、売りに繋がると思いますか?

 1)最新技術で、書く時の滑らかさUP!
 2)業界No.1の滑らかな書き心地!
 3)ペン選びで、文字を書く時の疲労感を軽減!

最新技術かどうかも、業界No.1かどうかも、
使う側にとっては、基本的にどうでもよい情報です。

「書き心地の滑らかさ」も、言葉だけでは、
抽象的で伝わりづらいと言えます。

それよりも使う側にとって大切なのは、
その滑らかな書き心地が「自分にとって、どういうプラスの影響を与えるか」です。

今回の例で言うと「疲労感を軽減」というのが、プラスの影響です。
ここにモニター試験から導き出された数値などがあるとより効果的です。

大切なのは、その商品やサービスを利用した際に得られるメリットを
より具体的かつ明確な言葉で、使う側の視点から表現することです。





2012年3月19日

簡単に出来た!Google Analyticsでランディングページごとの効果測定

かなりの率で活用されているGoogle Analyticsだと思いますが、
ランディングページの効果測定が簡単にできる方法がありました。

今更な感もあると思いますが、一応備忘録的に・・・。

効果測定ならコンバージョンメニューを見れば良いと
思うでしょうが、コンバージョンではかゆい所に
てが届かないのです。

ランディングページごとのコンバージョンデータを知るためには
意外なメニューから見ることができるようになります。それは・・・

「地図上のデータ表示」です。


lp-cvr1.jpg

ユーザー>地図上のデータ表示>ディメンションで
「閲覧開始ページ」を選びます。


こちらのページにある、目標セットやeコマースのタブから
ランディングページごとにコンバージョン率等が
簡単に知ることができるようです。


これでまた更に分析を重ね、
良い成果を生み出すランディングページが
作り込んでいけそうですね。








ホームページ掲載以外にもWEBサイト制作実績・成功事例紹介多数ございます。
Webサイトからお問い合わせのお客様に限り、納品後3ヶ月のコンサルティング(期間限定)

Web制作の無料見積もり・お問い合わせ