スマートフォンサイト設計の５ポイント（配布）

１か月くらい前になりますが、当社でこんなテーマでセミナーを開催いたしまして、スマートフォンサイト構築をテーマにしたセッションを担当いたしました。私はこのシリーズのセミナーではだいたい司会＆パネルディスカッションのモデレータを務めることが多いのですが、セミナー全体の構成や、当社担当セッションのシナリオ構成、資料作成を担当していますので、実際には自分がセッションを担当しているようなものだったりします。

ようやく１年と少し、こういったセミナーを経験してみて言えるのは「場数って大事」ってこと。最初のころは「こんなもんかな」と思っていた内容も、今振り返ってみると、「アレはなかったな・・・笑」と苦笑いしてしまうようなシナリオや、立ち振る舞いもあったりしています。きっと１年後も続けていたら、それはそれで少しは成長しているから、今のことを同じように思っているんだろうと思います。

最近は、新規、リニューアル問わず、Webサイト制作の話が増えてきていて、特にCMS導入の話が圧倒的。そしてそれに付随して、スマートフォンへの対応、という要件もほぼ確実に入ってくるようになってきています。

私も大手の企業様、地方自治体様などで、スマートフォンサイトの制作を行ってきましたが、サイトを作ることそれ自体はそんなに難しくない。ライブラリも出ているし、従来のフィーチャーフォンのようにブラウザの制約もそんなにあるわけではないので、普通にHTMLを組んでいけばよい。もっとも、HTML5であることが望ましいのですが。

PCサイトとの決定的な違いは、利用シーンとターゲット。机に置かれた画面を見ながらマウスでスクロールするPC向けWebサイトと違い、カフェでもお茶の間でもキッチンでも布団の中でもお風呂場でもジェットコースターに乗りながらでも見ることができるスマートフォンサイトは、利用する場所や時間帯、目的が違うわけです。そんなことを常に意識しながら、スマートフォンを含めた（場合によってはタブレット端末やフィーチャーフォンも含めた）企業サイトの全体設計をするわけですが、そんな経験から自分なりに考えているスマートフォンサイト設計のポイントについてのメモを、今回のテーマとしてみました。

それでは、スマートフォンサイトを設計するときのポイントをご説明します。でもあくまで２０１１年９月現在のものであることを忘れずに。１年後には全然違う考え方になっているかもしれません。

①最適なコンテンツマネジメントシステム（CMS）の導入

• ワンソース・マルチユースが実現できるかどうか（１つのHTML要素を様々なデバイス向けに再利用できること）
• トーン＆マナーをCMSで吸収できるかどうか
• デザインやコーディングを制約なくデザインできるか

なんといっても、１つ目のポイントはCMSの導入。マルチデバイスへ対応するのであればほぼ必須ツールです。きちんとHTMLを構造化できていて、それぞれの端末に出し分けられるよう設計されたCMSであれば、正直CMSはなんでもいいと思っています。もちろん、スケーラブルであることや、安定している製品であることは重要ですが、とにかく大規模になりがち（将来的にコンテンツが増えていくという前提でも同じ）なサイトであれば、こういったシステムでWebサイトを管理していくことは必須です。

CMSは、安かろう悪かろうなところは正直あります。規模が小さくて、１年後もあんまり変わらない大きさであることがすでに分かっているのなら、MTやWPなどのOSSでサクッと作ってしまうのがきっと正解で、そこに何百万円もかけてはいけません。もっともMT,WPもとても優秀なツールなので、もちろんスマートフォンにも対応できますし、ある程度の規模までなら立派な企業サイト構築も可能です。なんといっても強みは開発コミュニティの充実ぷり。世界中に開発者がいるから、有象無象のプラグインが出ており、上手に使えばとても高機能なCMSにも変身します。ただし不具合時の保証はないのでご注意を。サイトを運営する側にも、ある程度のスキルが必要になるタイプでもあります。

②デバイスごとの利用シーンやゴールを意識する

• デバイスによって利用シーンは異なる。同じコンテンツを提供しているだけではダメ。

冒頭にも書いたとおりですが、スマートフォンのサイトって、PCサイトとは利用シーンが全然違うことがあります。昔担当したことがあるアクセス解析の商談で 、住宅メーカーさんがいるんですが、住宅メーカーさんのPCサイトとスマートフォンサイトの利用シーンは、コンテンツ、利用傾向、ゴールがまったく違っていることが分かって、それに合わせた改善を行うことで、ものすごくビジネスに貢献したということがあります。

私のサイト構築経験でも、業種問わず、利用するヒト、タイミングが違うことがほとんどで、それに合わせてサイトマップを作成し、導線設計をしています。

③アプリとの親和性を意識する

• スマートフォンサイトは、ソーシャルメディアからの流入がメイン
• スマートフォンサイトからは、アプリと連動して目的達成を考える

iPhoneやAndroidを使う最大のメリットは、豊富なアプリです。スマホを持っているならこれは誰もが共感できるはずですが、アプリが入っていないスマホなんて、ただの電池の持ちの悪いデカいケータイです。だからこそ、このアプリとサイトを連動させることが重要です。

TwitterやFacebookがこれほど普及したのもの、スマホの普及が大きな要因になっているのは有名な話。実際のデータからも、iPhoneがリリースされた直後から、Twitterの利用人口が爆発的に増加しています。

Twitterが普及しだすと、いろんなサイトに「ツイートボタン」が登場し、みんなそれを押すようになります。Facebookも同じくして、「いいね」ボタンがあちこちに登場するようになり、バイラルによる伝播はますます一般的になりました。

