スマホサイトで集客倍増！

スマートフォンバブル加速

Thu, 19 Jul 2012 11:10:24 +0900

いつもありがとうございます。山野井です。

最近になって、やっと「もしドラ」を読みました。とても面白い本ですね。感動しました。ちょっと読むのが遅かったのですが...

ところで、いよいよ、スマートフォンバブルが加速してきているようです。

年配の方でも、簡単に扱えるスマートフォンも発売されました。やはり、そんなに早く、スマートフォン一色になることはないだろうという見方から、そうではないんじゃないかという見方に急速に変わってきていますね。

ということで、この上りのエスカレータにうまく乗ることができる人は、いろいろと恩恵にあずかることができるでしょう。

今、スマホをターゲットとしたビジネスで盛り上がりを見せているのが、スマホサイトを簡単につくることができてしまうというツールです。

具体的には、テンプレートがいくつか用意されていて、その中から、すきなデザインを選ぶ。

次に、スマホサイトに載せたい文章を、ブログの記事を書く感覚で書いていく。

そして、ツールを実行すると、ＨＴＭＬが自動で吐きだされる。

それをサーバーにアップして公開する。

というのが、大体の感じだと思います。

細かいところは、それぞれのツールでいろいろと違いがあります。テンプレートのデザインなんかも、ツールの開発者によって、いろいろとありますね。

ですので、この手のツールを使って、スマホサイトを簡単に作りたいという場合には、ツール選びの際に、いくつかの注意点があります。

１．自分好みのデザインのテンプレートが準備されているか。されていなければ、カスタマイズすることができるか。

２．そして、デザインが自分好みというだけでなく、サイトを見に来てくれる人達にとって、見やすく、売上につながるようになっているか。

３．簡単にできるつもりが、結局、自分でＨＴＭＬを変更したりする必要に迫られることはないか。

まあ、こんなところでしょうか。

ツールで簡単につくれるというのは、便利なのですが、通り一遍のものしかできないとなると、ちょっとつまらない気はしますね。

もちろん、ある程度までツールで作ることで、作業を省力化し、あとは自分でＨＴＭＬを変更してしまうなんていう使い方も良いかもしれません。

いろいろと見ているとお値段的にも、そんなにバカ高いわけではないので、手頃なツールを選らんで、作業効率化のために使うというのも良いかもしれません。

いずれにしても、スマホバブルが加速度を増している状況ですので、早めにスマートフォン対応のサイトを作ることをおすすめします。

時限クーポンでの集客にはスマホが最適

Wed, 13 Jun 2012 14:37:24 +0900

いつもありがとうございます。山野井です。

梅雨に入りましたが、いかがお過ごしでしょうか？

今のうちに、暑い夏に向けての準備を進めておいてはいかがでしょうか？

夏に向けての準備という意味で、今日は、時限クーポンサイトについて取り上げてみたいと思います。

時限クーポンサイトというのは、その名の通り、その時間帯だけお得になるクーポンを発行するサイトということになります。

飲食店等のサービス業にとっては、とっても便利なサイトということが言えるでしょう。

なぜなら、どんなお店でも、忙しい時間帯と暇な時間帯は、必ず存在してしまいますよね。

それから、予期せぬ出来事により、急にお客さんが来なくなってしまったなんてこともあるでしょう。

例えば、これからの時期に多いのが、急な雷雨やゲリラ豪雨等です。

予約がキャンセルされてしまって、閑古鳥が鳴いてしまうなんて事態も想定されますよね。

そんなときに、時限クーポンサイトを使って、集客することができるとしたら、どうでしょう。

例えば、雷雨やゲリラ豪雨が予想されている時間帯に、「雨宿りに来店されたら、○○半額」なんていうクーポンを発行したら効果があるかもしれませんね。

こういうサイトを利用するには、やっぱり、スマートフォンサイトがあるといいですね。

スマートフォンには、ＧＰＳ機能が搭載されているので、自分の店の近くにいる人を急な雨等のときに、時限クーポンを使って集客するには、もってこいなんですね。

自分の店の近くにいる人が、スマートフォンを使って調べたときに、時限クーポンの情報が掲載されていたら、興味を引くことは間違いないでしょう。

