【Excel VBA】ユーザーフォームデザイン|UI向上!呼び出したくなるフォーム【まずは見た目】

ユーザーフォームは難しそうだと諦めたらもったいない!
初心者でもフォームデザインから始めれば楽しく覚えられます。

記事の最後には魔改造したネタフォームを載せたので、気楽に読んでみて下さい。

\ グラフデザインの記事はこちらから /

ユーザーフォームプロパティ

ユーザーフォームの表示内容や動作について細かい設定ができます。
Excelを開いてAlt+F11でVBEを起動→新規ユーザーフォームを挿入すると画面左下に登場します。

英語が並んでいて速攻くじけそうになりますが、「項目別」タブを選択すると日本語でカテゴライズしてくれます。やれる気がしてきましたね。

7カテゴリで、分かりやすくなりました。
今回はデザインに特化した内容なので、関連の高い項目をメインに紹介していきます。

表示|色やスタイルの基本設定

表示で設定できるのは6項目です。

BackColor【バックカラー】

ユーザーフォームの色を変更できます。見やすさを考えると白か薄めの色がおすすめです。

BoderColor/BoderStyle【ボーダーカラー/ボーダースタイル】

BorderStyleでフチ(枠線)の有無を設定して、フチアリの場合はBorderColorで色を変更できます。
見た目的にはあまり変わりませんが、こだわる方はいじる場所です。

Caption/ForeColor【キャプション/フォアカラー】

キャプションはフォームのタイトルです。プロパティに直接入力して書き換えが可能です。
文字色のデフォルト設定はフォアカラーで行います。後からツールごとに個別設定も可能です。

SpecialEffect【スペシャルエフェクト】

フォームのタイトル部分とコントロール部分の境目を設定できます。
設定値は0,1,2,3,6の5種類です。

微妙すぎて掲載を迷うレベルですが、皆様の「へぇ~・・・」のために載せておきます。

ピクチャ|背景画像の編集

ユーザーフォームの背景に画像を設定します。
Picture以外の3つは、画像を設定した際のサイズや位置の調整に使用します。

Picture【ピクチャ】

PictureAlignment【ピクチャーアライメント】

背景画像の位置を指定します。

 ✔ 0-fmPictureAlignmentTopLeft      左上端に合わせて配置
 ✔ 1-fmPictureAlignmentTopRight    右上端に合わせて配置
 ✔ 2-fmPictureAlignmentCenter      中央に配置(既定値)
 ✔ 3-fmPictureAlignmentBottomLeft   左下端に合わせて配置
 ✔ 4-fmPictureAlignmentBottomRight  右下端に合わせて配置

英語表記で設定値の名前が長いですが、要は「どこ合わせか?」です。

PictureSizeMode【ピクチャーサイズモード】

 ✔ 0-fmPictureSizeModeClip  元の画像サイズのまま表示(規定値)
 ✔ 1-fmPictureSizeModeStretch  フォームサイズに合わせて画像を引き延ばす
 ✔ 2-fmPictureSizeModeZoom  フォームサイズに合わせて1:1比率で引き延ばす

設定値1はユーザーフォームの大きさにピッタリ合わせですが、画像が歪む可能性ありです。
設定値2だと画像は歪みませんが、フォームの途中で画像が途切れる場合があります。

PictureTiling【ピクチャーターニング】

 ✔ True フォームのサイズを埋めるだけの画像を並べて表示する
 ✔ False 画像は1つしか表示しない

フォームが大きくて画像が小さい場合、Trueにしておくと左図のようになります。

フォント|コントロールツールのフォント設定

コントロールツールに表記されるフォントの既定値になります。
ツールごとに変更したい場合はツールのプロパティで個別設定できます。

位置|ユーザーフォーム表示位置の調整

実行時の表示位置とフォームサイズを設定できます。

StartUpPosition【スタートアップポジション】

ユーザーフォームが最初に表示される位置を選択できる。

0-手動・・・別途LeftプロパティとTopプロパティを設定してポイント単位で位置を指定
1-オーナーフォームの中央・・・ユーザーフォームが属する項目の中央に表示
2-画面の中央・・・画面全体の中央に表示
3-Windowsの既定値・・・左上隅に表示

Left/Top【レフト/トップ】

スタートアップポジションが0-手動の時のみ有効。
画面上の座標をポイントで指定して位置を調整する。

Height/Width【ハイト/ワイズ】

ユーザーフォームの高さ(Height)と幅(Width)を指定。
ドラッグで大まかな大きさを決めた後、ポイント単位で微調整する際に使用する。

スクロール・動作・その他

この辺りはデザインにほぼ関係ないので省きます。
実際に既定値から変更する必要も無いに等しい部分なので、知らなくても大丈夫です。

コントロールツールの種類

ツールボックスから使いたいコントロールを選択し、ユーザーフォーム上でドラッグして配置します。
一通りフォームに追加して実行した図です。まずは見た目から。

ラベル/テキストボックス

フォーム上に文字を表記するのがラベル、ユーザーが入力する部分がテキストボックスです。

この2つの表示設定はほぼ共通です。

▶BackStyle設定
 0-fmBackStyleTransparentなら背景透明、1-fmBackStyleOpaqueなら任意の色

▶BorderStyle設定
 0-fmBorderStyleNoneなら境目線無し、1-fmBorderStyleSingleなら任意の色で境目線有り