そうすると、それをみんなが見るようになります。友達のツイートで、「このサイト面白い」という内容があったら、そのURLをクリックすることもあると思います。Facebookで、「○○さんがこのリンクについていいね！と言っています」というのを見たら、アクセスすることもあるでしょう。スマートフォンの利用者は、割とそういうことに柔軟で、結果としてスマートフォンサイトへの流入は、ソーシャルメディアからの流入がとても多く、重要な導線になってきています。

ところで、スマートフォンサイト訪問者はどこへ行くのでしょうか。何か目的をもってPCサイトのように検索してきた人なら、目的の情報が得られればそのまま閉じてしまうかもしれませんが、仮にそうであっても、その目的が情報収集ではなく、お問い合わせだったとすれば、ワンタッチですぐに電話がかけられるよう、電話番号へは電話機能へのリンクを貼っておくことが重要ですし、目的地の場所を探しているのだったら、地図アプリへのリンクや、GPSで自分の場所を知らせてもらってナビゲーションを支援してあげることが大切です。

ではソーシャルメディアから流入してきた人っていうのはどうかというと、そんなに目的を持ってきた人は少なくて、「面白いと友達が言っていたから」「タイトルが気になったから」という理由が多いです。そういった訪問者は、実際に自分でその内容を確かめることができればそのサイトとはサヨナラです。サヨナラなんですが、もしその内容が、読んだ本人にとっても興味深いもので、共感できるものであったなら、「ツイート」するかもしれませんし、「いいね！」するかもしれません。そういった連携がスマホからカンタンにできることが必要で、そういったアプリに渡してあげる、あるいは簡単にブックマークできるような仕掛けが必要になってきます。

④端末とは割り切ったお付き合いを

• すべての機種・組み合わせへの対応はもはや不可能。標準の組み合わせに対応すればOK
• スマートフォンサイトの構築費用は、PCサイトと同じくらいかかると考えておいたほうがよい

昔、携帯サイトなんかでは、「全＊＊機種に対応」なんてことも言われましたが、もはやそんなの無理な話。全キャリア全機種を検証していたら、それだけで何週間もかかってしまうものでした。

スマートフォンサイトに取り組み始めた頃は、当時はiPhone3Gしかなかったし、搭載ブラウザもSafariしかなかったので、「iPhone3G＋Safari」だけを検証用としてみておけばよいものでした。

そんなスマートフォン市場ですが、あっという間にがこれだけ盛り上がってくると、Android、Windowsなどさまざま登場し、iPhoneもiOS5まで出てきて、Androidも1.6から3.Xまで出ていて、ブラウザも標準のものからDolphinやFirefox、Operaなんかも出てきています。じゃあどんだけ対応しなければならないのよ、といえば、計算するなら（iOSとAndroid）で言えば

iOSのバージョン×iPhone用ブラウザ＋AndroidのVersion×Android用のブラウザ×機種数になるわけなんですが、すでにこれだけでも現実的ではないレベルに来ています。

じゃあどこで線引きをするかってことになるんですが、私はiOS4系Safari、Android2系、３系の標準ブラウザ。これで全体の80％近くはカバーできてるそうです。アプリだとなかなかこうはいきませんが、今回はWebサイトのなので、こんなかんじでいいのかなと思っています。

また、製作コストについても触れておきたいと思うんですが、制作コストって、PCサイトと同等に考えておいたほうがいい。コンテンツも少ないし、表示できる範囲も少ないし、安くできるんじゃないの？って思われがちですが、むしろ逆で、そういう制約があるからこそ、情報設計に気をつけなければならないし、逆にHTML５にしっかり対応しているスマートフォンブラウザは、そういった新しい技術を使った表現なんかも可能になるため、CSS3やJavascriptの知識が大いに必要になってくるわけです。そういう意味で、サイトは小さいかもしれないけれど、それなりにコストがかかるんじゃないかと思います。

⑤HTML5＋CSS3でユーザにやさしいデザイン

• スマートフォンサイトは、HTML5で設計を
• ライブラリをベースに開発するのも有効

４つ目の続きにもなってしまいますが、スマートフォンに搭載されている標準のブラウザはHTML5に対応しています。IE6などの問題児くんがそもそも存在しないので、HTML5でシンプルにコーディングすることができるほか、HTML5+CSS3によって可能になったリッチな表現も、古い端末を意識せずに実装することができます。

これをさらに簡単に実現できるライブラリがいくつか出ています。最初のころはiUi、jQtouch、iWebKitなんかが主流ですが、最近だとjQuery Mobileがかなり有力です。こういったライブラリをベースに開発していくと、かなりの工数を抑えながら作ることができます。きっとほとんどのサイトで、こういったものが使われていると思います。便利な世の中です、まったく。

まとめ

まとめとしてはこんなかんじ。

• 最適なコンテンツマネジメントシステム（CMS）を導入
• デバイスごとの利用シーンの違いを意識する
• スマートフォンアプリとの親和性を意識する
• 端末には割り切って対応する
• HTML5+CSS3でユーザに優しいデザインを

いよいよスマートフォンの割合が、フィーチャーフォンを上回ろうとしていますし、PCの出荷台数も超えてきています。

さらにこれからはPCを持つ人自体が減っていくと思いますし、逆にスマートフォンやタブレット端末が一人１台が普通になる日も近いんだと思います。Webサイトも、PC向けよりもスマートフォン向けに最適化するっていうのがメインになってくるかもしれないのです。

3年後には、Webのあり方がまったく変わっているかもしれません。ワクワクしますねー。

公式のレポートページはこちらです。ぜひご覧くださいませ。

もともとはロフトワークさんという制作会社と一緒に始めているセミナーですが、毎回構成は同じで、ロフトワーク、弊社、ゲストスピーカーという流れて開催しています（無料）。

