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

『LINE』大ヒットの影の立役者!? 今、サービス開発者が学ぶべきユニバーサルデザインの基本【連載:五十嵐悠紀⑳】

タグ : LINE, UI, UX, デザイン, ユニバーサルデザイン 公開

 
天才プログラマー・五十嵐 悠紀のほのぼの研究生活
先読み(5)五十嵐さん_100px.jpg

筑波大学  システム情報工学研究科  コンピュータサイエンス専攻  非数値処理アルゴリズム研究室(NPAL)
五十嵐 悠紀

2004年度下期、2005年度下期とIPA未踏ソフトに採択された、『天才プログラマー/スーパークリエータ』。筑波大学 システム情報工学研究科 コンピュータサイエンス専攻 非数値処理アルゴリズム研究室(NPAL)に在籍し、CG/UIの研究・開発に従事する。プライベートでは二児の母でもある

皆さんは、無料のメッセージアプリ『LINE』を使っているでしょうか?先日(1月18日)ユーザー数が1億人を突破するなど、快進撃を続けています。

競合サービスがたくさんある中、なぜこれだけのヒットを記録したのでしょうか。すでにさまざまな角度からその要因は語られていますが、わたしは「誰でも簡単に使える」というコンセプトが大きかったのではないかと感じています。

コミュニケーションプラットフォームとして確固たる地位を確立した『LINE』にも、ユニバーサルデザインはふんだんにちりばめられている

ユーザーインターフェースを考える時に、「誰でも簡単に使える」デザインにするというのは、非常に大事であり、なおかつ難しいテーマです。そしてその思考は、「年齢、性別、能力、環境にかかわらず、できるだけ多くの人々が使えるように最初から考慮して、街、モノ、情報、サービスなどをデザインするプロセス、またその成果」を指すユニバーサルデザインにも精通する考え方でもあるのです。

今回は、そんな老若男女問わず利用される『LINE』をはじめとするさまざまなサービスに深いかかわりを持つユニバーサルデザインについて考えてみたいと思います。

≪ユニバーサルデザインの7原則≫

  1. 公平性:誰にでも公平に利用できること
  2. 自由度:柔軟性:使う上で自由度が高いこと
  3. 単純性:使い方が簡単ですぐわかること
  4. 明瞭性:必要な情報がすぐに理解できること
  5. 安全性:うっかりミスや情報がすぐに理解できること
  6. 省体力:無理な姿勢をとることなく、少ない力でも楽に使用できること
  7. スペース性:アクセスしやすいスペースと大きさを確保すること

3歳児にも、おばあちゃんにも「説明不要」で爆発普及した『LINE』

以前、エンジニアtypeで『LINE』のデザイナー、橋本建吾さんと対談した際に「誰もがパッと見て分かるデザインを心掛けている」とおっしゃっていました。うちの長男は3歳の時から祖母と『LINE』で“会話”しています。

橋本氏(写真中央)から直接的な言葉は出なかったが、サービス設計の段階で無意識のうちに「ユニバーサルデザイン」を気に掛けていた

ひらがなのフリック入力とスタンプ機能を屈指して、「こんどいつくる?」と送ったり、お風呂のスタンプをポチッと押したりして、祖母から反応があるととっても喜んでいます。祖母も電子機器には弱いのですが、『LINE』は説明する必要もなく使いこなしています。

これは、「誰もが最初に見てある程度使える」というコンセプトを重視してUI設計を行っているとおっしゃっていた橋本さんの狙い通り。直接言葉にはしていませんでしたが、まさにユニバーサルデザインを体現されています。

また、スマートフォンに特化したサービスにしたことで、ここまでシンプルなUIを作ることができた『LINE』ですが、「アプリダウンロードのバイト数を減らす」のもこだわりだとおっしゃっていました。インターネットに接続している環境がいつでもどこでも高速だとは限りません。『LINE』の初期設定では最低限のアプリのインストールだけで、スタンプを増やすのは後からゆっくりできるのも魅力の1つです。

飲み会の席などの高速回線がない状況でもパッとインストールできることは、ユーザー数の獲得につながっていると考えられますよね。「あらゆる状況下で快適に使えること」も大事なユニバーサルデザインの視点です。

また、『LINE』の友だち検索機能「ふるふる」も「単純ですぐに使える」というポイントに尽きます。友だちを追加したい時に端末をシェイクするだけで、追加できる。このインターフェースは使い方が単純ですぐに分かりますよね。

Webサービスのユニバーサルデザイン、カギは「ストレスフリー」

