今、トップクリエイターが注目するWebのトピック 第6回「マウス vs タッチ」 - デザインってオモシロイ -MdN Design Interactive-
デザインってオモシロイ MdN Design Interactive

今、トップクリエイターが注目するWebのトピック 第6回「マウス vs タッチ」

  • 新規会員登録
  • ログイン管理
  • Twitter
  • facebook
  • はてなブックマーク
  • RSS

2021.1.24 SUN

  • TOP
  • 特集
  • 連載
    • ALL
    • デザイン・アート
    • テクノロジー
    • コラム
    • インタビュー
    • レポート
    • インサイト
  • Tech
    • ALL
    • プログラミング
    • UI/UX
    • フレームワーク
    • Webアプリ
    • Webサービス
    • その他
  • ニュース
    • ALL
    • ニュース
    • 新製品
    • テクノロジー
    • アートイベント
    • モバイル
    • ネットで話題
  • ネット印刷
  • 求人情報
  • クリエイター登録
新規会員登録
ログイン管理
  • プレスリリース
  • メルマガの登録・解除
  • プライバシーポリシー
  • 特定商取引法
  • 利用規約
  • お問合せ
  • 広告掲載について
  • インプレスグループ
閉じる
  • TOP
  • ニュース -
  • 今、トップクリエイターが注目するWebのトピック 第6回「マウス vs タッチ」
  • ALL
  • ニュース
  • 新製品
  • テクノロジー
  • アートイベント
  • モバイル
  • ネットで話題

コラム

2010.9.16 THU

今、トップクリエイターが注目するWebのトピック 第6回「マウス vs タッチ」

最新キーワードを読み解くためのニュースコラム

今、トップクリエイターが注目するWebのトピック 第6回「マウス vs タッチ」


2010年9月16日
TEXT:川崎有亮(株式会社リクルート メディアテクノロジーラボ チーフアーキテクト)


毎回Webやグラフィックのクリエイティブの最前線で活躍しているトップクリエイターが、いまWeb制作の世界で話題になっていること、注目していることなどを取り上げて語ります。
今回のクリエイターは株式会社リクルート メディアテクノロジーラボ チーフアーキテクト、川崎有亮氏。「マウス vs タッチ」について語ります。




今Webアプリケーションのインターフェイスは、Webの登場以来とも言える大きな変革期を迎えている。まず、従来のマウスオーバーなどのマウス操作を前提とした設計から、iPhone・iPad・Androidの登場によって(マルチ)タッチを前提とした設計への対応が必要となっている。72~96dpiを想定していた表示上の解像度も、viewportで抽象化された。技術仕様でも、今はHTML 4からHTML5と連続的な変化のただ中にあり、Webは進化し続けている。

かつてCUIの時代、ユーザーは、キーボードと画面上のカーソルを媒介としてコンピュータを操作していた。GUIが普及したWebの時代は、マウスと画面上のマウスカーソルを媒介にする。キーボードをタッチタイプできる人は限られるが、マウスは手元を見なくても操作しやすいので、より手軽になって裾野が広がった。しかしどちらにしろ、ユーザーの思考と操作、表現の間に意識・無意識の変換作業を伴うことから、一般的なユーザーはどうしてもコンピュータとの間に距離を感じてしまう(ケータイは1~5cmくらいと画面とキーの距離が近かった)。

モバイル端末を先頭にタッチインターフェイスが普及しつつある現在、そうした媒介が不要となり、ユーザーが直接、画面上のオブジェクトを操作できるようになった。画面と操作が一体化して変換作業を伴わない分、思考から表現までの距離が近づく。タッチによって、ユーザーは従来型のコンピュータを使う際に失われていた感触を取り戻すことができるかもしれない。


flipboard
Flipboard(3×3のマス目はデジタルな本棚。雑誌のように開ける)

