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

もうNotesだからとは言わせない！！

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

2017/02/17(Fri)

Tetsuji Hayashi

テクてくLotus技術者夜会コミュニティー編

1

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

2

伝説のホームページ

• Web制作業界で伝説のホームページと言えば・・・・

院長お手製の味のあるページ色使いが標準16色ベースなのはR4時代の人には懐かしい

3

伝説のホームページの今

• 2013年、ついにリニューアル!!!

ネットでは

「こんなの愛生会じゃない！！」 4

貴社のNotesアプリもこうなっていませんか？

フォントは Default Sans Serif

フォントカラーは黒(デフォルト)

フォントサイズはデフォルト(10pt)

フォームカラーは 16色から選択

表の枠線は黒(デフォルト)

表の中は色を塗らない

表の余白はデフォルト

「使えれば良い」を言い訳に使ってはダメ！ 5

最近のUI

• 皆さんは、インターネットページを見る時、どんな点を見ていますか？

部品構成

ヘッダー

フッター

左ナビゲーション

右ナビゲーション

背景(バック)

入力欄

普通のテキスト

タイトルテキスト

リンクテキスト

画像

部品の配置とプロパティ

レイアウト

余白

文字サイズ

色使い

一般文字色

入力枠

入力文字

バックカラー

リンクカラー

6 最近は余白を生かしたデザインが多い

最近のUI - Facebook

検索ボックスヘッダーメニュー通知

アクションバー



入力枠

7

ビュー (タイムライン)


最近のUI - Outlook

ヘッダーメニュー



入力枠


検索ボックス

8

最近のUI – 某国大統領が大好きTwitter

入力枠


ヘッダーメニュー

通知



ビュー (タイムライン)

9

検索ボックス

Notesアプリにも生かせるんじゃね？

最近のUI – muuuuu.org

業界別ホームページのデザイン一覧サイト

Web業界では

どれだけ良いデザインを模写したことがあるか？が仕事の速さ・効率に繋がる 10

Notes臭のしないアプリにするために

• フォントはDefault Sans Serifを使わない

• フォントサイズを見直す

• 余白を活用する

• ビューアイコンはフリー素材もしくは自作を利用する

