20170217 coolで使いやすいnotesアプリデザイン講座(公開用)
?
6 likes?7,240 views
テクてくLotus技術者夜会 2017/02/17発表資料 ネタカット版
20170217 coolで使いやすいnotesアプリデザイン講座(公開用)
- 7. 最近のUI - Facebook 検索ボックス ヘッダーメニュー 通知 アクションバー アクションバー アクションバー 入力枠 7 ビュー (タイムライン) 右 ナビゲーション
- 11. Notes臭のしないアプリにするために ? フォントはDefault Sans Serifを使わない ? フォントサイズを見直す ? 余白を活用する ? ビューアイコンはフリー素材もしくは自作を利用する ? 真っ黒(#000000)は使わない ? いろんな色を使いすぎない デフォルト設定ではなく、手間をかける ただし利用者のニーズは最優先 11
- 14. デザインの基礎 14
- 15. デザインとは？ ? 色使い？ ? フォントの形？ ? かわいい絵？ ? 格好いいエフェクト？ ? なんとなく？ ? 流行？ ? 持って生まれたセンス？ ? わかりやすい配置？ ? 通信簿の美術が「5」だった人のもの 学べば誰でも身につきます デザインは 技術 15
- 19. 原則1：整列 ? どっちがエレガント？ 美味しい紅茶の入れ方 1．カップは暖めておく 2．ティーポットに茶葉を入れて1分蒸らす 3 ．想いを込めて注ぐ 美味しい紅茶の入れ方 1．カップは暖めておく 2．ティーポットに茶葉を入れて1分蒸らす 3 ．想いを込めて注ぐ 1. なんかダサい 2. 脳が美しいと感じる法則に則っていない 3. 情報量が多い ずれていると、そこに意味があるのではないかと推測 してしまう 1. 情報量が少ない 位置の変化も脳にとっては情報になる 2. 整理されている 3. エレガント 見えない線を意識する 19
- 20. 原則2：近接 ? どっちがエレガント？？ Entrees ～前菜～ ? 瞬間燻製したサーモンとバジル風味のジャガイモのテリーヌ Soupe ～スープ～ ? 野菜と鶏、りんごのスープ カレーの香り Poisson ou Viandes ～魚料理 又は 肉料理～ お好みの一品をお選び下さい。（メニュー例） ? 本日の鮮魚のポワレ ラタトゥイユとブールブランのソース ? 和牛すね肉のクリーム煮込み バターライス添え Dessert ～デザート～ ? ガトーショコラとバニラのアイスクリーム Entrees ～前菜～ ? 瞬間燻製したサーモンとバジル風味のジャガイモのテリーヌ Soupe ～スープ～ ? 野菜と鶏、りんごのスープ カレーの香り Poisson ou Viandes ～魚料理 又は 肉料理～ お好みの一品をお選び下さい。（メニュー例） ? 本日の鮮魚のポワレ ラタトゥイユとブールブランのソース ? 和牛すね肉のクリーム煮込み バターライス添え Dessert ～デザート～ ? ガトーショコラとバニラのアイスクリーム 関連するものは近く、そうでないものは離す Design A Design B 20
- 21. 原則3：コントラスト ? どっちがエレガント？？？ Entrees ～前菜～ ? 瞬間燻製したサーモンとバジル風味のジャガイモのテリーヌ Soupe ～スープ～ ? 野菜と鶏、りんごのスープ カレーの香り Poisson ou Viandes ～魚料理 又は 肉料理～ お好みの一品をお選び下さい。（メニュー例） ? 本日の鮮魚のポワレ ラタトゥイユとブールブランのソース ? 和牛すね肉のクリーム煮込み バターライス添え Dessert ～デザート～ ? ガトーショコラとバニラのアイスクリーム Entrees ～前菜～ ? 瞬間燻製したサーモンとバジル風味のジャガイモのテリーヌ Soupe ～スープ～ ? 野菜と鶏、りんごのスープ カレーの香り Poisson ou Viandes ～魚料理 又は 肉料理～ お好みの一品をお選び下さい。（メニュー例） ? 本日の鮮魚のポワレ ラタトゥイユとブールブランのソース ? 和牛すね肉のクリーム煮込み バターライス添え Dessert ～デザート～ ? ガトーショコラとバニラのアイスクリーム フォント、色、サイズetc コントラストで意味が明確に Design B Design C 21
- 22. 原則4：繰り返し(反復) ? どっちがエレガント？？？？ パターンを決めて繰り返すことで脳の負荷を減らす Entrees ～前菜～ ? 瞬間燻製したサーモンとバジル風味のジャガイモのテリーヌ Soupe ～スープ～ ? 野菜と鶏、りんごのスープ カレーの香り Poisson ou Viandes ～魚料理 又は 肉料理～ お好みの一品をお選び下さい。（メニュー例） ? 本日の鮮魚のポワレ ラタトゥイユとブールブランのソース ? 和牛すね肉のクリーム煮込み バターライス添え ? ガトーショコラとバニラのアイスクリーム Entrees ～前菜～ ? 瞬間燻製したサーモンとバジル風味のジャガイモのテリーヌ Soupe ～スープ～ ? 野菜と鶏、りんごのスープ カレーの香り Poisson ou Viandes ～魚料理 又は 肉料理～ お好みの一品をお選び下さい。（メニュー例） ? 本日の鮮魚のポワレ ラタトゥイユとブールブランのソース ? 和牛すね肉のクリーム煮込み バターライス添え Dessert ～デザート～ ? ガトーショコラとバニラのアイスクリーム Design C Design D 22
- 23. 4つの原則を支える要素1 タイポグラフィー ? フォントの種類によって人の受ける印象は違う 京都の川床でランチ 京都の川床でランチ 京都の川床でランチ 京都の川床でランチ ゴシック系フォント 明朝系フォント 目的、ニーズに合わせてフォントを選ぶ ? 力強いイメージ ? 文字が小さくても読みやすい ? 遠くから見ても見やすい ? 繊細なイメージ ? 文字が小さいと読みづらい ? 高級なイメージ 23
- 24. Default Sans Serifとは？ ? Serif(セリフ)は、文字の先端に付けられる飾り、ひげのこと ? 多くは明朝系のフォントに見られる ? Sans(サン)は、フランス語で「～のない」の意味 ABCSerif(セリフ) フォント 意味 Default Monospace 等倍フォント (MSゴシック) Default MultiLingal 多言語フォント (MSPゴシック) Default Sans Serif セリフなしフォント (MSPゴシック) Default Serif セリフありフォント (MSP明朝) Default User Interface UIフォント (Windowsの設定から取得) 24 飾りやひげのないフォント≒ゴシック系フォント
- 25. 4つの原則を支える要素2 配色 ? 色が多すぎると、統一感がなくなり、何が言いたいか？わからなくなる ? 基本は3色、ベースカラー、少し薄めのベースカラー、強調色(ベースカラーの反対色) ? Adobe Color CC(https://color.adobe.com/ja/)を使うと、美しいと感じる組み合わせを出せ る 25
- 28. Notes上でのテクニック 28
- 31. ナビゲータ 第一形態 ? VBみたいな「3Dボタン」は使わず、四角形で作成 ? 種別の違いを左の縦棒で表現 実装方法 ハイライト境界線をバックカラー と同じにしてボタンサイズが変わ るのを防ぐ 31
- 34. ビュー 第二形態(蒲田くん) ? 行間を「1 1/2」にする(詰め込み感がちょっとスッキリ) 実装方法 34
- 35. ビュー 第三形態(品川くん) ? ファイルリソースの画像を呼び出す&高さは3行 実装方法 計算結果フィールドでファイル名を決定 64x64pxのアイコンで 高さは3行くらい 35
- 36. ? フォーム上に表をデザインする上で重要なのは、レイアウトのベースとなる表の使いこなし ■具体的には ? フォームのバックカラー ? 表のタイトル部分カラー(タイトル文字、バック) ? 表の入力部分カラー(フィールド文字、バック) ? 枠線 ? パディング(余白) フォーム≒表の使いこなし 36
- 37. ? フォームバックを「グレー」、入力枠のバックは「白」 ? バックカラーを指定することで入力欄を明確化 フォーム 第一形態 実装方法 フォーム－バック 枠線とタイトル文字を同じ色にす ることで情報量を減らす 表－タイトル行バック 表－入力行バック ユーザーが使い慣れているUIも 入力欄は白バック 37
- 38. フォーム 第二形態(蒲田くん) ? 表の行間隔、列間隔を「0.1cm」に変更し、詰め込みを 解消 ? タイトル行の左境界線を「3」に変更し、項目名の分離を 明確に 実装方法 38
- 39. フォーム 第三形態(品川くん) ? 列と列の間に余白列を追加 ? タイトル行の前に余白行を追加 ? 上と右の境界線を「0」に設定 実装方法 表－余白行、余白列追加 39
- 41. アクションボタン 第二形態(蒲田くん) ? アクションボタンは右寄せが可能です(アラビア圏対応の有効利用？) 実装方法1(全部右寄せ) 実装方法2(指定ボタン右寄せ) 41
- 43. フォーム－フォーム内ボタン ? フィールドに対するボタンと、フォームに対するボタンでサイズを変えるとわかりやすい フォーム全体に 対する操作 ＠Picklistなどフィール ドに対する操作 43
- 44. もっと大切なこと 44
- 45. テクニックだけではダメ ? デザインだけがきれいでも、使いづらいHPはいくらでもあります ? なぜでしょうか？ デザインはカッコ良くするものじゃなくて ユーザーの目的を達成しやすくするもの 45
- 46. 情報の整理できてる？？？ 余白を活用する (増やす) 一画面あたり の情報量は減る スクロール?ペー ジ遷移の増加 作業の手間が増えては、意味がない ■情報整理できてないパターン ? 分析方法が不明確な選択肢がある(キーワードフィールド、コンボボックス) ? 活用方法が決まっていない入力欄がある ? 20年前の紙ベースの帳票をIT化しただけ → IT化の強みを生かしていない ? 人によって入力欄の入力順が全然違う 46
- 47. ユーザビリティーとは ? 国際規格ISO9241では「ユーザビリティ」を下記のように定義しています 1. 特定のコンテキストにおいて 2. 特定のユーザーによって 3. ある製品が 4. 特定の目的を達成するために 用いられる際の「効果、効率、ユーザーの満足度合い」 誰にでも、どんな状況でも満足されると言うことは不可能 「特定」することが必要 47
- 48. デザインする前に確認&決めること 対応解像度 ? 全員FullHDか？ ? HD(1366x768)をベースに考えるが、FullHDやSurface(2160×1440)などをどの程度考慮するか？ 使用するユーザー層 ? 経理の方のみ ? 全社員向け ? PCの習熟度は？ITへの理解度は？ 関連DBとの統一感 ? 色使い ? 操作性 対応OS ? MacOSも対応する？(フォントの違いによるデザイン崩れ) 48
- 49. フォーム－フィールドの並び順 並び順 ? ユーザーが最初に得たい情報は何か？ ? 関連する情報は近くに配置しているか？ ? 日付フィールド、ファイル選択ボタンなどマウス操作が必要な項目は、キーボード→マウス→キーボードへ の持ち替えを減らすようにできているか？ ? 日本語入力ON、OFFを意識しているか？(切替が無駄) ? タブキー送りの順序を設定しているか？ ① ② ③ ④ ① ② ③ ④ 入力順、関連度、操作性を考慮しましょう！ 49
- 50. ビュー－並び順と色使い ? ユーザーが最初に見たい情報は何か？ ? ユーザーシナリオや業務フローを確認し、列の並び順を決定 並び順 色使い?表示項目 ? 目立たせるべき項目は何か？ ? 目立たなくても良い項目は何か？ ? ステータスなどは表示しない方がわかりやすい場合もある ? 例えば、「標準?中?強」の選択肢があった場合、標準はヌルの方が中?強がわかりやすい ? 無駄に色を使いすぎてわかりづらくなっていないか？ ユーザーが見たい列、補足情報の列を明確にしましょう！ 50
- 51. IBMへの要望 51
- 57. まとめ 57
- 58. まとめ ? デザインの基本を知り、少し手間をかけるだけでNotesアプリはカッコ良くなります ? Webページがカッコイイのは、技術と手間がかかっているからです (ディレクター、デザイナー、コーダー、バックエンドプログラマがそれぞれ別) ? 学んだデザインの技術は、プラットフォームが変わっても使えます ? Notesクライアントに足りない機能は、IBMに要望を出すか？他の技術と組み合わせて回避しま しょう ? デザインを知ることは「人間を知ること」 58 できそうなことから始めよう ご視聴ありがとうございました ノシ