上級者を目指すExcelVBA #11『見栄えの良い入力フォームを作る』

Excelの入力フォームを見栄えの良いデザインにするのは非常に難しいです。
普通にやると以下のような武骨なデザインになってしまいますね。

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200881/53649d21-dd81-9874-5306-357268f0dafd.png" width = "500" />

これを以下のように少しでもマシなものに変えられるように工夫してみましょう。

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200881/bae02ae1-4c13-5c7d-162b-6b6832c03516.png" width = "600" />

ファミコンでスーファミのゲームを作るような手間な作業になりますが……プログラマにとってデザインはとても大事です。
　
### ラベルで枠を作る

まずフォームの背景を白、フォントをMeiryoに変更。
枠はラベルで配置していきます。

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200881/35119946-780b-298f-9562-cde1310aa430.png" width = "600" />

ラベルに色付けしていきます。
ただし、ここでフォーム上のパレットを使うと原色のようなキツイ色しか出てきません。

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200881/2d3ed335-d7ff-a728-5a59-838a2511d7ae.png" width = "400" />

少し手間ですが、Excelのシート上で好みの色を作り、その色の16進数のカラーコードを確認しましょう。

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200881/da5392a5-8ea9-3a3c-7341-dcf8c099104f.png" width = "600" />

上記のHex「<strong>#E2EFDA</strong>」のところが16進数です。
ただし、先ほどのExcelフォームのBackCokorの欄に入力する際、以下のように変換してやる必要があります。

* "#" → "&H"に変える
* アルファベットの最後の2文字と最初の2文字を入れ替える

#<strong>E2</strong>EF<strong>DA</strong> → &H<strong>DA</strong>EF<strong>E2</strong>
となります。非常にややこしいですね。

BackColorの欄に上記を入力すると色が反映されます。
「&H」が「&H00」になり、末尾に「&」が自動で付きますが、気にしなくて構いません。

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200881/b7043fd8-c1d8-7744-932e-3236d9a14e38.png" width = "600" />


これを配置していき、入力コントロールの件数分の枠を作ります。
ボーダーカラーはやや薄めの黒にしておくと目が痛くなくて良いかと思います。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200881/fbb8ef17-bd3c-2e7d-5858-20ee2ebf41d7.png" width = "600" />


　
### 枠の上に項目名のラベル、テキストボックスなどを配置

枠の上に項目名を描画するため、さらにラベルを配置します。
BackColorを下の枠と同じ色にするかBackStyleをTransparentで透過、BorderStyleは無しにします。

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200881/44b2332a-c3bb-54d3-e755-4d4b37eb4b56.png" width = "800" />

テキストボックス、コンボボックスなどを配置します。
BorderStyleはfmBorderStyleSingleにするとフラットデザインっぽくて見栄えが良いです。
ボーダーカラーはやや薄めの黒にすると良いと思います。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200881/f29bef20-f13d-44ad-fb79-b9bfe561131c.png" width = "800" />

　
### 見出しを追加

見出しを追加します。
線の部分はラベルの幅か高さを1px程度にした上で、グレーで色塗りして線のような形にしています。

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200881/1624b6f3-74aa-1f4b-ee8f-45fc12622e73.png" width = "800" />


### ボタンを配置

ボタンを配置します。以下のように普通にCommandButtonを追加しても良いと思いますが、試しに画像でボタンを作ってみましょう。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200881/3e9211db-94e9-f834-1e0d-78e0c61ba875.png" width = "600" />

ボタン画像をExcelで作っていきます。
Excelシート上で上部メニューから[挿入]タブ → 図形を挿入 → 四角形を選択 → シート上に配置し、
[図形の書式]タブ → [図形のスタイル]からデザインを変更します。

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200881/87c1eab5-fdc2-2cda-cad1-69289ef1d744.png" width = "600" />

文字をMeiryoなどで入れ、フォントに影や太字などの効果をつけ、シートの罫線を非表示にした上（[表示]タブ→[目盛線]）で画像をキャプチャしてjpgで保存します。

<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200881/f57d8949-dec3-2a2f-c91c-a4ee68e646d2.png" width = "300" />


フォーム上のツールボックスからイメージを配置し、BackStyleをfmBackStyleTransparentで透過、Pictureに先ほどの画像を選択します。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200881/515b78c7-0126-738a-b9f2-6f088b4eaec6.png" width = "600" />

これで完成ですね。
この要領で丁寧に作れば多少見栄えの良いフォームが作れるかと思います。


### フォームの部品の名前は丁寧に付けよう

補足です。
テキストボックスの部品名はTextBox1などのままにせず、分かりやすい名前を丁寧につけましょう。
VBAでコードを書く際に保守性が上がります。

例
* TextBoxFamilyName（苗字のテキストボックス）
* ButtonInputComplete（入力完了ボタン）
* OKButton（OKボタン）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200881/fc467726-7308-e74f-2e12-15ecaafde20e.png)

テキストボックス名やボタン名の「TextBox」、「Button」は先頭に付けても末尾に付けても良いと思いますが、コードの補完を考えると先頭の方が使い勝手が良いかなと思います。