新しい環境にDropboxのクライアントアプリをインストールして、サーバと同期中の状態に、マウスをもっていくと・・・

そうね、休憩でもしようかね。
暑すぎるのでアイスコーヒーでも。。。

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

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

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

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

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

マニュアルなんてないので、気の向くままにくっつけていくだけだけど、素直に組んでいくと色が足りなくなったり、バラすときに密着してはずせなくなったりするので、カタチはシンプルだけど、いろいろアタマを使うのです。右脳が鍛えられていいデスヨ。右脳？かどうか知らないけど。

スイカ割りとかやりたいねぇ。もう何年もやってない。

nanoblock スタンダード 河田 2008-10-31 売り上げランキング : 3153 おすすめ平均 Amazonで詳しく見る by G-Tools

iWork ’09 アップル 2009-01-18 売り上げランキング : 161 Amazonで詳しく見る by G-Tools

ところで、仕事柄、Web制作会社やWebコンサル会社とお話することが多くあるのだけれど、だいたいオフィスは大きくてもビルの１フロア程度が多い。小さいところだと、マンションの１室というのも珍しくない世界です。

で、そういうところで打合わせをさせていただくと、オフィスの様子が見れたりするのだけれど、そこには必ずといっていいほど置かれているアイテムたちがあるものです。たとえば・・・

自転車

ママチャリじゃなくて、カッコイイやつ。スポーツタイプの、軽そうなやつとか。いつも、誰が乗ってるんだろうと疑問を抱きながら、気になっているアイテムです。

b-grow Heaven’s カギ/カゴ/ライト付き20インチ折畳み自転車 シマノ6段変速付きヘブンズ グリーン BF-K206-GR B-GROW 2007-10-30 売り上げランキング : 786 Amazonで詳しく見る by G-Tools

バランスボール／サーフボード

スタッフの席が見えるときに、たまに視界に入ります。椅子がわりにバランスボールに座っているパターン。ロクに座れない自分としては、かなりハードルが高いアイテムです。サーフボードは、海に近いところは本当に使うのかもしれないが、たまに都内のオフィスでも見かける。あれは完全なるインテリアに違いない。

ALINCO(アルインコ) エクササイズボール(65cm) EXG025 ALINCO(アルインコ) 売り上げランキング : 33 Amazonで詳しく見る by G-Tools

共有ライブラリ

狭いオフィスなので、おそらく共有図書を有効利用しようとするマインドが高いのだと思う。とてもいい傾向だと思うし、自分のところの会社ももっと積極的にこういう取り組みがあってもいいんじゃないかと思ったりする。

Garage オープンラック 本棚 CC-R6513白 Garage 売り上げランキング : 147373 Amazonで詳しく見る by G-Tools

ビリヤード台

あんまりないけど、たまに出会います。Googleにあるのは有名だけど、ココに必要？？みたいな印象を受けることも。完全に社長の趣味で導入したとしか思えない。楽しいオフィスの雰囲気作り、という印象は伝わるけれど、悪く言えばこの会社の経費の考え方が垣間見えます。さすがにここ一年は見かけなくなったなー。その会社もなくなってしまいました。

ミニビリヤード ニチユー 2007-06-18 売り上げランキング : 112115 Amazonで詳しく見る by G-Tools

犬

オラクル犬はビルの外で待っていたらしいが（このあいだ死んじゃったね）、Web業界の犬はオフィスをウロついていることが多いです。小型犬が多いのであまり気にならないものの、スーツに乗ってきたり、カバンの取っ手を舐められたりするので、取り扱いに要注意。

スヌーピー ヘッドカバー フライングエース スヌーピー 売り上げランキング : 17476 Amazonで詳しく見る by G-Tools

