JWDA通信　10年後のWEB業界でも役立つ情報を届ける

新しい技術・デバイスで進化するユーザー体験

マルチデバイス化、コンテンツにおける、写真・動画・音声の増加、フィジカルコンピューティングにみられる表現の多様化へのアプローチとして、当社の研究内容「iPadプロジェクト」「団長プロジェクト」「メディアアート」の3つを紹介します。

CACE2. iPadプロジェクト
デバイス自体が持つ機能美を最大限に活用したiPadサイトの構築

スマートフォンやタブレット端末の普及にともない、ユーザーのインターネット利用状況が大きく変わり、商品とサービス（アプリ）の供給が拡大するなか、ユーザーは「使いやすさ」を求める傾向が強くなっています。ここでは、弊社の「デバイス自体が持つ機能美を最大限に生かしたクリエイティブ」の達成を目的にしたプロジェクト、「iPadプロジェクト」における「Portfolio for iPad（制作実績のアーカイブサイト）」を題材に、スマートフォンに次いで、今後さらに普及がみこまれるタブレット端末の実例をご紹介します。

ポイント

フリックやピンチインなどのタッチパネル独自のインターフェイス。
iPad自身が備える機能の活用（処理速度、フォントなど）。
携帯性から生まれるアイデア。
HTML5とJavaScriptの活用。

それでは詳細をみていきましょう。

Point1　画面の向きにあわせてコンテンツを最適化
iPadの傾き（角度）判定機能を利用し、横向きのlandscapeモードでは、実績一覧をコンセプチュアルなビジュアルイメージで高解像度を活かした美しい表現を実現しています。もう一方、縦向きのportraitモードではアクセシビリティに優れた実績一覧を表示する切り替え式を採用しています。

ポートレートモードではリスト表示（左）、ランドスケープモードではグラフィカルな表現（右）

Point2　タッチパネルのUIと操作性
iPadとPCサイトとの大きな違いは、PCはマウスとキーボードで操作するのに対し、iPadでは指でタッチして操作する点です。PCサイトでは当たり前のように行われるリンクのロールオーバーアクションなどはiPadでは視覚的に検知されないため、ボタンはボタンと直感的にわかるようなインターフェイスが必要です。
UIに大きく関わるところで参考にすべきは、iPadやアプリなどの馴染みのある操作性に習うことです。これによって、ユーザーに新たな操作の学習を必要とさせず、自然なブラウジングの提供が可能です。この作品では、iPadを扱う上で、フリックなどの基本的なUIを取り入れ、タッチパネルの操作に適したオブジェクトの大きさや形状・配置・アクションに配慮しています。
Point3　フォント
iPadには高品位なフォントが標準でプリインストールされており、それを有効に活用することで質の高いデザインを表現できるだけでなく、データの軽量化も可能になります。iPadプロジェクトでは実績のキャプチャ画像以外は、ほぼすべてプレーンテキストとCSSでテキスト周りを構築しており、軽量化されたデータにすることでネットワークの速度に負荷がかからないよう配慮しています。
フォントの選択では視認性の確保も欠かせません。タブレットのサイズを活かし、新聞や雑誌と同じような快適な閲覧を提供するためにも、iPadの画面サイズに合ったフォントサイズの選定が必要になります。今回のiPadプロジェクトでは、通常フォントサイズを大きめに設定し、拡大作業なしに閲覧できる視認性と可読性の確保に努めました。
Point4　レイアウト
iPadに標準搭載されているブラウザは、PCブラウザのようにスクロールバーは常時表示されていません。そのため、より一層導線を確保する構成や、場合によってはJavaScriptによる誘導アクションなどの導入が重要になってきます。
iPadプロジェクトでは、まずファーストビューに着目し、実績一覧は一画面完結型で情報のとりこぼしがないよう画面設計をしました。実績詳細は冒頭のキャプチャ画像の下に余白を残し、その下にコンテンツが続いていることを暗に提示し、縦スクロールを促す構成になっています。
また、横向きのlandscapeモード、縦向きのportraitモードの切り替え時に表示される情報量の違いを考慮して、写真やテキストをバランスよく配置することが必要です。違和感のないようなリキッドレイアウト（可変幅）に対応したインターフェイスの設計が求められます。

横向きのlandscapeモードで表示した場合のレイアウト

縦向きのportraitモードで表示した場合のレイアウト

Point5　JavaSriptによる軽量化
実績一覧のlandscapeモードとportraitモードでは、JavaScriptを外部ファイルとしてそれぞれ用意し、読み込みの軽減をしています。JavaScriptを外部ファイル化することによって1回で読み込まれるデータ容量を軽減し、必要なデータのみ読み込みと表示するタイミングをずらすことによって、ユーザーにストレスを感じさせない表示を提供しています。

まとめ：とことん触って、タブレットならではの体験を追及しよう！

ビジュアル面だけでなく、PCとマウスでは体感できないiPadならではの操作性を知ることが大切です。実際にiPadを用意し、とことん触って、最適なインターフェイスの実現を追及しましょう。iPad以外のタブレット端末はもちろん、スマートフォンでも同じことがいえます。

ユーザーの想像を超えるアイデアが生まれるまで

ユーザーの想像を超えるアイデアが生まれるまで
CASE3. 団長プロジェクト
マイノリティ・リポートの世界がやってくる
CASE4. メディアアート
コミュニケーションデザインの進化に終わりはない！

一般社団法人日本WEBデザイナーズ協会
（JWDA＝Japan Web Designers Assiciation）

日本WEBデザイナーズ協会（JWDA）は、WEBデザイナー市場価値向上を図り、WEBデザイン産業の育成・振興・発展を推進することを目的とする非営利団体です。JWDAは、「WEB」デザインに従事する団体や個人（リサーチ、マーケティング、企画立案、インターフェースデザイン・設計、広告デザイン、WEBデザイン、動画制作、システムインテグレーション、ビジネススキーム立案等に関わる稼業全てを指す）間の技術的な情報共有、社会的な地位向上、そして日本の産業の活性化に努めていきたいと考えています。

2009-2010 JWDA スローガン
人と人をつなぐ　そして2011年へ
Mission（協会使命）インターネットを利用した仕組み、サービスの制作に従事する団体、個人間の技術的な情報共有、社会的な地位向上、そして産業の活性化に努める。
Principles（理念）
優れたWEBデザインは、常に形状の審美性と機能的な操作性の二つの調和によって成り立ちます。私たちは製作者相互の最高の技術の賜物であり結晶であるWEBデザインを通して、日本の産業的・文化的発展に寄与する事を第一と考えます。
Vision（展望）
WEB制作者、業界間の発展と親和に努め、日本のWEB業界における中心的な存在になる。