エンジニアtype - エンジニアのシゴト人生を考えるWebマガジン
  • TOP
  • キーパーソン
  • 旬ネタ
  • コラボ
  • ノウハウ
  • 女子部
  • キャリア

【事例付き】モバイルUIを劇的に改善する「インフォグラフィックス」の上手な使い方

タグ : UI/UX, インフォグラフィックス, スマートフォン, モバイル 公開

 
著者プロフィール
takashi_kukuchi

Web Directions 日本支部代表
菊池 崇

大手IT企業、システム会社、Web制作会社のコンサルティングや企業向け研修、講演、書籍の執筆などを行い、自身も大手電機メーカーの端末UIを担当。モバイルファースト、レスポンシブWebデザインを日本で初めて紹介し、最新情報を日本のWebメディアに寄稿している。近著は日経SYSTEMS2012年12月号『これからの開発はモバイルファーストだ』や『レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック』(Ascii WebProfetional)など

モバイルUIを考える上で、皆さんはどのように進めていますでしょうか?

2010年に提唱された「モバイルファースト」というコンセプトをご存知でしょうか。一部の制作者だけが騒いでいると間違った認識をしているデベロッパーもいたようですが、発表された当時でも、元GoogleのCEO(現Google会長)であるエリック・シュミットもモバイルファーストの可能性や、今後Googleがモバイルファーストを取り入れていくと語っていました。

つまり、制作者だけが知っておくべきコンセプトではなく、経営者、もっと言うとマーケッター、デベロッパーなどあらゆる職域の方も広く全般に知る必要があるコンセプトと言っても過言ではありません。

モバイルファーストのコンセプトはシンプルで簡単そうなのですが、実行しようとすると非常に難しい場合がたくさんあります。

モバイルファーストを提唱したLuke Wroblewski氏のスライド(以下参照)では、モバイルファーストには3つの特徴があると紹介されています。

1つ目は「市場の拡大:GROWTH」、2つ目は「制約:CONSTRAINS」、3つ目は「機能:CAPABILITYS」です。

今回の記事では、これら全ての紹介はできませんが、2つ目の「制約:CONSTRAINS」が、モバイルUIを作る上で重要なポイントになるので解説させていただきます。

「見せ方」ではなく「コンテンツ」そのものを分かりやすくする

「CONSTRAINS」の日本語訳は「制約」です。

「制約」という単語に、少しネガティブな印象を受ける人もいるでしょう。しかし、ここで言う「CONSTRAINS」というのは、そのような意味ではありません。

デスクトップでの作業をメインにしているわたしたちは、スマートフォンの画面は小さく使いづらく感じることが少なくありません。結果として、小さいことをデメリットのように感じる場合があります。

一見、画面サイズが小さいことはデメリットですが、視点を変えると画面サイズという制約があることで、UIの工夫をしたり、情報の設計(IA)を研ぎすますことになり、結果良いUIが誕生することになります。

これがモバイルファーストのコンセプトの「制約」の本来の意味です。

PC_Mobile_demo

モバイルとPCサイズの比較をしてみると、デスクトップに比べて非常に小さいことが一目瞭然

例えば、数字が縦横に並ぶ表を上手にスマートフォンで伝えることは簡単ではありません。一つ一つのセルが小さくなってしまい、文字同士の間隔が適切に保てなくなります。もっと複雑な表組みならば、数字が見えなくなってしまう可能性さえ容易に想像ができます。

では、どうすれば効果的にこのような情報を解りやすくユーザーへ伝えることができるのでしょうか?

うまくCSSを利用して文字サイズを小さくしたり、セルの余白を調整して見栄えをコントロールするのも1つの方法かもしまれません。しかし、これでは根本的な「表組み表示」の問題にはアプローチしていません。

わたしたちは、見栄えのデザインをコントロールするという方法ではなく、根本のコンテンツにもっと目を向け、コンテンツ自体から考えてみる必要があります。

画面の制約があるがゆえに、コンテンツ自体をユーザーに分かりやすい表示方法で出すことが必要になるのです。

その一つの手法が、インフォグラフィックスです。

モバイルUIとインフォグラフィックスの関係

UIというと、ボタンや色、形、操作方法などに目がいきがちですが、実はコンテンツをどのように見せるかもポイントになってきます。

先ほど、直感的に表現することが大きなポイントと解説しましたが、直感的に伝える手法の一つにインフォグラフィックスがあります。

インフォグラフィックスのことを「データーをグラフィックス化したもの」、「イラストを入れればインフォグラフィックス」、「情報を1枚のグラフィックスで表現するもの」と思っている方も多いようですが、インフォグラフィックスの根本はデータや情報を分かりやすく可視化し、デザインすることになります。

つまり、「言葉を添えなくても伝えることができる」ということも、インフォグラフィックスの一つの利点になります。

例えば、同じ数値でも、配置している場所や色、形、大きさなどで違う情報と認識できるようになるのです。

表示内容を直感的に伝えるための発想法

ある例を通して、情報をコンテンツから考えて、分かりやすく伝えることの大切さを考えてみましょう。

皆さんが、もし東京からパリへ旅行するとして、東京とパリの気温を比較したいと思った場合、以下のように表示された情報を直感的に理解ができるでしょうか?

UI_sample_1

前提として、“気温を比較する”という条件があるので「-3℃」の表記の意味をすぐに分かる方もいるかもしれません。が、前提を知らないユーザーは、「-3℃」という情報が何を意味しているか理解できないかもしれません。

