ページ

すべてのWireweaveワイヤーフレームはpageコンポーネントで始まります。これはすべてのコンテンツのルートコンテナです。

基本的なページ

page {
  // コンテンツがここに入ります
}

ページタイトル

ページにタイトルを付けます：

page "Login" {
  // コンテンツ
}

タイトルはワイヤーフレームのヘッダーに表示され、ドキュメントに使用できます。

ページテーマ

ページ全体のカラーテーマを設定します：

page "Dashboard" theme:light {
  // ライトテーマ（デフォルト）
}

page "Dashboard" theme:dark {
  // ダークテーマ
}

ページレイアウト

全幅

page fullWidth {
  // コンテンツが全幅を占めます
}

中央揃え

page center {
  // コンテンツが中央に揃えられます
}

最大幅

page maxWidth:1200 {
  // コンテンツが1200pxに制限されます
}

一般的なページ構造

ランディングページ

page "Home" {
  navbar {
    logo "Brand"
    nav { link "Features" link "Pricing" link "About" }
    button "Sign Up" primary
  }

  section hero center {
    heading "Welcome to Our Product"
    text "The best solution for your needs"
    button "Get Started" primary
  }

  section features {
    grid columns:3 {
      card { heading "Fast" text "Lightning quick performance" }
      card { heading "Simple" text "Easy to use interface" }
      card { heading "Secure" text "Enterprise-grade security" }
    }
  }

  footer {
    text "Copyright 2026"
  }
}

ダッシュボード

page "Dashboard" {
  navbar {
    logo "App"
    nav { link "Dashboard" active link "Settings" }
    avatar "User"
  }

  row {
    sidebar width:240 {
      menu {
        item "Overview"
        item "Analytics"
        item "Reports"
        item "Settings"
      }
    }

    main {
      heading "Overview"
      grid columns:4 {
        card { text "Users" heading "1,234" }
        card { text "Revenue" heading "$56,789" }
        card { text "Orders" heading "890" }
        card { text "Growth" heading "+12%" }
      }

      card {
        heading "Recent Activity"
        table { ... }
      }
    }
  }
}

認証ページ

page "Login" center {
  card width:400 {
    heading "Welcome Back"
    text "Sign in to your account"

    input "Email" email
    input "Password" password

    row justify:between {
      checkbox "Remember me"
      link "Forgot password?"
    }

    button "Sign In" primary fullWidth

    divider "or"

    button "Continue with Google" secondary fullWidth
  }
}

設定ページ

page "Settings" {
  navbar { ... }

  row {
    sidebar {
      menu {
        item "Profile"
        item "Account"
        item "Security"
        item "Notifications"
      }
    }

    main {
      heading "Profile Settings"

      card {
        row gap:24 {
          avatar "User" size:80
          stack {
            heading "John Doe" level:3
            text "john@example.com" muted
            button "Change Photo" secondary
          }
        }
      }

      card {
        heading "Personal Information" level:3
        form {
          row gap:16 {
            input "First Name" text
            input "Last Name" text
          }
          input "Email" email
          input "Bio" textarea

          row justify:end {
            button "Cancel" secondary
            button "Save Changes" primary
          }
        }
      }
    }
  }
}

複数ページ

複数ページのワイヤーフレームの場合、別々のファイルを作成します：

wireframes/
  login.wire
  dashboard.wire
  settings.wire
  profile.wire

または、セクションを使用してフローを表示します：

page "User Flow" {
  section "Step 1: Login" {
    card { ... }
  }

  section "Step 2: Dashboard" {
    card { ... }
  }

  section "Step 3: Settings" {
    card { ... }
  }
}

次のステップ

• コンポーネント - 利用可能なUIコンポーネント
• レイアウト - レイアウトオプション