▶ForeColorでデフォルトの文字色設定可、SpecialEffectで凸凹設定可

見た目を整えるのであれば、このあたりの設定だけで十分です。

PasswordChar

テキストボックスプロパティにPasswordChar(パスワードキャラ)という項目があります。
これはパスワード入力時など、画面上に直接表示を出したくない場合に使います。例えばPasswordCharに「*」と入力しておくと、実行時は右図のようになります。

コンボボックス/リストボックス

この2つは似ているのですが、それぞれ特徴があります。
フォームをコンパクトにまとめたい時はコンボボックスがおすすめです。

✔ 始めは閉じている
✔ 選択できるのは1つだけ
✔ 直接入力も可能

✔ 始めから開いている
✔ 設定次第で複数選択も可能
✔ 直接入力は不可能

表示設定の項目はほぼ共通ですが、コンボボックスの方が少し多くなっています。
4つあるので解説します。

BackStyle【バックスタイル】

リストボックスは背景を透明にできませんが、コンボボックスは背景を透明に設定できます。下図は色の組み合わせ比較です。

DropButtonStyle【ドロップボタンスタイル】

右端のボタンのアイコンが選択できます。4種類あります。

ShowDropButtonWhen【ショードロップボタンホエン】

ボタンの表示/非表示の設定ができます。

✔ 0-fmShowDropButtonWhenNever  ボタンは表示しない
✔ 1-mShowDropButtonWhenFocus  コンボボックスにフォーカスした時のみボタンを表示
✔ 2-fmShowDropButtonWhenAlways  ボタンを常に表示する(既定値)

Style【スタイル】

コンボボックスでの値の選択方法を設定できます。
既定値のままにしないとコンボボックスの意味がないという、謎の設定になっています。

✔ 0-fmStyleDropDownCombo
 直接値を入力したり、リストから値を選択することができる(既定値)
✔ 2-fmStyleDropDownList
 直接入力不可。リストから値を選択する(リストボックスとして機能する)

チェックボックス/オプションボタン/フレーム

チェックボックスは複数選択が可能です。
オプションボタンは択一式で、昔は「ラジオボタン」(1個しか押せないから)と呼ばれました。

フレームはオブジェクトを見やすくまとめる役割です。「図形のグループ化」のようにオブジェクトを動かす時に塊で移動できるので、フォーム編集の際も便利な機能です。

チェックボックスとオプションボタンの表示設定項目は同じです。
アライメントと、ここまで説明してこなかった2つについて解説します。

Alignment【アライメント】

通常よく見るのが左端にチェックを入れる配置(既定値)です。

Value【バリュー】

チェックボックス(オプションボタン)の状態を表す値を設定または取得します。
「True」なら「選択されている」
「False」なら「選択されていない」です。

Visible【ビジブル】

表示、非表示を切り替えまたは状態を取得します。
「True」なら「表示」「False」なら「非表示」です。
※Falseの場合、VBE上では見えますが実行画面では非表示になります。

コマンドボタン/トグルボタン/スピンボタン

CommandButton【コマンドボタン】

作業を「実行」するボタンです。
値の入力・検索・並べ替え・抽出・転記など、様々な作業にGOサインを出す役割です。

表示設定に特に変わった項目はありません。
色を変えたり、透明にしたり、画像を設定することができます。

ToggleButton【トグルボタン】

電気のスイッチのようにクリックするたびにON,OFFが切り替わります。
処理条件の切り替えや、表示/非表示の切り替えなどに使用します。

表示設定に特に変わった項目はありません。
色を変えたり、透明にしたり、画像を設定することができます。

SpinButton【スピンボタン】

ボタンをクリックして、特定の範囲内で値を増減させることができます。
単体では増減の表示ができないので、ラベル・テキストボックス・セル等と組み合わせて使用します。

色設定の他、ボタンの並びを設定できます。

*Orientation【オリエンテーション】

✔ -1-fmOrientationAuto  コントロールの大きさによって自動的に判定(既定値)
✔ 0-fmOrientationVertical0  垂直(縦)方向に配置
✔ 1-fmOrientationHorizontal  水平(横)方向に配置

タブストリップ/マルチページ

タブストリップはどのページを開いても、同じコントロールが表示されます。
マルチページは各ページに違うコントロールを設定できます。

コントロールツールの紹介は以上です。
この後、ネタとして魔改造したフォームの画像を載せます。
怖いのが嫌いな方はここまでです。お疲れ様でした!

どこの会社にもいると思うんですがね・・・

仕事を後輩に丸投げするアカン先輩・・・

入社以来お世話にはなっているんです。それなりに笑

人としては人間味があって、人情もあって、いい先輩なんです。

でもちょっと丸投げが過ぎるので、いたずらしました笑

頼まれてたファイルを魔改造してやった!

開くとこんなファイル・・・
自分で作ったのに気持ち悪い・・笑

ちなみに大事なデータが入ったファイルはちゃんと別で後日渡しましたョ。

そして、馬刺しとスタバUber10回を手に入れ、MacBookProの代わりにペンタブをGet!

先輩いわく、「丸投げのおかげで、お前はスキルアップした」
・・・( ゚Д゚)えーーーー?! まぁいいか。

XP PENのDeco01もらいました。板タブだけどすごく使いやすいので、別記事書く予定です。
液晶タブもSALEしてるので、気になる方はCheck!▼