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

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

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

最近は、新規、リニューアル問わず、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

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

先日ローンチした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

Web業界の人には語るまでもない話だが、そんなに詳しくない人向けにお話ししておくと、世の中にはPC向けに作るサイトと携帯電話向けに作るサイトがあって、これまではそれぞれ全くの別物として作ってきた。さらに携帯電話向けのサイトは、同じように見えるサイトであっても実はドコモ向け、au向け、ソフトバンク向けのサイトを作っていることが多く、アドレスも

PC：http://www.aaa.com/
ドコモ：http://www.aaa.com/i/
au：http://www.aaa.com/ez/
Softbank:http://www.aaa.com/j/

のように、ディレクトリを分けて管理しているみたいなかんじが多かった。でもこれは１０年ぐらい前の話。なんでケイタイサイトが分かれていたかというと、公式サイトとして登録されるために、キャリアごとに分けなければならなかった理由のほか、アクセス分析のためだったり、着メロをダウンロードさせるにもファイル形式が違うためだったり、キャリア別の絵文字に互換性がなかったりしたためだ。

URL一本化の実現

そして時代は流れ、そのへんを便利にしようとするサービスや技術が続々と開発された。一つはキャリア自動判定モジュール。これはサービスというよりも技術のほうで、Webサーバを司るApache（アパッチ）と呼ばれるソフトウェアが、携帯電話からアクセスされたときに自動的にその端末がどこのキャリアのものかを判別して、適切なURLを返すというもの。つまりサイトは上のように４つ運営しているものの、公開用のURLは一つでよくなった。「ドコモはこちら」のような表記を最近見かけないのは、そういうことだ。

iPhoneが変えた携帯電話の操作性

2008年頃から日本にiPhoneが上陸。モバイル端末でPCサイトと同じ画面を見ることができるようになった。もっとも以前からフルブラウザ機能はあったが、パケホーダイが適用されなかったり（あっても高価なプランだったり）Javascriptを使えないためにいろんな機能が使えなかったりなど、実用性は全くと言っていいほどなかった。一方でiPhoneは完全に定額制。そしてあの大画面と圧倒的に快適な操作性。この自由さを体験した頃からモバイルサイトのあり方が変わり始めた。

iPhoneが出てくる前からではあるが、その頃からモバイルサイトをFLASH化して見せようとするサービスが登場した。FLASH自体は前から端末には採用されているが、一部のバナーでの利用だったり、ゲームコンテンツだったり、利用は玄的的だった。サイトのFLASH化とは、サイト全体を全面的にFLASHで表現しようとするものだ。型さえ決めてしまえば、それにデータを流しこんでやるだけで、FLASHで作りこんだ最適なページを生成することができる。なかなか伝わらないかもしれないが、たとえばこういうもの。

Demo

ニチレイフーズ

モバイルサイトというと、画面サイズやcHTMLの制限により、凝ったデザインやレイアウトはできず、ただひたすら段落を続けて記述していかなければならないため、ものすごく縦長のサイトになっていることが多い（2010年現在でも）。いつまでスクロールすれば終わるの？みたいなことを経験したことがある人も少なくないだろう。長すぎて長すぎて、自分が何を探していたかすら忘れてしまいそうになる。

そこでFLASHサイトの登場

それを解決するのがFLASHサイトだ。一度上のQRコードからアクセスしていただければわかると思うが、膨大な情報量をスクロールしなくても表示（切り替え）ができるというナビゲーションになっている。また初心者にも直感的な操作になっているので、わかりやすく、切り替えるたびに通信は発生しないのでストレスもない。ニチレイのレシピサイトはわかりやすい例だが、他にも不動産物件の検索や、デモにもあるが、座席予約なんかはとても適している表現方法だ。このページの型（テンプレート）を最初に決めてしまえば、あとはデータベースを更新するだけで自動的にページに反映されるので、運用者としても管理がしやすい。
さらに運用者を楽にする側面として、キャリア、機種に一切依存しない（※）ということが挙げられる。機種対応というのは、かつて非常にアナログ作業であり、市場に出ている全ての携帯端末で人が表示確認をするという超アナログ作業が大真面目に行われていた（今でもあるが）。そういう専門業者もいるくらいだが、これだけバンバン新機種が発売されると正直もう限界なかんじ。これらの作業をFLASH側で、画面サイズを判定して自動縮小／拡大したりして、吸収してくれるのだ。

※厳密に言えばFlash Lite1.1以上、というスペックが求められることが多く、おおよそ98％の携帯端末をカバーしている。一方で2％には対応していないが、こちらは古い機種だったりするので、この割合は徐々に0に近づいていくと思う。

FLASH化の課題

ただ、メリットばかりではない。「Webサイトは永遠のベータ版」と、ブラザー工業の方が先日のセミナーで仰っていたがその通りで、Webサイトというのは常に更新作業が発生する。時には大規模なデザイン変更も必要になってくる。そうしたとき、FLASHで作ったサイトというのは通常のHTMLに比べて変更作業が難しい。もちろんFLASHマスターが社内にいれば問題ない話だが、このご時世、そのために人を抱えておくほど余裕のある企業も少ないだろう（だってほとんどの企業にとってWebサイトを作ることは本業ではないのだから）。そのため、そういうことができる制作会社に外注するわけだが、当然、HTMLを編集するよりもコストがかかる。頻繁に更新作業が発生すると、かえってコスト高になってしまう。雑な言い方をすれば、融通がきかない。