『LINE』だけでなく、ほかのWebサービスでもユニバーサルデザインを意識すべき状況は、多々あります。

事例①: アンケートフォームや会員登録は「うっかり防止」のデザインを

例えば、アンケートフォームや会員登録などでは必要以上に入力作業を求めないよう、ラジオボタンやチェックボックスを配置することが常識になっていますよね。また、ショッピングサイトにおける購入ボタンではワンクリックで購入が確定するのではなく、中間に確認画面を設け、実行ボタンを押すことで購入が確定する仕組みにする必要があります。このようなページ遷移にすることで、「うっかり購入してしまう」という行為を防ぐことができます。

事例②: ホームページの行間には細心の注意を

お問合せフォームに入力する際、文字数制限があるにもかかわらず、書き出し部分が見えなくなるようなフォームをよく見かけます。行間の詰まったホームページテキストも良く見かけますが、これは読みにくいというだけでなく、読んでもらえないということにもなりかねません。「原則7」にあるようにスペース性は実世界だけでなく、Webフォームの中でも考えなければいけないのです。

事例③: ユーザーのPC環境にも配慮を

いかなる環境の閲覧者においてもブラウジングが可能な自由度の高いものにする、というのも1つの大事な観点です。フレームを使わないとか、代替テキストを用意するといった工夫も考えらます。例えば、最新のブラウザでは問題がなかったとしても、旧式の古いブラウザなどではレイアウトが崩れてしまうケースは多々見受けられます。

ブラウザをアップデートすれば良い、という考えもあるとは思いますが、年配の方は比較的古いPCを大事に使っておられる方も多く、ブラウザのアップデートはOSやメモリ等の都合から難しかったりするケースもあると考えられます。対象となるユーザー層、年齢層などから、どのような環境でアクセスしているかなども考慮してホームページのレイアウトを構築していく必要もありそうですね。

目に見えない工夫に、サービスデザインのヒントが隠れている

上記はほんの一例に過ぎませんが、このように、「ユニバーサルデザイン」は街づくりだけでなく、さまざまなプロダクト設計をする際に考える必要があります。普段の生活でも、気を付けて観察していれば、かなり身近なところで「工夫されてるな」と思うモノに出会えます。

Pinterestを使って「イケてないUI」について言及している中村教授。その着眼点を参考にしてみるのもいいかもしれない

楽しいBADUIの世界」では、同じくUI研究者である京都大学の中村聡史先生が、身近なUIのダメな例を集めて、分かりやすく面白く紹介してくださっています。良いUIを創り出すためには、ダメなUIから学ぶことも大事です。

また、わたしたちの行動でありがちなのが、最後までたどり着く前にやめてしまうケース。アンケートやインストールを進める時に、どのくらいの時間掛かるのかが表示されないものはイライラしますよね。

逆を言えば、「あとどのくらいなのか」の表示があるだけでユーザーはやりきることができるし、待つことができます。また、“目標に近づくほどヤル気が出る”もので、例えばストレージサービスでは「250MBボーナス獲得まであと○ステップ!」という表示があるだけで、ユーザーは最後までやり通すことが多くなります。

こうした人間の心理にまで踏み込んでデザインをされているサービスも多く、このような内容に興味がある方は、『インタフェースデザインの心理学』という本が分かりやすいのでお勧めです。副題に「WEBやアプリに新たな視点をもたらす100の視点」とあるように、心理学者によって、インターフェースをデザインする時に留意すべき指針が描かれています。

ユーザーにとって良いデザインとは何か、を考える上で役に立つでしょう。

情報科学だけでなく、デザイン、心理学など、さまざまな分野の勉強が必要かと思うと、大変だと思うかもしれません。しかし、さまざまなプロフェッショナルとコラボして誰にでも使いやすい新しいモノが作れるというのはステキですよね。

ぜひ、街を歩く時、サービスに触れる時、新しいアプリを入れる時、さまざまなモノの持つ「目に見えない工夫」に注意を向けてみてください。きっと「皆にとって使いやすいデザイン」を考える上で必要なことに出合えると思いますよ。

※ユーザビリティチェックを行う際に参考になるのがSite Usability Evaluationというガイドラインです。システム設計をする際にはいろいろなケースを想定しなければいけません。具体的事例が挙げられているので、一度確認してみてはいかがでしょうか

>> 五十嵐悠紀さんの連載一覧はコチラ




人気のタグ
業界有名人 スタートアップ 開発 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

タグ一覧を見る