ちょっとしたデザインの変更でもノーツアプリケーションのイメージが変わってきます。どのようなカスタマイズができるのか？様々な方法がありますが、その中で比較的簡単な例をまとめました。

1. ノーツアプリケーションの
デザインを変更してみよう！
株式会社ソルクシーズ
吉田 武司
2018/06/18
Version 1.0

2. 特記事項
• 本資料の掲載内容は、できる限り正確を期するよう に努めてはおります
が、いかなる明示または暗黙の 保証も責任も負いかねます。
• 本資料の情報は、使用先の責任において使用され るべきものであること
を、あらかじめご了承ください。
• 掲載情報は不定期に変更されることもあります。他 のメディア等に無断
で転載する事はご遠慮下さい。
• 当資料をコピー等で複製することは、執筆者の承諾 なしではできません。
• 当資料に掲載された製品名または会社名は それぞれの各社の商標または
登録商標です。

3. はじめに
• 作成済みのアンケート DB のデザインを変更する想定で説明します。
• 既存の設計を極力そのまま利用します。
• テンプレートファイルのダウンロード（署名してご使用ください）
https://www.ibm.com/developerworks/community/files/app#/file/1771b918-c0e7-48fb-87ae-0ed03f1c993f
Bfore
After

4. フォント
• 種類
• メイリオ
• サイズ
• 10（強弱に応じて±2）
• 色
• 白地での強調 ：① 番の色
• 白地 ：④ 番の色
• 重要度が低い文字列 ：⑤ 番の色
• 背景が明度の低い濃い色（背景色が ① 番）：⑥ 番の色

5. 色
文字 文字、ボタン、背景色
メニューの選択状態 行の背景色、水平線メインカラー、文字（強調）
文字（弱）、マウスオーバー
① ② ③
④ ⑤ ⑥
• 今回は既定の色で説明していますが、好みの色に変更して頂いてもかまいません。
• 次頁以降の説明にある ① ② ③・・・の数値は、設定する色の番号を表します。

6. 色の作成
• 使用したい色が無い場合、[色の設定] ダイアログから作成します。
(2) 作成する色の
設定先を指定
(3) 色の作成
(4) 色の追加
② に設定
(1)
(5) 変更を保存
(6) 作成した色は最下部の
パレットに表示

7. 複数のプロパティに対して設定を適用
• プロパティの設定では、同列のプロパティに対して一度に同じ設定を行える
場合があります。
• 複数の列を変更する場合など上手に利用して手間を省きましょう。
• 但し、すべての項目に適用されるので、個別に設定する箇所がある場合は修正漏れや上
書きに注意しましょう。（例：カテゴリ列の色とスタイルのみを変更する場合）
• その場合、一度すべてに適用した後、必要な箇所だけ個別に設定しましょう。

8. ビュー

9. アクションバー
アクションバーの高さ
① アクションバーの背景色
④ ボタンの文字色
アクションバーの境界線はなし
⑥ ボタンの色

10. ビュー
③ 偶数行の背景色
① 列タイトルの背景色
行の間隔
ビュー余白（境界線）の幅
① 余白の色
① 列の合計の文字色

11. 列
⑥ 列タイトルの文字
① 列の文字（強調） ④ 列の文字

12. ページ（メニュー）

13. ページ DB のタイトルを表示するために計算結果テキストを挿入します。
メニューバー<作成-計算結果テキスト>から挿入
⑥
DB タイトルを表示できるように値の計算式を記述
@DbTitle
行間隔の調整
空行で間隔を調整
① 背景色

14. 埋め込みアウトライン
⑤⑥⑥
[トップレベルの背景] に切り替える
② 選択時の背景色
マウスオーバー時の文字色
標準、選択時の文字色

15. 埋め込みアウトライン
エントリ（メニュー）の高さや位置の調整 余白の調整
文字やイメージ（アイコン）の表示位置
[中から左へ] は、縦方向を中央揃え、横方向を左揃えのこと

16. フレーム

17. フレーム
境界線部分のスタイルを境界線なし（0ピクセル）に変更
メニューのフレームのみの設定
メニューの幅を変更
スクロールをオフに変更

18. フォーム

19. アクションバー
アクションバーの高さ
① アクションバーの背景色
アクションバーの境界線はなし
⑥ ボタンの色
④ ボタンの文字色

20. 表示画面
見出し
本文
水平線
メニューバー<作成-水平線>から挿入
フッター
①
④
⑤
③
ルーラーで余白を調整

21. 完成

22. この他にも様々な方法があります。
今回の演習を参考に
利用者が使いやすいデザインを目指して
アプリケーション開発を楽しんでください！