design-shiny-uiテーマ設定にbslib、レスポンシブグリッドにlayout_columns、バリューボックス、 カード、カスタムCSS/SCSSを使ってShinyアプリケーションUIを設計します。 ページレイアウト、アクセシビリティ、ブランドの一貫性を扱います。新しいShinyアプリ UIをゼロから構築するとき、既存のアプリをfluidPageからbslibにモダナイズするとき、 ブランドのテーマを適用するとき、Shinyアプリを様々な画面サイズでレスポンシブにするとき、 またはShinyアプリのアクセシビリティを改善するときに使用します。
Independent GitHub snapshot · Automated classification · Original documentation governs
bslibのテーマ設定、モダンなレイアウトプリミティブ、カスタムCSSを使ってレスポンシブでアクセシブルなShinyアプリケーションインターフェースを設計します。
bslibはいくつかのページコンストラクターを提供します：
# Sidebar layout — most common for data apps
ui <- page_sidebar(
title = "My App",
sidebar = sidebar("Controls here"),
"Main content here"
)
# Navbar layout — for multi-page apps
ui <- page_navbar(
title = "My App",
nav_panel("Tab 1", "Content 1"),
nav_panel("Tab 2", "Content 2"),
nav_spacer(),
nav_item(actionButton("help", "Help"))
)
# Fillable layout — content fills available space
ui <- page_fillable(
card(
full_screen = TRUE,
plotOutput("plot")
)
)
# Dashboard layout — grid of value boxes and cards
ui <- page_sidebar(
title = "Dashboard",
sidebar = sidebar(open = "closed", "Filters"),
layout_columns(
fill = FALSE,
value_box("Revenue", "$1.2M", theme = "primary"),
value_box("Users", "4,521", theme = "success"),
value_box("Uptime", "99.9%", theme = "info")
),
layout_columns(
card(plotOutput("chart1")),
card(plotOutput("chart2"))
)
)
期待結果： ページレイアウトがアプリケーションのナビゲーションとコンテンツのニーズと一致します。
失敗時： レイアウトが正しく見えない場合は、fluidPage()/navbarPage()（ベースshiny）ではなくpage_sidebar()/page_navbar()（bslib）を使用しているか確認してください。bslibバージョンはデフォルトとテーマサポートが優れています。
my_theme <- bslib::bs_theme(
version = 5, # Bootstrap 5
bootswatch = "flatly", # Optional preset theme
bg = "#ffffff", # Background color
fg = "#2c3e50", # Foreground (text) color
primary = "#2c3e50", # Primary brand color
secondary = "#95a5a6", # Secondary color
success = "#18bc9c",
info = "#3498db",
warning = "#f39c12",
danger = "#e74c3c",
base_font = bslib::font_google("Source Sans Pro"),
heading_font = bslib::font_google("Source Sans Pro", wght = 600),
code_font = bslib::font_google("Fira Code"),
"navbar-bg" = "#2c3e50"
)
ui <- page_sidebar(
theme = my_theme,
title = "Themed App",
# ...
)
開発中はインタラクティブなテーマエディタを使用します：
bslib::bs_theme_preview(my_theme)
期待結果： アプリが一貫したブランドの色、フォント、Bootstrap 5コンポーネントでレンダリングされます。
失敗時： フォントが読み込まれない場合は、インターネットアクセスを確認してください（Google Fontsには必要）またはシステムフォントに切り替えてください：font_collection("system-ui", "-apple-system", "Segoe UI")。テーマ変数が適用されない場合は、themeをページ関数に渡しているか確認してください。
ui <- page_sidebar(
theme = my_theme,
title = "Analysis Dashboard",
sidebar = sidebar(
width = 300,
title = "Filters",
selectInput("dataset", "Dataset", choices = c("iris", "mtcars")),
sliderInput("sample", "Sample %", 10, 100, 100, step = 10),
hr(),
actionButton("refresh", "Refresh", class = "btn-primary w-100")
),
# KPI row — non-filling
layout_columns(
fill = FALSE,
col_widths = c(4, 4, 4),
value_box(
title = "Observations",
value = textOutput("n_obs"),
showcase = bsicons::bs_icon("table"),
theme = "primary"
),
value_box(
title = "Variables",
value = textOutput("n_vars"),
showcase = bsicons::bs_icon("columns-gap"),
theme = "info"
),
value_box(
title = "Missing",
value = textOutput("n_missing"),
showcase = bsicons::bs_icon("exclamation-triangle"),
theme = "warning"
)
),
# Main content row
layout_columns(
col_widths = c(8, 4),
card(
card_header("Distribution"),
full_screen = TRUE,
plotOutput("main_plot")
),
card(
card_header("Summary"),
tableOutput("summary_table")
)
)
)
主要なレイアウトプリミティブ：
layout_columns() — col_widthsを持つレスポンシブグリッドcard() — オプションのヘッダー/フッターを持つコンテンツコンテナvalue_box() — アイコンとテーマを持つKPI表示layout_sidebar() — カード内のネストしたサイドバーnavset_card_tab() — タブ付きカード期待結果： 画面サイズに適応するレスポンシブグリッドレイアウト。
失敗時： 広い画面で列が予期せずスタックする場合は、col_widthsの合計が12（Bootstrapグリッド）になるか確認してください。カードが重なる場合は、非フィリング行にfill = FALSEを設定してください。
server <- function(input, output, session) {
output$dynamic_filters <- renderUI({
data <- current_data()
tagList(
selectInput("col", "Column", choices = names(data)),
if (is.numeric(data[[input$col]])) {
sliderInput("range", "Range",
min = min(data[[input$col]], na.rm = TRUE),
max = max(data[[input$col]], na.rm = TRUE),
value = range(data[[input$col]], na.rm = TRUE)
)
} else {
selectInput("values", "Values",
choices = unique(data[[input$col]]),
multiple = TRUE
)
}
)
})
# Conditional panels (no server round-trip)
# In UI:
# conditionalPanel(
# condition = "input.show_advanced == true",
# numericInput("alpha", "Alpha", 0.05)
# )
}
期待結果： UI要素がユーザーの選択とデータに基づいてダイナミックに更新されます。
失敗時： ダイナミックUIがちらつく場合は、可能であればrenderUI()の代わりにconditionalPanel()（CSSベース）を使用してください。再レンダリング時にダイナミックな入力が値を失う場合は、状態を復元するためにsession$sendInputMessage()を追加してください。
bslibのテーマ変数を超えたスタイルのために：
# Inline CSS
ui <- page_sidebar(
theme = my_theme,
tags$head(tags$style(HTML("
.sidebar { border-right: 2px solid var(--bs-primary); }
.card-header { font-weight: 600; }
.value-box .value { font-size: 2.5rem; }
"))),
# ...
)
# External CSS file (place in www/ directory)
ui <- page_sidebar(
theme = my_theme,
tags$head(tags$link(rel = "stylesheet", href = "custom.css")),
# ...
)
bslibとのSCSS統合：
my_theme <- bslib::bs_theme(version = 5) |>
bslib::bs_add_rules(sass::sass_file("www/custom.scss"))
期待結果： bslibのテーマを壊さずにカスタムスタイルが適用されます。
失敗時： カスタムCSSがbslibと競合する場合は、ハードコードされた色の代わりにBootstrap CSS変数（var(--bs-primary)）を使用してください。これにより、テーマ変更がカスタムスタイルに伝播します。
# Add ARIA labels to inputs
selectInput("category", "Category",
choices = c("A", "B", "C")
) |> tagAppendAttributes(`aria-describedby` = "category-help")
# Add alt text to plots
output$plot <- renderPlot({
plot(data(), main = "Distribution of Values")
}, alt = "Histogram showing the distribution of selected values")
# Ensure sufficient color contrast in theme
my_theme <- bslib::bs_theme(
version = 5,
bg = "#ffffff", # White background
fg = "#212529" # Dark text — 15.4:1 contrast ratio
)
# Use semantic HTML
tags$main(
role = "main",
tags$h1("Dashboard"),
tags$section(
`aria-label` = "Key Performance Indicators",
layout_columns(
# value boxes...
)
)
)
期待結果： アプリが色のコントラスト、キーボードナビゲーション、スクリーンリーダーの互換性についてWCAG 2.1 AA基準を満たします。
失敗時： ブラウザのデベロッパーツールのアクセシビリティ監査（Lighthouse）でテストしてください。WebAIMのコントラストチェッカーで色のコントラスト比を確認してください。すべてのインタラクティブ要素がキーボードでフォーカスできることを確認してください。
fluidPage()とbslibコンポーネントを混在させないでください。page_sidebar()、page_navbar()、またはpage_fillable()だけを使用してください。#2c3e50の代わりにvar(--bs-primary)を使用してください。テーマが変更されるとハードコードされた色は壊れます。fill = FALSEがない: バリューボックス行とサマリー行は通常、利用可能なスペースを埋めるべきではありません。fill = FALSEを設定してください。font_google()の代わりにシステムフォントまたはセルフホストのフォントファイルを使用してください。layout_columnsは狭い画面で自動的にスタックしますが、カスタムCSSはそうでない場合があります。scaffold-shiny-app — テーマ設定を含む初期アプリセットアップbuild-shiny-module — モジュラーUIコンポーネントの作成optimize-shiny-performance — パフォーマンスを意識したレンダリングreview-web-design — レイアウト、タイポグラフィ、色のビジュアルデザインレビューreview-ux-ui — ユーザビリティとアクセシビリティのレビュー