20170706_Coolで使いやすいNotesアプリデザイン講座

もうNotesだからとは言わせない！！ Coolで使いやすいNotesアプリデザイン講座 Notesコンソーシアム大阪研究会 林 哲司 1

なぜ、セミナーで自己紹介するのか？ • 自己紹介では、最近の失敗談とか、ちょっと嬉しかったことなど、共感が得られ るようなことが話されます • 人間は他人に親近感を持つと、その人の話が良く頭に入るという性質があります 臨床心理学やUXの世界では、この信頼関係のことを ラポール と言います 面白くない話をする校長先生は ラポールを築いていない 2

お話しする内容 LotusScirpt 外部editor CSS ＠式 JavaScript Java Bluemix ＠Command HTML JSON 3

1.Notesアプリはダサいのか？ 4

伝説のホームページ • Web制作業界で伝説のホームページと言えば・・・・ 院長お手製の味のあるページ 色使いが標準16色ベースなのはR4時代の人には懐かしい 5

伝説のホームページの今 • 2013年、ついにリニューアル!!! ネットでは 「こんなの愛生会じゃない！！」 6

貴社のNotesアプリもこうなっていませんか？ フォントは Default Sans Serif フォームカラーは 16色から選択 フォントカラーは 黒(デフォルト) 表の枠線は 黒(デフォルト) フォントサイズは デフォルト(10pt) 表の中は 色を塗らない 表の余白は デフォルト 「使えれば良い」を言い訳に使ってはダメ！ 7

最近のUI • 皆さんは、インターネットページを見る時、どんな点を見ていますか？ 部品構成 部品の配置とプロパティ ヘッダー レイアウト フッター 余白 左ナビゲーション 文字サイズ 右ナビゲーション 色使い 背景(バック) 一般文字色 入力欄 入力枠 普通のテキスト 入力文字 タイトルテキスト バックカラー リンクテキスト リンクカラー 画像 最近は余白を生かしたデザインが多い 8

最近のUI - Facebook 検索ボックス ヘッダーメニュー 通知 アクションバー アクションバー 入力枠 右 ナビゲーション アクションバー ビュー (タイムライン) 9

最近のUI - Outlook ヘッダーメニュー 検索ボックス アクションバー 左 ナビゲーション 入力枠 アクションバー 10

最近のUI – 某国大統領が大好きTwitter 検索ボックス ヘッダーメニュー 入力枠 アクションバー 通知 右 ナビゲーション 左 ナビゲーション ビュー (タイムライン) Notesアプリにも生かせるんじゃね？ 11

最近のUI – muuuuu.org 業界別ホームページのデザイン一覧サイト Web業界では どれだけ良いデザインを模写したことがあるか？ が仕事の速さ・効率に繋がる 12

