サービス別コラム

当社の代表的な事例

下記の2サイトは、最近作成した当社のサービスを紹介するLPです。
是非、どういった動きをするのか見ていただければと思います。

Webライティング「ALL Write!」| コンテンツマーケティングソリューション

成果にこだわるならフリーセルのスマホ＆タブレットサイト制作サービス

※一部の古いブラウザでは、動作しないものがあります。

まず、これらのサイトを作ることになった経緯から書いていきます。

始まりは突然に

数ヶ月前、上司に呼ばれて、1枚のデザインを見せられました。

「このデザインに動きをつけてほしいんだよ。」

「これにですか？どんな感じですか？」

「ギューン！ドーン！みたいな感じで。」

「･･･(え？擬音ばっかりでよくわからないけど、何その難しそうなの･･･。この人何言ってんの？)」

「じゃあ、よろしく！」

考える間もなく、私とJavaScriptの日々が始まりました。

最初の3秒が勝負

上司からのリクエストは大きく分けて2つでした。

1つめは、ファーストビューでユーザーの印象に残るインパクトのあるアニメーションをつけたいということ。

ユーザーがLPを読むかどうかは3秒で判断されると言われています。

つまり、ファーストビューで、どれだけユーザーの心を掴むかが重要になります。

大きな文字を配置する。目立つ色を使うなど、伝えたいことを打ち出す方法は色々ありますが、人は動いているものに目が行きやすいものです。

なので、効果的なアニメーションを使用することで、より伝えたいメッセージを際立たせることが出来ます。

また、ただ動かせば良いというものでもないので、伝えたい世界観を表現することにも注意しました。

WebライティングのLPでは、ペンで書くような動き。
スマートフォンのLPでは、男性が「NO MORE！簡易スマホ対応！」と叫んでいるように見せることで、より力強い印象を与えています。

このように、伝えたいことや与えたい印象によって、さまざまな動きを作成することが可能ですので、3秒でユーザーの心を掴めるようなコンテンツを作ることに注力して作り上げました。

「出来ました！どうですか!?」

「おっ！いいね！じゃあ、ファーストビューの下もよろしく！」

「そうでした･･･」

JavaScriptの戦いは続きます。

夜中に一人で作業することも（ありませんでした）

LPを最後まで見てくれるユーザーを増やす

リクエストの2つ目は、ユーザーのスクロールに合わせて動作するアニメーションです。

ファーストビューで訴求が出来たとしても、
その後のコンテンツが単調であれば、ユーザーは最後まで見ずに離脱してしまいます。

最後まで見てもらうことが目的ではありませんが、最後まで見てもらうことで、お問い合わせなど、ユーザーのアクションに繋がる可能性は高くなるかと思います。

ユーザーのスクロールに合わせてアニメーションを起こすことで、伝えたいことや、重要なポイントをより強く訴求させることが出来ると共に、スクロールする楽しさをプラスすることが出来るので、LPを最後まで見てもらえる可能性が高まります。

動作するタイミングなど、色々な苦労を経て、WebライティングのLPが完成しました。

「今度こそ完成です！」

「ありがとう。今度は、こっちのスマートフォンのLPに動きをつけてほしいんだよ。」

「･･･(また!?)･･･どんな感じですか？」

「次はドドーン！ワッ！みたいな感じで。」

色々言ってるけど、実際作ってみてどうだったの？

結果的には、ランディングページからお問い合わせを多数獲得できています。

これも、JavaScriptを使用して動きのあるランディングページを制作したおかげ！だと信じこんでいます。

他社と差別化したい！
ユーザに訴求できる印象的なWebサイトを作りたいなどのご要望をお持ちの方、ぜひ一度ご相談ください。

P.S　他にも様々なことが期待できます。

今回で紹介したようなこと以外にも、様々な効果が期待できます。例えば、
・バナーやボタンにも動きを加えることで、クリックできることをわかりやすく（ユーザビリティの向上）
・サイトのクオリティが向上することによるブランディング効果
・単純にWebサイトの操作が気持ちいい

などなど。

次回は、javascriptを使用した、UI・UX（ユーザー・インタフェース/ユーザー体験）について書いてみようと思います。