JSとCookieを使った新規ユーザーのみに表示するコンテンツで心を掴もう

contentfornewvisitors

サイト運営において
目標はそれぞれ異なると思いますが、そもそも目標を達成するためにはどうすればいいでしょうか。

LPOもそれなりに浸透してきましたが
新規ユーザーの心を掴めるかどうか（ユーザーの目的に合った情報を提示してあげること）
が重要になってくると思います。

注目を惹くための手段は色々とあると思いますが

というのもひとつの手段になります。
今回はJavaScriptとCookieを使って表示する情報をコントロールする方法を紹介します。
この方法はとても簡単に導入できるので覚えておいて損はないと思います。

サンプルをもう一度見たい場合は
タイトルの下の 新規ユーザーに戻るリンクをクリックしてください。

一度表示されたらF5を押してページを更新してみてください。
こうするだけで印象が違いませんか？

やっていることは簡単で
Cookieを使って一度訪れたことがあるユーザーかどうかを判別して
そうでなければ（新規ユーザーなら）指定の要素を表示している、だけです。

bit.lyで短縮された元のURLをプレビューする jQueryプラグイン

自分のサイト、ブログでbit.ly（短縮URL）を使いたいけど
ユーザー目線で考えると目的地がはっきりしないURLは不安じゃないですか？

短縮URLで飛ばした先でウイルス感染…とかもあるみたいですし。
慣れてる人はFirefoxのアドオンとか、Greasemonkeyを使えばいいんですけど
それだけじゃだめですよね。

prebitlyプラグインを導入すれば、bit.lyを使った短縮URLでも
プレビューチップで元のURLを表示するので、みんなが安心してリンクをクリックできます。
（さすがに、音声ブラウザまでは無理です…）

角丸の幅可変ボタンを作ろうと思うと割と面倒くさいんですけど
さらにクロスフェードさせたい（実質クロスフェードではないんですが）
という欲望に負けてやってみました。

ちょっと前に流行った？アコーディオンメニューの開閉状態を
Cookieで保存する方法をメモをかねて紹介します。

jQueryを使うとかなり簡単にページ内スクロールが実装できるのですが、さらにjQuery Easingプラグインと合わせるとなかなか面白い動きができたりします。

というわけで誰でも簡単に導入できるようにプラグインにしました。以前にslideScroll.js(jQueryプラグイン版）というページ内スクロールの記事を書きましたが、悲しいことに断然こちらのほうがおすすめです。動きが滑らか…そして自分の好きな動きから選べます。

今回はソースの解説もしてるので、興味のある人は見てみてください。

ページ内スクロールプラグインなのに、7KBもあるのはEasingプラグインの容量が5KBだから…これを機に他のアニメーション部分でもEasingプラグインも使うと一石二鳥になったりしますのでぜひ。

サンプルのセレクトボックスでEasingを選んで右の入力欄にDurationを入れて確認できます。
そもそもEasingが何かわからない人も、とりあえず左のセレクトボックスの値を変えて、右のテキストボックスには800あたりを入力して、中央のナビゲーションリンクをクリックしてみてください。

おすすめをちょっとあげてみます。（右の数字はDuration）

具体的な動きの違いはjQuery日本語リファレンスのEasingページで確認できます。