アイデアを伝えるトレーニング UX/UIデザイン編 (WEBページ)

Created Date: 2018-06-09/ updated date: 2018-06-11
    • Medium       ux
    Owner & Collaborators
    License
    By nc sa
    Summary
    13:00 - 13:30 全体説明
    13:30 - 14:30 ワークシート 1-6
    14:30 - 14:45 休憩
    14:45 - 15:00 XDの説明
    15:00 - 16:00 XDを使用して実際にWEBページのプロトタイピング
    16:00 - 16:15 振り返り

    Materials

      Tools

        Blueprints

          Making

          • WEBサイトをデザインするための準備事項

            0
            Thumb fabsteps
            WEBサイトをつくる上で考えていくとても大切な要素としてUXを考えていきますUXとは、ユーザーエクスペリエンスUser Experience 以下 UX)の略称で、サービスを通じたユーザー体験を意味しています。似たような言葉に、UIユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。UX体験を向上させるためには、UIの使いやすさは不可欠です。
            参考:すべてのUXデザイナーに必須のスキル、スケッチをマスターする方法
            • STEP 1 : どんな目的/価値を届けたいWEBサイトなのかを考える

              0
              Thumb fabsteps
              まずはじめに、どんな目的のために、どのような価値を届けたいWEBサイトなのかを明確にする
              • そのサービス(WEBサイト)は、誰のため?
              • そのサービス(WEBサイト)は、何のために?
              • その目的を達成するために誰に使ってもらいたいか?

              ワークシート1を利用して、上記の内容を整理していきます

              Small 01
            • STEP2 : コンテンツになる可能性があるものを書き出す

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

              例1:気軽に料理が作りたい人のためのWEBサイト(クックパッドの場合)
              • 基本的な料理レシピ
              • 旬の野菜を使ったレシピ
              • 料理でつながるコミュニティ

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

              0
              Thumb fabsteps
              クックパッドを構成している情報とは?
              ・気軽に料理が楽しめるレシピ集
              ・おすすめランキング
              ・つくレポ
              ・会員ページ
              など
              Small 03
          • コンテンツ (何を載せるのか)を考えるための準備事項

            0
            Thumb fabsteps

            • STEP 4 : どのようにWEBサイトを利用してもらうかを考える

              0
              Thumb fabsteps
              想定するサービスをどのようにユーザーが使用するかを、具体的に4コマ漫画で考えてみる。その場面で、WEBサイトはどの画面のどの部分を閲覧したり、クリックされているかも想定して記入していく。

              1. サービスを利用するきっかけ (どんな困った?エンターテイメント?)
              2. 最初のページで起こして欲しい行動
              3. 次のアクションへの誘導
              4. 欲しい情報に届いた状態
              ※注意:上手く描くことが目的ではありません

              参考:すべてのUXデザイナーに必須のスキル、スケッチをマスターする方法
              Small 04
            • STEP 5 : 画面をイメージしていく / ワイヤーフレーム

              0
              Thumb fabsteps
              コンセプトに照らし合わせ 、まずは紙に画面レイアウトを考えていきます。

              1. 今回は、複数のページを持つ構成にする 
              2. TOPページから考える
              3. 構成要素と情報の優先順位度でページを考える
              4. 全体でどのように関連しているかを紐づけていく

              事例サイト:クックパッド
              Small 05
            • STEP 6 : TOPページをラフにイメージする / ワイヤーフレーム

              0
              Thumb fabsteps
              TOPページの構成を具体的に考えていきます。ワークシートでは、タイトルやヘッダーやフッターなどの目安の場所や大きさをスケッチしていきます。

              • TOP / コンテンツページ (画面内の構成要素)
              • ヘッダー / フッター / メニューなど 画面遷移 共通要素連動編集
              • デザイントーン&マナーを考える (ブランディング / 全体の世界観を構成する画像、色、フォントなど)
              Small 06
            • 参考 : 画面推移

              0
              Thumb fabsteps
              作成したページがどのような関係なのかを線でつないでいきます。


              画像:Adobe XD
              Small
          • UIについて 1 : ワイヤーフレームを作りながらプロトタイピング!

            0
            Thumb fabsteps

          • UIについて 2 : WEB制作にあたって考えるべき項目

            0
            Thumb fabsteps
            WEBサイトのプロトタイプを作りながら、 具体的にビジュアルデザイン(色・フォント・ボタンなど)を考えていきます
            • STEP11 : カラーパレットの確認

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


              参考:カラーパレットの持つ力 - わかりやすいデータ可視化のための色使い
            • STEP12 : レスポンシブデザインを考える

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

              考慮するべき項目
              • ディバイス >> iOS or Android
              • ブラウザ >> 古い
              • フォント >> 入ってない


              参考:レスポンシブデザインWEBデザイン基礎
            • STEP13 : アクセシビリティを考える

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

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

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

            0


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

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

              参考:ユーザーテストの主要な5つの手法
            • STEP 15 : ユーザーヒアリングを行なってみる

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

              0

          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"