5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-10-28

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

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

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

ラベルで枠を作る

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

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

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

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

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

#E2EFDA → &HDAEFE2
となります。非常にややこしいですね。

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

これを配置していき、入力コントロールの件数分の枠を作ります。
ボーダーカラーはやや薄めの黒にしておくと目が痛くなくて良いかと思います。

 

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

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

テキストボックス、コンボボックスなどを配置します。
BorderStyleはfmBorderStyleSingleにするとフラットデザインっぽくて見栄えが良いです。
ボーダーカラーはやや薄めの黒にすると良いと思います。

 

見出しを追加

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

ボタンを配置

ボタンを配置します。以下のように普通にCommandButtonを追加しても良いと思いますが、試しに画像でボタンを作ってみましょう。

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

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

フォーム上のツールボックスからイメージを配置し、BackStyleをfmBackStyleTransparentで透過、Pictureに先ほどの画像を選択します。

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

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

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

  • TextBoxFamilyName(苗字のテキストボックス)
  • ButtonInputComplete(入力完了ボタン)
  • OKButton(OKボタン)

image.png

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

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?