iPad用アプリの「Flipboard」は、“socialmagazine”と銘打たれたWebコンテンツビューワだ。TwitterやFacebookを連携させて友達の言及したWebサイトをピックアップしたり、反対に既存のWebサイトにソーシャルストリームを取り込む点もおもしろい。大きな特徴は、タッチ(フリップ)によってパラパラとめくれる操作性です。iPadの画面にぴったり収まるレイアウトと写真を大きく使った表現によって、雑誌を見るような感覚を実現している。

これを電子書籍としてとらえると、従来は既存の紙媒体のコンテンツをソースとして、PCや携帯端末でも「見れる」ようにしたものが主流だったのに対し、Flipboardは既存のWebコンテンツをソースとして、デバイスのサイズ・操作性に合わせて最適化したと言える。紙でなくもともとデジタルのソースなのに、あえて型にはめることで伝わりやすくしている。

タッチから話題を離れて、タッチしない非接触のインターフェイスとしては、私は昨年、「LivePointers」(ライブ・ポインタ)という技術を開発・発表した。


fingercap
LivePointersのデモ(枠で囲まれた部分が指サックを認識している)

LivePointersはWebカメラに映ったポインタをリアルタイムに認識するライブラリで、非接触の入力インターフェイスとして提案した。Flashで実装しており、Webカメラとブラウザ以外に特殊なデバイスやソフトウエアが不要。また、指サックでなくカラーボールなどの固定サイズのマーカーを使えば、カメラからの距離も概算できる。これはPlayStation Moveと似た仕組みで、Kinectのような深度センサーも不要だ。

LivePointersではFlashを使っていたが、JavaScriptから直接扱えるセンサー類も増えてきている。iPhoneやAndroidではデバイスの傾きをJavaScriptのwindow.orientationプロパティで取得できる。たとえば、右に90度傾けると「90」という値が返り、左なら「-90」が返ります。デバイスの向きに応じた表示を実現できる。

GeolocationAPIは、モバイルに限らずPC用のWebブラウザでも普及が始まっている。JavaScriptからgetCurrentPositionメソッドを呼び出し、現在地の緯度経度の値を取得できる。GPSを搭載していないデバイスでも、IPアドレスやMacアドレスなどから緯度経度を推定する。応用としては、たとえばジオデコード(リバースジオコード)を組み合わせれば住所の推定も可能となる。

タッチは、ユーザーとコンピュータの距離をもっとも近づけたインターフェイスと言える。また、傾きや位置情報などもコンピュータに正確な情報をインプットさせる新しいインターフェイスとして、注目できる。これらを活用したアプリケーション・コンテンツによってWebがさらに広がりそう。タッチはマウスよりも物を言う?



■今回のクリエイター

川崎有亮
川崎有亮(株式会社リクルート メディアテクノロジーラボ チーフアーキテクト)
1977年東京生まれ。PerlやJavaScript、マッシュアップなどのWeb技術に取り組む。現在は、株式会社リクルートの研究開発組織「メディアテクノロジーラボ」に在籍。技術評論社『Ajax/実装のための基礎テクニック』、インプレスジャパン社『ソーシャルストリーム・ビジネス』(共著)など、書籍・雑誌記事の執筆も多数。 @kawanet
プロフィール:http://creative-award.channel.yahoo.co.jp/index.php?itemid=134



YICA_logo

Yahoo! JAPAN インターネットクリエイティブアワード

川崎有亮氏が審査員(Creative Hack賞)を務める「Yahoo! JAPANインターネットクリエイティブアワード」は、1次選考から選ばれたノミネート作品を10月上旬に公式サイトで公開します。その後、最終審査会でノミネートから受賞作品が選考され、11月25日に贈賞式を行い、公式サイトに受賞作品を掲載します。

URL:http://creative-award.yahoo.co.jp/




【今、トップクリエイターが注目するWebのトピック バックナンバー】

>>> 第1回「ARとVR」 馬場鑑平(株式会社バスキュール ディレクター)
>>> 第2回「Ustreamを斬ってみた」 吉原 潤(株式会社ロクマル二 アートディレクター/デザイナー)
>>> 第3回「ユーザビリティ VS 楽天メソッド」 内山光司(GT INC./(suit)men entertainment クリエイティブディレクター)
>>> 第4回「バーチャル VS リアル」 遠崎寿義(ザ・ストリッパーズ株式会社 代表取締役・クリエイティブディレクター)
>>> 第5回「社会的自分vs属性が伝える自分」福田敏也(株式会社トリプルセブン・インタラクティブ 代表取締役/クリエイティブディレクター)