あと、ほぼ100％と言ってもいいくらい、みんなMacまたはiPadを使ってる。最近は特に、iPadが多い。そしてみんな、デモンストレーション的に持っているかと思いきや、本気で仕事してそうなかんじでiPadを使っているのがスゴイ。
そう、有名な話ですが、この業界では、Windowsのシェアは結構低いんです。そんなわけで、別に染まることもないんだけども、そういう共通言語というか、共通ツールを持っておくのは、相互の文化理解のために、必要なのかもしれないなと思います。だから、keynoteもマスターしておかないといけない。共催でセミナーやるときだって、みんなkeynoteなのに、ウチだけpowerpointっていうのは、別にいいんだけど、どんなに頑張っても表現力でかなりビハインドなんですね。内容が命とわかっていても、見た目で損してるのはもったいない。

とまあ、いろいろ最近感じたことでした。そのうち自前でMacbookを買おうと思うのでした。

よくできてるなー。文化祭の作品らしいですよ。すごい。

実際はかなり小さい。

ちゃんと稼動部も機能します

こちらは頂き物なんですが、SIKUシリーズって日本のチョロQとかトミカとかと違い、まず高級感があるのと（実際高いけど）、下のような大型の乗り物があったりすのが楽しいのです。贈り物にもいいんじゃないでしょうかね。一式セットで。高そうだけど。

SIKU モーターボート輸送トレーラー SK1613 ジク 売り上げランキング : 43957 Amazonで詳しく見る by G-Tools

nanoblock イースター島のモアイ像 河田 2010-03-17 売り上げランキング : 375 Amazonで詳しく見る by G-Tools

ちなみに、最近欲しいのはボーネルンドの積み木。大丸で一目ぼれしました。

木のおもちゃの定番です。ボーネルンド オリジナル木製積木 カラー【お誕生日・ご出産祝】人気商品

た、高すぎるよ・・・。

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化したら便利になるかどうかという適性をみて判断してほしい。

ダイエットしようかと、まずは[[レコーディングダイエット]]的なかんじで自分の体重を書き続けることからはじめようと思っても続かず、じゃあWii Fitならいいだろうと思って買ってもWiiを立ち上げるのが面倒で続かない自分のような三日坊主な皆様にはとても合ってると思います。だって、乗るだけでいいんですから。でもこの箱、どうみてもアッ●ルだよなぁ。カッコイイからいいけどさぁ。

開封したところ。反射して見にくいけど、鏡みたいなかんじです

ウラ面。最初はUSBでPCとつないでアカウントを作ったりのセットアップするんだけど、iPhoneにつないでもセットアップ可能。真ん中のくぼみは、iPhoneがぴったり置けるポケットです。

こうやって乗るだけでOK。もうちょっと右に90度傾くのが正位置なんですが、特にスイッチを入れるために端っこを蹴ったりとかボタンを押したりとかは必要なし。ただ乗るだけで勝手に電源が入り、体重測定と、体脂肪率を測定してくれます。体脂肪率測定まで、だいたい7～8秒。同時にサーバにデータが送られ、Twitterにポストしてくれます（もちろんON/OFF可能）。こんなかんじでね。

座っても、まあ計れます。体脂肪を測定するときは、当然裸足です。

でもこうやったり

こんなんでは計れませんのでご注意を。

一部、オムロンが無線通信つき体重計を出したり、タニタはUSBメモリを経由させてPCで管理できたりというのがありますが、そういうのじゃない。もっとソーシャルメディアなのが欲しいんです。楽しく続けたいんです。

当然、TANITAやomronなどが出してるような国産のハイテク体重計（内臓脂肪やら体組成やらを測定するような機能つき）ではありませんが、乗るだけで記録されていつでも確認可能、連携可能っていうシンプルさは高機能よりも大事な気がしました。

体重計までクラウドの時代です。これぞ21世紀の体重計。

WiFi Body Scale WBS01 Covia 売り上げランキング : 1546 おすすめ平均 Amazonで詳しく見る by G-Tools

まあそのうち、国内メーカーも出してくるんでしょうけどね。

ああ、久しぶりに物欲が満たされた。

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だって、新しい技術は何一つ無く、既存技術の組み合わせだけ。あとはヒラメキだけなんだけど、その「枯れた技術」をモノにしているかどうかで、自分が稼げる人材になれるかどうかが決まる。

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