時限クーポンサイトを使わなくても、自店のサイトから時限クーポンを発行したりするのも良いでしょう。

やり方はいろいろとあると思いますが、スマートフォンサイトを持っているメリットは、数しれません。

すでにスマートフォンサイトをお持ちの方は、時限クーポンを使った集客戦略を考えてみてはいかがでしょうか。

jQueryMobileで簡単に作る－コンポーネント（その４）

Fri, 01 Jun 2012 12:21:57 +0900

いつもありがとうございます。山野井です。

普段はウィンドウズで人がやっている処理を自動化するプログラムを作っています。

さくさく動いてくれると、面白くなって、プログラミングも加速してきます。

みなさんのスマートフォンサイト作成は、加速していますでしょうか？

今日は、jQueryMobileのＨＴＭＬについて紹介します。

jQueryMobileを使わないで作る場合は、世の中で一般的に使われているＨＴＭLの文法を使って、マークアップします。

しかしながら、jQueryMobileを使用する場合、独特の文法があります。

以下のＨＴＭＬ文をご覧ください。

...

「data-role」という文が使われています。

これは、jQueryMobile独特のものです。

簡単に言ってしまうと

...

の間の役割を示しています。

「data-role=」の後のダブルクオテーションで囲まれた部分がその意味で、その単語の意味そのままと言って良いでしょう。

一行目の"page"というのは、ページのことです。

そして、そのページの中に、「header」、「content」、「footer」があるということになります。

「header」、「content」、「footer」はそれぞれ、ヘッダー、ページの内容、フッターということになります。

これらも、読んで字のごとくということになります。

jQueryMobileは、今回紹介した「data-role」のような感じで、簡単に指定するだけで、いろいろとページをデザインすることができるようになっています。

今回は、こんな感じなのかぁということだけでも、頭の片隅に置いておいて下さい。

スマートフォン対応すると成約率が上がる法則

Fri, 25 May 2012 11:51:59 +0900

いつもありがとうございます。山野井です。

今、ある定型的な処理を自動化するプログラムを構築する依頼を受けて作っています。自動化できるところは、自動化してしまうと業務がすごく効率化できると思います。

ただ、自動化してはいけない処理もありますので、その辺の切り分けがとっても大切ですね。

今日は、私がいつも購読しているメールマガジンからの情報をシェアしますね。

ホームページのスマートフォン対応をすれば、すぐに売上が上がるというお話です。ネット界の大御所である滝井さんがおしゃっていることです。

以前、「スマホサイトから予約の電話を鳴らしまくる方法」という記事で紹介したこととも関連することで、電話が鳴りやすいサービス業に関して、かなりのコンバージョン数の増加、顧客獲得コストの良化が狙えるということです。

ちなみに、コンバージョンとは、「成約」のことです。

電話が鳴りやすいサービス業とは、

・医院、歯科医院
・飲食店、美容室、宿泊施設などの店舗ビジネス
・水漏れカギ修理などの緊急性ビジネス
・美容外科

なんかのことだそうです。

これらの業種のみなさんは、できるだけ早くスマートフォン対応することで、すぐに売上が上がるということです。

なので、このブログでも、簡単にできる方法を解説していますので、参考にして対応して欲しいと思います。

それから、滝井さんは、なぜ、スマートフォンだとコンバージョン率が高くなるのかも解説しています。

まずは、パソコンとスマートフォンでは、何が大きく違うのかを考えてみると、おのずとわかると思います。

そうなんですね。パソコンの場合は、比較検討が簡単にできます。いくつものウィンドウを並べて、見比べることもできたり、行ったり来たりするのも楽にできてしまいます。

それに比べて、スマートフォンのほうは、パソコンでは、楽にできる操作がやりにくいからなんですね。

だから、ユーザーが最初に見たスマホサイトで申し込んでしまう可能性が高くなります。

そうであるならば、滝井さんは、今やるべき施策は

１．スマートフォン専用サイトをつくる
２．スマートフォン専用のＰＰＣ広告キャンペーンを作る

の２つだと言っています。

ぜひ、試してみて下さい。売上アップ間違いなしだと思いますよ。

スマートフォンサイト用のフォーム

Thu, 24 May 2012 11:34:44 +0900

