読める仕様。
つながるパターン。
120パターン。JavaScript不要。
AIへの渡し方
このページか各パターンのURLを渡してください。各ページに用途・設計メモ・実装指示文・サンプル値を含みます。選択と配色はアプリの「URLでAIに渡す」から参照文をコピーできます。
file://は端末内専用です。外部AIからのURL参照には、ここにある静的ファイルを公開し、そのHTTPS URLを使います。索引ファイルの自動参照はAIツールによって異なります。
- 001ボタンButton
- 002カードCard
- 003タブTabs
- 004モーダルModal Dialog
- 005トーストToast
- 006アコーディオンAccordion
- 007パンくずリストBreadcrumbs
- 008サイドバーSidebar
- 009ヘッダーナビHeader Navigation
- 010ボトムナビBottom Navigation
- 011ステッパーStepper
- 012ページネーションPagination
- 013テキストフィールドText Field
- 014テキストエリアText Area
- 015セレクトSelect
- 016チェックボックスCheckbox
- 017ラジオボタンRadio Button
- 018トグルスイッチToggle Switch
- 019スライダーSlider
- 020日付入力Date Picker
- 021ファイルアップロードFile Upload
- 022検索入力Search Field
- 023ツールチップTooltip
- 024バッジBadge
- 025アバターAvatar
- 026データテーブルData Table
- 027リストList
- 028タイムラインTimeline
- 029空の状態Empty State
- 030スケルトンSkeleton Screen
- 031スピナーLoading Spinner
- 032プログレスバーProgress Bar
- 033アラートAlert
- 034確認ダイアログConfirmation Dialog
- 035インラインエラーInline Validation
- 036折れ線グラフLine Chart
- 037棒グラフBar Chart
- 038ドーナツグラフDonut Chart
- 039KPIカードKPI Card
- 040スパークラインSparkline
- 041ヒートマップHeatmap
- 042ソートSortable Table
- 043グリッドGrid Layout
- 044スプリットビューSplit View
- 045ヒーローHero Section
- 046フッターFooter
- 047区切り線Divider
- 048ドロワーDrawer
- 049フィルターチップFilter Chips
- 050コマンドパレットCommand Palette
- 051オートコンプリートAutocomplete
- 052ドロップダウンメニューDropdown Menu
- 053セグメントコントロールSegmented Control
- 054カルーセルCarousel
- 055無限スクロールLoad More / Infinite Scroll
- 056スティッキーヘッダーSticky Header
- 057ボトムシートBottom Sheet
- 058FABFloating Action Button
- 059スワイプ操作Swipe Action
- 060プルトゥリフレッシュPull to Refresh
- 061トグル可能なパスワードPassword Visibility
- 062コピー操作Copy to Clipboard
- 063評価入力Rating
- 064価格表Pricing Table
- 065オンボーディングOnboarding
- 066面グラフArea Chart
- 067積み上げ面グラフStacked Area
- 068グループ棒グラフGrouped Bars
- 069積み上げ棒グラフStacked Bars
- 070100%積み上げ棒100% Stacked Bars
- 071横棒グラフHorizontal Bars
- 072散布図Scatter Plot
- 073バブルチャートBubble Chart
- 074ヒストグラムHistogram
- 075箱ひげ図Box Plot
- 076バイオリンプロットViolin Plot
- 077レーダーチャートRadar Chart
- 078ゲージGauge
- 079ブレットチャートBullet Chart
- 080ウォーターフォールWaterfall
- 081ファネルFunnel Chart
- 082ツリーマップTreemap
- 083サンバーストSunburst
- 084サンキー図Sankey Diagram
- 085ローソク足Candlestick
- 086レンジバンドRange Band
- 087スロープグラフSlope Graph
- 088ダンベルチャートDumbbell Chart
- 089ロリポップLollipop Chart
- 090ポーラーエリアPolar Area
- 091日本地図・色分けJapan Choropleth
- 092日本地図・バブルJapan Bubble Map
- 093日本地図・ドットJapan Dot Map
- 094都道府県タイルPrefecture Tile Map
- 095ルートマップRoute Map
- 096ロケーションマップLocation Map
- 097ヘックスマップHexbin Map
- 098フロアマップFloor Plan
- 099カレンダーヒートマップCalendar Heatmap
- 100コホート表Cohort Table
- 101相関行列Correlation Matrix
- 102ワッフルチャートWaffle Chart
- 103ピクトグラムPictogram
- 104円形プログレスRadial Progress
- 105目標トラッカーGoal Tracker
- 106ビッグナンバーBig Number
- 107比較カードComparison Cards
- 108ランキングバーRanked Bars
- 109リーダーボードLeaderboard
- 110マーケットティッカーMarket Ticker
- 111数字カウンターNumber Counter
- 112テーブル内バーIn-cell Bars
- 113カンバンKanban Board
- 114ガントチャートGantt Chart
- 115ロードマップRoadmap
- 116ツリーダイアグラムTree Diagram
- 117ネットワーク図Network Graph
- 118フローチャートFlowchart
- 119ベン図Venn Diagram
- 120四象限マトリクスQuadrant Matrix