なるほどデザイン
すごいよかった！！！
グラフィックデザインの勉強になる。
はじめてのUIデザイン
pdfで売られている本。
いろいろなサイトへのリンクがあってよかった。
あと最初に、「この本では基本的にアプリやwebのデザインを対象にしています。VRやARは含まれていません」みたいなことを書いてあって好印象。いつかVRやARもだして欲しい
途中からメモ
UIのコンポーネント種類
ios,AndroidにおけるUIの種類と機能がまとまっていて良かった！iosとAndroidで呼び方が違うものも表にまとまっている！
ハンバーガーメニュー＝ドロワーは極力使わない。いちいち開くのめんどくさいし、道標の役割が果たせない
UIの見えない部分
膨大な情報をまとめる手法
画面遷移図をかけ
フロー図とはユーザーが何を見て、何をおこなのかをビュー単位でつなぐもの
UIFlowsという手法が良い
ユーザーが見るもの＝名詞＝オブジェクト
ユーザーがすること＝動詞＝アクション
モーダル、モーダレス
モードがある＝何をするか先に選ぶ
モードはユーザーの動きを制限するので少ないほうがいい。抜け出せるようにする
モードレス＝対象を選択したあと、何をするか選ぶ
わかりやすい、使いやすいはユーザーの創造性を高める
ペーパープロとタイピングは、何度も書き直せるし、実際の端末の大きさでできるし、細かいことを気にしなくて良いのでいいよ！
書いたものはPOPというアプリで遷移させられる
スマホアプリ（iosとアンドロイド）
画面下部でスワイプさせない。OSの機能とかぶっちゃうよ
iosのガイドライン
・直接操作
並び替えでは操作ボタンで押すより指でドラッグして移動できる方がいい
・フィードバックを返す
・必要以上に確認や警告のアラートを出さない
デバイスサイズ
手元で操作できるようにする
SEなど小さいサイズからUI考えていく
戻るボタン
iosは左上
Androidはシステム共通の戻るボタンがある
でも場面によって戻る動作が違う。アプリを始めたときはホーム画面、ダイアログが出ているときはダイアログ非表示。
キャンセル
キャンセルのキャンセル問題。
投稿の破棄などをキャンセルするときは、そもそもダイアログを表示しないor分かりやすいラベルにする
ダイアログを表示しない
・キャンセルしても簡単にやり直せる
・自動保存
・誤タップすることがほぼない場合
「投稿を破棄」、「下書きを保存」
パーミッション
iosは使用する直前。Androidはアプリをダウンロードしたとき
Web
Schema.orgで検索結果を特定のサムネイルやリッチな表現にできる
Twitterなどでカード表示する記述はOGP（OpenGraphProtcol)
TwitterやFacebookは1:2
https://cards-dev.twitter.com/validator
レスポンシブデザイン
ブレークポイント使用＆リキッドレイアウト（画面幅のN％）
UIを作る
ブランドカラーはあらかじめアクセシビリティを考えて決めておくと良い。
カラーが決まっていないときは適当なUIキットを使って色を変えて確かめる
UIキットってこういうのかな？
日本語のUIキット
ハンドオフ
デザインのスペックをエンジニアと共有すること。
xdにもその機能があるけど、Zeplinというサービスが有名なんだって。
マテリアルデザインのXDファイル
ライセンス
アイコン素材
・FontAwsome
アイコンがフォントとして使えるフォント。ローカルでも使えるみたい
Font AwesomeをPCにインストールしてデザインカンプにコピペで使おう | HPcode
・feathericon
Githubで管理されてて、MITライセンス！良き！
ワンクリックでSVGでダウンロードできる。
あとはみんな大好きマテリアルデザイン。アパッチライセンスなのでめっちゃ使いやすい。
逆にマテリアルデザイン以外知らなかったので勉強になった。
コンテンツ具体化
コピペしたコンポーネントの中身のテキストなどは、サンプルでも具体化していく。テキストテキストテキスト・・・って書かない
想定から外れたシチュエーション
・オフラインで起動された時
・通信エラー
・入力項目のエラー
ターゲット
電車に乗るときに使う→オフライン状態で使えないならその旨を示す
寝る前に使う→ナイトモード
Webユーザビリティはこの本がいい
abstractというツールはデザインのバージョン管理をできる。ただしsketch
デザインパターン。企業のデザインパターン紹介。
アトラシアン
BBC
BBCのサイトにはARのデザインについても書いてあった
https://www.bbc.co.uk/gel/articles/an-emergent-ar-design-framework
Loading - Lightning Design System
Loadingについてのページがあった
どういう層向けなんだろう？自社ブログみたいなものなのか？ユーザーがこれに従ってとかそういう目的じゃないよね・・・
命名
UIパーツの命名はちゃんとしよう！
ボタンはタップ時のフィードバックの状態を示す名前にするなど
bookingButton/normal、bookingButton/onTap
後から修正するのは大変
シンボル名のつけ方を、他のSKetchファイルから学んでみた｜Sketch探訪
検証
ユーザーがしようする状況でプロトタイプを触ってみる。
屋外とか、家のソファで寝転がりながらとか
ロゴ
競合サービスを洗い出してロゴでポジショニングマップを作る
カラーや造形がかぶらないようにする
現状分析編Part2-マーケティングに欠かせないビジネスフレームワーク集 | Grab-大阪のWeb広告・マーケティング代理店アイビス運営
この章はIRIAMのデザイナーさんが書いている。
IRIAMのロゴプレゼン資料
つい
「ついやってしまう」体験のつくりかた――人を動かす「直感・驚き・物語」のしくみ
任天堂のゲームデザインをもとに仕掛けを解き明かす〜
三つの体験デザイン
- 直感のデザイン
- 驚きのデザイン
- 物語のデザイン
直感のデザイン
仮説→思考→歓喜
人の共通点を利用する
シンプルで簡単に
マリオの最初の画面は右に行かせるため。
どうしたらいいかわからないユーザーに右に行くということだけを教える。正解だったらやったーってなる
驚きのデザイン
上の直感のデザインばかりだとだんだん疲れて飽きる。そこで予想が外れる驚きを与える。
仮説→思考→驚愕
人の思い込みを利用する
タブーのモチーフを使う
性や暴力、プライベート、射幸心など（ぱふぱふ）
ゲームで自分の名前をつけたり、結婚相手を選んだり、プレイヤーのプライベートな部分をひきづり出すのも驚きをもたらす。
「その体験は、性格が出るか」と問いかけながらデザイン
物語のデザイン
意味があることをさせないといけない。
体験を通じてユーザー自身の物語を生み出させることが意味
翻弄→成長→意志
・コレクションは楽しい
・選択と裁量、リスクとリターンを設定すると各自で難易度調整できる。
・同行者
イラつく同行者を出すことで、操作しているゲームの中のキャラと、操作している自分自身の気持ちの向きがそろう
・最後はスタート地点に帰ることで、物語の中で成長した自分に気づける
日常での応用
わかりにくいことが問題なら、 直感のデザインを応用する ２ 疲れや飽きが問題なら、 驚きのデザインを応用する ３ やりがいがないことが問題なら、 物語のデザインを応用
１、アイデアだしで重い空気、誰も何もいえない
・良い企画ではなくダメな企画についいて語る（驚き・思い込み）
・過去の発言を振り返り「実は深い意味が？」と伏線提起（物語のデザイン）
２、プレゼンテーションで聞き手にずっと興味を持ってもらう
・「例えば・・・」など接続詞などで次のスライドの内容を予告する。ただし「次に」以外（直感のデザイン）
・タブーのモチーフを挟み込むor黙る（驚きのデザイン）
・プレゼンの最後に、プレゼン冒頭のスライドに戻る（物語のデザイン）
３、ユーザーに使ってもらう段階
・はじめて使うユーザーを優先して、シンプルで簡単にする（直感のデザイン）
・ズルをする選択肢を提示しユーザーに自由を与える（選択と裁量）
UXデザイン講座
本じゃないけど、Udemyの講座も受けたよ
良かった
紹介されてた本
最後に
「つい」ではKindleのハイライト機能使った！
webで見返せて便利
https://read.amazon.co.jp/notebook