いつもありがとうございます。山野井です。

いよいよ夏日が増えてきました。みなさん日焼けには、十分注意して下さい。

お肌にとっては、あまり良くないようです。

さて、今回は、スマートフォンサイト用のフォームについてです。

フォームとは、お問い合せフォームやご予約フォーム等のことです。フォームを使うことにより、メールアドレスを公開しなくて済むので、迷惑メール等を防ぐ効果もあります。

そのフォームについても、jQueryMobileでは、スマートフォンのタッチパネルで操作しやすいようなインターフェースを用意していて、簡単に作ることができます。

パソコンなんかで使われているフォームとこのスマートフォン向けに用意されたフォームを比べてみるとよくわかります。

では、チェックボックスとラジオボックスで比較してみましょう。

下記の画像が、パソコンなんかで使われているフォームです。

これを実際にスマートフォンで表示すると、チェックをいれる四角がとても小さくて操作しずらいんですね。なかなか、思ったところにチェックを入れられないなんていう事態が起こってしまいます。

次に、jQueryMobileで、スマートフォン向けに用意されているフォームです。

これだと、タッチパネルで操作しやすいということになります。

ですので、集客という観点から考えると、お問い合せや予約、注文等が入りやすくなるということが言えます。

ちょっとしたことで、成約率も変わってきますので、パソコンなんかで使われているフォーム（ネイティブフォーム）を使っている方は、スマートフォン用のフォームに作り変えてみてはいかがでしょうか。

jQueryMobileで簡単に作る－コンポーネント（その３）

Sun, 20 May 2012 10:44:56 +0900

いつもありがとうございます。山野井です。

いよいよ明日は、１７３年ぶりとなる金環日食です。

一生に一度あるかどうかの機会なので、見ることができるといいですね。

ここのところ、jQueryMobileのコンポーネントについて書いています。

ある程度なれてしまうと簡単につくれてしまうので、今後も少しずつ紹介していきます。

今回は、色についてです。

jQueryMobileには、テーマフレームワークというものがあります。

これは、簡単な指定をするだけで、色を変化させることができるというものです。

たとえば、ツールバーの場合は、下の画像のような色を使うことができます。

画像のなかにＡ～Ｅという文字が書かれていますが、ＨＴＭＬのなかで、これらのアルファベットを指定するだけで、色を指定することができます。

どんなふうに指定するのか、ちょっとだけ例をあげておきます。

Page Title

上記のコードの「data-theme="b"」の部分です。"b"となっている部分を"a"～"e"に変えるだけで、色が変わるというわけです。

ただ、これ以外の色にしたいという場合もあるかと思います。

そういう場合は、ThemeRollerというツールがありますので、こちらで作ることができます。このツールも簡単にいろんな色を作ることができるようになっていますので、とっても便利です。

今回は、ちょっとだけ、ＨＴＭＬのコードを紹介しました。jQueryMobile独自のコーディングに関しては、詳しく解説する機会を持ちたいと思います。

jQueryMobileで簡単に作る－コンポーネント（その２）

Thu, 17 May 2012 12:30:06 +0900

いつもありがとうございます。山野井です。

スマートフォン向けサイトの自動作成ツールなんかも、けっこう出回ってきていますね。

「スマートフォンサイト自動作成ツール」というキーワードで、ググるといっぱい出てきます。

使いやすいものがあれば、自動作成ツールを使って、作ってしまうのも良い手かもしれません。

みなさんも一度、さがしてみてはいかがでしょう。

私も、何かひとつ使って、作ってみようかなぁと思ったりしています。

作ってみたら、このブログでも報告しますね。

いずれにしても、基本的なことについては抑えておいた方が良いと思います。

ですので、今日は、前回に引き続きjQueryMobileのコンポーネントを紹介したいと思います。

今回は、「ボタン」です。

その１で、ツールバーを紹介しました。そのヘッダーバーの両サイドにボタンをつけてみました。

左側に「キャンセル」ボタン、右側に「保存」ボタンです。

それぞれのボタンの左側には、アイコンもついています。

キャンセルボタンには、「×」のアイコン、保存ボタンには、「チェック」のアイコンです。

直観的に操作しやすいページにするために、ボタンの中は、文字とアイコンで構成しています。