Notes臭のしないアプリにするために • フォントはDefault Sans Serifを使わない • フォントサイズを見直す • 余白を活用する • ビューアイコンはフリー素材もしくは自作を利用する • 真っ黒(#000000)は使わない • いろんな色を使いすぎない ただし利用者のニーズは最優先 デフォルト設定ではなく、手間をかける 13

自社の取り組み デザイン投票 ヘッダー 関連DBへのリンク DB内での ビュー選択 14

自社の取り組み デザイン投票 デザインA デザインB 2票 2票 デザインC デザインD 2票 3票 かなり微妙な結果・・・(-_-;) 15

2.デザインの基礎 16

デザインとは？ • 色使い？ • フォントの形？ デザインは 技術 • かわいい絵？ • 格好いいエフェクト？ • なんとなく？ • 流行？ • 持って生まれたセンス？ • わかりやすい配置？ • 通信簿の美術が「5」だった人のもの 学べば誰でも身につきます 17

デザインの例 京都駅の案内標識 なぜ数字の説明が ないのか？ なぜバックカラーは黒 なのか？ なぜ文字サイズが 違うのか？ なぜ色が違うのか？ (ここも青で良いのでは？) デザインには全ての要素に 意味がある 18

なぜ基礎を説明するのか？ 基礎がわかっていない人の進化形 劣化コピー(コピー職人) 基礎がわかっている人の進化形 変幻自在 19

デザインの四原則 原則1：整列 見えない線を意識して、整列することで、脳が受け取る情報量を減らす 原則2：近接 意味があるものは近づける 原則3：コントラスト メリハリを付け、楽しさを演出する 原則4：繰り返し(反復) 意味のあるものをパターン化し、繰り返すことで見やすさを向上させる デザイナーじゃない人はとりあえずこの4つでOK 20

原則1：整列 • どっちがエレガント？ 美味しい紅茶の入れ方 1．カップは暖めておく 2．ティーポットに茶葉を入れて1分蒸らす 3 ．想いを込めて注ぐ 美味しい紅茶の入れ方 1．カップは暖めておく 2．ティーポットに茶葉を入れて1分蒸らす 3 ．想いを込めて注ぐ 1. なんかダサい 2. 脳が美しいと感じる法則に則っていない 3. 情報量が多い ずれていると、そこに意味があるのではないかと推測 してしまう 1. 情報量が少ない 位置の変化も脳にとっては情報になる 2. 整理されている 3. エレガント 見えない線を意識する 21

原則2：近接 • どっちがエレガント？？ Design A Design B Entrees ～前菜～ ・ 瞬間燻製したサーモンとバジル風味のジャガイモのテリーヌ Soupe ～スープ～ ・ 野菜と鶏、りんごのスープ カレーの香り Poisson ou Viandes ～魚料理 又は 肉料理～ お好みの一品をお選び下さい。（メニュー例） ・ 本日の鮮魚のポワレ ラタトゥイユとブールブランのソース ・ 和牛すね肉のクリーム煮込み バターライス添え Dessert ～デザート～ ・ ガトーショコラとバニラのアイスクリーム Entrees ～前菜～ ・ 瞬間燻製したサーモンとバジル風味のジャガイモのテリーヌ Soupe ～スープ～ ・ 野菜と鶏、りんごのスープ カレーの香り Poisson ou Viandes ～魚料理 又は 肉料理～ お好みの一品をお選び下さい。（メニュー例） ・ 本日の鮮魚のポワレ ラタトゥイユとブールブランのソース ・ 和牛すね肉のクリーム煮込み バターライス添え Dessert ～デザート～ ・ ガトーショコラとバニラのアイスクリーム 関連するものは近く、そうでないものは離す 22

原則3：コントラスト • どっちがエレガント？？？ Design B Design C Entrees ～前菜～ ・ 瞬間燻製したサーモンとバジル風味のジャガイモのテリーヌ Entrees Soupe ～スープ～ ・ 野菜と鶏、りんごのスープ カレーの香り Soupe Poisson ou Viandes ～魚料理 又は 肉料理～ お好みの一品をお選び下さい。（メニュー例） ・ 本日の鮮魚のポワレ ラタトゥイユとブールブランのソース ・ 和牛すね肉のクリーム煮込み バターライス添え Poisson ou Viandes Dessert ～デザート～ ・ ガトーショコラとバニラのアイスクリーム フォント、色、サイズetc ～前菜～ ・ 瞬間燻製したサーモンとバジル風味のジャガイモのテリーヌ ～スープ～ ・ 野菜と鶏、りんごのスープ カレーの香り ～魚料理 又は 肉料理～ お好みの一品をお選び下さい。（メニュー例） ・ 本日の鮮魚のポワレ ラタトゥイユとブールブランのソース ・ 和牛すね肉のクリーム煮込み バターライス添え Dessert ～デザート～ ・ ガトーショコラとバニラのアイスクリーム コントラストで意味が明確に 23

原則4：繰り返し(反復) • どっちがエレガント？？？？ Design C Design D Entrees Entrees Soupe Soupe ～前菜～ ・ 瞬間燻製したサーモンとバジル風味のジャガイモのテリーヌ ～スープ～ ・ 野菜と鶏、りんごのスープ カレーの香り Poisson ou Viandes ～魚料理 又は 肉料理～ ～前菜～ ・ 瞬間燻製したサーモンとバジル風味のジャガイモのテリーヌ ～スープ～ ・ 野菜と鶏、りんごのスープ カレーの香り Poisson ou Viandes ～魚料理 又は 肉料理～ お好みの一品をお選び下さい。（メニュー例） お好みの一品をお選び下さい。（メニュー例） ・ 本日の鮮魚のポワレ ラタトゥイユとブールブランのソース ・ 和牛すね肉のクリーム煮込み バターライス添え ・ 本日の鮮魚のポワレ ラタトゥイユとブールブランのソース ・ 和牛すね肉のクリーム煮込み バターライス添え Dessert Dessert ～デザート～ ・ ガトーショコラとバニラのアイスクリーム ～デザート～ ・ ガトーショコラとバニラのアイスクリーム パターンを決めて繰り返すことで脳の負荷を減らす 24

4つの原則を支える要素1 タイポグラフィー • フォントの種類によって人の受ける印象は違う • • • ゴシック系フォント 明朝系フォント 京都の川床でランチ 京都の川床でランチ 京都の川床でランチ 京都の川床でランチ 力強いイメージ 文字が小さくても読みやすい 遠くから見ても見やすい • • • 繊細なイメージ 文字が小さいと読みづらい 高級なイメージ 目的、ニーズに合わせてフォントを選ぶ 25

Default Sans Serifとは？ • Serif(セリフ)は、文字の先端に付けられる飾り、ひげのこと • 多くは明朝系のフォントに見られる ABC Serif(セリフ) • Sans(サン)は、フランス語で「～のない」の意味 フォント 意味 Default Monospace 等倍フォント (MSゴシック) Default MultiLingal 多言語フォント (MSPゴシック) Default Sans Serif セリフなしフォント (MSPゴシック) Default Serif セリフありフォント (MSP明朝) Default User Interface UIフォント (Windowsの設定から取得) 飾りやひげのないフォント≒ゴシック系フォント 26

4つの原則を支える要素2 配色 • 色が多すぎると、統一感がなくなり、何が言いたいか？わからなくなる • 基本は3色、ベースカラー、少し薄めのベースカラー、強調色(ベースカラーの反対色) • Adobe Color CC(https://color.adobe.com/ja/)を使うと、美しいと感じる組み合わせを出せ る 27

4つの原則を支える要素2 配色 • バックがライト系(明るい色)、ダーク系(暗い色)によって見やすい文字色は違う AAAAA AAAAA 同じ色 AAAAA AAAAA ライト系とダーク系が混在するページは同じ色でも2色決める ヘッダーに使う文字 ビューに使う文字 同じ系統でも濃さを変える 28

それをふまえて • 街や雑誌を見てみれば、いくらでも学べる なぜこの色にしたのか？なぜこの大きさにしたのか？ デザイナーの意図を読み解く 29

3.Notes上でのテクニック 30

フレームセット • 普通に作ると・・・・ 実装方法 <frame>タグのような3Dラインが入り、2000年代のデザイン 31

フレームセット • 3-D境界線はチェックを外して、境界線は「0ピクセル」 実装方法 境界線は表示しないのがトレンド(死語) 32

ナビゲータ 第一形態 • VBみたいな「3Dボタン」は使わず、四角形で作成 • 種別の違いを左の縦棒で表現 実装方法 ハイライト境界線をバックカラー と同じにしてボタンサイズが変わ るのを防ぐ 33

ナビゲータ 第二形態(蒲田くん) • 種別にタイトルを付けるなら高さを変えて、クリックできる部分と明確にわかるようにする 実装方法 四角形の高さを適当に変えて下さい 34

ビュー 第一形態 • フォントを「メイリオ」、カラーを「濃いグレー」 実装方法 タイトルも手を抜かない メイリオ＆濃いグレー ユーザーが一番見たい列は Webのリンクカラーを参考に 目立たなくて良い情報は 薄いグレーなど 35

ビュー 第二形態(蒲田くん) • 行間を「1 1/2」にする(詰め込み感がちょっとスッキリ) 実装方法 36

ビュー 第三形態(品川くん) • ファイルリソースの画像を呼び出す&高さは3行 実装方法 計算結果フィールドでファイル名を決定 64x64pxのアイコンで 高さは3行くらい 37

フォーム≒表の使いこなし • フォーム上に表をデザインする上で重要なのは、レイアウトのベースとなる表の使いこなし ■具体的には • フォームのバックカラー • 表のタイトル部分カラー(タイトル文字、バック) • 表の入力部分カラー(フィールド文字、バック) • 枠線 • パディング(余白) 38

フォーム 第一形態 • フォームバックを「グレー」、入力枠のバックは「白」 • バックカラーを指定することで入力欄を明確化 枠線とタイトル文字を同じ色にす ることで情報量を減らす 実装方法 フォーム－バック 表－タイトル行バック 表－入力行バック ユーザーが使い慣れているUIも 入力欄は白バック 39

フォーム 第二形態(蒲田くん) • 表の行間隔、列間隔を「0.1cm」に変更し、詰め込みを 解消 実装方法 • タイトル行の左境界線を「3」に変更し、項目名の分離を 明確に 40

フォーム 第三形態(品川くん) • 列と列の間に余白列を追加 実装方法 • タイトル行の前に余白行を追加 • 上と右の境界線を「0」に設定 表－余白行、余白列追加 41

アクションボタン 第一形態 • サイズを指定するだけでイメージは変わります 実装方法 42

アクションボタン 第二形態(蒲田くん) • アクションボタンは右寄せが可能です(アラビア圏対応の有効利用？) 実装方法1(全部右寄せ) 実装方法2(指定ボタン右寄せ) 43

アクションボタン 第三形態(品川くん) • よく使うメニューは左、オプションメニューは右がわかりやすい(滅多に使わないボタンがいつも 出ているとゴチャゴチャする) 実装方法 サブアクションを作る アイコンもしくはボタン名に…を付ける 個別アクションボタン右寄せ 44

フォーム－フォーム内ボタン • フィールドに対するボタンと、フォームに対するボタンでサイズを変えるとわかりやすい ＠Picklistなどフィール ドに対する操作 フォーム全体に 対する操作 45

4.もっと大切なこと 46

テクニックだけではダメ • デザインだけがきれいでも、使いづらいHPはいくらでもあります • なぜでしょうか？ デザインはカッコ良くするものじゃなくて ユーザーの目的を達成しやすくするもの 47

情報の整理できてる？？？ 余白を活用する (増やす) 一画面あたり の情報量は減る スクロール・ペー ジ遷移の増加 作業の手間が増えては、意味がない ■情報整理できてないパターン • 分析方法が不明確な選択肢がある(キーワードフィールド、コンボボックス) • 活用方法が決まっていない入力欄がある • 20年前の紙ベースの帳票をIT化しただけ → IT化の強みを生かしていない • 人によって入力欄の入力順が全然違う 48

ユーザビリティーとは • 国際規格ISO9241では「ユーザビリティ」を下記のように定義しています 1. 特定のコンテキストにおいて 2. 特定のユーザーによって 3. ある製品が 4. 特定の目的を達成するために 用いられる際の「効果、効率、ユーザーの満足度合い」 誰にでも、どんな状況でも満足されると言うことは不可能 「特定」することが必要 49

デザインする前に確認&決めること 対応解像度 • 全員FullHDか？ • HD(1366x768)をベースに考えるが、FullHDやSurface(2160×1440)などをどの程度考慮するか？ 対応OS • MacOSも対応する？(フォントの違いによるデザイン崩れ) 使用するユーザー層 • 経理の方のみ • 全社員向け • PCの習熟度は？ITへの理解度は？ 関連DBとの統一感 • 色使い • 操作性 50

フォーム－フィールドの並び順 並び順 • ユーザーが最初に得たい情報は何か？ • 関連する情報は近くに配置しているか？ • 日付フィールド、ファイル選択ボタンなどマウス操作が必要な項目は、キーボード→マウス→キーボードへ の持ち替えを減らすようにできているか？ • 日本語入力ON、OFFを意識しているか？(切替が無駄) • タブキー送りの順序を設定しているか？ ① ① ② ② ③ ④ ③ ④ 入力順、関連度、操作性を考慮しましょう！ 51

ビュー－並び順と色使い 並び順 • ユーザーが最初に見たい情報は何か？ • ユーザーシナリオや業務フローを確認し、列の並び順を決定 色使い・表示項目 • 目立たせるべき項目は何か？ • 目立たなくても良い項目は何か？ • ステータスなどは表示しない方がわかりやすい場合もある • 例えば、「標準・中・強」の選択肢があった場合、標準はヌルの方が中・強がわかりやすい • 無駄に色を使いすぎてわかりづらくなっていないか？ 色が多すぎて どこを見せたいのか？ サッパリわからん ユーザーが見たい列、補足情報の列を明確にしましょう！ 52

5.IBMへの要望 53

ラジオボタン、日付フィールドなどのサイズ調整 • 文字のサイズに応じて、ラジオボタン、カレンダーのサイズ、カレンダーボタンのサイズも大き くして欲しい Windows10タブレット活用がもっと増えるのでは？ 54

ナビゲータ1 • 自分で作成した色のボタンを作りたい→四角形は256色しか使えない(バグじゃね？) ナビゲータ本体 ナビゲータ－四角形 バックカラーと同色 にしたい 256色じゃ作りたいデザインが作れない 55

ナビゲータ2 • ボタンフォーカスで色を反転させたい ナビゲータ－四角形 フォントの色 通常時： バックNavy、文字White フォーカス時： バックWhite、文字Navy カラー反転はボタンデザインの標準テクニック 56

ナビゲータ3 • 四角形で文字の左寄せ、右寄せを可能に ナビゲータ－四角形 これ つけろ！！ 57

ナビゲータ4 • ファイルリソースの読込 • 透過gif、透過pngサポート こういうやつ ビュー名の横にアイコン を出したい 対応しろ！！！ 58

6.まとめ 59

まとめ • デザインの基本を知り、少し手間をかけるだけでNotesアプリはカッコ良くなり ます • Webページがカッコイイのは、技術と手間がかかっているからです (ディレクター、デザイナー、コーダー、バックエンドプログラマがそれぞれ別) • 学んだデザインの技術は、プラットフォームが変わっても使えます • Notesクライアントに足りない機能は、IBMに要望を出すか？他の技術と組み合 わせて回避しましょう → あきらめるな！あきらめたら試合終了！！！ • デザインを知ることは「人間を知ること」 できそうなことから始めよう ご視聴ありがとうございました ノシ 60

今日の資料・参考資料 今日の資料 参考書籍 「20170217 デザイン」でググる Amazonで「ノンデザイナーデザインブック」を 検索 61

7.今日だけのおまけ 62

今さらNotesなんて・・・って思っている人 UTM Fire wall iOS Win API SMTP IMAP HTTP Android Word jQuery XPages UX 顧客 満足 Java Script REST Watson 働き方 改革 Lotus Script Notes JSON AWS Excel 人生の 喜び Boot Strap 組み合わせを広げていけば、どんどん学べる jQuery Mobile 63

そのためには？？？ 1. まずは、基礎を極める 2. 失敗する、後悔する(死なない程度に失敗。周りに迷惑かけたら謝る。 謝れない大人はダメ。) 3. そこから、気づく 4. 周辺部分を学んでいく 5. 自分が興味を持ったセミナー、コミュニティーに行ってみる(アイ ディアというのは「今までになかった組み合わせ」) 6.自分で考える 世界はどんどん変わっていきます。 人生には正解も、答えもありません。 全人類が試行錯誤しているのが現状です。 7.自分に誇り持て 自分のことを最高に愛している生き方は？ 今日、死んでも恥じない生き方を目指せ 64