香港のオープントップバス

Posted on 12月, 11 at 5:38 pm

オープントップバスに乗りました。天気がよくてこの時期はとても気持ちがよいものです。

送信者 2010-11-30｜HongKong

クリスマスの時期なので、こんなイルミネーションも至る所に。

送信者 2010-11-30｜HongKong

よくみたら怪しい看板でしたが、いかにも香港らしい場所で記念撮影。

送信者 2010-11-30｜HongKong

Posted in 写真, 家族, 旅行, 日記 | No Comments »

香港の水上レストラン

Posted on 12月, 11 at 5:30 pm

こちらは水上レストラン。フェリーがそのままレストランになってしまってるという名物スポット。このフェリーまで、小さいボートで行くんですが、その間にセレブのクルーザーを眺めながら進む。ジャッキー・チェンのクルーザーもあるらしいんですが、どれかわかりませんでした。

送信者 2010-11-30｜HongKong

こんなボートに乗ってレストランまで向かいます。

送信者 2010-11-30｜HongKong

レストランの外観はこんなかんじで結構豪華。

送信者 2010-11-30｜HongKong

料理はこんなかんじで。食べる前からどんどん出てきて、すぐにテーブルに載らない状態に。もう少しゆっくり食べたかった・・・

送信者 2010-11-30｜HongKong

Posted in 家族, 旅行, 日記 | No Comments »

香港のマクドナルドメニュー

Posted on 12月, 11 at 5:23 pm

香港のマクドナルド。初めて行ったんですが、こちらは朝マック。マカロニ的なものがスープにたくさん入ってて、肉と目玉焼きとミックスベジタブルも一緒。スープは全体的に薄味なんだけど、肉がちょっと塩味が強いので、全体的にバランスが保てる状態。コツとしては、肉を砕きながら食べるとちょうどいいのかな。

送信者 2010-11-30｜HongKong

あとはドリンクと、ハッシュポテト。これで300円ぐらい。
日本のマクドナルドしか知らなかったんだけど、香港のマックでは、食べ終えた後、トレーを自分で片付けなくてもいいようで、食べ終えたらそのまま帰ってしまう人ばかり。礼儀正しくゴミ箱に捨てるのは、日本だけなんでしょうかね。海外事情に疎いので、そのへんよくわからないです。

Posted in グルメ, ネタ, 家族, 旅行, 日記 | No Comments »

香港行ってきました

Posted on 12月, 9 at 8:36 am

ビクトリアピークから。

送信者 2010-11-30｜HongKong

香港行ってきたー！
またレポートは後日。相当楽しかったけど、相当疲れた・・・

Posted in 日記 | No Comments »

PCサイト＋携帯サイト＋スマフォンサイトの作り方

Posted on 11月, 19 at 9:08 pm

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

Posted in IA/UX, SEO, Web, WebSite, Webビジネス, デザイン, マーケティング | No Comments »