狠狠撸

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

狠狠撸

ノーツアプリケーションのデザインを変更してみよう！

More Related Content

ノーツアプリケーションのデザインを変更してみよう！