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

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

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

Transcript

1. 誤解 3つの に対する Webデザイン
2. 自己紹介 前職はフロントエンドエンジニア → UI/UXデザインに興 味。2019.11、デザイナーとしてビルディットへ。 Webサービス(toB)のUI/UX、HPのデザイン等 誕生日 ３月30日 職業 プロダクトデザイナー あだ名 あきねん 小澤 晶徳
3. 今回は、私が学生時代に考えていた 3つの誤解についてご紹介します。 2 ※サービスデザインの話が中心です
4. デザインって、見た目を いい感じにすることでしょ？ 3 学生時代の誤解 その１
5. デザインって、見た目を いい感じにすることでしょ？ 3 学生時代の誤解 その１ A. それだけではない ビジュアルは伝達方法 どうすれば相手に伝わるかを考えるのが仕事。 4
6. ブランディング マーケティング ビジネス ユーザビリティ ユーザー体験 コミュニティ 情報設計 目に見えないものを考えるのもデザイン。 5 ※すべてに気を回せたらすごい
7. デザインって、 抽象的で何してるか謎。 6 学生時代の誤解 その2
8. デザインって、 抽象的で何してるか謎。 学生時代の誤解 その2 A. そうでもない 先人たちの言語化によって、 お約束やフレームワークが生まれている。 7
9. 8 具体例 ビジュアル・UI UX 機能的な制約 端末ごとの画面幅、要素は4px刻み、ボタンは44px以上(※HIG) など… 五段階モデル ※次ページで解説 ユーザーシナリオ ペルソナ(人物像)を作成し、価値(欲求)や行動のシナリオをつくる カスタマージャーニーマップ 利用前〜利用後のユーザー体験を可視化した図 情報設計 OOUI、ドメインモデル、ユーザビリティ など… 色 色数は3色程度に抑える、エラーは赤、#000は不自然 など… ※OOUI – オブジェクトベースのUIモデリング ※デザインは8の倍数でできている
10. 9 UXの五段階モデル 具象的 表層 要件 戦略 構造 骨格 ビジュアル 要件定義 目的・ニーズ 情報設計 レイアウト 抽象的
11. デザインには「終わり」がないので しんどそう 学生時代の誤解 その3 10
12. デザインには「終わり」がないので つらそう 学生時代の誤解 その3 A. 終わりがないのは他と一緒 どこまでやるかを決める。 タスクを細分化することで、工数の推定も可能。 11
13. 12 たとえば… ワイヤー作成 必要ならば数パターン作って比較検討 調査・ヒアリング デザインの目的や現状の仕様、ペルソナ像などを把握 デザイン作成 デザインを詰めていく。必要ならばプロトタイプも作成 レビュー／修正 デザインレビューをもらい、ブラッシュアップ 見積もり 見積もり 見積もり 見積もり ここに文字が入ります。ここに文字が入ります。ここに文字が入ります。 ここに文字が入ります。 受講中コース ようこそ、田中太郎さん ホーム 受講中コース 終了コース 2 2 1 3
14. デザインは、意外と地道なもの。 気づき 13
15. ご清聴 ありがとうございました @_akinen