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

新任担当者向けワークショップ2023 Extra Session もうNotesだからとは言わせない！！ V2 Coolで使いやすいNotesアプリデザイン講座 Notesコンソーシアム大阪研究会 林 哲司 1

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

悪 鬼 滅 殺 この資料の目的 3

悪 デ 悪 ザ 鬼 イ 滅 ン 殺 滅 殺 この資料の目的 4

お話しする内容 JavaScript LotusScirpt 外部editor いっさい使用しません! CSS ＠式 Java おまけに金利手数料は当社負担 Bluemix HTML ＠Command JSON 5

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

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

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

最後の砦は・・・・ HIROSHI ABE 9

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

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

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

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

最近のUI – API制限でプチ炎上Twitter 検索ボックス ヘッダーメニュー 入力枠 アクションバー 通知 右 ナビゲーション 左 ナビゲーション ビュー (タイムライン) Notesアプリにも生かせるんじゃね？ 14

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

Notes臭のしないアプリにするために • フォントはDefault Sans Serifを使わない • フォントサイズを見直す • 余白を活用する • ビューアイコンはフリー素材もしくは自作を利用する • 真っ黒(#000000)は使わない(ピュアブラックは眼精疲労の原因になる) • 参考サイト：文字や背景にピュアブラックを使ってはいけない理由 • https://uxmilk.jp/73614?fbclid=IwAR2vuFgvesXSZhyxI_biV3c1UmQgfn0WdOxLjzu26uemq2wN3E8Lf8zNpFM • いろんな色を使いすぎない ただし利用者のニーズは最優先 デフォルト設定ではなく、手間をかける 16

• https://uxmilk.jp/73614?fbclid=IwAR2vuFgvesXSZhyxI_biV3c1UmQgfn0WdOxLjzu26uemq2wN3E8Lf8zNpFM

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

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

2.デザインの基礎 19

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

デザインの例 京都市営地下鉄 パターン1 パターン2 パターン3 正解 車内警報装置 車内警報装置 ↓ ↓ 満員電車で見えない 車内警報装置 ↓ 子供が押せない 消 化 器 消 化 器 消 化 器 21

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

デザインの例 どこかの案内板(ダメな例) 通路と同じ色 通路は「白」 繋がっているように 見えない 通路は「黒」 ユーザーが理解できなければカッコ良くても意味がない

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ナビゲータ 文字サイズはどうする？？？ • 文字は最大の文字長を想定して決める(一部のボタンだけ文字サイズを変えると見づらい) • シニアを考慮して文字を大きくしすぎると、Windowsで拡大フォントを使っているPCで文字が はみ出る(12インチFullHDノートPCなど) 小 中 大 大(125％フォント) 125%フォントは 余白がなさ過ぎ 長い文字を想定して いないとはみ出る ココだけ小さくする と統一感がなくなる 40

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

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

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

第二形態(蒲田くん) 第三形態(品川さん) 2016年7月29日公開 第四形態(シンゴジラ) 44

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

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

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

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

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

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

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

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

アウトライン：デフォルトの設定で作ると・・・ 何にも装飾は つきません 素材(プラットフォーム)も大切ですが、ちゃんと料理しましょう 53

アウトライン：一手間加えるとこうなる 通常は白文字、 青バック アクティブ時に反転 トップレベルのみにア イコンを追加すると 見やすい 54

アウトライン：アウトラインの作成 1. アウトラインを作成する(例：olLeftNavigation) 2. 新規エントリを登録し、第二階層のエントリにはビューを割り当てる 3. 第1階層のエントリにアイコンを割り当てる(第2階層以下には割り当てない) どうしても割り当てた いなら第2階層はすべ て同じアイコン 55

アウトライン：アウトライン用ページの作成① 1. ページを作成し、背景色を指定する(例：pgLeftNavigation) 紺色は 0,96,160 個人的には メイリオ 11ptくらい が見やすい 2. 作成したアウトライン(olLeftNavigation)を埋め込み、下記プロパティを設定する 埋込アウトライン(タブ①) 埋込アウトライン(タブ②)ートップ 埋込アウトライン(タブ②)ーサブ 56

アウトライン用ページの作成② 3. 埋め込みアウトラインへの設定(続き) 埋込アウトライン(タブ③)－背景 埋込アウトライン(タブ③)－トップ 埋込アウトライン(タブ③)－サブ マウスホバー 選択時に文字色と反転 埋込アウトライン(タブ④)－トップ 埋込アウトライン(タブ④)－サブ 埋込アウトライン(タブ⑥) 57

アウトライン：ページ設定一覧① 設計要素 プロパティタブ 分類 プロパティ 値 ページ タブ② 背景 色 0,96,160 埋め込みアウトライン タブ① 三角アイコン 三角アイコンの表示 チェックなし アウトラインサイズ 幅 100、ウィンドウに合わせる 高さ ウィンドウに合わせる スクロールバーの表示 チェックあり フォント メイリオ、11 標準(色) 255,255,255 選択(色) 0,96,160 マウス(色) 0,96,160 フォント メイリオ、11 標準(色) 255,255,255 選択(色) 0,96,160 マウス(色) 0,96,160 背景の制御 － － トップレベルの背景 背景色：選択 255,255,255 背景色：マウス 255,255,255 タブ② トップレベルフォント サブレベルフォント タブ③ 58

アウトライン：ページ設定一覧② 設計要素 プロパティタブ 分類 プロパティ 値 タブ③続き 背景色：選択 255,255,255 背景色：マウス 255,255,255 タブ④ サブレベルの背景 トップレベルレイアウト エントリ：高さ サブレベルレイアウト タブ⑥ 余白 1.1、固定 エントリ：オフセット 0.0、0.0 エントリラベル：オフセット 0.25、1.0 エントリイメージ：オフセット 0.3、0.199 エントリ：高さ 1.1、固定 エントリ：オフセット 0.0、0.0 エントリラベル：オフセット 0.25、1.0 エントリイメージ：オフセット 0.3、0.199 左 1.93、絶対位置 59

アウトライン：細かいテクニック 反転時に白アイコンが 消えるのが嫌な場合は 薄いグレーでアイコン を作る 60

よくあるパターン • 埋込アウトラインのサブレベルレイアウトをデフォルトのまま残すと・・・。 完成版 途中まで頑張った場合 → なんかいけてない アイコンのオフセット がないので左カツカツ エントリの オフセットしすぎで バックが見えてしまう どうせやるなら全部調整！！ 上下位置の バランスが悪い 61

フレームセットの作成 1. 新規フレームセットを作成し、3分割を指定する Headerフレーム LeftNavigation フレーム Bodyフレーム 62

フレーム：Header 1. Header用フレーム(上フレーム)を選択し、プロパティに下記項目を指定する フレーム(タブ①) フレーム(タブ②) スクロールとサイズ変 更を禁止する フレーム(タブ③) 3-D境界線は不要 境界線の幅は「0」 63

フレーム：LeftNavigation 1. LeftNavigationフレーム(左フレーム)を選択し、プロパティに下記項目を指定する フレーム(タブ①) フレーム(タブ②) フレーム(タブ③) 64

フレーム：Body 1. LeftNavigationフレーム(左フレーム)を選択し、プロパティに下記項目を指定する フレーム(タブ①) フレーム(タブ②) フレーム(タブ③) 65

フレームセット完成イメージ 60px 250px 66

4.注意事項 67

文字のサイズを大きくしても、コントロールは変わらない • 文字のサイズに応じて、ラジオボタン、カレンダーのサイズ、カレンダーボタンのサイズも大き くしてなると良いな Windows10タブレット活用がもっと増えるのでは？ 68

ナビゲータ：256色しか使えない部分がある • 自分で作成した色のボタンを作りたい→四角形は256色しか使えない ナビゲータ本体 ナビゲータ－四角形 バックカラーと同色 にしたい 69

ナビゲータ：カーソル移動時、クリック時のフォント色は変 更できない • ボタンフォーカスで色を反転させたい ナビゲータ－四角形 フォントの色 通常時： バックNavy、文字White フォーカス時： バックWhite、文字Navy 70

ナビゲータ：文字の左寄せはできない • 四角形で文字の左寄せ、右寄せはプロパティがないのでできない ナビゲータ－四角形 これ 71

アウトライン＋ページを使って下さい • 左アイコン、反転文字、左寄せなど大体できる 72

5.もっと大切なこと 73

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

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

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

一言で言うと 誰のために？何のために？？？ 77

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

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

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

さて、どこが使いづらいでしょう？(ヒント：FullHD)

スクロールしないとページネーションが見えない 今のページが 判別しづらい スクロールしないと ページ替えできない

3ページ目のアプリ(コントロール)が見たい 今、3ページ目

対象のページを開く ページ内にBackが ないのでブラウザの 戻るをクリック

戻ってくると・・・・ はぁ？やる気あんのか？！ 1ページ10個×19 ページ 190回もやんの？ 1ページ目に戻る

6.まとめ 86

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

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

BootstrapとXPagesでレスポンシブアプリを作りたい 「XPages デザインレシピ」でググると林のブログにたどり着きます 89

NomadMobileの開発をやってみたい HCL Dominoの公式ページから「HCL Notes/Domino V12バーチャルセミナー」のページに行き、 「HCL Notes/Domino関連技術コンテンツ」でウェビナーのリプレイで見られます。 無料設計公開 テンプレート2つ付き 90

7. おまけ 91

今さら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 92

皆様のお役に立つことがありましたら幸いです ありがとうございました 93