【MdN Design Interactiveからのお知らせ】
MdN Design Interactiveが運営するデザイナーやWebデザイナーなど、クリエイティブ業界に特化した求人サービス【MdNの求人情報】では、11月9日まで「2010秋の就職転職フェア」を開催中です! 料金変わらず掲載期間が2倍になるお得なキャンペーンですので、Webデザイナーを求人するWeb制作会社のみなさん、デザイン事務所で働きたいクリエイターのみなさん、業務委託をお考えのみなさん、ぜひご利用ください!

→【MdNの求人情報】はこちら!

twitter facebook このエントリーをはてなブックマークに追加 RSS

前の記事を読む

MdN Design Interactive週間ランキング(09/05~09/11)

MdN Design Interactive週間ランキング(09/05~09/11)

2010.9.14 TUE

次の記事を読む

新たな黒船“Facebook”に備えるmixi(後編)

新たな黒船“Facebook”に備えるmixi(後編)

2010.9.24 FRI

アクセスランキング

1.11-1.17

  • Wi-Fiの電波が弱くてつながりにくい? 速度が遅い? だったら中継機で解決だ!
  • ヴィレヴァン、砂が輝いて見える神秘的な15分計砂時計を発売
  • ソニーが開発中のEV(電気自動車)「VISION-S」、公道走行動画を公開
  • ローソンストア、SNSで話題の「渾身の一本!」シリーズより「お?萩!!」が登場
  • コップの端に炭治郎や禰豆子! 「お茶友シリーズ 鬼滅の刃 セット」発売
MdN BOOKS|デザインの本

デザイン求人情報

PICKUP

  • デザイン専門学校 講師募集(3DCG/アニメーション・イラスト・WEB)

    専門学校千葉デザイナー学院
    • その他(デザイン専門学校 講師(3DCG/アニメーション・イラスト・WEB))
ワンプリント

Pick upコンテンツ

現在

  • 使い続けてわかった「AirPods Max」~深まる魅力と些細な欠点~
  • 気になるフォント、知りたいフォント。書籍 『猫のヒミツ 猫好き一家の猫まみれライフで学ぶ“猫トリビア”/ねこまき(ミューズワーク)』
  • 【お菓子連載・甘いときめき、小さな宝箱】第13回「POSTBOX COOKIES」グリーティングカード感覚で贈れる、プチギフトにしたいクッキー菓子
  • MagSafeを使ってカンタン固定、車内でiPhoneを取り付けておけるマウント
  • 【楽しく!学べる! かじがや卓哉の iPhone豆知識】1月テーマ「Siriの基本操作から便利術、おもしろすぎる小ネタまで!」アラーム、天気など、日常で使える便利テク

MdN公式Instagram

Instagramでは、デザイン関連本や本に関連した参加型コンテストについて発信しています。

page top
MdN
impress
  • メルマガの登録・解除
  • プライバシーポリシー
  • 特定商取引法
  • 利用規約
  • お問合せ
  • 会社概要
  • インプレスグループ
  • 広告掲載について
  • MdN デザインの本
  • MdN新書 新ジャーナリズム宣言。
  • MdNのデザイン求人情報
  • MdN DESIGNFONT STORE

Copyright © MdN Corporation,
an Impress Group company. All rights reserved.

page top
MdN
impress
  • メルマガの登録・解除
  • プライバシーポリシー
  • 特定商取引法
  • 利用規約
  • お問合せ
  • 会社概要
  • 広告掲載について
  • インプレスグループ
  • MdN デザインの本
  • MdN新書 新ジャーナリズム宣言。
  • MdNのデザイン求人情報
  • MdN DESIGNFONT STORE

Copyright © MdN Corporation,
an Impress Group company. All rights reserved.