アイコンの種類は、１８種類用意されていますので、大体においては、あらかじめ用意されているもので、事足りるんではないでしょうか。

もし、足りない場合は、オリジナルのアイコンを作って、組み込むこともできます。

ですので、自分でアイコンを作るもよし、ネット上に転がっているフリーのアイコンを探すのも良いでしょう。

こんな風にしていくと、デザインの幅がとっても広がるのではないでしょうか。

今日の例では、キャンセルボタンと保存ボタンの色も変えています。

色についても、簡単に変えることができます。色の変え方については、また紹介しますね。

それでは、ぜひ、トライしてみて下さい。

jQueryMobileで簡単に作る－コンポーネント（その１）

Wed, 16 May 2012 11:07:29 +0900

いよいよ五月も中旬、金環日食も近づいています。

天気がよくなって、見ることができるといいですね。

さあ、今回からは、jQueryMobileのコンポーネントを紹介したいと思います。

その前に、「コンポーネント」とは何ぞやというお話です。

日本語にしてしまえば、「構成要素」という意味になります。コンピュータの世界では、何らかの機能をもったプログラムの部品ということになります。

jQueryMobileの場合も、こうしたプログラムの部品が用意されていて、それらを組み合わせることにより、モバイルサイトを作り上げることができるようになっています。

例えば、どんなものがあるのかと言うと、「ツールバー」、「ボタン」、「グリッド」等です。その他にもたくさん用意されています。

今後は、それぞれについて、どんなものなのかを中心に説明していきたいと思います。

第一回目は、「ツールバー」についてです。

「百聞は一見に如かず」ということで、下記の画像を見て下さい。

下記の画像の「ページタイトル」、「フッター」と書かれている部分を言います。

それぞれ、「ヘッダーバー」、「フッターバー」と言います。

このツールバーの中にボタンを入れたり、画像を入れたりといろんなカスタマイズを行うことができるんですね。

そして、ボタンの中にアイコンを入れることもできるので、なんのためのボタンかを直観的にわかるようなデザインも可能になってきます。

スマートフォンサイトを作るにあたっては、操作しやすいことはもちろんのこと、直観的に観たいページに飛んだり、予約や電話での問い合わせができるようなデザインにすることが大切です。

そうすることにより、このブログのテーマであるスマートフォンサイトでの集客につながるわけです。

そんなわけで、このシリーズでは、操作しやすく直観的にわかりやすいページ作りのためのツボとコツを重点的にお伝えできればと思っています。

ファイル転送やディレクトリ管理を楽に行う方法

Sun, 13 May 2012 11:56:45 +0900

いつもありがとうございます。山野井です。

これは、スマートフォン向けサイトに限らないお話ですが、ホームページを作成したら、サーバーにアップする必要があります。

ページ数が多いホームページになると、パソコン側のファイルとサーバー側のファイルの管理が大変になってきます。

通常は、ＦＴＰツールを使って、パソコン側からサーバー側にファイルを送ることになります。

ＦＴＰツールとは、ファイルを転送するためのソフトウェアで、フリーのソフトウェアやホームページビルダー等のホームページ作成ソフトに付いているもの等、世の中にはたくさんあります。

ホームページを作る際には、パソコン側で作成して、完成したらサーバーにアップするというのが通常ですが、スマートフォン向けサイトの場合は、開発中でもサーバーにアップして表示を確認したい場合が多々あるんじゃないかと思います。

なぜなら、パソコン側のシミュレータだけでは、確認しきれない部分があるからなんですね。確認しきれないというのは、スマートフォンの実機の通りに表示されない場合があるからです。

ほぼ、実機のように表示されるようにはなっているのですが、１００％ではないからなんです。

そのため、頻繁にパソコン側からサーバー側にファイルをアップすることになります。

作ったものを、サーバー側に送ってスマートフォン実機で確認、修正や微調整して、またサーバー側に送って確認。

この繰り返しで、完成に至ります。

ということで、ＦＴＰツールでひとつひとつファイルをアップしていると、違うディレクトリーに送ってしまったり、送ったつもりで、送れていなかったりと、ちょっと管理が複雑になってしまいます。

