モバイルサイトの現在とこれから~モバイルサイト・ウォッチャー、津田武さんに聞く~
- Vol.69
- ニューインデックス株式会社 津田さん
PCウェブサイトの制作を中心に
クリエイター、ユーザーに役立つ情報を発信してきた
ニューインデックス株式会社はウェブサイトの受託開発だけでなく、自社メディアの企画・運営など広く事業展開をされています。
【津田さんのお話】 当社はウェブ制作会社として2008年に設立、間もなく3周年を迎えるところです。PCのウェブサイト制作をメインに、CMSによる開発など周辺の事業を展開しています。「鳥の目」「虫の目」「魚の目」というスケールにそって、“あったらいいな”と思っていただけるサイトの実現を追求する企業です。
その第1歩「虫の目」の事業として、サイトの制作とプロモーションに取り組んでいて、手始めにいくつかサイト、メディアを立ち上げました。いわゆるガラケー(ガラパゴス・ケータイ)の世界を紹介してご好評をいただいている
『モバイルデザインアーカイブ』≪http://mobiledesignarchive.jp/≫
がその第1段、続いて
『iPhoneデザインアーカイブ』≪http://iphonedesignarchive.jp/≫
と、クリエイター、デザイナー寄りのメディアを立ちあげました。
『モバイルデザインアーカイブ』から見る
モバイルサイトのデザインの流れ
この1年間のモバイルサイトの動向を、どう受け止めていますか。
【津田さんのお話】 まず大きな流れとしては、2009年に始まったリッチ化があります。2010年春に『モバイルデザインかんふぁれんす』という会を開き、デザイナーを中心に200名ほどにお集まりいただきましたが、その席でモバイルサイトのリッチ化についてお話をいたしました。また、そのころから、東京IT新聞の連載記事でも、リッチ化について触れています。
マクドナルドのモバイルサイトがFlash化されて、操作性が優れているということで話題をさらったのが2009年。画面左側にメニューがあり、メニューを選ぶと右側の画面の絵がかわるというモデルに、多くのサイトデザインがならったものです。また、「Flashでつくれます」との売り文句で受注を取る、モバイルのCMS制作企業もありました。
モバイルサイトの流行は、ファッション業界、特に高級ブランドが牽引していますが、この業界もまた、メインビジュアルとしてモデルの写真を置き、周辺をFlashで構成するという手法がメインになっていきました。
ところが、2010年後半は一転して、 “Flash離れ”が進み始めた、という印象を受けました。理由として、リッチ化は良いとしてもそれをフラッシュだけで実現していく手法に飽きが出てきたのではないでしょうか。また、モバイルSEO対策上は、テキストで作った方が検索に強いという事実は変わらず、「テキストを見直す」動きにつながっているとも考えられます。
そんな中で、来年以降の傾向がうかがえる動きはありますか。
【津田さんのお話】 すべてが一気にスマートフォンに移るかどうかはまだ分かりませんが、iPhoneやAndroid向けのサイトは今後も増えていくでしょうね。ガラケーのような矢印キーではなく、指での操作が基本になりますから、そういった意味では人間の関節の動作そのものも含めたユーザビリティをクリエイターの方々は意識していかないといけなくなると思います。単に携帯CMSで、メニューのテキスト間の高さを広げたiPhoneサイトも自動生成する、といったものではまだまだ対策として足りないと思います。スマートフォン対応の携帯CMSがある程度一巡した後は、改めてこの辺の見直しが進んでくるのではないでしょうか。私としての現時点の考えでは、ガラケー、スマートフォンサイトは別々のインターフェースを作るべきだと考えています。ただし、サイトのコンテンツそのものはデータベース化するなどで共通のものが表示されても良いと思います。
この1、2年でもっとも印象に残ったサイトを教えてください。
【津田さんのお話】 少し以前のサイトですが、あるデザイン会社が、自社の引っ越しを告知する、1週間限定のモバイルサイトを公開しました。トップ画面は、白地に大きく年月日と地名が入り、「>>Map Here」とあるだけのシンプルなデザイン。しかし、携帯端末を水平に傾けることで字を読むことができる斬新なものです。携帯電話は普通、縦に長いイメージがありますが、このサイトは横に長い。こういったアイデアは初めて見ました。
大手スポーツメーカー「Nike」のサイトにも印象的なものがありました。いつも高級ファッションメーカー顔負けの速さで流行を取り入れるこの企業ですが、そのサイトは、「スピード」「タッチ」「コントロール」などキーワードごとに色を変えた躍動感のある大画面で構成され、ボタンが浮いた感じに見えるなどの工夫も楽しく、新鮮味がありました。
また、IMJモバイルの白黒9マス模様のサイトも斬新でした。それぞれのマスを押すと、その枠が拡大して詳細が読める上、どのマスにいるかのナビゲーションもしっかりしていて読みやすいものでした。携帯の画面でこういう動作をさせようと思った発想のきっかけは何だったのか、興味をかきたてられるものでした。
クリエイターの方は
とにかく多くのサイトを見ると良いと思います。
先月、『ブブンデザインアーカイブ』を立ち上げられましたね。
【津田さんのお話】
前述した『モバイルデザインアーカイブ』のサイトに続くものとして、今度はPCサイトのデザインパーツを集めたサイトを立ちあげました。それが『ブブンデザインアーカイブ』≪http://bubundesignarchive.jp/≫です。デザイン性に優れたWebサイトのパーツをアーカイブしたWebデザインの見本集です。「優れた写真やグラフィックを駆使して、渾身の思いでメインビジュアルを作成したけど、そのイメージに合うグロナビやサイドメニューが思いつかない!」というWebデザイナーの方の悩みを解決し、少しでも制作時間を短縮できることを目的としています。Adobe Photoshopやillustratorにドラッグ&ドロップして、ご自身で制作されたWebデザインと重ねてみることで、アイデアインスピレーションが加速化します。たぶんこれほどの数を集めたサイトはないはずなので、数を沢山見ていただいて、組み合わせと工夫次第をしていただくことで、アイデアの幅が広がると思います。
デザイナーから好評をいただければ、『モバイルデザインアーカイブ』同様、書籍化も考えていきたいですね。
最後に、クリエイターにひとことアドバイスをお願いします。
【津田さんのお話】
良いモバイルサイトをつくるには、まず徹底的に多くのサイトを知ることが不可欠。私の場合、たとえば自動車業界や外食産業など、あらゆる業界のモバイルサイトを、すぐ頭に浮かべることが出来ます。デザイナーの皆さんも、頭の中にアイデアパターンをデータベース化することで、デザイン提案の幅が広がると同時に、スピードアップにもつながると思います。「モバイルサイトについては自分が一番知っている」という自信があればプレゼンでの説得力も高まるはず。1年あるいは半年でも集中すれば成果はあがりますから、とにかくモバイルサイトを“見まくる”ことがまずは重要だと思います。
取材/2011年11月17日 ニューインデックス株式会社
モバイルデザインアーカイブがお送りする
『携帯サイト年鑑2010』
津田武著、エムディエヌコーポレーション刊 / 定価:本体2,600円+税
ケータイサイトの最新デザインがわかる
QRコード付きですぐにサイトへ行ける!
携帯サイトのデザインを考える際に困るのが、PCサイトのようにほかのサイトをパパッと開いて、すぐ参考にできないこと。画面のキャプチャが簡単にはできないため、ライバルサイトを研究したり、センスのよいデザインを並べて比較する方法が、これまでほとんどありませんでした。本書は、そんな悩みに応えるべく、最新の携帯サイトを大ボリューム「514サイト」掲載した、携帯サイト制作者やマーケティング担当者必携の一冊です!
▼エムディエヌコーポレーションサイト
http://www.mdn.co.jp/di/book/6122/