アイデアを伝えるトレーニング UX/UIデザイン編(FABSTEPS授業レシピ)

Created Date: 2018-06-03/ updated date: 2018-06-04
    • Medium       ux
    Owner & Collaborators
    License
    By nc sa
    Summary

    Materials

      Tools

        Blueprints

          Making

          • WEBやアプリをデザインするための準備事項

            0
            Thumb fabsteps
            WEBやアプリをつくる上で考えていくとても大切な要素としてUXとは、ユーザーエクスペリエンス(User Experience 以下 UX)があげられます。サービスを通じてユーザー体験することが、全てUXとなります。似たような言葉に、UIユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。UX体験を向上させるためには、UIの使いやすさは不可欠です。
            • STEP 1 : どんな目的のサービスなのかを考える

              0
              Thumb fabsteps
              まずはじめに、どんな目的のためにつくられるサービス(WEB / アプリ)なのかを明確にする
              ※この授業レシピでは、アプリを作成していきます。

              • そのサービス(例:アプリ)は、誰のため?
              • そのサービス(例:アプリ)は、何のために?
            • STEP2 : その目的を達成するために誰に使ってもらいたいか?

              0
              Thumb fabsteps
              • ユーザーは、誰ですか?
              • 一番使って欲しい人は、誰ですか?
              • サービスを利用する可能性がある人 は、誰ですか?
            • STEP3 : ユーザーにとって、どのようなアプリにするかを考える

              0
              Thumb fabsteps
              提供するサービス(アプリ)は、どのような特徴を持っているか

              • いろんな人に見てもらいたい(例:色々な情報を網羅している)
              • とにかく使いやすいアプリ (例:操作性やシンプルな画面を重視)
              • 情報が検索しやすいアプリ (例:すぐに必要な情報を入手することができる)
            • STEP4 : 目的に合わせて、デザインを考えていく

              0
              Thumb fabsteps
              どんな目的で、誰のために、デザインを考える上での大切な判断基準となります。

              • 一番見てもらいたい人をターゲットにしたデザインとは?
              • デザイントーン&マナー
              • 色 
              • フォント
          • コンテンツ (何を載せるのか)を考えるための準備事項

            0
            Thumb fabsteps

            • STEP5 : コンテンツになる可能性があるものを洗い出す

              0
              Thumb fabsteps
              コンセプトに合わせて素材を集める

              例:自分の活動紹介
              • これまでの作品
              • blog / SNS
              • プロジェクト など
            • STEP6 : コンセプトに照らし合わせて情報の優先度を考える

              0
              Thumb fabsteps
              • 情報設計
              • コンセプトに照らし合わせて情報の精査
              • いらないものは削除 / 足りないものは何か?
              • 情報の量と質を把握する

          • UIについて 1 : ワイヤーフレーム (どのように見せるのか)

            0
            Thumb fabsteps

            • STEP7 : 画面をいよいよ考えていきます

              0
              Thumb fabsteps
              アプリに照らし合わせ 、まずは紙に画面レイアウトを考えていく(Paper prototype)
              1. シングルページ or 階層を持つかを考える / 両方考えてたくさん描く
              2. TOPページから考える
              3. コンセプトに常に立ち返って判断する
              4. ワイヤーフレームの構成要素
              • TOP / コンテンツページ 
              • 画面の中の構成要素とは
              • ヘッダー / フッター / メニューなど 画面遷移 共通要素の連動編集
            • STEP8 : アプリのプロトタイプを作ってみる

              0
              Thumb fabsteps
              直感的にアプリをデザインできるツールとして Adobe XDを使用し、つくりながら学んでいきます。

              ADOBE XD

              事前にダウンロードと動作確認をお願いします
              Small xd roadmap 1280x720
            • STEP9 : ワイヤーフレームの演習

              0
              Thumb fabsteps
              STEP7での演習で作成したワイヤーフレームを使って、AdobeXD上でのワイヤーフレームに置き換えてみる
              シングルページ / 画面遷移
              Small xd roadmap prototype 01
          • UIについて 2 : ビジュアルデザイン (色 / フォント)

            0
            Thumb fabsteps
            アプリのプロトタイプを作りながら、 具体的にビジュアルデザインを考えていきます
            • STEP10 : デザイントーンとマナーの確認

              0
              Thumb fabsteps
              コンセプトに照らし合わせて確認していく
            • STEP11 : カラーパレットの確認

              0
              Thumb fabsteps
              アプリを構成する要素の色を決める メインカラー  : 背景・ヘッダー・フッター
              サブカラー : ヘッダー・フッター
              アクセントカラー : クロポチなど
              ボタン : 動的なボタンだった場合色が変わるのであれば、2パターンなど
              フォント : 文字 windows / mac / mobile 標準OSを指定しておき、自分好みのフォントをWEBフォントで指定する WEBフォントの弊害は、重くなること

            • STEP12 : レスポンシブデザインを考える

              0
              Thumb fabsteps
              ディバイスの互換性を考慮して、アプリを設計する必要がある
              理由
              • レイアウト崩れを防ぎたい 
              • 見せたい情報が見れない
              • 触れない 例:ボタンが押せない 

              考慮するべき項目
              • ディバイス >> iOS or Android
              • ブラウザ >> 古い
              • フォント >> 入ってない
            • STEP13 : アクセシビリティを考える

              0
              Thumb fabsteps
              アクセシビリティとは?
              あらゆる人が情報にアクセスすることができ、利用できることを意味します

              情報にアクセスすることが難しい方へ向けた対策
               読むこと・見ることの困難への配慮
              • 読み上げ機能使用の検討(テキストなら可能、動画に音があれば別だが、基本的に動画 / 写真は読み上げできない)
              • アプリを使用する上での検討 (操作性 / 状態を表示など、 例:ON : 赤 / OFF : 青)
              色のアクセシビリティチェッカー
              カラーチェッカー機能使用の検討(色による区別をどう配慮するか)
              検証:アドビ Photoshop (カラーチェッカーでの確認など)

          • UIについて 3 : ユーザーテスト

            0
            Thumb fabsteps


            • STEP14 : ユーザーテストを行なってみる

              0
              Thumb fabsteps
              目的
              • つくったアプリが、そもそも使いやすいか?
              • 意図した設計通りに使ってくれるか、 感じてくれるかの確認
              • 意外な発見があるか
              >> 新しい発見が有効である場合
              デザインに取り込んで再設計するとより良いUXデザインになります

            • STEP 15 : ユーザーヒアリングを行なってみる

              0
              Thumb fabsteps
              ユーザーアンケート
              ABテスト >> A or B のデザインで迷った時に反応を検証
            • STEP16 : ユーザーテストの結果を踏まえて、改善をしていく

              0
              Thumb fabsteps

          Add Card Order

          References

            Usages

              Convert State

               to Annotation.

              Select the numebr of the state to annotate.

              OK
              cancel
              Loading

              facebook

              , data-width="400", data-show-faces="true" data-send="true"
              , data-width="400", data-order-by="reverse_time"