【6日でできるVisual Basic2022入門】④間違い漢字探しゲーム：画面の設計②

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

④間違い漢字探しゲーム：画面の設計②

　本章では、SplitContainer の上段に操作系（LabelFind／TextHunt／LabelRec／TextTimer／LabelSec／ButtonStart）、下段に 4×4＝16 個の大きなボタンを等間隔で配置し、各プロパティを整えます。TextHunt は中央寄せ、TextTimer は ReadOnly＋右寄せ、盤面ボタンは Meiryo 48pt。Timer1（Interval≈20ms）を追加し、Load で初期化、AcceptButton=ButtonStart を設定。整列はスナップラインと「間隔を均等」で素早く調整します。

４．間違い漢字探しゲーム：画面の設計②－コントロールの配置とプロパティ値の設定

4.1. レイアウト方針とワイヤーフレーム

　Panel1 に操作系（探す漢字・記録・Start）、Panel2 に 4×4 のボタン盤を等間隔で配置します。視線は左→右→下へ流れるように配置し、サイズや余白はスナップラインで統一します。

4.2. Panel1（上段：操作エリア）の配置

表：Panel1 に置くコントロールと主プロパティ

No	種別	(Name)	主プロパティ	設定値例・目的
1	Label	LabelFind	Text	を探せ（見出し）
2	TextBox	TextHunt	TextAlign	Center
3	Label	LabelRec	Text	記録：
4	TextBox	TextTimer	TextAlign / ReadOnly	Right / True（秒表示）
5	Label	LabelSec	Text	秒
6	Button	ButtonStart	Text	スタート

並べ方のコツ

左端から「LabelFind→TextHunt→LabelRec→TextTimer→LabelSec→ButtonStart」の順に横並び。
スナップラインで下端を揃え、横の均等配置を使うと素早く整います。
操作性向上のため、フォームの AcceptButton = ButtonStart を後述コードで設定します。

VB 2022 用語ミニ解説

要素	概要	使いどころ
`TextBox.TextAlign`	`Left/Center/Right` を選択	`TextHunt` は Center、`TextTimer` は Right
`ReadOnly=True`	入力不可で表示専用	`TextTimer` を編集不可に
`AcceptButton`	Enter で押される既定ボタン	`ButtonStart` に割当

4.3. Panel2（下段：4×4 盤面）の配置

まず 1 個のボタンを大きめに作り、他へ複製すると効率的です。

盤面ボタンの推奨プロパティ（共通）

プロパティ	値の例	目的
Font	Meiryo UI 48pt	漢字が見やすいサイズ
Size	140×140	クリックしやすい
Text	（空）	ゲーム開始時にセット
(Name)	`Button1`～`Button16`	コードで参照しやすい
TabStop	False	盤面ではタブ移動不要

整列手順（おすすめ）

Button1 を作る → 同じ行に 3 個複製（計 4 個）。
行の左右端を揃え、「左右の間隔を均等にする」。
1 行を丸ごと 3 回縦に複製（計 4 行）。
列ごとに「上下の間隔を均等にする」→ 最後に「下揃え」で段の高さを統一。

補足：自動生成派の方へ（任意）
後章の実装時に、コードで 4×4 を自動生成しても構いません。その場合は AddHandler で共通 Click を割り当てます（サンプルは 4.6 参照）。

4.4. Timer コントロールの追加

　コンポーネントトレイに Timer1 を追加し、Interval=50（20〜50ms の範囲がおすすめ）。計時の粒度を決めます。
※ 実装は次章で Start/Stop、Tick を記述。

4.5. デザインを仕上げる最小コード（表示の初期化）

デザイナ設定に加えて起動時の見栄えを整えます。後章でゲームロジックを追加します。

Public Class FormKanjiHunt
    Private Sub FormKanjiHunt_Load(sender As Object, e As EventArgs) _
        Handles MyBase.Load
        ' 操作性
        Me.AcceptButton = ButtonStart
        ' 表示の初期化
        TextTimer.Text = "0.00"
        TextTimer.ForeColor = SystemColors.ControlText
        TextHunt.Text = ""   ' Start でセット
        ' 盤面をいったん空に
        For Each b In SplitContainer1.Panel2.Controls.OfType(Of Button)()
            b.Text = ""
        Next
    End Sub
End Class

VB 2022 のポイント

要素	説明
`Controls.OfType(Of Button)()`	指定型だけを抽出できる LINQ 拡張
`Handles MyBase.Load`	フォーム表示直前の初期化に最適

4.6. （任意）盤面ボタンをコードで一括生成する例

デザイナで 16 個置く代わりに、以下のように Panel2 に自動配置も可能です。

Private Sub BuildGrid(rows As Integer, cols As Integer)
    Dim w = 120, h = 100, gap = 8
    Dim baseX = 12, baseY = 12
    For r = 0 To rows - 1
        For c = 0 To cols - 1
            Dim idx = r * cols + c + 1
            Dim b As New Button() With {
                .Name = $"Button{idx}",
                .Font = New Font("Meiryo", 36, FontStyle.Regular),
                .Size = New Size(w, h),
                .Location = New Point(baseX + c * (w + gap), baseY + r * (h + gap)),
                .TabStop = False
            }
            AddHandler b.Click, AddressOf Buttons_Click ' 共通ハンドラー（次章で実装）
            SplitContainer1.Panel2.Controls.Add(b)
        Next
    Next
End Sub

4.7. タブ順・アクセシビリティ

タブ順は Panel1 内で「TextHunt → ButtonStart → （TextTimer は ReadOnly なので TabStop=False でも可）」。
盤面ボタンは TabStop=False 推奨（キーボードでの誤移動を防止）。
ラベルには意味のある Text を設定し、スクリーンリーダーで文脈が伝わるように。

4.8. よくあるつまずきと対処

症状	原因	対処
文字が小さく読みにくい	既定フォントのまま	盤面ボタンを Meiryo 36pt、`TextHunt`/`TextTimer` を 16pt 以上
行・列が微妙にズレる	手動配置のみ	「左右/上下の間隔を均等にする」「下揃え」を活用
Enter で始まらない	`AcceptButton` 未設定	フォームの `AcceptButton = ButtonStart`
記録欄が編集できてしまう	ReadOnly 未設定	`TextTimer.ReadOnly=True`
盤面が窮屈	Panel2 が狭い	前章の `SplitterDistance` を見直す

4.9. 配置チェックリスト

Panel1 に「を探せ／探す文字／記録／秒／Start」が横並びで下端揃え
TextTimer は右寄せ・ReadOnly、初期表示 0.00
Panel2 に 4×4=16 個 のボタンが等間隔で配置、フォントは大きめ
Timer1.Interval を 50ms 目安に設定
実行で UI が崩れず表示（リサイズしても概ね安定）

まとめ

　本章では、SplitContainer の上下二段に操作エリアと 4×4 盤面を具体的に配置し、プロパティを整えました。次章「５．間違い漢字探しゲーム：コードの実装と実行」では、乱数で正解位置と漢字ペアを選び、共通 Click ハンドラーと Timer による計時・ペナルティを実装してゲームを完成させます。