システムの観点からも課題はある。FLASHサイトというのは、アクセスする度に必要なデータをデータベースから引っ張ってきて生成する、「動的サイト」に分類される。動的サイトというのは、アクセスする度にサーバー側のプログラムを動かすわけだから、サーバー側の負担がかかる。そのため、静的サイトに比べてアクセス負荷に弱い。大量のアクセスが予想されるようなサイトでは、なかなか採用できないのが現状だ。あとはSEOについても、現段階ではいいとも悪いとも言い難い。このへんは速い速度で進化をしていくので、深くは言及しないが。

さらに、すでに普及しているサイトの（縦長）レイアウト構成に慣れてしまっている人も多く、急にFLASHサイトに出会うと来訪者を混乱させかねないため、かえってユーザビリティを落とすことにもなる。だから今先進的な企業がFLASH対応をしていても、実はレガシーなサイト構成を並行して運用したりして、“実験的に”運用していたりするのだ。

主流が何かを見極めることも重要

一方で、FLASH対応については、Appleが「FLASHは古い」として見切っている。AdobeはそんなAppleに、ラブコールを送っている。今後、ガラケーと呼ばれる日本の携帯は、３年から５年かけて急激に衰退していくとともに、スマートフォンの割合が膨らんでいくと予想される（iPhone以外でも、国内、海外のベンダーが出してくる端末がそうなってくるはず）。Appleが「FLASHは古い」と言っているのは、HTML5、CSS3の普及により、FLASH機能を代替しようと考えているからだ。もしAppleの考えが正しければ、「モバイルサイトのFLASH化」を検討することは、今は良くても３年後、５年後を考えると、勿体無い話になるかもしれない。

とはいってもWebサイトの寿命は３年〜５年程度。Webというのはこのくらいのサイクルで、時代に合わせたリニューアルをしていくのがちょうどいい。だったら当分続くガラケーユーザーの方たちのために、FLASHを採用するっていうのもアリか。

あなたの企業サイトも、FLASH化したら便利になるかどうかという適性をみて判断してほしい。

とりあえず、自分で「いいね！」。。。。と。

CNNによれば、このサイトはGoogleにとって悪夢な出来事だそうで。この記事の内容をまとめるとこう。

Googleはオープンウェブ上のデータを収集・分析して、ここまでの地位を築いたが、likeボタンの情報は収集できない。

likeボタンを設置したサイトが増えれば増えるほど、facebookへのトラフィックが増え、地位が向上する。

facebookの地位が向上すれば、ユーザーからの信頼度も獲得できる。

SEOは、Google/Yahooが創出した、一大産業だが、それが壊れるかもしれない。

というわけで、これからはFEO（Facebook Engine Optimization）というビジネスが生まれるかもしれない。Web業界はいつになったら落ち着くのかね。

Much the way RestyleMe and checkyourimage.com let consumers get fashion and image advice from the crowds, so GoTryItOn gives people a way to get feedback on particular outfits.

Based in New York, GoTryItOn lets users upload digital snapshots of themselves in various outfits. Along with each outfit, they can list the brands included and indicate whether the look is intended for a particular occasion or event. Next, they decide whether to share the look with the site’s whole community or keep it private and share only with friends. Either way, those allowed to see the outfit can then vote for or against it by clicking the upward- or downward-facing hangers, signifying “wear it” and “change it,” respectively. They can also leave comments for the person in the outfit, including any suggestions for modification or improvement. Those wearing the outfits can later give feedback to those who provided reviews to let them know how the outfit worked out. GoTryItOn moderates comments for adherence to its community standards, including awarding badges to members who give consistently good advice. Now in beta, GoTryItOn was an Accelerator Finalist at this year’s SXSW.

引用元: Outfit advice, with help from the crowds – Springwise.

自分が着ている写真をアップロードして、似合ってる（イケてる）かどうかをみんなに判断してもらえるというクラウド？（＝聴衆）サービスです。いわゆるGood（それを着なさい）／Bad（替えなさい）のボタンと、コメントエリアだけというシンプルなインターフェイスで、Good/Badボタンがハンガーの向きによって表現されているのが素敵。そしてみんな厳しいのね・・・。みんなピーコになりたいのかも。

男性もアップしているようで、みなさん手厳しい意見が寄せられております・・・でも手厳しくも、みなさん具体的なアドバイスがあって、ファッションにかける情熱がスゴイですよ。

こういうサービスをサクッと作りたいんだけど、時間も技術も全然足りてない。これだってTwitterだって、新しい技術は何一つ無く、既存技術の組み合わせだけ。あとはヒラメキだけなんだけど、その「枯れた技術」をモノにしているかどうかで、自分が稼げる人材になれるかどうかが決まる。

今も昔も、「手に職」だ。

