t-hom’s diary

主にVBAネタを扱っているブログ…とも言えなくなってきたこの頃。

VBA 見栄えの良いユーザーフォームを作るコツ

自分が作ったマクロを他人に使ってもらう場合、「何ができるか」という機能だけでなく、「どのように出来るか」という操作性や、「どう感じるか」という審美性も大事である。

素人の手作り感たっぷりのマクロを、本格的なシステムのように感じさせるのはやはりデザインの力だ。

最初のフォーム

ここに、「とりあえず作ってみました」的なフォームを用意した。

仮に機能面は満たしているとしても、少々野暮ったい。
特にWindows10で実行すると、ウインドウが平坦なのでテキストボックスが妙に浮いて見える。(下図)

時代の主流はフラットデザイン。
いつまでこの流行が続くのかは分からないが、時流に逆らったデザインは野暮ったく見えるので、テキストボックスのBorderStyleは1-fmBorderStyleSingleにしておこう。

それから、ラベルやボタンのフォントはデフォルトでは「MS UI Gothic 9ポイント」になっている。
これはMSゴシックをボタンやメニューなどの狭いユーザーインターフェースに効率的に配置するために横幅を狭めたフォントである。

このフォントはアンチエイリアス処理がされておらず、拡大するとドットの粗が目立つ。

最近のOSの表示はディスプレイ表示はアンチエイリアス処理がされたフォントが主流である。
メッセージボックスのテキストなども拡大してみると黒一色のドットではなく、なめらかに表示させるためのアンチエイリアス処理が施されていることがわかる。

そこで、自作のフォームでもアンチエイリアスが効いた「Meiryo UI」というフォントを使用する。
Meiryo UIはユーザーインターフェース用の「メイリオ」フォント。
もともと日本語の「明瞭(めいりょう)」から名づけられたこのフォントは、ディスプレイでみても滑らかにくっきり表示されるように工夫されている。

次に、9ポイントでは文字が小さすぎる。

あまり目が良くない方が使用することも考えると、12ポイントくらいは欲しい。
確かユニバーサルデザイン(老若男女誰でも快適に使用できるデザイン)で一般的に推奨されている最低限のサイズが12ポイントである。

改良したフォーム

前述の改良を施したのがフォームがこちら。

大きな変更点は、テキストボックスのフラット化と、ラベルのフォントとサイズ変更である。
その他、ラベルとテキストボックスとの間が空かないように、右寄せにしたり、フォームのCaptionを「UserForm1」から「個人情報登録」に変えた。

これで少しは改良されたと思う。

しかしまだ全体的にノッペリとして野暮ったい。
デザインに起伏が無いのだ。

メッセージボックスを例に挙げると、メッセージ領域とボタンの領域で背景色の切り替えを行っている。

更に改良したフォーム

メッセージボックスを真似してラベルでフッターを作ってみた。

ついでにキャンセルボタンも用意した。

作り方は、ラベルを配置してテキストを消し、背景色を設定してフッターとして配置してから、以下のように右クリックして背面に移動させるだけ。

何度か背面に移動させて、隠れているボタンが2つとも出てきたらOK。

フォームの改良最終形

最終的にはヘッダーも作成してタイトルを乗せ、必須項目を示す赤いアスタリスクも配置した。

タイトルは位置合わせのため、ヘッダーラベルとは別に作成して被せている。

あとはコーディングで、たとえば現在選択されているテキストボックスの色を変えたり、

フォーカスの当たっているボタンを目立たせたりといった工夫もできる。

やり方は、各コントロールのEnterイベントで色を変える処理を書いて、Exitイベントで色を戻す処理を書くだけ。

まず、コードウインドウのオブジェクトボックスでコントロールを選択し、右側のイベントボックスでEnterを選ぶ。

すると、対応する空のプロシージャが作成されるので、

Private Sub CommandButton1_Enter()
    
End Sub

色を変える処理を追加する。

Private Sub CommandButton1_Enter()
    CommandButton1.ForeColor = vbRed
End Sub

Exitイベントも同様に作成して、色を戻す処理を追加する。

Private Sub CommandButton1_Exit(ByVal Cancel As MSForms.ReturnBoolean)
    CommandButton1.ForeColor = vbBlack
End Sub

これを全コントロール分作成すれば、選択されている場合だけ色を変える処理ができる。

まとめ

  • テキストボックスは、フラットにする。
  • ラベルやボタンのフォントはMeiryo UIの12ポイントを使う。
  • 背景色の切り替えでデザインに起伏を持たせる。
  • コーディングでUIを変化させる。

あと、フッターは重い色(暗めの色)、ヘッダーは軽い色(明るめの色)にしたほうが、安定感が出るらしい。

色はダイアログで選択するほか、直接16進数でRGB指定もできるので、こだわる方は色々工夫されると良いと思う。

その他

最後まで読んでくれた方に、こちらもおススメ。
thom.hateblo.jp

以下、その他ユーザーフォーム関連の記事です。
thom.hateblo.jp

当ブログは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、 Amazonアソシエイト・プログラムの参加者です。