Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

20170217 coolで使いやすいnotesアプリデザイン講座(公開用)

1,280 views

Published on

テクてくLotus技術者夜会 2017/02/17発表資料
ネタカット版

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

20170217 coolで使いやすいnotesアプリデザイン講座(公開用)

  1. 1. もうNotesだからとは言わせない!! Coolで使いやすいNotesアプリデザイン講座 2017/02/17(Fri) Tetsuji Hayashi テクてくLotus技術者夜会 コミュニティー編 1
  2. 2. 1.Notesアプリはダサいのか? 2
  3. 3. 伝説のホームページ • Web制作業界で伝説のホームページと言えば・・・・ 院長お手製の味のあるページ 色使いが標準16色ベースなのはR4時代の人には懐かしい 3
  4. 4. 伝説のホームページの今 • 2013年、ついにリニューアル!!! ネットでは 「こんなの愛生会じゃない!!」 4
  5. 5. 貴社のNotesアプリもこうなっていませんか? フォントは Default Sans Serif フォントカラーは 黒(デフォルト) フォントサイズは デフォルト(10pt) フォームカラーは 16色から選択 表の枠線は 黒(デフォルト) 表の中は 色を塗らない 表の余白は デフォルト 「使えれば良い」を言い訳に使ってはダメ! 5
  6. 6. 最近のUI • 皆さんは、インターネットページを見る時、どんな点を見ていますか? 部品構成 ヘッダー フッター 左ナビゲーション 右ナビゲーション 背景(バック) 入力欄 普通のテキスト タイトルテキスト リンクテキスト 画像 部品の配置とプロパティ レイアウト 余白 文字サイズ 色使い 一般文字色 入力枠 入力文字 バックカラー リンクカラー 6 最近は余白を生かしたデザインが多い
  7. 7. 最近のUI - Facebook 検索ボックス ヘッダーメニュー 通知 アクションバー アクションバー アクションバー 入力枠 7 ビュー (タイムライン) 右 ナビゲーション
  8. 8. 最近のUI - Outlook ヘッダーメニュー 左 ナビゲーション アクションバー 入力枠 アクションバー 検索ボックス 8
  9. 9. 最近のUI – 某国大統領が大好きTwitter 入力枠 アクションバー ヘッダーメニュー 通知 左 ナビゲーション 右 ナビゲーション ビュー (タイムライン) 9 検索ボックス Notesアプリにも生かせるんじゃね?
  10. 10. 最近のUI – muuuuu.org 業界別ホームページのデザイン一覧サイト Web業界では どれだけ良いデザインを模写したことがあるか? が仕事の速さ・効率に繋がる 10
  11. 11. Notes臭のしないアプリにするために • フォントはDefault Sans Serifを使わない • フォントサイズを見直す • 余白を活用する • ビューアイコンはフリー素材もしくは自作を利用する • 真っ黒(#000000)は使わない • いろんな色を使いすぎない デフォルト設定ではなく、手間をかける ただし利用者のニーズは最優先 11
  12. 12. 自社の取り組み デザイン投票 ヘッダー 関連DBへのリンク DB内での ビュー選択 12
  13. 13. 自社の取り組み デザイン投票 デザインA 2票 デザインB 2票 デザインD 3票 デザインC 2票 かなり微妙な結果・・・(-_-;) 13
  14. 14. デザインの基礎 14
  15. 15. デザインとは? • 色使い? • フォントの形? • かわいい絵? • 格好いいエフェクト? • なんとなく? • 流行? • 持って生まれたセンス? • わかりやすい配置? • 通信簿の美術が「5」だった人のもの 学べば誰でも身につきます デザインは 技術 15
  16. 16. デザインの例 京都駅の案内標識 なぜ文字サイズが 違うのか? なぜ色が違うのか? (ここも青で良いのでは?) なぜバックカラーは黒 なのか? デザインには全ての要素に 意味がある なぜ数字の説明が ないのか? 16
  17. 17. なぜ基礎を説明するのか? 基礎がわかっていない人の進化形 基礎がわかっている人の進化形 劣化コピー(コピー職人) 変幻自在 17
  18. 18. デザインの四原則 見えない線を意識して、整列することで、脳が受け取る情報量を減らす 原則1:整列 意味があるものは近づける 原則2:近接 メリハリを付け、楽しさを演出する 原則3:コントラスト 意味のあるものをパターン化し、繰り返すことで見やすさを向上させる 原則4:繰り返し(反復) 18 デザイナーじゃない人はとりあえずこの4つでOK
  19. 19. 原則1:整列 • どっちがエレガント? 美味しい紅茶の入れ方 1.カップは暖めておく 2.ティーポットに茶葉を入れて1分蒸らす 3 .想いを込めて注ぐ 美味しい紅茶の入れ方 1.カップは暖めておく 2.ティーポットに茶葉を入れて1分蒸らす 3 .想いを込めて注ぐ 1. なんかダサい 2. 脳が美しいと感じる法則に則っていない 3. 情報量が多い ずれていると、そこに意味があるのではないかと推測 してしまう 1. 情報量が少ない 位置の変化も脳にとっては情報になる 2. 整理されている 3. エレガント 見えない線を意識する 19
  20. 20. 原則2:近接 • どっちがエレガント?? Entrees ~前菜~ ・ 瞬間燻製したサーモンとバジル風味のジャガイモのテリーヌ Soupe ~スープ~ ・ 野菜と鶏、りんごのスープ カレーの香り Poisson ou Viandes ~魚料理 又は 肉料理~ お好みの一品をお選び下さい。(メニュー例) ・ 本日の鮮魚のポワレ ラタトゥイユとブールブランのソース ・ 和牛すね肉のクリーム煮込み バターライス添え Dessert ~デザート~ ・ ガトーショコラとバニラのアイスクリーム Entrees ~前菜~ ・ 瞬間燻製したサーモンとバジル風味のジャガイモのテリーヌ Soupe ~スープ~ ・ 野菜と鶏、りんごのスープ カレーの香り Poisson ou Viandes ~魚料理 又は 肉料理~ お好みの一品をお選び下さい。(メニュー例) ・ 本日の鮮魚のポワレ ラタトゥイユとブールブランのソース ・ 和牛すね肉のクリーム煮込み バターライス添え Dessert ~デザート~ ・ ガトーショコラとバニラのアイスクリーム 関連するものは近く、そうでないものは離す Design A Design B 20
  21. 21. 原則3:コントラスト • どっちがエレガント??? Entrees ~前菜~ ・ 瞬間燻製したサーモンとバジル風味のジャガイモのテリーヌ Soupe ~スープ~ ・ 野菜と鶏、りんごのスープ カレーの香り Poisson ou Viandes ~魚料理 又は 肉料理~ お好みの一品をお選び下さい。(メニュー例) ・ 本日の鮮魚のポワレ ラタトゥイユとブールブランのソース ・ 和牛すね肉のクリーム煮込み バターライス添え Dessert ~デザート~ ・ ガトーショコラとバニラのアイスクリーム Entrees ~前菜~ ・ 瞬間燻製したサーモンとバジル風味のジャガイモのテリーヌ Soupe ~スープ~ ・ 野菜と鶏、りんごのスープ カレーの香り Poisson ou Viandes ~魚料理 又は 肉料理~ お好みの一品をお選び下さい。(メニュー例) ・ 本日の鮮魚のポワレ ラタトゥイユとブールブランのソース ・ 和牛すね肉のクリーム煮込み バターライス添え Dessert ~デザート~ ・ ガトーショコラとバニラのアイスクリーム フォント、色、サイズetc コントラストで意味が明確に Design B Design C 21
  22. 22. 原則4:繰り返し(反復) • どっちがエレガント???? パターンを決めて繰り返すことで脳の負荷を減らす Entrees ~前菜~ ・ 瞬間燻製したサーモンとバジル風味のジャガイモのテリーヌ Soupe ~スープ~ ・ 野菜と鶏、りんごのスープ カレーの香り Poisson ou Viandes ~魚料理 又は 肉料理~ お好みの一品をお選び下さい。(メニュー例) ・ 本日の鮮魚のポワレ ラタトゥイユとブールブランのソース ・ 和牛すね肉のクリーム煮込み バターライス添え ・ ガトーショコラとバニラのアイスクリーム Entrees ~前菜~ ・ 瞬間燻製したサーモンとバジル風味のジャガイモのテリーヌ Soupe ~スープ~ ・ 野菜と鶏、りんごのスープ カレーの香り Poisson ou Viandes ~魚料理 又は 肉料理~ お好みの一品をお選び下さい。(メニュー例) ・ 本日の鮮魚のポワレ ラタトゥイユとブールブランのソース ・ 和牛すね肉のクリーム煮込み バターライス添え Dessert ~デザート~ ・ ガトーショコラとバニラのアイスクリーム Design C Design D 22
  23. 23. 4つの原則を支える要素1 タイポグラフィー • フォントの種類によって人の受ける印象は違う 京都の川床でランチ 京都の川床でランチ 京都の川床でランチ 京都の川床でランチ ゴシック系フォント 明朝系フォント 目的、ニーズに合わせてフォントを選ぶ • 力強いイメージ • 文字が小さくても読みやすい • 遠くから見ても見やすい • 繊細なイメージ • 文字が小さいと読みづらい • 高級なイメージ 23
  24. 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. 25. 4つの原則を支える要素2 配色 • 色が多すぎると、統一感がなくなり、何が言いたいか?わからなくなる • 基本は3色、ベースカラー、少し薄めのベースカラー、強調色(ベースカラーの反対色) • Adobe Color CC(https://color.adobe.com/ja/)を使うと、美しいと感じる組み合わせを出せ る 25
  26. 26. • バックがライト系(明るい色)、ダーク系(暗い色)によって見やすい文字色は違う 4つの原則を支える要素2 配色 AAAAA AAAAA AAAAA AAAAA ライト系とダーク系が混在するページは同じ色でも2色決める 同じ色 ヘッダーに使う文字 ビューに使う文字 同じ系統でも濃さを変える 26
  27. 27. それをふまえて • 街や雑誌を見てみれば、いくらでも学べる なぜこの色にしたのか?なぜこの大きさにしたのか? デザイナーの意図を読み解く 27
  28. 28. Notes上でのテクニック 28
  29. 29. フレームセット • 普通に作ると・・・・ <frame>タグのような3Dラインが入り、2000年代のデザイン 実装方法 29
  30. 30. フレームセット • 3-D境界線はチェックを外して、境界線は「0ピクセル」 境界線は表示しないのがトレンド(死語) 実装方法 30
  31. 31. ナビゲータ 第一形態 • VBみたいな「3Dボタン」は使わず、四角形で作成 • 種別の違いを左の縦棒で表現 実装方法 ハイライト境界線をバックカラー と同じにしてボタンサイズが変わ るのを防ぐ 31
  32. 32. ナビゲータ 第二形態(蒲田くん) • 種別にタイトルを付けるなら高さを変えて、クリックできる部分と明確にわかるようにする 実装方法 四角形の高さを適当に変えて下さい 32
  33. 33. ビュー 第一形態 • フォントを「メイリオ」、カラーを「濃いグレー」 ユーザーが一番見たい列は Webのリンクカラーを参考に 目立たなくて良い情報は 薄いグレーなど タイトルも手を抜かない メイリオ&濃いグレー 実装方法 33
  34. 34. ビュー 第二形態(蒲田くん) • 行間を「1 1/2」にする(詰め込み感がちょっとスッキリ) 実装方法 34
  35. 35. ビュー 第三形態(品川くん) • ファイルリソースの画像を呼び出す&高さは3行 実装方法 計算結果フィールドでファイル名を決定 64x64pxのアイコンで 高さは3行くらい 35
  36. 36. • フォーム上に表をデザインする上で重要なのは、レイアウトのベースとなる表の使いこなし ■具体的には • フォームのバックカラー • 表のタイトル部分カラー(タイトル文字、バック) • 表の入力部分カラー(フィールド文字、バック) • 枠線 • パディング(余白) フォーム≒表の使いこなし 36
  37. 37. • フォームバックを「グレー」、入力枠のバックは「白」 • バックカラーを指定することで入力欄を明確化 フォーム 第一形態 実装方法 フォーム-バック 枠線とタイトル文字を同じ色にす ることで情報量を減らす 表-タイトル行バック 表-入力行バック ユーザーが使い慣れているUIも 入力欄は白バック 37
  38. 38. フォーム 第二形態(蒲田くん) • 表の行間隔、列間隔を「0.1cm」に変更し、詰め込みを 解消 • タイトル行の左境界線を「3」に変更し、項目名の分離を 明確に 実装方法 38
  39. 39. フォーム 第三形態(品川くん) • 列と列の間に余白列を追加 • タイトル行の前に余白行を追加 • 上と右の境界線を「0」に設定 実装方法 表-余白行、余白列追加 39
  40. 40. アクションボタン 第一形態 • サイズを指定するだけでイメージは変わります 実装方法 40
  41. 41. アクションボタン 第二形態(蒲田くん) • アクションボタンは右寄せが可能です(アラビア圏対応の有効利用?) 実装方法1(全部右寄せ) 実装方法2(指定ボタン右寄せ) 41
  42. 42. アクションボタン 第三形態(品川くん) • よく使うメニューは左、オプションメニューは右がわかりやすい(滅多に使わないボタンがいつも 出ているとゴチャゴチャする) 実装方法 サブアクションを作る 個別アクションボタン右寄せ アイコンもしくはボタン名に…を付ける 42
  43. 43. フォーム-フォーム内ボタン • フィールドに対するボタンと、フォームに対するボタンでサイズを変えるとわかりやすい フォーム全体に 対する操作 @Picklistなどフィール ドに対する操作 43
  44. 44. もっと大切なこと 44
  45. 45. テクニックだけではダメ • デザインだけがきれいでも、使いづらいHPはいくらでもあります • なぜでしょうか? デザインはカッコ良くするものじゃなくて ユーザーの目的を達成しやすくするもの 45
  46. 46. 情報の整理できてる??? 余白を活用する (増やす) 一画面あたり の情報量は減る スクロール・ペー ジ遷移の増加 作業の手間が増えては、意味がない ■情報整理できてないパターン • 分析方法が不明確な選択肢がある(キーワードフィールド、コンボボックス) • 活用方法が決まっていない入力欄がある • 20年前の紙ベースの帳票をIT化しただけ → IT化の強みを生かしていない • 人によって入力欄の入力順が全然違う 46
  47. 47. ユーザビリティーとは • 国際規格ISO9241では「ユーザビリティ」を下記のように定義しています 1. 特定のコンテキストにおいて 2. 特定のユーザーによって 3. ある製品が 4. 特定の目的を達成するために 用いられる際の「効果、効率、ユーザーの満足度合い」 誰にでも、どんな状況でも満足されると言うことは不可能 「特定」することが必要 47
  48. 48. デザインする前に確認&決めること 対応解像度 • 全員FullHDか? • HD(1366x768)をベースに考えるが、FullHDやSurface(2160×1440)などをどの程度考慮するか? 使用するユーザー層 • 経理の方のみ • 全社員向け • PCの習熟度は?ITへの理解度は? 関連DBとの統一感 • 色使い • 操作性 対応OS • MacOSも対応する?(フォントの違いによるデザイン崩れ) 48
  49. 49. フォーム-フィールドの並び順 並び順 • ユーザーが最初に得たい情報は何か? • 関連する情報は近くに配置しているか? • 日付フィールド、ファイル選択ボタンなどマウス操作が必要な項目は、キーボード→マウス→キーボードへ の持ち替えを減らすようにできているか? • 日本語入力ON、OFFを意識しているか?(切替が無駄) • タブキー送りの順序を設定しているか? ① ② ③ ④ ① ② ③ ④ 入力順、関連度、操作性を考慮しましょう! 49
  50. 50. ビュー-並び順と色使い • ユーザーが最初に見たい情報は何か? • ユーザーシナリオや業務フローを確認し、列の並び順を決定 並び順 色使い・表示項目 • 目立たせるべき項目は何か? • 目立たなくても良い項目は何か? • ステータスなどは表示しない方がわかりやすい場合もある • 例えば、「標準・中・強」の選択肢があった場合、標準はヌルの方が中・強がわかりやすい • 無駄に色を使いすぎてわかりづらくなっていないか? ユーザーが見たい列、補足情報の列を明確にしましょう! 50
  51. 51. IBMへの要望 51
  52. 52. ラジオボタン、日付フィールドなどのサイズ調整 • 文字のサイズに応じて、ラジオボタン、カレンダーのサイズ、カレンダーボタンのサイズも大き くして欲しい Windows10タブレット活用がもっと増えるのでは? 52
  53. 53. ナビゲータ1 • 自分で作成した色のボタンを作りたい→四角形は256色しか使えない(バグじゃね?) バックカラーと同色 にしたい ナビゲータ本体 ナビゲータ-四角形 256色じゃ作りたいデザインが作れない 53
  54. 54. ナビゲータ-四角形 ナビゲータ2 • ボタンフォーカスで色を反転させたい 通常時: バックNavy、文字White フォーカス時: バックWhite、文字Navy フォントの色 カラー反転はボタンデザインの標準テクニック 54
  55. 55. • 四角形で文字の左寄せ、右寄せを可能に ナビゲータ-四角形 ナビゲータ3 これ つけろ!! 55
  56. 56. ナビゲータ4 • ファイルリソースの読込 • 透過gif、透過pngサポート ビュー名の横にアイコン を出したい こういうやつ 対応しろ!!! 56
  57. 57. まとめ 57
  58. 58. まとめ • デザインの基本を知り、少し手間をかけるだけでNotesアプリはカッコ良くなります • Webページがカッコイイのは、技術と手間がかかっているからです (ディレクター、デザイナー、コーダー、バックエンドプログラマがそれぞれ別) • 学んだデザインの技術は、プラットフォームが変わっても使えます • Notesクライアントに足りない機能は、IBMに要望を出すか?他の技術と組み合わせて回避しま しょう • デザインを知ることは「人間を知ること」 58 できそうなことから始めよう ご視聴ありがとうございました ノシ

×