Webデザインに対する3つの誤解 / 3 misconceptions about web design

本スライドは「第19回ゆるはち.it: ノンデザイナーのためのデザインについてゆるく話す」の登壇用資料です。 https://yuruhachi-it.connpass.com/event/174196/

Webデザインについて、学生時代の私が考えていた3つの誤解と、デザイナーーになって分かったことについてご紹介します。

Transcript

1. 誤解
   3つの
   に対する
   Webデザイン
   

   View Slide

2. 自己紹介
   前職はフロントエンドエンジニア → UI/UXデザインに興
   味。2019.11、デザイナーとしてビルディットへ。
   
   Webサービス(toB)のUI/UX、HPのデザイン等
   誕生日 ３月30日
   職業 プロダクトデザイナー
   あだ名 あきねん
   小澤 晶徳
   

   View Slide

3. 今回は、私が学生時代に考えていた
   
   3つの誤解についてご紹介します。
   2
   ※サービスデザインの話が中心です
   

   View Slide

4. デザインって、見た目を
   
   いい感じにすることでしょ？
   3
   学生時代の誤解 その１
   

   View Slide

5. デザインって、見た目を
   
   いい感じにすることでしょ？
   3
   学生時代の誤解 その１
   A. それだけではない
   ビジュアルは伝達方法
   
   どうすれば相手に伝わるかを考えるのが仕事。
   4
   

   View Slide

6. ブランディング
   マーケティング
   ビジネス
   ユーザビリティ
   ユーザー体験
   コミュニティ
   情報設計
   目に見えないものを考えるのもデザイン。
   5
   ※すべてに気を回せたらすごい
   

   View Slide

7. デザインって、
   
   抽象的で何してるか謎。
   6
   学生時代の誤解 その2
   

   View Slide

8. デザインって、
   
   抽象的で何してるか謎。
   学生時代の誤解 その2
   A. そうでもない
   先人たちの言語化によって、
   
   お約束やフレームワークが生まれている。
   7
   

   View Slide

9. 8
   具体例
   ビジュアル・UI UX
   機能的な制約
   端末ごとの画面幅、要素は4px刻み、ボタンは44px以上(※HIG) など…
   五段階モデル
   ※次ページで解説
   ユーザーシナリオ
   ペルソナ(人物像)を作成し、価値(欲求)や行動のシナリオをつくる
   カスタマージャーニーマップ
   利用前〜利用後のユーザー体験を可視化した図
   情報設計
   OOUI、ドメインモデル、ユーザビリティ など…
   色
   色数は3色程度に抑える、エラーは赤、#000は不自然 など…
   ※OOUI – オブジェクトベースのUIモデリング
   ※デザインは8の倍数でできている
   

   View Slide

10. 9
    UXの五段階モデル
    具象的
    表層
    要件
    戦略
    構造
    骨格
    ビジュアル
    要件定義
    目的・ニーズ
    情報設計
    レイアウト
    抽象的
    

    View Slide

11. デザインには「終わり」がないので
    
    しんどそう
    学生時代の誤解 その3
    10
    

    View Slide

12. デザインには「終わり」がないので
    
    つらそう
    学生時代の誤解 その3
    A. 終わりがないのは他と一緒
    どこまでやるかを決める。
    
    タスクを細分化することで、工数の推定も可能。
    11
    

    View Slide

13. 12
    たとえば…
    ワイヤー作成
    必要ならば数パターン作って比較検討
    調査・ヒアリング
    デザインの目的や現状の仕様、ペルソナ像などを把握
    デザイン作成
    デザインを詰めていく。必要ならばプロトタイプも作成
    レビュー／修正
    デザインレビューをもらい、ブラッシュアップ
    見積もり
    見積もり
    見積もり
    見積もり
    ここに文字が入ります。ここに文字が入ります。ここに文字が入ります。
    ここに文字が入ります。
    受講中コース
    ようこそ、田中太郎さん
    ホーム
    受講中コース
    終了コース
    2
    2
    1
    3
    

    View Slide

14. デザインは、意外と地道なもの。
    気づき
    13
    

    View Slide

15. ご清聴
    
    ありがとうございました
    @_akinen
    

    View Slide