酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

UXをみっちり基礎から教わることができた「モバイルUI/UXのキホン」って勉強会のレポート!

10/4に渋谷で開催された「モバイルUI/UXのキホン」 に参加しました。2011年から色々なテーマで開催されている歴史のある勉強会なのと、ディスカッションや意見交換を通じた双方向性を大切にしている、学びの多い勉強会でした!

今回は勉強会の中で特に参考になった点を書いていきます!


Included file ‘custom/google_ads_yoko_naga.html’ not found in _includes directory

発表スライド

発表の際に使われたスライドです。しっかりとした内容です!

発表スライドは「prezi」というサービスを使っているそうです。動きのあるカッコイイデザイン!

UI/UXは最近のバズワード

デジタルガジェットでは特に言えることですが、市場が成熟してきて機能的な差別化が難しくなってくると、ユーザーの体験(UX)が重視されるようになってくるそうです。スマホアプリは特にこういった要素が強く、ココ最近は『UI/UX』がバズワードになっているそうです。

UI/UX/IAの言葉の定義

またこれは僕もこの勉強会に行くまでUI/UX/IAという言葉を勘違いしてました。正しくはこんな感じです。

* UX(ユーザーエクスペリエンス) => ユーザーの体験そのもの。使いやすさはUXの一つの要素でしかない
* IA(インフォメーションアーキテクチャ) => 人適切な情報を適切に伝えて、使えるようにするための考え方
* UI(ユーザーインターフェイス) => ボタンの装飾やテキスト幅などの外見

「UX(体験) => IA(利用) => UI(外観)」という関係だそうです。

ブランディングの変化

グッチやシャネルのようなブランドが飛ぶように売れた時代、ユーザーはブランドに対してステータスを求めていたそうです。今は共感を感じるブランドを選ぶような傾向が見られ始めたそうです。例えば、自動車メーカーのボルボは2020年までに新車が関わる交通事故死者・重傷者ゼロを目指す“ビジョン2020”を掲げて技術開発に取り組んでいるそうです。そういったビジョンに共感して、ヨーロッパではボルボの高級車の売上を獲得しているそうです。UXはこのブランディングに密接に関わっているそうです。

目指すべきUXとは

アプリは大前提として「利用できること」、それが満たされれば「信頼出来ること」、信頼出来るならば「共感できること」とユーザーの想いが強まっていくそうです。そして、その先にある素晴らしいUXには「アプリに接する体験がユーザーとアプリを強く結びつけることができる。ツボだ!とハマったゲームに近い感覚をえられる」という要素があるそうです。これは僕には今まで持てなかった発想で面白かったです!

UXを生み出す手順

UXを生み出す手順は次のようなフェーズになります。

(1) ユーザーの求める情報の洗い出し

コアターゲットの知りたいものをリストアップします。もし、もし既存アプリなら「提供している情報」と「これから提供できる情報」を洗い出すことが重要になります。

(2) アプリの定義

一番大切と言ってもいいフェーズですだそうです。「コアターゲット」、「目的」、「使用方法」、「中心的な機能」といった要素を考えていきます。

また初めて知った概念として「ナラティブ」というものがありました。ゲーム業界では一般的な用語だそうで、ユーザーが能動的に感じるストーリーのことだそうです。ユーザー側が感じることで、ゲームを通して感じる提示されていないイメージや世界観、ストーリーのことをこう呼ぶそうです。

(3) ターゲットユーザーの体験を設計

自発的に次の行動を決定し、その行動により、ユーザーが成長したり、つながりを感じたりすることができる。ユーザーがどういう気分になるのかを設計する。

(4) 遷移設計

リストアップした機能とアプリの設計に従ってファーストビューから設計していく。道のりを設計する前に、各機能をグルーピングして重み付けを行う。アプリの定義と照らし合わせながら、グループ分けしたものに優先順位を設計する。どんな気分になるのかを考えながら設計する。

(5) ワイヤーフレームを使った画面設計

優先順位の高い機能情報を注目を集め位安いレイアウトを作ること。

UXを設計する上での注意点

UXを設計していく時に陥りがちな罠として次のようなものがあるそうです。

* 入力は最小限にすること。入力項目は最小に収めます。特にモバイルでは重要。
* オプションは3つまで。ある情報に対して付随する情報を出し過ぎないこと。
* 狭い領域に情報を集めすぎないように注意すること。

モバイルデザインに大切な要素

モバイルのデザインに大切なのは次の点だそうです。

シンプル => 最小限の要素で必要な情報を適切に表示する。
クリーン => 清潔感があること。色、文字、余白が整っていて情報が見やすいこと。
パワフル => 見やすさだけでその魅力が伝わる大胆さ。手放せなくなる動機を与える。

後ちょっと面白かったのは、『さっさとコード書けよ』のデザイナ版のような『 Keep it simple(シンプルにしておけ!)』というKISSの原則というのがあった点です。気をつけます。。。

UI面で意識すること

テキスト

説明や通知に使われる、コンテンツ以外のテキストを設計する。テキストはアプリとユーザーが意思疎通するための道具。例えば、「関連記事」=>「こんな記事もあります。」のように、ユーザーに伝わりやすい言葉を常に考えて設置する事が重要だそうです。また日本語の文字間隔は詰まり過ぎなので、CSSなどで少し間隔を開けてあげるとよみやすくなるそうです。

余白は統一

マージンパディングなども3種類ぐらいのパターンにすると見栄えが良くなるそうです。

要素の間隔

スマートフォン特有のタップなどの動作やPC用のマウスクリックの動作などのユーザーの操作がしやすいデザインを常に意識して設計すること。

大事なこと

最後に今回の勉強会のラップアップ的な内容。UXは分かりやすさではなく、ユーザの体験そのものだそうです。強制された体験ほどつまらないものはないので、ユーザーに自ら体験して感じてもらうようにすることとのこと。おもしろかった〜

Included file ‘custom/google_ads_yoko_naga.html’ not found in _includes directory

おすすめの書籍