私自身が登場することはあまり多くないですが、事前座談会だったり、パネルディスカッションのモデレータをさせてもらっりしてまして、実は弊社のセッションの講演資料については、ぜんぶ私が書いてます。過去５回分のセミナーについては、資料を公開しておりまして、みなさんから貴重な感想もいただいており、ただ感謝のみです。みなさんに成長させてもらっています。

以下の資料は、講演目的で作成しているものなので、はっきり言ってこれだけ見ても内容は２０%ぐらいしか伝わらないと思いますが、よろしければどうぞ。

２０１１年６月現在も、シリーズ開催しています。よろしければご参加くださいませ。
http://business.biglobe.ne.jp/news/seminar/webengagement.html

#1　成果が生まれるWeb基盤５要素（2011.09）

#2　ソーシャルを実現するクラウドプラットフォーム（2010.11）

#3　Web・モバイルキャンペーンを実現する最適ソリューション（2010.12）
http://business.biglobe.ne.jp/news/seminar/report_webeng03.html（PDF）

#4　30分でわかるアクセス解析（2011.01）
http://business.biglobe.ne.jp/news/seminar/report_webeng04.html（PDF）

#5　アーンドメディアでキズナを強めるWebマーケティング（2011.02）

２０１１年６月現在も、シリーズ開催しています。よろしければご参加くださいませ。
http://business.biglobe.ne.jp/news/seminar/webengagement.html

仕事でもfacebookを使うことが増えていたり、提案でもfacebook抜きでは話ができなくなってきたり、全体的に「ソーシャル」抜きではWebビジネスは続かない雰囲気になっている中で、どんどん「ソーシャル化してる人・企業」と「そうでない人・企業」の格差が生まれてきている。
そしてそのスキマを埋めよう、あるいは気付かせてあげようという意味で、いろんな本が出てきているのも事実。でも「そうでない人・企業」は、そういった存在にすら気付いていないパターンが多いのも事実。結果として、「情報格差」がどんどん広がるばかり。

確かにWebサービスだって盛者必衰で、facebookも今は快進撃でも3年後とかに残ってるかどうかは誰にもわからないし、もしかしたらfacebookを凌駕するサービスがそのころに生まれているかもしれないし、twitterはもうなくなってるかもしれないし、一時の流行に惑わされるのもどうかという意見はあるのかもしれないけれど、消費者行動のパターンは今本当に根底から変わってきていて、それがたまたまfacebookやtwitterが相性よく活用されているだけなんですよ。

だから「facebookを使う、使わない」という議論をするんではなくて、今の消費者の行動パターンに、企業がどう合わせていくか、という視点で考えてほしいもの。それが結果的にfacebookではないかもしれないけれど、それはそれで間違っていない方向だと思うし、正解はいまのところないんだと思う。ただひとつ言えるのは、「今のやり方だともう通用しませんよ」ということか。

最近、いろいろセミナーで話したり、勉強したりして思うことでした。なかなかアウトプットする時間がないのが最近の悩み。インプットだけはやってるつもりなんですが、パンクしそうです。

全体的に俯瞰するなら

フェイスブックインパクト つながりが変える企業戦略
	高広伯彦 池田紀行 熊村剛輔 原裕 松本泰輔 宣伝会議 2011-04-15 売り上げランキング : 1090 Amazonで詳しく見る by G-Tools

現場の雰囲気を理解するなら

ソーシャルメディアマーケター美咲 新人担当者 美咲の仕事帳
	池田 紀行 akikata shiho 翔泳社 2011-03-16 売り上げランキング : 3453 Amazonで詳しく見る by G-Tools

歴史から紐解いて学ぶには

ソーシャルメディア・ダイナミクス ～事例と現場の声からひもとく、成功企業のソーシャルメディア戦略～
	斉藤徹 ループス・コミュニケーションズ 毎日コミュニケーションズ 2011-01-20 売り上げランキング : 6521 Amazonで詳しく見る by G-Tools

効果測定について学びたかったら

実践ソーシャル・メディア・マーケティング 戦略・戦術・効果測定の新法則
	ジム・スターン 酒井泰介 朝日新聞出版 2011-02-18 売り上げランキング : 28511 Amazonで詳しく見る by G-Tools

キュレーション、というコトバを聞いたことがないなら

キュレーションの時代 「つながり」の情報革命が始まる (ちくま新書)
	佐々木 俊尚 筑摩書房 2011-02-09 売り上げランキング : 531 Amazonで詳しく見る by G-Tools

シェアリング、というコトバを聞いたことがないなら

シェア <共有>からビジネスを生みだす新戦略
	レイチェル・ボッツマン ルー・ロジャース 小林 弘人 日本放送出版協会 2010-12-16 売り上げランキング : 623 Amazonで詳しく見る by G-Tools

もっと根底の、マーケティングの流れを理解するなら

コトラーのマーケティング3.0　ソーシャル・メディア時代の新法則
	フィリップ・コトラー ヘルマワン・カルタジャヤ イワン・セティアワン 恩藏 直人 朝日新聞出版 2010-09-07 売り上げランキング : 1108 Amazonで詳しく見る by G-Tools

さらにその「うねり」を理解するなら

グランズウェル ソーシャルテクノロジーによる企業戦略 (Harvard Business School Press)
	シャーリーン・リー ジョシュ・バーノフ 伊東 奈美子 翔泳社 2008-11-18 売り上げランキング : 6827 Amazonで詳しく見る by G-Tools

さっきの「美咲」が出る前に同じ人が書いている本。内容的には同じかな。

