webデザイナー・webディレクターの方へ！ホームページ制作・運営のヒント

フォームのフリガナを自動入力させるAutoRuby.js

企業のホームページや、ショップのホームページ等を作る際、必ずあるのが、「お問い合わせフォーム」。

しかし、よくあるのが、入力項目が大量にあるフォーム。
これでは問い合わせをしようとした方も、面倒になり、途中で入力をやめてしまう可能性があります。

フォームをできるだけ簡潔にしたほうが、コンバージョン率は高くなります。

そこで、入力を少しでも簡潔にするために、こんなJavaScriptを作りました。
名づけて 「フリガナ自動変換スクリプト／AutoRuby.js」
ためしに、以下のフォームに名前を入力してください。

▼お名前 ：

▼フリガナ：

■設置の仕方
以下の2つのJavaScriptをダウンロードしてください。

prototype.js（オフィシャル）
auto_ruby.js
Head内に読み込みます。
<script type=”text/javascript” src=”prototype.js”></script>
<script type=”text/javascript” src=”auto_ruby.js”></script>

名前のフィールドのidを[name]に、フリガナのidを[ruby]にします。
ただし、フォームのあるページはUTF-8のみの対応です。
（読み込み時 charset=”Shift_JIS”で対応出来る気もしますが。）

※auto_ruby.jsの上の方に、設定項目があります。
「ふりがな（ひらがな）」で表示したい場合は、var convFlag = 0;
「フリガナ（カタカナ）」で表示したい場合は、var convFlag = 1;
にして下さい。

面倒な人の為に、サンプルファイルをZIPで固めておいておきます。

参考サイト：
http://d.hatena.ne.jp/kuwa/20051027/p1
http://d.hatena.ne.jp/shogo4405/20070929/1191052110




ヤフー検索スタッフブログ

2008/07/02：追記
思った以上の反響ありがとうございます。
一番多かったのは、やはり（？）はてなからのアクセスでした。

さて、いくつか、ご意見に関するコメントを。

・Rubyというのは、ルビの事ですね。言語のRubyと間違えてアクセス頂いた方も多く居たようです。
・このスクリプトは、ベースは元からあります。ソレを、導入しやすいように今回焼き直しさせてもらいました。
・「実装がちょっと残念」→　すみません。生粋のプログラマじゃないので、正しい実装を知りません。良かったら、実装し直して下さい。
・「サーバーに投げた方が」→　正直、やり方が分かりません。
・「途中で間違えたら逆に面倒」→　その通りです。
・「環境によってバグる」→　うっ。
・「そんなに斬新か？」→　いや、ギミックとしてはありがちです。ただ、WEBでは今のところ多くのブラウザに対応できる方法はこれくらいしかない気がします。
・「jsが競合しなければ」→prototype.jsが競合の元なら、auto_ruby.jsの$をdocument.getElementByIdに変えれば動くと思います。
・「氏名入力はひらがなかローマ字にすればいい」→ ………その発想はなかったわ。

で、上でも書きましたが、Javascriptにそう詳しい訳でもなく。。。。
ただ、精度が上がれば便利なモノだとは思うのです。
そこで、詳しい方がいらっしゃったら、実装し直していただければ、みんな幸せになります。

ランディングページ最適化 （LPO）

LPOとは、ユーザーがアクセスして、始めに表示されるページを最適化することで、目的のページ（お問い合わせや資料請求）までの誘導のための途中離脱を抑制し、コンバージョン率を高めるというものです。

下記のサイトをみてもらえばわかりますが、要は、こんなページです。
・『速楽アフィリエイトパック』
・オンラインＤＶＤレンタルの★ＴＳＵＴＡＹＡ ＤＩＳＣＡＳ★キャンペーン中！

一般的なサイトのようにヘッダー／サイドメニューがあるわけでなく、長いページがあって、最後に目的到達へのボタンがあるような感じです。こうすることで、他に逃げ道をなくし、コンバージョン率を多少なりとも上げることができます。

弊社のクライアント様でもランディングページを用い、PPC広告やアフィリエイトを活用するクライアント様は多数いらっしゃいます。効果測定の結果、コンバージョン率もはっきりわかるほどあがりました。あまり長すぎるページは個人的には好きではありませんが、商品やサービスの魅力を伝えるためのLPOはとても重要だと思います。

kwout／Webページを画像化できる

Webページの一部を画像化して切り取り、引用できるサービス「kwout」というのを発見しました！

kwoutにアクセスし、切り取りたいページのURLを入力し、切り取りたい部分を選択し、[cut out]を押すだけ。すると、ページ下部にソースが表示されるので、それを貼り付けるだけ！めちゃくちゃ簡単でした。これまたびっくりしたのが、切り取った画像にリンクが含まれる場合はそのリンク情報まで埋め込まれていること！

切り取った画像も影をつけたり、角丸にしたりとちょこっとアレンジが可能。ブログに使う画像なんかにはいいかも！利用料は無料で、登録も不要。ただし人のサイトの画像を勝手に使う場合は気をつけないといけません。

以下がサンプル画像です。リンクが埋め込まれています。

ホームページ制作 福岡 株式会社ソースクリエイト。WEB製作を戦略的に提案 via kwout

« 前のページ — 次のページ »