radikoガジェットをダウンロードしよう!｜radiko.jp.

それだけです。

MySQLのテーブル最適化(効果：微少)

Optimize table ***で、Wordpress関連のテーブルを最適化していく。全部やる必要はなく、きっとwp_postsあたりのテーブルが一番効果があると思うんだけれど、わからないときは全部やってもいいと思いまする。

phpMyAdminなんかが入っていれば、GUI経由でSQLを渡せるので間違いないかと思う。

高速化プラグインの導入

これはいろいろ調べたー。でもメインはここhttp://technolog.jp/website/cms/2096
を参考に、プラグインの有効化を判断していく。

・Bad Behavior（効果：微少）

スパムボットをブロックしてくれるプラグイン、このトラフィックが、本来のユーザートラフィックを圧迫してる可能性もある、とのこと。入れてみたら、確かにいろいろブロックしてくれる。だいぶ助かったのかなぁと思ったが、newsingサイトにピックアップしようとすると、このプラグインのおかげでブロックされてしまうので、削除。せっかくnewsingの許可サイトとして認めらたのに、もったいないので。

・DB Cache Reloaded（効果：少）

言わずもがな、Wordpressは動的CMSなので、毎回DBにクエリを投げてるわけですが、そのクエリをキャッシュしてくれるというもの。Oracleでは標準機能だったと思ったけど、さすがそこはMySQLはシンプルな作りなんですね。効果のほどはわかりませんが、入れておきました。

・Head Cleaner（効果：少）

名前のとおり、ヘッダをコンパクトにしてくれるプラグイン。CSS、Javascriptのキャッシュ・圧縮、不要なコードのフッタ移動など。これは結構インパクトありました。

・WordPress CleanUp（効果：微少）

リビジョンを一括で削除してくれるもの。気にしてなかったけど、確かに無駄なデータだ。一括で消して、Optimize tableをしましょう。いいプラグインです。

・WP Super Cache（効果：中）

これは定番のプラグイン。名前のとおり、ページをキャッシュしてくれるプラグインです。ぜひ入れるべき・・・といいたいところですが、携帯用表示に対応したKtai Styleなどのプラグインを併用するにはいろいろと修正が必要です。面倒くさいので、とりあえず今回は入れてません。あと、ページの修正などをすぐに反映したいときに、いちいちキャッシュをクリアしたりしなければならず、イライラしたこともありまして。

あとはとにかく、不要プラグインの削除！（効果：大）

はっきりいって、これが一番インパクトのある改善です。使っていないプラグインは削除するのはアタリマエ、使っていても、それ本当に必要ですか？というものも多いはず。そういうものは一度バッサリ斬り捨ててみるのです。

てなかんじで、これくらいの基本的なチューニングしかしてないのですが、Firebugで測ってみたら、Before/Afterで3倍ぐらいの改善になりました（WebPageTestでもラクチンでよいです）まあ、3倍になって、ようやく普通のページになっただけだど・・・（今までどんだけ遅かったのよ、というのは大いなる反省です）。

もうひとつ、WebPageTestで試したときに、やたらrakutenのアフィリエイトリンクに読み込みが発生していたりするもんだから（非同期だからそんなに気にしなくてもいいんだけど）、ちょっとソースを綺麗にするためにも削除しました。

これからもよろしくお願いいたします。

インターネットでラジオが聴ける・・・・と言われても、「以前から聴いてるし」なんて思うかもしれない。iTunesやWindows media player経由だったら世界中のラジオが聴けるわけで・・・といっても、あれはアーカイブ版。こちらは、サイマル放送。サイマル放送っていうのは同時放送って意味。ケータイのワンセグなんかがそれに当たります。

で、3月15日にオープンしたという、ラジコの話。同僚に教えていただきました。

IPサイマルラジオ「radiko.jp」が示すラジオ業界の課題

関東および関西エリアであれば、インターネットでいつものラジオをリアルタイムに聴取できる――こんなサービスが実験的に始まった。

http://japan.cnet.com/column/pers/story/0,2000055923,20410618,00.htm

一回聴いてみればわかるけど、これはイイ。試験的なので、試験期間終了後（8月）はどうなるかわからないけれど、ぜひ本格的に開始して欲しいところ。なんたってインターネットを通してやってくる“音声データ”なので、ノイズが入らない。AM放送だってクリアに入る。ただし権利関係上、関西・関東圏に限られるそうで、上の記事にもあるように、権利関係がいろいろヤヤコヤシイんだとか。さすがにメディア業界は大変そうだ。

しかしこれが本格的に普及すれば、こないだ書いた「iPad勝手にカーナビ化計画」にも、「地デジラジオ機能」が付いてもっと便利になるかもしれないし、ラジオのメディアとしての立ち位置も、今のままでは将来危ういけれど、これがキッカケとなって新しい立ち位置を確立することができるかもしれない。思いつきなので、具体的にはノーアイディアですが。

ともあれラジコ、ちょっと聴いてみるのをオススメします。気軽に聞けるのはいいですね。Google Chromeなら、「アプリケーションのショートカット」にしておくぐらいでもいいかもしれません。朝の目覚めのお供にどうでしょう。