キズナのマーケティング ソーシャルメディアが切り拓くマーケティング新時代 (アスキー新書)
	池田 紀行 アスキー・メディアワークス 2010-04-09 売り上げランキング : 39642 Amazonで詳しく見る by G-Tools

トリプルメディアを知ったかぶりしちゃったことがある人は

トリプルメディアマーケティング ソーシャルメディア、自社メディア、広告の連携戦略
	横山 隆治 インプレスジャパン 2010-06-25 売り上げランキング : 4137 Amazonで詳しく見る by G-Tools

いろいろ読んでるつもりですが、ひとつひとつ消化するのも大変だ。。。。

グルーポンのおせち問題にはじまり、国内でもリクルートがポンパレを立ち上げたりして、フラッシュマーケティングが世の中をにぎわせているけれども、いつまで盛り上がるかはともかく（個人的にフラッシュマーケティングはあまり好きではないのだけれど）、問題続きで大変なことになっているグルーポンに向けて、「もっとこうしたらいいんじゃないの」的なアイディアを勝手に考えてみました。

CEOも謝ってます。

ただ、書いてはみたけれど、自分自身があまりこれ系のサービスを使ったことがないので、もうすでに存在していたりしているかもしれませんが、その場合は温かい目でスルーしていただければ幸いです。

たとえばこんなグルーポンシステムがあったら、どうでしょう。盛り上がりますかね・・・。

ギャクーポン（逆ーポン）

購入予定者が、「＊＊をXXXX円で買いたい」というリクエストを投稿することができ、他の購入予定者はそのリクエストに賛同することができる。賛同した場合は一定期間、その条件での購入意欲があったものとみなし、その条件で出店するお店が登場すれば成立する。その際、グルーポン側には成立金額の＊％が支払われる、というもの。なかなか成立しない場合もあるかもしれないけれど、ニーズが丸見えになるので、出店者側も興味深いかもしれません。

ピッタリーポン

購入予定者が100名、というように決まっていて、購入可能期間があらかじめ決められている。90名ぐらいまでは先着順にカウントされるが、のこり10％を切ったあたりから残り何名かわからなくなる。そしてちょうど100名ぴったりだったら成立、そうでなければ取引が消滅する。
・・・・まあ、誰が嬉しいのか？っていう議論の余地は大いにありますが・・。

プリペーポン

あらかじめグルーポン側にデポジットを支払っておき、その金額の範囲で購入することができる仕組み。グルーポン側は、出店者に対し、デポジットからあらかじめ想定売上の＊％を前払いし、グルーポン成立後の条件に応じて不足分が支払われる仕組み。
Eｄｙなどの電子マネーと組めば比較的簡単に実現できそうな仕組みではあるが・・。

これは、このあいだ問題になったたいやきクーポン1300枚使用中止のニュースみたいな問題を解決できるかもしれないと思って。

アワセワザーポン

出店者が組んで出店できるシステム。たとえば「エステ＋化粧品」「チーズ＋ワイン」「おせち＋寿司」「宿泊＋レストラン＋遊覧飛行」など。何らかの関係性のある商品が組むことで、付加価値をつけやすくなるとともに、連帯責任を負うことにもなるため、おせち事件のような事態を防ぐ効果もあるかも。

グルーポンリーダーの設置

航空券のQRコードリーダーのような端末を出店者にはレンタルする。出店終了後はグルーポンに送付返却。携帯、あるいは印刷して購入。偽造防止。これもたいやき事件の防止になるかも。

定期ぽん

毎月購読できるクーポン。あまりアイディアは膨らみません。。。特に新しい仕組み、ではないか。サブスクリプション的な利用ができるかな、と思ったり。

いろんな商品をグルーポン

電気代とか、電話代とか、ガス代とかをグルーポンに出したらどうなっちゃうんだろう・・・とか。誰かアイディアを考えてください・・・。

・・・なんて、いろいろ考えてみたものの、今の延長線上で大して斬新なアイディアは浮かばなかった・・

でも、こういうアイディアフラッシュって、アタマがリフレッシュされていいものです。もうちょっとゆっくり考える時間が欲しいのでした。

グルーポンのおせち問題に閣下はお怒りのようです。

普段は大崎におりまして、丸亀製麺によく行くんですけれども、ここのコストパフォーマンスは他の飲食店の追随を許さないほど良いと思っておりまして、仕事で遅くなりそうなときはかなりの確率でお世話になっています。

味・価格・営業時間とも特に不満はないんですけれども、たまーに気になることがありエントリー。それは、、

天ぷらは、時間の経過とともに価格を下げるべき

丸亀製麺に天ぷらは必須アイテムで、特に自分の場合は野菜かき揚げ（130円）か、ししゃも天（100円）がかなりのヘビーローテーションなんですけれど、たまに運が悪く、客の回転が鈍いときなんかに行くと、冷めてシットリとした野菜かき揚げしかなかったりするわけです。それでも130円。揚げたてでも130円。ちょっとそこが引っかかるわけです。

たとえばこれが、“半額”とかになってると納得してそれを取りますが、定価だとちょっと、あの“揚げたてのうまさ”を知ってる身としては不満が残ります。

半額コーナーのトレイを用意してもらって、そこに載ってる天ぷらはすべて半額、とかにしてもらえば、たとえば自分の場合なら、その安いかき揚げ（130×0.5＝65円）に満足し、「ついでにおにぎり（120円）も・・・」という確率が確実に高まります。

どうせ残ったら処分してしまうんだから、そういう作戦で客単価UPを狙うっていう戦略はいかがでしょうかね。店員さん、多いんだから。

先日ローンチしたWebサイトは、CMSで管理されたWebサイトにしたのだけれど、PCサイト、携帯サイト、スマフォンサイトをひとつのCMSで一元管理するという、カンタンなようでカンタンでなかったプロジェクトでした。