• 真っ黒(#000000)は使わない

• いろんな色を使いすぎない

デフォルト設定ではなく、手間をかける

ただし利用者のニーズは最優先

11

自社の取り組みデザイン投票

ヘッダー

関連DBへのリンク

DB内でのビュー選択

12

自社の取り組みデザイン投票

デザインA

2票

デザインB

2票

デザインD

3票

デザインC

2票

かなり微妙な結果・・・(-_-;) 13

デザインの基礎

14

デザインとは？

• 色使い？

• フォントの形？

• かわいい絵？

• 格好いいエフェクト？

• なんとなく？

• 流行？

• 持って生まれたセンス？

• わかりやすい配置？

• 通信簿の美術が「5」だった人のもの

学べば誰でも身につきます

デザインは

技術

15

デザインの例京都駅の案内標識

なぜ文字サイズが違うのか？

なぜ色が違うのか？ (ここも青で良いのでは？)

なぜバックカラーは黒なのか？

デザインには全ての要素に

意味がある

なぜ数字の説明がないのか？

16

なぜ基礎を説明するのか？

基礎がわかっていない人の進化形基礎がわかっている人の進化形

劣化コピー(コピー職人) 変幻自在 17

デザインの四原則

見えない線を意識して、整列することで、脳が受け取る情報量を減らす

原則1：整列

意味があるものは近づける

原則2：近接

メリハリを付け、楽しさを演出する

原則3：コントラスト

意味のあるものをパターン化し、繰り返すことで見やすさを向上させる

原則4：繰り返し(反復)

18 デザイナーじゃない人はとりあえずこの4つでOK

原則1：整列

• どっちがエレガント？

美味しい紅茶の入れ方

1．カップは暖めておく

2．ティーポットに茶葉を入れて1分蒸らす

3 ．想いを込めて注ぐ

美味しい紅茶の入れ方

1．カップは暖めておく

2．ティーポットに茶葉を入れて1分蒸らす

3 ．想いを込めて注ぐ

1. なんかダサい

2. 脳が美しいと感じる法則に則っていない

3. 情報量が多い

ずれていると、そこに意味があるのではないかと推測してしまう

1. 情報量が少ない

位置の変化も脳にとっては情報になる

2. 整理されている

3. エレガント

見えない線を意識する 19

原則2：近接

• どっちがエレガント？？

Entrees ～前菜～・瞬間燻製したサーモンとバジル風味のジャガイモのテリーヌ Soupe ～スープ～・野菜と鶏、りんごのスープカレーの香り Poisson ou Viandes ～魚料理又は肉料理～お好みの一品をお選び下さい。（メニュー例）・本日の鮮魚のポワレラタトゥイユとブールブランのソース・和牛すね肉のクリーム煮込みバターライス添え Dessert ～デザート～・ガトーショコラとバニラのアイスクリーム


関連するものは近く、そうでないものは離す

Design A Design B

20

原則3：コントラスト

• どっちがエレガント？？？


Entrees ～前菜～

・瞬間燻製したサーモンとバジル風味のジャガイモのテリーヌ

Soupe ～スープ～

・野菜と鶏、りんごのスープカレーの香り

Poisson ou Viandes ～魚料理又は肉料理～

お好みの一品をお選び下さい。（メニュー例）

・本日の鮮魚のポワレラタトゥイユとブールブランのソース・和牛すね肉のクリーム煮込みバターライス添え

Dessert ～デザート～

・ガトーショコラとバニラのアイスクリーム

フォント、色、サイズetc コントラストで意味が明確に

Design B Design C

21

原則4：繰り返し(反復)

• どっちがエレガント？？？？

パターンを決めて繰り返すことで脳の負荷を減らす



Soupe ～スープ～・野菜と鶏、りんごのスープカレーの香り

Poisson ou Viandes ～魚料理又は肉料理～お好みの一品をお選び下さい。（メニュー例）





Soupe ～スープ～

・野菜と鶏、りんごのスープカレーの香り

Poisson ou Viandes ～魚料理又は肉料理～

お好みの一品をお選び下さい。（メニュー例）


Dessert ～デザート～


Design C Design D

22

4つの原則を支える要素1

タイポグラフィー

• フォントの種類によって人の受ける印象は違う

京都の川床でランチ京都の川床でランチ

京都の川床でランチ京都の川床でランチ

ゴシック系フォント明朝系フォント

目的、ニーズに合わせてフォントを選ぶ

• 力強いイメージ • 文字が小さくても読みやすい • 遠くから見ても見やすい

• 繊細なイメージ • 文字が小さいと読みづらい • 高級なイメージ

23

Default Sans Serifとは？

• Serif(セリフ)は、文字の先端に付けられる飾り、ひげのこと

• 多くは明朝系のフォントに見られる

• Sans(サン)は、フランス語で「～のない」の意味

ABC Serif(セリフ)

フォント意味

Default Monospace

等倍フォント

(MSゴシック)

Default MultiLingal 多言語フォント

(MSPゴシック)

Default Sans Serif セリフなしフォント

(MSPゴシック)

Default Serif セリフありフォント

(MSP明朝)

Default User

Interface

UIフォント

(Windowsの設定から取得)

24

飾りやひげのないフォント≒ゴシック系フォント


配色

• 色が多すぎると、統一感がなくなり、何が言いたいか？わからなくなる

• 基本は3色、ベースカラー、少し薄めのベースカラー、強調色(ベースカラーの反対色)

• Adobe Color CC(https://color.adobe.com/ja/)を使うと、美しいと感じる組み合わせを出せる

25

• バックがライト系(明るい色)、ダーク系(暗い色)によって見やすい文字色は違う


配色

AAAAA AAAAA

AAAAA AAAAA

ライト系とダーク系が混在するページは同じ色でも2色決める

同じ色

ヘッダーに使う文字ビューに使う文字

同じ系統でも濃さを変える 26

それをふまえて

• 街や雑誌を見てみれば、いくらでも学べる

なぜこの色にしたのか？なぜこの大きさにしたのか？

デザイナーの意図を読み解く 27

Notes上でのテクニック

28

フレームセット

• 普通に作ると・・・・

<frame>タグのような3Dラインが入り、2000年代のデザイン

実装方法

29

フレームセット

• 3-D境界線はチェックを外して、境界線は「0ピクセル」

境界線は表示しないのがトレンド(死語)

実装方法

30

ナビゲータ第一形態

• VBみたいな「3Dボタン」は使わず、四角形で作成

• 種別の違いを左の縦棒で表現

実装方法

ハイライト境界線をバックカラーと同じにしてボタンサイズが変わ

るのを防ぐ 31

ナビゲータ第二形態(蒲田くん)

• 種別にタイトルを付けるなら高さを変えて、クリックできる部分と明確にわかるようにする

実装方法

四角形の高さを適当に変えて下さい

32

ビュー第一形態

• フォントを「メイリオ」、カラーを「濃いグレー」

ユーザーが一番見たい列は Webのリンクカラーを参考に

目立たなくて良い情報は薄いグレーなど

タイトルも手を抜かないメイリオ＆濃いグレー

実装方法

33

ビュー第二形態(蒲田くん)

• 行間を「1 1/2」にする(詰め込み感がちょっとスッキリ) 実装方法

34

ビュー第三形態(品川くん)

• ファイルリソースの画像を呼び出す&高さは3行実装方法

計算結果フィールドでファイル名を決定

64x64pxのアイコンで高さは3行くらい

35

• フォーム上に表をデザインする上で重要なのは、レイアウトのベースとなる表の使いこなし

■具体的には

• フォームのバックカラー

• 表のタイトル部分カラー(タイトル文字、バック)

• 表の入力部分カラー(フィールド文字、バック)

• 枠線

• パディング(余白)

フォーム≒表の使いこなし

36

• フォームバックを「グレー」、入力枠のバックは「白」

• バックカラーを指定することで入力欄を明確化

フォーム第一形態

実装方法

フォーム－バック

枠線とタイトル文字を同じ色にすることで情報量を減らす

表－タイトル行バック

表－入力行バック

ユーザーが使い慣れているUIも入力欄は白バック

37

フォーム第二形態(蒲田くん)

• 表の行間隔、列間隔を「0.1cm」に変更し、詰め込みを解消

• タイトル行の左境界線を「3」に変更し、項目名の分離を明確に

実装方法

38

フォーム第三形態(品川くん)

• 列と列の間に余白列を追加

• タイトル行の前に余白行を追加

• 上と右の境界線を「0」に設定

実装方法

表－余白行、余白列追加

39

アクションボタン第一形態

• サイズを指定するだけでイメージは変わります

実装方法

40

アクションボタン第二形態(蒲田くん)

• アクションボタンは右寄せが可能です(アラビア圏対応の有効利用？)

左寄せ

実装方法1(全部右寄せ) 実装方法2(指定ボタン右寄せ)

41

アクションボタン第三形態(品川くん)

• よく使うメニューは左、オプションメニューは右がわかりやすい(滅多に使わないボタンがいつも出ているとゴチャゴチャする)

実装方法

サブアクションを作る

個別アクションボタン右寄せ

アイコンもしくはボタン名に…を付ける

42

フォーム－フォーム内ボタン

• フィールドに対するボタンと、フォームに対するボタンでサイズを変えるとわかりやすい

フォーム全体に対する操作

＠Picklistなどフィールドに対する操作

43

もっと大切なこと

44

テクニックだけではダメ

• デザインだけがきれいでも、使いづらいHPはいくらでもあります

• なぜでしょうか？

デザインはカッコ良くするものじゃなくてユーザーの目的を達成しやすくするもの

45

情報の整理できてる？？？

余白を活用する (増やす)

一画面あたりの情報量は減る

スクロール・ページ遷移の増加

作業の手間が増えては、意味がない

■情報整理できてないパターン

• 分析方法が不明確な選択肢がある(キーワードフィールド、コンボボックス)

• 活用方法が決まっていない入力欄がある

• 20年前の紙ベースの帳票をIT化しただけ → IT化の強みを生かしていない

• 人によって入力欄の入力順が全然違う

46

ユーザビリティーとは

• 国際規格ISO9241では「ユーザビリティ」を下記のように定義しています

1.特定のコンテキストにおいて 2.特定のユーザーによって 3.ある製品が 4.特定の目的を達成するために用いられる際の「効果、効率、ユーザーの満足度合い」

誰にでも、どんな状況でも満足されると言うことは不可能

「特定」することが必要 47

デザインする前に確認&決めること

対応解像度

• 全員FullHDか？ • HD(1366x768)をベースに考えるが、FullHDやSurface(2160×1440)などをどの程度考慮するか？

使用するユーザー層

• 経理の方のみ • 全社員向け • PCの習熟度は？ITへの理解度は？

関連DBとの統一感

• 色使い • 操作性

対応OS

• MacOSも対応する？(フォントの違いによるデザイン崩れ)

48

フォーム－フィールドの並び順

並び順

• ユーザーが最初に得たい情報は何か？

• 関連する情報は近くに配置しているか？

• 日付フィールド、ファイル選択ボタンなどマウス操作が必要な項目は、キーボード→マウス→キーボードへの持ち替えを減らすようにできているか？

• 日本語入力ON、OFFを意識しているか？(切替が無駄)

• タブキー送りの順序を設定しているか？

① ②

③ ④

①

②

③

④

入力順、関連度、操作性を考慮しましょう！ 49

ビュー－並び順と色使い

• ユーザーが最初に見たい情報は何か？ • ユーザーシナリオや業務フローを確認し、列の並び順を決定

並び順

色使い・表示項目

• 目立たせるべき項目は何か？ • 目立たなくても良い項目は何か？

• ステータスなどは表示しない方がわかりやすい場合もある • 例えば、「標準・中・強」の選択肢があった場合、標準はヌルの方が中・強がわかりやすい

• 無駄に色を使いすぎてわかりづらくなっていないか？

ユーザーが見たい列、補足情報の列を明確にしましょう！ 50

IBMへの要望

51

ラジオボタン、日付フィールドなどのサイズ調整

• 文字のサイズに応じて、ラジオボタン、カレンダーのサイズ、カレンダーボタンのサイズも大きくして欲しい

Windows10タブレット活用がもっと増えるのでは？ 52

ナビゲータ1

• 自分で作成した色のボタンを作りたい→四角形は256色しか使えない(バグじゃね？)

バックカラーと同色にしたい

ナビゲータ本体ナビゲータ－四角形

256色じゃ作りたいデザインが作れない 53

ナビゲータ－四角形

ナビゲータ2

• ボタンフォーカスで色を反転させたい

通常時：バックNavy、文字White

フォーカス時：バックWhite、文字Navy

フォントの色

カラー反転はボタンデザインの標準テクニック 54

• 四角形で文字の左寄せ、右寄せを可能に

ナビゲータ－四角形

ナビゲータ3

これ

つけろ！！ 55

ナビゲータ4

• ファイルリソースの読込

• 透過gif、透過pngサポート

ビュー名の横にアイコンを出したい

こういうやつ

対応しろ！！！ 56

まとめ

57

まとめ

• デザインの基本を知り、少し手間をかけるだけでNotesアプリはカッコ良くなります

• Webページがカッコイイのは、技術と手間がかかっているからです

(ディレクター、デザイナー、コーダー、バックエンドプログラマがそれぞれ別)

• 学んだデザインの技術は、プラットフォームが変わっても使えます

• Notesクライアントに足りない機能は、IBMに要望を出すか？他の技術と組み合わせて回避しましょう

• デザインを知ることは「人間を知ること」

58

できそうなことから始めよう

ご視聴ありがとうございましたノシ