Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

アプリ・サービスのUI/UXのモックアップ(ワイヤフレーム)の簡単な描き方

3,279 views

Published on

アイデアの独自の価値、Unique value proposition(UVP)を決めてある方向けのスライドです。
顧客に与える価値が具体的になっているアイデアに対して、ユーザーインターフェース、モックアップを作るための方法を紹介しています。
モックアップの作り方が分かる、 作れる状態になることを目的としています。

Published in: Technology
  • Be the first to comment

アプリ・サービスのUI/UXのモックアップ(ワイヤフレーム)の簡単な描き方

  1. 1. アプリ・サービスのUI/UXのモックアップ(ワイヤフレーム)の簡単な描き方http://www.spath.jp/
  2. 2. まえがき•  アイデアの独自の価値、Unique valueproposition(UVP)を決めてある方向けのスライドです•  顧客に与える価値が具体的になっているアイデアに対して、ユーザーインターフェース、モックアップを作るための方法を紹介しています•  モックアップの作り方が分かる、作れる状態になることを目的としています© 2013 Actcat, Inc. All Rights Reserved 2
  3. 3. 目次1.  UI/UXとは?2.  UIの一例3.  Viewという概念4.  代表格のインターフェイスパターン5.  細部のインターフェイスパターン6.  ツールの選択7.  実際に描く流れ© 2013 Actcat, Inc. All Rights Reserved 3
  4. 4. UI/UXとは?•  ユーザとアプリ・サービスが触れる場が
User Interface
ユーザが受け取る価値・体験が、
User Experience•  使い方が分からない機能は、
価値がありません •  アプリやサービスは
UI/UXをベースに考えましょう © 2013 Actcat, Inc. All Rights Reserved 4
  5. 5. 2. UIの一例(スマホ or PCファースト)© 2013 Actcat, Inc. All Rights Reserved 5
  6. 6. UIの一例(Facebook)© 2013 Actcat, Inc. All Rights Reserved 6Mobile, PC コンテンツはほぼ同様。PC側はコアコンテンツ以外に、ナビゲーション、お知らせなどを常時表示可
  7. 7. UIの一例(Twitter)© 2013 Actcat, Inc. All Rights Reserved 7Mobile, PC コンテンツ・各ボタン配置共にほぼ同様。優先度が低い扱いの情報もPC版では表示している程度
  8. 8. スマホファーストを提案•  最もユーザが長時間触れる端末はPCからスマホに移行が進む…と想定•  スマホ対応が必須に•  スマホを主軸にUI作成後、PCはスマホ版をより便利にする程度が、主流になってくるのでは。コスパは高い。© 2013 Actcat, Inc. All Rights Reserved 8
  9. 9. 3. Viewという概念© 2013 Actcat, Inc. All Rights Reserved 9
  10. 10. View Partsの組み合わせでUIは作られている© 2013 Actcat, Inc. All Rights Reserved 10
  11. 11. 4. 代表格のインターフェイスパターン=> Viewの組み合わせのパターンUIを描いてみよう© 2013 Actcat, Inc. All Rights Reserved 11
  12. 12. ナビゲーションパターン© 2013 Actcat, Inc. All Rights Reserved 12
  13. 13. タブバーパターン© 2013 Actcat, Inc. All Rights Reserved 13
  14. 14. ユーティリティ / 没入© 2013 Actcat, Inc. All Rights Reserved 14
  15. 15. 5. 細部のインターフェイスパターン© 2013 Actcat, Inc. All Rights Reserved 15
  16. 16. パターンだけで本が出来ちゃう•  オススメ☆© 2013 Actcat, Inc. All Rights Reserved 16
  17. 17. パターン多すぎ•  細かなUIの作りこみはMVPには一旦不要•  ユーザビリティテストなどを通じて、デザイナと共に構築していこう•  まずはシンプルな、MVPのための、UIを描こう© 2013 Actcat, Inc. All Rights Reserved 17
  18. 18. 6. ツールの選択© 2013 Actcat, Inc. All Rights Reserved 18
  19. 19. ツールの選択•  手書き– 用紙を用意しましょう。チラシの裏でも構いません。罫線が引いてあるデザイナーっぽいノートなどもオススメです– ペンを用意しましょう。100円均一のボールペンでも構いません。12色など入ったマインドマップでも使えそうなペンもオススメです•  ソフトウェア– Balsamiq Mockups 最もメジャー。79$http://www.balsamiq.com/– SwordSoft Layout 上記とそっくり。6.99$http://www.swordsoft.idv.tw/© 2013 Actcat, Inc. All Rights Reserved 19
  20. 20. 始めての方には手書きがオススメ•  個人的には初めは手書きがオススメです•  手書きのほうが何かを見ながら作業しやすいですし、変更も簡単です•  注釈コメントを書くこともできます© 2013 Actcat, Inc. All Rights Reserved 20
  21. 21. パーツ例(Balsamiq Mockups)© 2013 Actcat, Inc. All Rights Reserved 21http://www.balsamiq.com/
  22. 22. 7. 実際に描く流れ© 2013 Actcat, Inc. All Rights Reserved 22
  23. 23. 実際に描く流れ 1/21.  手元に参考となる類似のアプリやサイト、デザインパターンの本などを用意する2.  コアとなるViewを描く=> ユーザにとって最も価値あるページ1.  外枠の線をとりあえず引く2.  とりあえずナビゲーションバー(ヘッダー)をつけても良し•  コアとなるViewの例:– Facebookのタイムライン– Cookpadのレシピページ© 2013 Actcat, Inc. All Rights Reserved 23ソフトウェアを使っている場合には、外枠の線を引く代わりに、iPhoneなどを使用する
  24. 24. 実際に描く流れ 2/21.  コアとなるViewを描く(続き)1.  「他の人に見せる」ことを前提に、思いつくままに描く2.  パーツなど、参考になるものを参考に試行錯誤する2.  コアとなるViewへの動線となる、各Viewを描く1.  タブ、ナビ、ユーティリティから選択2.  登録画面、一覧画面、なども3.  自分で使うイメージを思い浮かべて、機能の優先度、使用頻度に応じて並び替え、入れ替えなどを行う© 2013 Actcat, Inc. All Rights Reserved 24
  25. 25. 最後に•  ユーザ体験ファーストで作っていくために、
ユーザの各機能の使用頻度などに応じたデザイン設計をしましょう •  デザインを0から創造することは難しく、
ユーザフレンドリーじゃない。
みんなが慣れた自然なUIを目指そう •  開発を開始するのは
UI/UXが出来てからをおすすめします© 2013 Actcat, Inc. All Rights Reserved 25
  26. 26. 会社概要会社名 株式会社アクトキャット設立年 2012年5月10日代表取締役 角 幸一郎本社所在地 東京都港区赤坂8丁目9番14号 ローザ赤坂 107号室40以上の自社iOS/Androidアプリの開発実績iOS/Androidアプリ 累計 350万ダウンロード以上Apple iOS App Store Best of 2010雑誌掲載数十冊以上App Store 総合無料 5位 50位 多数26© 2013 Actcat, Inc. All Rights Reserved
  27. 27. お問い合わせ先下記までお気軽にお問い合わせ下さいCopyright 2012© Actcat, Inc. All Rights Reserved. 27担当: 角 幸一郎"Mail: koichiro.sumi@actcat.co.jp"Tel : 03-6434-5905"HP : http://www.actcat.co.jp/http://www.spath.jp/

×