2014.10.22 / Report, UI

アプリUI勉強会 in ネットイヤーグループ

Tomohiro Suzuki

有り難いことで、このReflectionというブログがきっかけで、IAシンキングの著者としても有名な坂本貴史さんにお声掛け頂き、ネットイヤーグループ株式会社にてアプリケーションのUIデザインについての勉強会をさせて頂きました。当日は弊社代表の鈴木健一と私、鈴木智大がアプリケーションのUIについて、今までの業務での経験から得られた内容についてお話をさせて頂きました。

本記事は当日の参加レポートとして、当日の内容をまとめたものとして公開するものです。
なお、写真撮影には今週より弊社に入社した吉竹遼がカメラマンとしてイベントの内容を撮影してくれました。


1,イントロダクション

まず、勉強会のイントロダクションとして、鈴木健一から弊社STANDARDの簡単なご紹介をさせて頂きました。
STANDARDでのデザインプロセス等、もちろん案件やお客様によって変化するものですが、通常行っているプロセスから、今回の勉強会でお話する部分の前提についてご紹介をしています。

2,利用中の体験とUIの間を繋ぐブリッジビルダー

2014-10-22_content02

鈴木智大より、アプリケーションのユーザー体験の一部である利用中の体験と、実際のユーザーインターフェイスをどう繋げるのかというお話をさせて頂きました。詳しい内容については後日この部分についてフォーカスした記事を書きたいと思います。
まず話を進める上ではいったん、利用中の体験をシナリオと定義しておき、UIの部分としてはワイヤーフレームとして定義しました。そして、そのシナリオとワイヤーフレームという成果物、ツールを繋ぐものとして画面遷移図に注目しました。
従来の画面遷移図はWeb制作からの流れで使われているものですが、インタラクティブなアプリケーションにおいては情報不足になりがちであり、構造も把握しにくいという問題提起をし、STANDARDで代替ツールとして利用しているUI Flowsというものについて紹介しています。

3,アプリのUI設計をする上で理解しておきたいコンポーネントの種類と用法

前職でシニアデザイナーとしてWebを専門にしていた鈴木健一が、アプリケーションのUI設計を学ぶために行なった自身の経験を元にお話をさせて頂きました。

アプリ UI の主要な画面パターン

  • 導入画面
  • トップ画面
  • 一覧画面
  • 詳細画面
  • 入力・操作画面

まず、最初にモバイルとWebの違いを取り上げ、特に視覚的にもわかりやすい部分として画面サイズに注目し、モバイルアプリケーション独自の画面サイズという制約の中から生まれる画面パターンについての紹介をしました。
それぞれ上記のような代表的な5つのパターンに分類し、中でも代表的な例を取り上げ、簡単に生まれた背景や、利用時のコンテキスト、注意事項について紹介しました。

操作の起点となるナビゲーションのメリット・デメリット

  • ドリルダウン型
  • タブ型
  • スプリングボード型
  • ドロワー型

続いてモバイルアプリケーションでの重要な点として、小さなスペースでのナビゲーションにフォーカスし、主要なナビゲーションパターンを検討する上でのメリットとデメリットについて紹介しました。
それぞれ上記のような代表的なナビゲーションの説明と、実際にナビゲーションを考える時にどのようなケースではどのナビゲーションが適しているのかについての考察になります。

その他によく使われるコンポーネントの紹介

  • セグメンテッドコントロール
  • リフレッシュコントロール
  • カルーセルパネル
  • モーダルメッセージ

最後に、その他の分類としてよく使われるコンポーネントの紹介をしました。
よく混同されがちなナビゲーションのタブと、セグメンテッドコントロールの違いや、アプリケーションでは頻繁に使用されるモーダルメッセージとその注意点などについて紹介しています。

質疑応答・ディスカッション

その後、会場にお越し頂いた方の中からの質疑応答・ディスカッションという時間を、坂本さんにファシリテートして頂きながらそれぞれに回答しつつ、イベントは終了となりました。
当日はデザイナーという肩書きの方はいらっしゃらずディレクター、インフォメーションアーキテクト、プロデューサーなどの方が参加しており、それぞれの業務的な視点からの疑問に対して解答をする中で、弊社としても非常に学びになる点がありました。
特に情報構造が多様化して、様々なユーザーがいる中での制作プロセスとしてUI Flowsの情報自体の在り方を別のレイヤーから捉え、既存のUXデザインの情報設計と近いアプローチとして捉える部分は、個人的にも今後の発展性として可能性のある部分だと感じました。

今回は平日の火曜日というお忙しい時間の中、わざわざお越し頂いたネットイヤーの方々、お声掛け頂いた坂本さんに感謝すると共に、さらに今後両社の発展に繋げるための場として非常に学びとなりました。STANDARDでは引き続き登壇依頼を受け付けておりますので、気軽にお声掛けくださいませ。

2014/10/24追記
UI/UX Study w/Standard Inc. – bookslope blog

お互いの学びと成長を促せるメンバーを募集しています

STANDARDは「未来の豊かさにつながる仕組みをデザインする」というミッションを元に、人の役に立つ事業やビジネス、サービスの創出や改善をデザインの力で支援し続けています。

そのために、お互いの価値観を尊重し、学習と実践と内省をしながら成長できる場所であり続けることを目指しています。

あらゆる物事の仕組みを設計するデザイナーとして、ご一緒に考えながら試行錯誤していきたいという方からのご連絡をお待ちしています。

記事一覧へ

Related Articles

About us

アプリやWebサービスなどの新規事業や既存事業における
アイデアの仮説検証からデザインまでをサポートします

株式会社スタンダードは、アプリやWebでサービスを展開される方の企画制作をサポートするデザインファームです。