このエントリーをはてなブックマークに追加

フォームデザインのカスタム (Access2010)

Accessを使って、業務管理ソフトを使用するうえで、とても大事なものに、毎日使うフォームのデザインがあります。毎日使うフォームなので、気持ちの良いデザインで毎日気持ち良くお仕事をしたいものです。

こちらでは、Access 2010バージョンを使って、実際に毎日使用しているフォームのデザインと配色を見ていきたいと思います。

目次

 

メニューの配色①

こちらは、業務管理のメインメニューから、日次処理というメニューに移った画面です。グリーンを基調にした色を使っています。グランドの色はあまり濃い色だと見た目に圧迫感があり、使いづらいので、やや薄めの色を使います。

Access メニューのカラー

まず、グランドのグリーンはプロパティの背景色を#CAE3BFとしています。この色は日本の色で、白緑(びゃくろく)という名前がついています。白みを帯びた淡い緑色です。とてもいい色です。そして、画面の上部と下部の部分は、それぞれフォームのヘッダーとフッターを使っていますが、こちらの背景色を#EBF1DDにします。

次に、青色のボタンの色は、#C0D8E2です。ピンク色のボタンは、#E2C1C0です。このピンクのボタンは、全体がグリーン調のなかで、少しアクセントをいれています。文字の色は黒色ですので、カラーコードは#000000です。テキストボックスの背景色は、白色、カラーコード#FFFFFFを使っています。

 

配色①まとめ
ヘッダー、フッター #EBF1DD (淡い緑)
詳細(メイン) #CAE3BF (白緑)
青色ボタン #C0D8E2
ピンクボタン #E2C1C0
テキストボックスの背景色 #FFFFFF (白)
文字 #000000 (黒)

 

メニューの配色②

こちらは、同じメニュー画面ですが、ボタンの色をヘッダー、フッターと同じ色にしています。全体を2色使いにして、見た目をよりすっきりとさせました。こちらはよりシンプルで、こちらもとてもいい感じです。

Access メニューのカラー

 

配色②まとめ
ヘッダー、フッター #EBF1DD (淡い緑)
詳細(メイン) #CAE3BF (白緑)
ボタン #EBF1DD (淡い緑)
テキストボックスの背景色 #FFFFFF (白)
文字 #000000 (黒)

 

 

入力画面の配色

こちらは、日次処理というメニューから、売上伝票の入力フォームに入った画面となります。ここでは、グランドの色は先ほどよりやや濃いめの緑を使っています。毎日の入力作業になりますので、少しお落ち着いた印象で、これもいいかなと思います。

Access 入力フォーム

 

フォント

ボタンやラベルに使っているフォントですが、私は、「Meiryo UIというフォントを使っています。Webページのフォントでお馴染みのメイリオというフォントがありますが、この「Meiryo UI」というフォントは、メイリオのフォントファミリーで、フォーム上の小さなボタンやラベルに表示させるのに向いています。漢字の横幅は変わらないようですが、ひらがなやカタカナを使ったときに横幅を狭く表示させるようになっています。ですので、小さなボタンやラベル上でも、より多くの文字を表示させることができます。フォント名についている、「UI」はユーザーインターフェースの略ですね。

メニューの配色①と②のテキストボックス内の数字はMeiryo UIを使っていて丁度いいのですが、入力画面の売上入力のテキストボックスの数字が、Meiryo UIだと、少し圧迫感があったので、入力画面のテキストボックスに関しては、私は「MS UI Gothic」というフォントを使用しています。これですと、数字はMeiryo UIより文字の幅が狭くなり、すっきりとした感じになり、漢字やひらがな、カタカナは、「MS P Gothic」ほど、堅苦しさが無く、見栄えも良くなりました。

 

フォントまとめ
メニュー画面 ボタン、ラベル Meiryo UI
メニュー画面 テキストボックス Meiryo UI
入力画面 ボタン、ラベル Meiryo UI
入力画面 テキストボックス MS UI Gothic

 

 

ボタン、テキストボックスのデザイン

私が以前使っていた業務管理のフォームデザインは、ボタンやテキストボックスにやや立体感をもたせたデザインとなっていました。ですが、たとえば今のWebデザインの主流はというと、フラットデザインです。これはボタンやアイコンなどに立体感を持たせない、全体的に平坦なイメージを与えるデザインです。

私の業務管理のフォームデザインも少しフラットデザインを意識しています。ボタンやラベルなどに、影などの立体効果はつけず、「境界線」は無しにしています。

このエントリーをはてなブックマークに追加

コメント

  • […] Access カスタマイズ(ブログ)サイト内のフォームのデザインのカスタムの記事では、私が実際に業務で使っているフォームのデザインをご紹介しました。こちらの記事では、さらに、その他のデザイン(配色を)ご紹介していきます! […]

    2017年8月14日7:40 AM| フォームのカラーの変更。 » Accessカスタマイズ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントフィード

トラックバックURL : http://gyoumuka.work/wp-trackback.php?p=3522

PAGE TOPへ戻る