第1話 iPhone発売と同時に... | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて



今年2008年を振り返るとき(まだ早いですが)夏の「iPhone」発売騒動は、必ずランクインされるだろうトピック。日本での稼働が始まって4ヶ月。騒動は落ち着いても、ユーザーたちは様々な思いを抱きながらiPhoneを手にしています。

たとえば「携帯電話だけどPC?」「PCだけど携帯?」「Webマシン?」「いやいや、大人の玩具?」……などなど、多種多様な意見が飛び交う中、今回の座談会では日本でいち早くiPhone専用サイトを作ったチームに登場していただきました。ミュージシャン・佐野元春さんのオフィシャル・ファンサイト 「MWS(Moto's Web Server)」を運営している3名のスタッフは、それぞれコアなiPhoneユーザーです。

今後、グラフィックデザインという分野がどのようにコミットしていくのか、それは未知ですが、まず「情報をいかにデザインしていくか?」──そのことの重 要性を語ってもらいましょう。ユーザーの方も未ユーザーも一緒に、新しいデバイスとしてのiPhoneを考えてみませんか?


MWS iPhone / iPod touch サイト 最新ニュースの他、レーベル「DaisyMusic」の楽曲ダウンロード購入、YouTubeやiTunes Wi-Fi Music Storeへのアクセスを基本にした専用サイト。国内アーティストとしては一早い活動を見せている1995年3月、国内音楽アーティスト・オリジンな先駆けホームページとして立ち上がったWebサイト。当初はファンの一部(MIPS)がボランティアで作り上げ、11月より本格ローンチ。以降、13年目が経った現在も佐野の活動に併せながら、ヒストリー、ディスコグラフィー、最新情報、特設ページなど、バラエティなコンテンツが用意されている

左:MWS iPhone / iPod touch 専用サイト
最新ニュースの他、レーベル「DaisyMusic」の楽曲ダウンロード購入、YouTubeやiTunes Wi-Fi Music Storeへのアクセスを基本にした専用サイト。国内アーティストとしては一早い活動を見せている

右:Moto's Web Server
1995年3月、国内音楽アーティスト・オリジンな先駆けホームページとして立ち上がったWebサイト。当初はファンの一部(MIPS)がボランティアで作り上げ、11月より本格ローンチ。
以降、13年目が経った現在も佐野の活動に併せながら、ヒストリー、ディスコグラフィー、最新情報、特設ページなど、バラエティなコンテンツが用意されている

 今井健史さん

[プロフィール]
今井健史●MWS スタッフ/インターネット関連フリーランサー)佐野元春オフィシャルファンサイト「MWS(Moto's Web Server)」の創設メンバーの一人として、1995年から現在までMWSの運営を手がける一方、雑誌編集からWebサイト・ディレクション、マーケティングおよび広告などコンテンツ・クリエイションの現場を変遷してきている。佐野氏のレーベル「DaisyMusic」ではインターネット・マーケティング担当も兼務。そして相変わらずのロック・クレイズ。KenG Weblog



宮田正秀さん

宮田正秀(MWS Web Master/株式会社関心空間 代表取締役社長)●90年代よりマルチメディア作品からWebのプロデュースまで幅広く活動。QuickTimeVR等、最新のインタラクティブ技術の導入・普及に意欲的に取り組む。2000年からMWSの2代目Web Masterを務め、チームと共にオフィシャルサイト、オンライン・ファンクラブ、FM番組サイト等を構築・運営。2001年に関心空間をMWSのコミュニティ「カフェ・ボヘミア」にいち早く導入、以後、最新の「旅達空間」まで数々のサービスの企画・構築・運営に携わる。みゃ〜太の関心空間



バスケ(MWS プログラマ/株式会社関心空間 取締役CTO)●Macとネットのプログラマ。仕事の範囲は広く、古くはQuickTimeのコンポーネントやHyperCard、4th Dimension、FileMakerの外部ルーチンなどを作成。2001年からクチコミサイトの関心空間に従事。2004年、WWDCにおいてDashboard Widgetコンテスト準優勝。バスケの関心空間



第1話 iPhone発売と同時に専用ページを用意した裏側



iPhoneを前に話が尽きない3人

SDK入手で、すべてが動き出した


SDK入手で、すべてが動き出した



──7月11日、発売と同時に「MWS」のiPhone版を立ち上げてましたよね?

今井●はい。まず立ち上げまでの経緯を説明すると、昨年11月にiPod touchが発売される前、個人的に昨年7月から並行輸入でiPhoneを持っていたんです。で、一体iPhoneで何ができるのだろうかと試していました。当時はアプリケーション開発については公になっていなかったので、iPhone用のコンテンツと言ったらWebサイトやWebアプリケーションでした。これは割と早くから情報が出ていたんです。そういう中、見よう見まねで「こんなことができるだろうか?」というプロトパターンをいくつか作っていました。でも、放ったらかしにしていたんです。日本で購入できるiPod touchだと、どうしても我々が望むような情報配信の仕方はできないだろう、外でWi-Fiを探してまでMWSにアクセスするシチュエーションは思い浮かばない、と。なので、あくまで個人的な趣味、技術的な観点で試していただけだったんです。

──それがどうして、今回の結果を生み出したのですか?

 今井健史さん 今井●今年の春頃から、ちらほらと国内販売の話が聞こえてきました。そこで「もう一回、本格的にやってみるか」と。ちょうどその頃、3月にiPhone SDK(Software Development Kit)を入手しました。SDKの中には「Dashcode」というiPhone用Webアプリを作るツールも入っていて、これでいままで四苦八苦してやってきたことを「もう少しシンプルでスマートにできるのかな」と思ったんです。そこで現在公開しているサイトの形を7月の頭までに作成して、7月11日に実機を入手して即検証、見れた、公開! というのが流れです。

──アップルが公開したSDKとは、どのようなものだったのですか?

宮田●開発者キットですね。開発者としての契約や登録も含めた。

バスケ●ネイティブ・アプリケーションを作るためのSDKとして公開されたのですが、その中に含まれていたDashcode……もともとウィジェットを作るための開発環境があったんです。それがバージョンアップしてて、いつのまにかiPhone用のWebアプリケーションを作る環境が用意されていた。それで「これ、スゴイぞ」と、みんなで盛り上がって。

──感覚的にはHTMLでWebサイトを作るようなものなのですか?

今井●かなり違いますね。

バスケ●手書きでイチから作ろうと思ったら、かなりCSSやいろいろなJava Scriptを駆使して作らないとならない。それが面倒で、大体見た目だけ合わせてっていうことが多いのですが、そのDashcodeを使うと、そういうスクリプトなどでWebページを作る感覚ではなくて……

宮田●より、アプリ寄りですね。

今井●ええ。完全にWYSIWYGでパーツをはめていくというのはアップルらしい。でも、できあがったコードは、いままで見たことがないCSSとJava Scriptでした。まったくSafariで最適化されたコードなんです。

宮田●それを手で書けと言われたら、できない?

今井●いやー、ちょっと無理ですね。

──では、少し言い方が悪いですが、アップルにリードされているところも?

今井●まあ、そうですね(笑)。

宮田●ただ、閉じているから最適なツールが提供される。

今井●うん。安心できますね。

宮田●で、思ったよりはスムーズで。

バスケ●ネイティブ・アプリケーションに比べれば、やればなんとか……自分でイチから作れるので、支配されているまではいかず、逆に「イイもの提供してくれて、ありがとう」という気分ですね。

「情報に集中しろ」というご託宣



──いま専用サイトを作っている人は、そのSDKを使っていないケースもあるのですか?

バスケ●多いと思いますよ。

今井●iUIがiPhone向けJava Scriptのライブラリとしてはデファクトっぽくなっているので、それを使っている方も多いと思います。僕も最初、それで作っていたし。

宮田●フリーのもので、やろうと思えばできる、と。

バスケ●イチから全部作ろう思ったら、今回みたいなケースはあると思うのですが、自分のサイトを表示だけ対応させようとなると、逆にアップルのツールを使うと面倒になる面もあります。まあ、企画サイトなどは大体ツールで作るほうが楽だと思います。

──個人のサイトをあの画面で見せているのはいくつか見ましたが、どうやって作っているか、あまり知らなかったんです。

今井●個人のブログや既存のサイトをiPhone対応させるのは、実はすごく簡単。ヨコ幅に気をつけてCSSを組んで、あとメタタグで「iPhoneのサイトだよ」「これがiPhone用のCSSだよ」と記述すればいいんです。

宮田●表示自体は全然問題ないんですよ。

今井●そう言う意味では、デザインさえちゃんと突破すれば、この3.5インチ画面、解像度320×480の枠内に収めるのは割と簡単です。

──Web制作畑としては、この画面サイズはどうですか?

バスケさん バスケ●意外と情報出すには十分なスペースですよね。結局、タテにスクロールできる距離が制約されているがゆえに、ナビゲーションは上にあるだろう、下にあるだろうと想像がつく。iPhoneが課している制約のおかげというのもあると思うんです。そうした細かい制約がある中では「意外と読めるな」というのが感想。で、写真を出すにも十分なサイズなんですね。そこは僕、満足していますが。

宮田●この面積だったら何? どう配置して見せる情報デザインかいいか? そこにやりがいある。むしろ、いいチャンレンジでしたよ。自分たちもチャレンジだったし、アップルが出したものもチャレンジだった。

──しかも携帯電話にありがちな「幕の内弁当箱」状態まで、コンテンツ的に制約されていませんよね?

宮田●そうですね。

今井●今回、MWSをiPhoneに移植するうえで考えたことは、タテ幅がどれぐらいまでスクロールするのをユーザーとして許容できるか? iPhoneで無理矢理、携帯サイトを表示させたら何回もフリック(指で画面上をスライド)することになって指が疲れる。そういうものはやめたほうがいいだろう、じゃあ情報をどう分割していけばいいのか……そういったところは、すごく考えましたね。

──具体的には?

今井●どこにいてもMWS最新ニュースにアクセスできるように、最初から最新ニュースを載せようとは考えていました。では、そのデザインはどうすればいいか? ニュースって「ダーッ」と長いものもあるじゃないですか。それをiPhoneに当てはめると、もうスクロールの嵐。それはやめようと思ったんです。じゃあ、タテ幅をどうするか? ページ遷移をどういうナビゲーションにするか? そういうことはまだ暗黙のルールがないですから。ユーザー間のコンセンサスで「こういったものがiPhoneのサイト」という意識もできていなかった。そこはすごく悩みましたね。

宮田●という時点では、素晴らしい情報デザインを今井さんがしてくれたと思います。


ヘッドライン&外部リンク必要最低限、必要簡潔にまとめられたメニュー画面。1スクロ−ルで辿り着くトップページから簡単に階層が深まっていくのがiPhoneサイトらしい

左:必要最低限、必要簡潔にまとめられたメニュー画面。1スクロ−ルで辿り着く
右:トップページから簡単に階層が深まっていくのがiPhoneサイトらしい

つねに「アプリを作っている」という感触



──みなさん、基本的にデザイン・オリエンテッドな方々ではないですね。でも、デザイナーにとって、今後これがどうなるか、非常に興味があるのですが。

今井●見た目のデザインと、情報デザイン、あとユーザーインターフェイスを含む認知的デザイン……デザインにもいろいろあると思いますが、iPhoneは全部が新しい形でからんでくる。見た目的なデザインは、いろいろやりようがあると思います。情報デザインだったら、それこそアプリを作っているバスケさんのような方が先鞭をつけていって、Webの人間はそれをうまく模範していく方向ですかね。

バスケ●実は情報デザインに関して、アップルから“アップル・カラー”の提示はすごく出ていて、インターフェイス・ガイドラインもiPhoneに関しては早々に出ていた。もう「情報に集中しろ」と。1ページに出す情報はひとつに絞れとか……かなりのことは制約ととられるかもしれませんが。

宮田正秀さん宮田●Macの世界において当初からある「アプリケーション・ガイドライン」と一緒ですね。そう意味ではWebページを作るのではなく、iPhoneのアプリケーションを提供するのと同じこと……というのが、このデバイスには張り付いているところがある。ユーザーに向けて、簡潔な情報の整理や見せ方の工夫をとしなくてはならない。そこがまた面倒でもあり、挑戦の面白いところなんだけど(笑)。

バスケ●iPhone上で情報を見ることを考えるのであれば、守るべきことですね。やはり昔のMacでアプリのために用意されていた「ヒューマン・インターフェイス・ガイドライン」と同じレベルの現代版と捉えていいと思います。当時もアプリを作るのに不自由を感じた人と、そういう制約があるからできあがったコンテンツがあった。たとえばAdobe Photoshopはガイドラインがあったから、それを乗り越えるためのインターフェイスができあがった。ほぼ完成された形だと思われたものが、また進化したわけです。それは受け入れるべき制約っていうものがあったから。僕は好意的に捉えていますけれど。

今井●ユーザーの立場からしても安心ですからね。Macのアプリのユーザーインターフェイスがここまで統一されて、新しいアプリでも大体こうすれば、ああ動いたね……というのは伝統でしたからね。

バスケ●結構、無茶な要求としては「マニュアルをつけるな」というのがあって。見てわかるものを作れ、と。それは無理だろうと、みんなわかっちゃいるのですが……。

──でも、アップルらしいですね。

バスケ●最後の手段にしろということだと思いますが「極力、そこは守れ」と。あと「設定を隠せ」。設定はメインの設定アプリに入れて……これはすごく面倒臭いと思う反面、デフォルトの設定は大事にしろ、ということなんですね。ユーザー任せではなくて、買ったその日に使えるようなものにしとけ、というメッセージでないかと個人的には思っています。よく、ユーザーに任せればいい、自分で設定してよ、というアプリが多いけれど、そうではない。設定しなくても、使えるようにしとけってことです。

──そのあたりがアップルの毀誉褒貶、愛憎相半ばする原因でもありますね。

今井●そうですね。Webという世界では反発を喰う考えだと思う。Webは所謂“自由”ですから。ただ、iPhoneと向き合ってWebを作るときは、やっぱりアプリケーション的なデザインというところにものすごく意識がある。まあ、Dashcodeの設計がそうだということもありますし、アップルのセミナーに行っても「インターフェイスに悩んだら、デフォルトに入っているアップルのアプリのインターフェイスを参考にしろ」と言っていました。そういう意味では、Webサイトを作っているけどアプリの意識がすごく強かったですね。

宮田●あと、僕はYouTubeに対する考え方が変わりましたね。いままで、実はあまり好きではなかったんです。佐野さんの「DaisyMusic on YouTube」を今井さんと作った時も、何か落ち着かない感じがあって……。Webページの面積があって、あのサイズの映像があって、どうやっても決まった構成になって、あっちにもこっちにも導線がある。全画面にするのも何か面倒くさい。でも、iPhoneだと必ず全画面になる。で、次は関連するものを見ろ、と。必要な情報導線がシンプルに絞られているという点で、最初のキラーアプリとしてのYouTubeはすごいと思いました。

DaysyMusic on YouTubeiPhoneサイト「DaysyMusic on YouTube」画面

左:MWS本体にある「DaysyMusic on YouTube」画面。ミュ−ジシャンによる、積極的なYouTubeへの素材供給が顕著な好例
右:iPhoneサイトにおける
「DaysyMusic on YouTube」画面

次週、第2話は「iPhoneから始まる未来」を掲載します。

(取材・文/増渕俊之 写真/FuGee)



twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在