ひょっとすると、気温を比較したいユーザーであっても、画面の「-3℃」という数字の情報の意味が分からないかもしれません。

要は、ユーザーにとって「-3℃」という数字の情報は意味がない可能性が高いのです。

ユーザーは、東京とパリの温度差がどのくらい違うのかを直感的にすばやく理解できれば十分であり、東京より「暑い」のか「寒い」のかを知ることができれば十分なのです。

モバイルは、電車の中など通信状況の不安的な状態でコンテンツを消費することも多々あります。そんな時には、多量の字面や、意味の伝わりにくい数字を追ったりすることが難しくなります。そのため、直感的に分かるように情報を表現するというのが、大きなポイントになります。

そこで見てほしいのが、以下の『Weathertron』というお天気アプリです。

Weathertron

このアプリの表示方法は、一見するだけで1週間のお天気情報を即座に知ることもできます。さらに、次の日との寒暖の差もグラフで理解することができ、同じ数値でも1日の最高気温と最低気温がはっきり分かります。タイトルなどの言葉がなくても、ビジュアルだけで情報が分かりやすく表現されているのです。

東京とパリの温度差も、こうやって表示されれば即座にユーザーが理解できるでしょう。

このように、インフォグラフィックスの要素は、モバイルUIを作る上では大きなメソットになると言えます。どのように情報を伝えるのかというのは、データなどの情報を掲載することではなく、「ユーザーが本当に必要としている情報は何か?」を読み解き、最適な方法で伝えることが大切なのです。

レスポンシブとデータビジュアライゼーション

すでに一般的になっているレスポンシブWebデザインでは、PCサイトとモバイルサイトに1つのHTMLを利用し、すべてのスクリーンサイズで情報を表示しなければなりません。

実案件でよく問題となるテーブル組のWebサイトなどは、制作する上で非常に悩ましい要素です。

表組みはPCページなどでは分かりやすいため利用できますが、モバイルでは上記した図(「モバイルとPCサイズの比較」)のように表示領域が少ないため、情報を分かりやすく伝えづらいと言えます。

ここでのポイントは、「必ず表でなければならない」という考え方にとらわれず、インフォグラフィックスを利用して「表を利用しない」、「表を崩す」のにトライするということです。

下記はよくレスポンシブWebデザインでは難しいとされる複雑なCRMの画面(URLはコチラ)ですが、データをうまくビジュアライズ化することで、スマートフォンでも見やすいようにしています。表組みを壊すことに挑戦したデータービジュアライゼーションの一つとも言えるでしょう。

RSP

最後に~オススメの書籍紹介

モバイルの普及と、モバイル経由でのWebサイトへのアクセス増により、どの企業でもモバイルへの対応というのは急務になってきています。もし対応が遅れれば、新しいマーケットへ進出機会の損失ばかりか、既存の顧客を失うことにもなりかねません。

今後モバイル対応を行う上で、限られた画面の中でどのようにコンテンツを解りやすく伝えるのかというのが重要になるでしょう。

制約を物差しとして、コンテンツ、情報、デザイン、UIを研ぎすましていきましょう。直感的に伝わる方法の一つとして、インフォグラフィックスやデータビジュアライゼーションがあるのです。

Webサービスの開発者たちは、言葉でなくても伝えられるデザイン思考も、今後取り入れていく必要があるだと考えています。

実践的なインフォグラフィックスを学べる講座が開催

SwapSkills10SwapSkillsDoubbble(10) –「伝える」を掘り下げる インフォグラフィックス

■日時:8月18日(日)13:00~17:00
■参加費:7800円
■登壇者:
櫻田 潤(ビジュアルシンキング 運営)
徳間貴志(『bowlgraphics(ボウルグラフィックス)』設立)
栗原康太(株式会社ガイアックス INBOUND marketing blog 編集長)

>> 開催場所の詳細や申し込みはコチラ




人気のタグ
業界有名人 スタートアップ 開発 SE 転職 エンジニア プログラマー Web スキルアップ ソーシャル アプリ シリコンバレー キャリア プログラミング Android 起業 えふしん スマートフォン アプリ開発 SIer 技術者 UI btrax Webサービス クラウド Apple スペシャリスト CTO Twitter Brandon K. Hill ギーク 英語 村上福之 Facebook Google デザイン IoT SNS ツイキャス 世良耕太 モイめし IT 30代 採用 赤松洋介 コーディング 20代 UX 勉強会 プロジェクトマネジメント Ruby ITイベント Webエンジニア 中島聡 ビッグデータ 法林浩之 ウエアラブル iOS 五十嵐悠紀 LINE ドワンゴ ひがやすを ロボット 受託開発 モノづくり IT業界 コミュニケーション イノベーション ハードウエア MAKERS tips ゲーム 女性 ソーシャルゲーム Webアプリ SI インフラ iPhone 女性技術者 高須正和 マイクロソフト 研究者 UI/UX トヨタ 自動車 ノウハウ チームラボ 息抜き システム ソニー プラットフォーム Java メイカームーブメント オープンソース 和田卓人 エンジン グローバル 開発者 教育 イベント サイバーエージェント ソフトウェア 女子会 コミュニティ メーカー 家入一真 スーパーギーク 増井雄一郎 GitHub 人工知能 IPA 40代 日産 テスト駆動開発 ソフトウエア 音楽 TDD ニュース モバイル PHP TechLION

タグ一覧を見る