ちなみに、ディレクトリーとは、ウィンドウズで言うフォルダと考えて下さい。サーバーのOSは、UNIXやLinuxの場合が多い感じがしますが、これらの場合は、ディレクトリーと言います。

ところで、この作業を楽に行う方法なんですが、実はDreamweaverというホームページ作成ソフトを使うと、とっても楽です。

このソフトには、「サイトの管理」という機能があって、これを使います。

これは、パソコン側とサーバー側のディレクトリー構成（フォルダ構成）を対応させておき、アップしたいファイルを選んで、アップのボタンをクリックするだけで、所定のディレクトリにすぐにファイルが転送されるようになります。

一度、設定をすませておけば良いだけなんですね。

今日も、例によって、やり方をちょっとだけ解説しておきますね。

Dreamweaverの画面の右下に下の画像のように表示されます。

この画面上で、アップロードしたいファイルを選択します。

例えば、column.htmというHTMLファイルを転送したい場合は、これを選択します。

そして、「ローカルファイル」という文字の上のほうの上向き矢印アイコンをクリックする。

すると、あらかじめ設定しておいたサーバーのディレクトリーにファイルがアップロードされます。

Dreamweaverは、体験版があるようですので、ちょっと試してみるのも良いかもしれません。

興味のある方は、試してみてはいかがでしょう。

他社、他業種のスマートフォンサイトを研究する方法

Sat, 12 May 2012 12:02:10 +0900

明日は、母の日ですね。みなさん、もうプレゼントは決まりましたか？

ところで、みなさんはスマートフォン向けサイトを作るにあたって、いろんなスマホサイトを見ているのではないでしょうか？

他社、他業種のスマートフォンサイトを見ていると、参考になるものがたくさんあります。

そして、自社にも取り入れたいなぁと思うことが多々あることと思います。

ただ、どういうふうにやれば、同じように作れるのか、疑問に思うことがあると思うんです。

そんなときに、どうやって作っているのか研究する方法があるんですね。

それは、SafariというApple社が提供しているブラウザを使うことでできるんです。

Safariは、以前の記事で、iPhoneのブラウザとしても採用されていることは、解説しました。

実は、この方法は、jqueryMobileを使って、サイトを作る際にも重宝するので、慣れておくと一石二鳥なのです。

やり方をちょっとだけ紹介しておきますね。

まず、パソコンにSafariが入っていないという方は、インストールして下さい。

「Safari」で検索すると無料ダウンロードのページがでてきますので、そちらからインストールできます。

そして、インストールが完了したら、以下のようにやってみてください。

以下の画像を例として、手順を説明します。

画像の上のほうに、皆藤愛子さんの写真と「スマートフォンサイトＯＰＥＮ」の文字が書かれたバナーがあるかと思います。

これは、１枚目のバナーなのですが、実は、下に１から５の数字がある通り、５枚のバナーがあります。

これが、一定間隔で自動的にスライドするようになっています。

実際にSafariで表示させてみると、動きをみることができます。

以下が例題に使っているニッポンレンタカーのスマートフォンサイトのＵＲＬです。

http://www.nipponrentacar.co.jp/s/

さて、この部分、「一体どうやって作っているんだろう？」と思ったときの調べ方です。

１．Safariで、研究したいスマートフォンサイトを表示する。

このとき、スマートフォンサイト用のＵＲＬを入れて表示させて下さい。でないと、パソコン用が表示されてしまいます。

２．Safariのメニューバーにある「開発メニュー」をクリックし、「Webインスペクタを表示」を選択する。

すると、画像の下の方にあるようなHTMLやCSSのコードが表示されます。

３．これらのコードの調べたい部分を参考にする。

今回の場合は、バナーがスライドする部分を見てみるということです。

そして、自分のサイトに合せて、自分でコードを書いて自分のサイトに取り入れる。

このときの注意は、著作権等の権利について、十分注意することです。

ですので、あくまでも参考にして、オリジナルのものを作るということになります。

ざっとこんな感じですが、SafariのWebインスペクタは、とてもいろいろな機能が備わっていて、開発には重宝しますので、慣れておいて損はないと思います。

これが使えるようになると、開発の幅がうんと広がること間違いなしです。

ぜひ、チャレンジしてみて下さいね。