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

ユーザーフォームは難しそうだと諦めていませんか？実はそれほど高度な知識は必要無く、初心者でもフォームのデザインから始めれば楽しく覚えられます。

※本記事はExcelユーザーフォームのデザイン（見た目）に特化した内容です。

VBAの設定については解説していないので、ご了承下さい。

初めてユーザーフォームを作成する際は2つのパートに分けて考えると分かりやすくなります。

• 　ユーザーフォームプロパティ
  　🔹土台となる部分の基本的な仕様を決める作業（色・フォント・表示位置など）
  　🔹リモコンに例えると本体部分と考えると分かりやすい
• 　コントロールツール
  　🔹作業したい内容に応じてフォームに配置するツール
  　🔹リモコンに例えるとボタンと考えると分かりやすい

本体を作ってから、実装したい機能のツールを配置していきます。

▼　グラフもドレスアップすれば目に留まる｜グラフデザイン記事

ユーザーフォームプロパティ（土台部分）

ユーザーフォーム土台部分の表示内容や動作について細かい設定ができます。

▼　プロパティで設定できる項目の概要

• 　表示
  　　フォーム本体・区切り線・文字などの色の設定
  　　区切り線の有無・フォーム本体の立体感などの設定
• 　ピクチャ
  　　フォームに画像を挿入する場合の位置やサイズの設定
• 　フォント
  　　書体・太字・斜体・文字の大きさなどの設定
• 　位置
  　　フォームを呼び出した際に表示される画面上の位置設定
• 　スクロール・動作・その他
  　　スクロールの有無やマウスポインタ―のデザインの設定

Excelを開いてAlt+F11でVBEを起動→新規ユーザーフォームを挿入すると画面左下に登場します。

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

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

色やスタイルの基本設定は「表示」から設定

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

BackColor／バックカラー

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

BoderColor／ボーダーカラー・BoderStyle／ボーダースタイル

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

Caption／キャプション・ForeColor／フォアカラー

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

SpecialEffect／スペシャルエフェクト

フォームのタイトル部分とコントロール部分の境目の立体感を設定できます。

設定値は0，1，2，3，6の5種類です。FlatとRaisedは何となく雰囲気でわかるのですが、あとはよく分からない項目名なので、勝手に名前をつけました。

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

背景画像の編集は「ピクチャー」から設定

ユーザーフォームの背景に画像を設定します。好きな画像をフォームの背景にすることが可能で、設定した画像のサイズや位置の調整もPictureから行います。

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つしか表示しない

フォームに表示される書体は「フォント」から設定

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

ユーザーフォームの表示位置は「位置」から設定

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

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で凸凹設定可

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

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

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

表示設定の項目はほぼ共通ですが、コンボボックスの方が少し多くなっています。
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／水平(横)方向に配置

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

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

コントロールツールの紹介は以上です。
この後、ネタとして魔改造したフォームの画像を載せます。

ユーザーフォームは自由自在に改造できる

おまけで、筆者が魔改造した力作（？）フォームを掲載します。

作成の背景は、職場でのちょっとした理不尽な事で、、、

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

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

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

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

しかし私に権限がないような仕事まで回してくるので、物申した記録です。

XP PENのDeco01もらいました。板タブだけどすごく使いやすいので、別記事書く予定です。