プロジェクト、といっても、十分な予算がとれず、ほぼ自分が設計からコーディングから担当するという、この会社の中ではちょっとウラ技で、かなりリスクの高い進め方だったが、なんとか納期通りローンチに漕ぎ着けたのは、前回別のプロジェクト（今も進行中）で進捗管理がうまくいかなくて迷惑をかけてしまった反省による責任感と、効率的なプロジェクト管理ツールで進められたことが大きいのです。あと、はPricelessの領域で言えば、なかなか今の業務では自分が手を動かしてコーディング、という経験はあまり積めないので、そういう意味でも貴重。

というわけで忘れないうちに、今回の案件を通して学んだことをメモ。

PCサイトと携帯サイトのトーン＆マナー

今回、切に思ったのは、PCサイトと携帯サイトというのは、これほどまでにトーン＆マナーが違うのか、ということだった。一見すると、PCサイトのコンテンツの一部を携帯サイトで表示してあげればそれでいいんじゃんと思ってしまいがちで、実は半分ぐらいはそれで対応できる。しかし残りの半分は、同じ要素でもPC版、携帯版と二種類登録することになったり、分かりやすいところでは画像ファイルなんかは携帯用に圧縮してあげないと、そもそも表示ができないなんてこともしょっちゅうだ。

ただ、CMSを使えば、要素を再利用できるので、おおかたうまくいく。また、携帯サイトは全角カタカナ、全角英数、全角数字は基本的には半角表示するのがマナーなので、入力画面では全角で記入しておき、CMS側で半角に変換する関数をコールしてあげるだけで、ひとつの要素を出し分けることができる。あるいは、PC版で入力したパラグラフも、携帯サイトでは途中で改行したい、なんていう場合でも、CMS側で正規表現で変換し、よりシンプルなカタチで表現することができる。

しかし、デザイン部分の統合はとても難しい。PC版では<ul><li>といったHTMLタグを使ってCSSでキレイにデザインしていた場合、それをそのまま携帯サイトに表示すると、でっかい箇条書きで「・」で表示されてしまったり、意図しない部分でなぜか改行が入ってしまったり、キャリアと端末に依存しまくりなところで格闘しなければならない。だからどんどんシンプルになっていき、結局は「携帯サイト向けには新しく登録しなおしましょう」ということになる。

携帯サイトとスマフォンのトーン＆マナー

こちらはあまり違いはないだろうと思っていたが、なんのなんの。携帯向けのソースを使おうとすると、シンプルすぎてつまらない。今回はライブラリとしてJQtouchを使ったんだけども、その表現力の高さを引き出すためには、PCサイトと同じように外部CSSでしっかり表現をしていかないと、とても残念な見栄えになってしまう。コンテンツもPCとほぼ同様のボリュームを配置することができるため、情報設計をしっかり考えておかないといけない。さらに、スマフォンの場合、縦置きと横置きの両パターンに、どちらにも崩れないようにコーディングする必要があり、画像素材の大きさや、CSSの書き方は試行錯誤だった。

また、PCや携帯サイトではアンカーリンク（内部リンク）が使えるが、iPhone Safariはアンカーが効かない。そのため、ひたすらスクロールするわけなんだけども、そういうことを考慮しなければならないのも、今回わかったTIPSだったりする（初心者なもので。。）。

また、これは基本的なところだが、スマフォンはJavascriptが有効なので、PCと同じくらい表現力がある。ただしディスプレイが3.5インチ(320X480)の範囲の中で、最も効率的な表現を実装するのがすごく悩んだ。JQtouchの場合、Javascriptによるアニメーションや遷移方法が標準で使えるため、いろいろ試したのだけれど、デモサイトでは面白くても、いざ本番サイトに実装してみると気持ち悪いかんじのアニメーションだったり、単純にうざかったりするので、使う頻度や場所についても検討しないとうるさいサイトになってしまう。このへんは、コーディングする際に、いかにユーザー視点でサイトを見続けられるかというのがポイントなんだと思った。

また、今回は正式に？というわけではないが、Android端末にも同様に表現できるようにした。自分が持っているのがX06HTなので、検証端末としてはそれで勘弁してもらっているが、iPhoneと比べてみると、微妙なところで動きが違ったりして、これからいろんなAndroidが出てくることを考えると、こういった差異を吸収していくのはタダゴトではないなというのが感覚的な思い。Androidでも、ブラウザが何種類もあるし、OSも何パターンもあるし、どこで割り切っていくかはこれからのWeb業界としてはアタマの痛い問題になってくると思う。そしてガラケーのことはもう重視されなくなっていくんだとも思う。

スマフォンサイトとPCサイトのトーン＆マナー

表現力がどちらも豊かだが、スマフォンは画面サイズが小さいのと、タテヨコ可変なので、それをいかに吸収するかがカギになる。PCサイトでは２カラムでも、スマフォンサイトではメインの１カラムのみとして、いかにシンプルに、スマフォンぽくスマートに見せるかという部分が重要。そして、ヨコ置きにしても画面が崩れないようにする（サイトによってはヨコ置きにすると２カラムになったりと、トリッキーな技術を入れているのもある）などの配慮が必要になる。また、全体的なパフォーマンスも重要で、WiFiを前提にしてはいけない。あくまで３Gでもストレスなく表示できないと、重いサイトのレッテルを貼られて終わる。

さらにナビゲーションもPCと違うのは、PCがマウスのクリックに対し、スマフォンは指の腹。当然面積が大きく、タッチ場所も曖昧になるので、PCのテキストリンクをそのまま使うと、使いにくいことこの上なし。リンクは大きめのボタンにする、スマフォンぽくツヤのあるようなナビゲーション（マウスオーバーが効かないため、よりボタンぽく見せる必要あり）が求められていくのです。

