【6日でできるVisual Basic2022入門】③今日の運勢アプリ：画面の設計

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

【6日でできるVisual Basic2022入門】③今日の運勢アプリ：画面の設計

③今日の運勢アプリ：画面の設計

　本章では、今日の運勢アプリのUIを具体化します。上段に日付（DateTimePicker：DatePick）、中段に「占う」ボタン（ButtonTell）、その下に結果画像（PictureBox：PictureBoxResult）、下段にメッセージ（TextBox：TextResult）を配置。
　主要設定は PictureBox.SizeMode=StretchImage、TextResult は Multiline/ReadOnly/ScrollBars=Vertical、DatePick.Format=Short。AcceptButton=ButtonTell と適切なタブ順で操作性を最適化し、スナップラインで整列。最小サイズも決め、次章のリソースの追加に備えます。

３．今日の運勢アプリ：画面の設計－コントロールの配置とプロパティ値の設定

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

　日付入力は上段、実行ボタンはと結果の画像は中央、詳細メッセージは下段にまとめ、視線移動を最短にします。画像はのちの章でリソースを追加して表示させていきます。

3.2. 使うコントロール一覧

3.3. デザイナでの配置手順

1. フォームサイズをおよそ 480×360 に調整
2. 上段左に LabelDate、その右に DatePick、右端に ButtonTell を横並び
3. 1 行空けて中央に PictureBoxResult を大きめに配置
4. 下段に TextResult をフォーム幅いっぱいに配置
5. 位置と間隔はスナップラインで揃える（等間隔配置を活用）

ヒント
将来のリサイズ耐性を上げるなら TableLayoutPanel（行3×列3）に載せる方法も有効です。まずは手動配置で問題ありません。

3.4. プロパティ値の設定（詳細）

操作性の改善
フォームの AcceptButton に ButtonTell を割り当てると Enter で実行できます（後述 3.6）。

3.5. タブオーダーとアクセシビリティ

　メニュー「表示」→「タブ オーダー」で 1) DatePick → 2) ButtonTell の順になるよう設定します。TextResult は ReadOnly かつ結果表示用なので TabStop=False にしておくと快適です。

3.6. キーボード操作の割り当て（Enter で占う）

　フォームを選択し、「AcceptButton = ButtonTell」 に設定します。これで Enter キーで占いが実行できます。将来キャンセル操作を付ける場合は「CancelButton」 に割り当てます。

VB 2022 の用語・命令ミニ解説

3.7. 初期表示を整える最小コード（FormUranai.vb）

　デザイナ設定に加え、読みやすい初期状態に整えるコード例です（この章では占いロジックは実装しません）。

Public Class FormUranai
    Private Sub FormUranai_Load(sender As Object, e As EventArgs) _
        Handles MyBase.Load
        Me.MinimumSize = New Size(480, 360)
        Me.AcceptButton = ButtonTell
        DatePick.Value = Date.Today
        TextResult.Text = "［占う］を押すと、今日の運勢が表示されます。"
        TextResult.ForeColor = SystemColors.ControlText
        ' 画像は後章（リソース追加）で設定予定：
        ' Dim rm As New ComponentResourceManager(GetType(FormUranai))
        ' Dim Title As Image = CType(rm.GetObject("Title"), Image)
        ' PictureBoxResult.Image = Title
    End Sub
End Class

ポイント
Handles MyBase.Load はフォーム表示直前に 1 度だけ呼ばれ、初期化に最適です。Size 構造体で最小サイズを与えるとレイアウト崩れを防げます。

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

配置完了チェックリスト

• DatePick と ButtonTell が上段に横並び
• PictureBoxResult が中央で十分なサイズ
• TextResult が複数行・読み取り専用・縦スクロール
• Enter キーで占い実行（AcceptButton 設定済み）
• 初期表示のガイダンス文が TextResult に表示

　この状態になれば、次章「④今日の運勢アプリ：リソースの追加」で結果画像（大吉／中吉／小吉／吉／凶／タイトル）をリソースとして追加し、続く章で 最終コード実装に進めます。