20170217 coolで使いやすいnotesアプリデザイン講座(公開用)
•
6 likes•7,195 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 できそうなことから始めよう ご視聴ありがとうございました ノシ