あとは、FLASHの対応ね。これは言わずもがな。

普段から使っていれば、感覚的に「ああそうか、これは使いにくいわな」というのが分かってくるものだけど、使っているだけではダメで、このサイトのどこが使いやすいのか、使いにくいのか、こんなことしたらどうなっちゃうんだろう、という興味を持ってサイトを見るようにすると、技術的なことは置いておいても、トーン＆マナーやIA/UXの観点では自然に知見がついていくんじゃないかと思う。自分もまだまだ勉強しないと、この業界に残れない。特にこの業界の若い人たちには、そういう点でWebサイトを使ってほしいと思う。Webの１年後とか、もう全然読めないんだもん（昔から読めたことがありませんが）。

あとは、納品物のドキュメント作成。もう一息なんですが、本日は事情により休暇を頂き、ついでに一旦休憩。

今回使用したCMS：WebRelease2

それにしてもAmazonの過剰包装は有名な話ですが、ついに自分にもやってきました。
開けたとこ。

いろいろあるんだけど、肝心のモノだけ箱に入れたところ。

まあ、メール便でいいよねこういうの。フルフィルメントサービスの効率化って難しい問題だ。

なかなか書けないでいたんですが、ついにAndroidデビューした。HTC DesireⅡ。

iPhone、iPadは使ってきたものの、Androidは文化というか、お作法が全然違ってて最初は困惑する。UIが似ているから大したことないだろうと思っていたのを反省。まったくの別物だった。何が違うかについてはもっと専門サイトを見ていただいたほうがいいと思うが、iPhoneから切り替えたユーザが素直に感じた印象。おもにアプリ中心。そして全体的にポジティブ系でレビュー。

ブラウザアプリとか日本語入力アプリとかめっちゃある

基本的に、iPhoneの場合は純正のSafariを使うことになっていて、一部Opera miniなんかもあるけど、なんだかなんだSafariに戻ってしまっていた（やっぱりなんか使い勝手イマイチだし）。日本語入力も同じで、iPhone標準の入力システムから逃れることはできず、ATOKがリリースされたときにもちょっとは話題になったけれど、すべてのアプリでATOKが使えるわけではないので、普及も限定的。

Androidの場合、そのへんの制約がない。探せばいろんなブラウザや入力アプリが出てきて、無料のものでも十分使える（標準のアプリがしょぼいという説も）。特にiPhoneユーザにとってはフリック入力に慣れてしまった人もいるので、そういう人をカバーするためのShimejiというアプリなんかもあって、iPhoneからの乗り換えを多少意識している感じもある。

「アドオン」系のアプリがある

ブラウザアプリでも、Twitterアプリでも、拡張性の高そうなアプリで、ダウンロード数が多いものについてはだいたいAdd-Onがリリースされている。Twitterクライアントでイケてそうなtwiccaというアプリなんかは、

• twicca音声検索プラグイン
• twicca Twistarプラグイン
• twicca Googleトレンドプラグイン
• twicca flickrプラグイン
• twicca プロフィール画像プラグイン
• twicca 診断メーカープラグイン
• twicca Facebookプラグイン
• twicca はてなフォトライフプラグイン
• twicca Picasaプラグイン
• twicca 名刺プラグイン
• twicca favstar.fmプラグイン
• twicca twitpicプラグイン

など、使い方もイマイチよくわからなそうなものまで出ていて、なんとなく試してみたくなる。firefoxとかがちゃんとリリースされたら、メチャメチャになりそうなかんじも。

有料アプリの値段がバラバラ

AppStoreの場合は、日本円ではおよそ115円単位での金額設定がなされており、115円、230円、350円、450円、600円ぐらいの価格設定だったと思うが、Androidはバラバラ。341円、391円、245円、163円、409円、81円、82円とか。気になるのは、すべての価格に「約○○円」って、「約」がついているところ。為替変動に引っ張られているのか、その日の為替でおおよその価格設定がなされているのか。たしかに詳しく見てみると、0.99€とか書いてあったりするので、まあそうなんだろうなぁ。

アクセサリの数が少なすぎ

今回はWii以来、めずらしく発売日前にオンラインで予約してたので発売日に届いたのだけれど、カバーとか、充電コードとかいろいろお店で見てみたものの、（当然だが）iPhoneばっかりでDesire用なんて一切置かれていない。仕方なくAmazonで買ったんだけど、それも輸入品だったり、国内メーカーもっとがんばれよーと思ったり。まあこれからなのかな・・・。

OSに足りない点を頑張ってアプリで補ってる

マーケットがオープンだから、実にいろんなアプリが見つかるのだけれど、「これ何に使うの？」ていうようなアプリが山ほどあって、使い始めるとまず最初にしんどく感じるのが、それらのアプリを選別すること。でもよくよく調べてみると、Task管理を効率的にやってあげる系のアプリだったり、留守番電話機能の拡張をしてあげますよ系だったり、電話帳をソートしやすくしてあげますよだったり、いろいろOSで足りない部分を補完してくれそうなものが多い。ホントに意味不明なものも多いけど。

iPhoneの場合は、すべての権限はApple様にあるので、Apple様がやると言わないと何も変わらない点が大きく違う。どちらもメリットデメリットはあるので特に言及しないけれど、この点ひとつをとっても、安心して使いたい人はiPhone、いろいろチャレンジしたい人はAndroid的なすみ分けになるんじゃないかと思った。

基本的にPCに接続しなくてもよい

