10/4に渋谷で開催された「モバイルUI/UXのキホン」
に参加しました。2011年からいろいろなテーマで開催されている歴史のある勉強会なのと、ディスカッションや意見交換を通じた双方向性を大切にしている、学びの多い勉強会でした！
今回は勉強会の中で特に参考になった点を書いていきます！
🍣 発表スライド
発表の際に使われたスライドです。しっかりとした内容です！
発表スライドは「prezi」というサービスを使っているそうです。動きのあるカッコイイデザイン！
🎃 UI/UXは最近のバズWord
デジタルガジェットでは特にいえることですが、市場が成熟してきて機能的な差別化が難しくなってくると、ユーザーの体験(UX)が重視されるようになってくるそうです。スマホアプリケーションは特にこういった要素が強く、ココ最近は『UI/UX』がバズWordになっているそうです。
🐹 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を設計していく時に陥りがちな罠として次のようなものがあるそうです。
* 入力は最小限にすること。入力項目は最小に収めます。特にモバイルでは重要。 * オプションは３つまで。ある情報に対して付随する情報を出し過ぎないこと。 * 狭い領域に情報を集めすぎないように注意すること。
🎂 モバイルデザインに大切な要素
モバイルのデザインに大切なのは次の点だそうです。
シンプル => 最小限の要素で必要な情報を適切に表示する。 クリーン => 清潔感があること。色、文字、余白が整っていて情報が見やすいこと。 パワフル => 見やすさだけでその魅力が伝わる大胆さ。手放せなくなる動機を与える。
後ちょっとおもしろかったのは、『さっさとコード書けよ』のデザイナー版のような『Keep it simple(シンプルにしておけ！ )』というKISSの原則というのがあった点です。気を付けます…
😸 UI面で意識すること
テキスト
説明や通知に使われる、コンテンツ以外のテキストを設計する。テキストはアプリケーションとユーザーが意思疎通するための道具。たとえば、「関連記事」=>「こんな記事もあります」のように、ユーザーに伝わりやすい言葉を常に考えて設置することが重要だそうです。また日本語の文字間隔は詰まり過ぎですので、CSSなどで少し間隔を開けてあげるとよみやすくなるそうです。
余白は統一
マージンパディングなども3種類ぐらいのパターンにすると見栄えが良くなるそうです。
要素の間隔
スマートフォン特有のタップなどの動作やPC用のマウスクリックの動作などのユーザーの操作がしやすいデザインを常に意識して設計すること。
😼 大事なこと
最後に今回の勉強会のラップアップ的な内容。UXは分かりやすさではなく、ユーザーの体験そのものだそうです。強制された体験ほどつまらないものはないので、ユーザーに自ら体験して感じてもらうようにすることとのこと。おもしろかった〜
🖥 VULTRおすすめ
「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！
📚 おすすめの書籍