ここも決定的に違うところで、iPhoneはiTunesという母艦に乗っているかんじで、Androidは帰る場所は特にない。特に驚いたのが、OSのアップデートで、iPhoneの場合はiTunesに接続しないとアップグレードできなかったのが、Androidはそのままアップグレードできるところ。しかもWiFi推奨だけど、3Gでもできるっぽかった（2.1→2.2のときはめんどくさいのでWiFiを使ったけど）。

Googleとの親和性がやっぱり比べ物にならない

iPhoneでも十分だと思っていたけど、やっぱりGmail、カレンダーの親和性は高い。当然といえば当然だが、Gmailでいえばラベルの管理だったり、下書きの管理だったり、カレンダーだったら同期機能がnativeなので、google syncを使わなくてもみんなのカレンダーをしっかり同期できる。

また一番よかったのは、旧端末からの電話帳の移行で、Google contactsを利用したんだけれど、contacts経由で同期させると一瞬で完了してしまったのがうれしかった。同時に、PC上で更新すれば、勝手にAndroid端末にも反映してくれるのがとてもよい。なんだかんだ、PCから入力したほうがいろいろ早いのは当たり前なので・・。あと、picasaの写真を電話帳の人の顔写真に当て込めるのもよい。会社とかだったら、そのロゴとかも登録しておくと、Androidのほうにもいいかんじで挿入されていくのはGood。

音楽系アプリも割り切れば便利。グレーなアプリも。

音楽機能は、正直iPhone/iPodには敵わない。これは「生まれ」が違うので認めるしかない。iPhone/iPodは実にきれいに整理できるし、iTunesとの同期で常にビジュアルで見ながら、かつコンテンツの量も比べ物にならない。

ただAndroidは、PCに接続すれば普通のフォルダ構造が出てきて指定のフォルダにmp3を置けばそれで追加させることはできる。アートワーク情報を持っていれば、そのへんの情報も端末側で表示されるので、見た目はiPhone/iPodとさほど変わらない。ただ、やっぱりフォルダ構造なので、初心者とか、iTunesの同期機能に頼り切っていた人にとってはやっぱりちょっとめんどくさいかもしれない。個人的にはiTunesのときでも手動で転送していたのでさほど不便は感じなかったけれど・・・。

あと、着目すべきはグレーなアプリ。Music Downloader Pro。Proといっても無料なんだけれど、曲名、アーティスト名で検索すると、なぜかわからないけど（？）いろんな曲のmp3ファイルがゴロゴロみつかるアプリ。そしてそれをどんどんダウンロードできてしまうアプリ。昔流行ったファイルダウンロードソフトを彷彿とさせるソフトが、マーケットで普通にダウンロードできてしまうところが、オープンな環境ならではなんだろうな。変な疑い掛けられるのもアレだしウィルスとか感染するのも嫌なので、すぐにアンインストールしたけれど。

GPSにざっくりモード

GPSの精度が2段階あるっていうかんじで、おおよその位置を確認できるモードと、番地レベルまで測定できるモードがあって、後者にしておくと電池の消耗が激しいですよーって警告される。ちなみにiPhoneは、基本的には番地レベルまで測定可能なのがデフォルトだけど、うまいこと、最初にざっくり、時間をおいて詳細レベル、みたいな表現をしている。ここはさすがAppleだなぁと感心するが、Androidはそのへんを割り切っていて、ざっくりモードでいいんじゃん？みたいなかんじ。たしかに、Pocket WiFiとか使い慣れている人にとっては、ざっくりでもだいたい位置がわかるので、そんなに不自由はないんだけどね。

ただし高精度モードについては、Googleマップナビというアプリなんかを使う場合には必須。実際これを使って（近所のすし屋まで自転車で）ナビしてもらったけど、まあよくできてる。これならカーナビは必要ないなと本気で思った次第。

マーケットがたくさんあって、バリエーションが豊富

最後に、これはアプリ開発者にとっては朗報なのかもしれないが、iPhoneはJailbreakでもしない限り、すべてのアプリはAppStoreからなので、アプリ開発者にとって、ダウンロード数を増やせるかどうかはApple様のご機嫌とりにかかっている。カテゴリごとのトップ25、総合のトップ25などにいかにランクインしていないと、実は「ない」のとほぼ同じだというのは業界では有名な話。この間そのへんに詳しい同僚と話した時にも、すべてAppleが牛耳っているので、説明文一つをとっても審査の基準が厳しく、ビジネス的にもガッツリ持っていかれるので非常にシビアという話を聞いた。115円で販売してるアプリなんて、ほとんど儲けはありませんよというのも業界の人の話。

Androidの場合、そういうAppStoreを自分で作れるのが決定的に違うところ。まあ自分で作っても別に面白くもなんともないんだけれど、少なくともそういう媒体が複数出てこれば、開発者にとってはアプリをいろんなカタチで露出させられる可能性がでてくるわけで、ビジネスチャンスは拡がる。また、言語の縛りもないので、たとえばGoogleオフィシャルのAndroidマーケットなんかでも、英語、日本語、ヨーロッパの何とか語、中国語、韓国語などがいろいろ混ざっており、多様なマーケットになっているのも面白い。エンジニアが世界に出ていくのに最も近いパスかもしれないんじゃないかと思った瞬間だった。

ただ、それだけに残念なアプリも多数。たとえばツールカテゴリで見つけた下の変なアプリ。ダウンロードする気にもならないし、一体どんな機能なのかもわからない。無理やり日本語に訳して掲載してしまった悲しい例。せっかくなら、原語のテキストも掲載しておいてほしかった。ここまで意味不明だと、突っ込む気にもらならい。

アプリ名：嫌なやつカレンダーの通知

説明文：イベントカレンダーの繰り返しアラームを！のみ0.99€をバイヤーのための最初の500アンインストールLiteとのverは解決法最後の金／Cの新しいもの！snoozes昨日画面保存後に再起動オートロックを解除する：ヘルプ―新しいUI－シェイクの携帯電話を停止するまたはうたた寝をする！－ポップアップ画面、アラームを増やす！のテーマを-Vibrate/Ring/Led-スヌーズを！-株カレンダー

というわけで、まだまだ使い始めたばかりですが、iPhone／Androidどちらも知ってる人になっていたほうが、こういうWebの仕事をしていると、何かと有利なので、がんばります。

最後に、今回買ったアクセサリ。標準でUSBコードは付いてくるけど、家と会社に一本ずつないと不便なので、同じような方は1本追加購入されたほうがいいかと思います。

PLANEX Xperia・X06HT HTC Desire対応 充電&データ転送 MicroUSBケーブル ブラック (パソコン接続専用)BN-XperiaPB プラネックス 2010-05-20 売り上げランキング : 171 おすすめ平均 Amazonで詳しく見る by G-Tools

SanDisk microSDHC 16GB class2 バルク品 SanDisk 売り上げランキング : 54 おすすめ平均 Amazonで詳しく見る by G-Tools

Case-Mate SoftBank X06HT / HTC Desire Barely There Case with Screen Protector, Matte Hot Pink 「X06HT / HTC デザイア」 専用 ベアリー・ゼア ケース (液晶保護シート つき) グロス・ホワイト CM011618 Case-Mate 売り上げランキング : 5016 おすすめ平均 Amazonで詳しく見る by G-Tools

でもなんか好みに合わなくて、結局こっちにしました。

レイアウト HTC Desire SoftBank X06HT用シリコンジャケット/ブラック RT-HX06C1/B レイ・アウト 2010-05-14 売り上げランキング : 6113 おすすめ平均 Amazonで詳しく見る by G-Tools

iPadが出たときにも、こんなかんじでイケるのかと思っていたけど（まだこれから出てくるかもしれないけど）、そこはやっぱりGoogleの技術力ってことで、まずはAndroidからスタートというかんじだろうか。それにしてもこのデモ映像はワクワクする。日本のカーナビメーカーも、対応を迫られることは間違いないだろう。

そもそもカーナビってこの時代なのになんでこんなにスタンドアロンなマシンなんだろうと思ってて、もちろんGPSで衛星と通信はしているものの、地図のデータはアップデートされないわ、更新費用はやたら高いわ（20000円とか）、そもそもカーナビ端末自体が20万とか30万とか、あり得ないでしょう。

もちろんGoogleナビも万能じゃないので、通信電波が圏外のところでは現在位置は把握できても地図表示はうまくできないだろうし、特に山奥などを走っているときはそのあたりの影響は大きいかもしれない。ローカルにデータを持っておくことの重要性は、そこかもしれないが、それは別にカーナビじゃなくても、地図を一冊積んでおけばいい話。あるいはGoogleナビも進化して、ある程度の制度の地図をローカルで持たせておくとか（たぶんすぐできると思う）。

近所のポプラがつぶれ、また違うコンビニができるみたいだけど、反映されない。圏央道もどんどんつながり、空を飛んでいるような奇跡がカーナビに残る。そういう残念なカーナビ生活から早く脱出したいと思うのであります。

九月もう終わりだけど、今月の予定は本来ならPMPを受験しているはずだったんだけど、いろいろあってそんな準備もできず。そのかわり、やたら読書の多い月間でもあった。また言い訳・・

そんな本たち。詳しくはAmazonのレビューにて。

ザ・コピーライティング―心の琴線にふれる言葉の法則 ジョン・ケープルズ 神田 昌典 ダイヤモンド社 2008-09-20 売り上げランキング : 9987 おすすめ平均 Amazonで詳しく見る by G-Tools

スイッチ！ チップ・ハース ダン・ハース 千葉敏生 早川書房 2010-08-06 売り上げランキング : 788 おすすめ平均 Amazonで詳しく見る by G-Tools

あたりまえだけどなかなかできない 33歳からのルール (アスカビジネス) 小倉 広 明日香出版社 2009-06-08 売り上げランキング : 6302 おすすめ平均 Amazonで詳しく見る by G-Tools

ツイッター部長のおそれいりこだし―お客様と築く140文字のコミュニティ 末広栄二 日経BP社 2010-09-02 売り上げランキング : 2931 おすすめ平均 Amazonで詳しく見る by G-Tools

キズナのマーケティング ソーシャルメディアが切り拓くマーケティング新時代 (アスキー新書) 池田 紀行 アスキー・メディアワークス 2010-04-09 売り上げランキング : 30171 おすすめ平均 Amazonで詳しく見る by G-Tools

バイラル・ループ　あっという間の急成長にはワケがある アダム・ペネンバーグ 中山 宥 講談社 2010-09-25 売り上げランキング : 851 おすすめ平均 Amazonで詳しく見る by G-Tools

携帯＋iPhoneモバイルサイト制作術　実践的コーディング＆デザイン完全ガイド 久保靖資 豊沢泰尚 MdN 2010-09-14 売り上げランキング : 37473 Amazonで詳しく見る by G-Tools

Marketing to the Social Web: How Digital Customer Communities Build Your Business Larry Weber Wiley 2009-03-03 売り上げランキング : 100077 Amazonで詳しく見る by G-Tools

というかんじで。実にスタバをよく利用した月でもあった。

Amazon　vineからもいろいろ本を頂けるようになったので、これからますます増えていきそうですが、そろそろ会社も自宅も本棚がなくなってきました。