# UI/UX ATLAS > 120 UI patterns, charts, maps and information displays. Static reference; no JavaScript required. ## Start here - [AI reference](ai/index.html): Readable directory and usage. - [Machine catalog](ai/catalog.json): All IDs, metadata, instructions and sample values. - [Complete specification](llms-full.txt): Full plaintext reference. - [Schema](ai/pattern.schema.json): Shape of a pattern record. ## Patterns - [001 ボタン / Button](patterns/001.html): 保存や送信など、次の行動を明確にする。 - [002 カード / Card](patterns/002.html): 関連する情報を、ひとまとまりにする。 - [003 タブ / Tabs](patterns/003.html): 同じ階層の情報を切り替える。 - [004 モーダル / Modal Dialog](patterns/004.html): 確認や短い作業に集中してもらう。 - [005 トースト / Toast](patterns/005.html): 操作の完了を、さりげなく伝える。 - [006 アコーディオン / Accordion](patterns/006.html): 必要な情報だけを展開する。 - [007 パンくずリスト / Breadcrumbs](patterns/007.html): サイト内の現在位置を伝える。 - [008 サイドバー / Sidebar](patterns/008.html): 主要機能へ、いつでも移動できるようにする。 - [009 ヘッダーナビ / Header Navigation](patterns/009.html): 主要なページへの入口をまとめる。 - [010 ボトムナビ / Bottom Navigation](patterns/010.html): スマホの主要機能を親指で切り替える。 - [011 ステッパー / Stepper](patterns/011.html): 複数の入力手順と進捗を示す。 - [012 ページネーション / Pagination](patterns/012.html): 長い一覧をページごとに区切る。 - [013 テキストフィールド / Text Field](patterns/013.html): 短い文字列を入力してもらう。 - [014 テキストエリア / Text Area](patterns/014.html): 自由な文章を入力してもらう。 - [015 セレクト / Select](patterns/015.html): 選択肢から1つを選んでもらう。 - [016 チェックボックス / Checkbox](patterns/016.html): 複数の項目を選んでもらう。 - [017 ラジオボタン / Radio Button](patterns/017.html): 少数の候補から1つを選んでもらう。 - [018 トグルスイッチ / Toggle Switch](patterns/018.html): 設定のオン・オフを即座に切り替える。 - [019 スライダー / Slider](patterns/019.html): 範囲の中から値を調整する。 - [020 日付入力 / Date Picker](patterns/020.html): 日付を選んでもらう。 - [021 ファイルアップロード / File Upload](patterns/021.html): 画像やファイルを選んでもらう。 - [022 検索入力 / Search Field](patterns/022.html): キーワードで必要な情報を見つける。 - [023 ツールチップ / Tooltip](patterns/023.html): 短い補足を、必要な瞬間に表示する。 - [024 バッジ / Badge](patterns/024.html): 状態や件数をコンパクトに示す。 - [025 アバター / Avatar](patterns/025.html): ユーザーや担当者を識別する。 - [026 データテーブル / Data Table](patterns/026.html): 多くの数値や項目を比較する。 - [027 リスト / List](patterns/027.html): 同じ種類の情報を読みやすく並べる。 - [028 タイムライン / Timeline](patterns/028.html): 出来事の流れを時系列で伝える。 - [029 空の状態 / Empty State](patterns/029.html): データがない理由と次の行動を示す。 - [030 スケルトン / Skeleton Screen](patterns/030.html): 読み込み中のレイアウトを予告する。 - [031 スピナー / Loading Spinner](patterns/031.html): 短い待ち時間の処理中を伝える。 - [032 プログレスバー / Progress Bar](patterns/032.html): 処理がどこまで進んだかを示す。 - [033 アラート / Alert](patterns/033.html): 見逃せない注意やエラーを伝える。 - [034 確認ダイアログ / Confirmation Dialog](patterns/034.html): 重要な操作を実行前に確かめる。 - [035 インラインエラー / Inline Validation](patterns/035.html): 入力の問題をその場で解決する。 - [036 折れ線グラフ / Line Chart](patterns/036.html): 数値の推移や傾向を見せる。 - [037 棒グラフ / Bar Chart](patterns/037.html): 項目ごとの大小を比べる。 - [038 ドーナツグラフ / Donut Chart](patterns/038.html): 全体に対する構成比を見せる。 - [039 KPIカード / KPI Card](patterns/039.html): 判断に必要な重要数値を目立たせる。 - [040 スパークライン / Sparkline](patterns/040.html): 小さな領域で推移を添える。 - [041 ヒートマップ / Heatmap](patterns/041.html): 色の濃淡で分布を見つける。 - [042 ソート / Sortable Table](patterns/042.html): 表の並び順を変えて比較する。 - [043 グリッド / Grid Layout](patterns/043.html): 同じ重みの情報を整然と並べる。 - [044 スプリットビュー / Split View](patterns/044.html): 一覧と詳細を同時に確認する。 - [045 ヒーロー / Hero Section](patterns/045.html): 第一印象で価値と行動を伝える。 - [046 フッター / Footer](patterns/046.html): 補助リンクとサイト情報をまとめる。 - [047 区切り線 / Divider](patterns/047.html): 情報のまとまりを穏やかに分ける。 - [048 ドロワー / Drawer](patterns/048.html): 画面の端から補助パネルを開く。 - [049 フィルターチップ / Filter Chips](patterns/049.html): 絞り込み条件を手軽に選ぶ。 - [050 コマンドパレット / Command Palette](patterns/050.html): コマンドを素早く検索して実行する。 - [051 オートコンプリート / Autocomplete](patterns/051.html): 入力に応じて候補を提案する。 - [052 ドロップダウンメニュー / Dropdown Menu](patterns/052.html): 関連する操作を小さくまとめる。 - [053 セグメントコントロール / Segmented Control](patterns/053.html): 少数の表示モードを切り替える。 - [054 カルーセル / Carousel](patterns/054.html): 複数のコンテンツを順に見せる。 - [055 無限スクロール / Load More / Infinite Scroll](patterns/055.html): 一覧の続きを段階的に読み込む。 - [056 スティッキーヘッダー / Sticky Header](patterns/056.html): スクロール中も操作を使えるようにする。 - [057 ボトムシート / Bottom Sheet](patterns/057.html): スマホの下部から補助操作を表示する。 - [058 FAB / Floating Action Button](patterns/058.html): 主要操作を手の届く場所に固定する。 - [059 スワイプ操作 / Swipe Action](patterns/059.html): リスト項目への操作を素早く行う。 - [060 プルトゥリフレッシュ / Pull to Refresh](patterns/060.html): 一覧を手動で最新状態に更新する。 - [061 トグル可能なパスワード / Password Visibility](patterns/061.html): 入力したパスワードを確認する。 - [062 コピー操作 / Copy to Clipboard](patterns/062.html): コードや文章を再利用しやすくする。 - [063 評価入力 / Rating](patterns/063.html): 段階的な満足度を入力してもらう。 - [064 価格表 / Pricing Table](patterns/064.html): プランの違いと費用を比較する。 - [065 オンボーディング / Onboarding](patterns/065.html): 初めてのユーザーを使い始めまで導く。 - [066 面グラフ / Area Chart](patterns/066.html): 推移と量感を面で伝える。 - [067 積み上げ面グラフ / Stacked Area](patterns/067.html): 全体と内訳の変化を同時に見る。 - [068 グループ棒グラフ / Grouped Bars](patterns/068.html): 同じ項目の複数系列を比較する。 - [069 積み上げ棒グラフ / Stacked Bars](patterns/069.html): 合計と内訳を1本の棒で示す。 - [070 100%積み上げ棒 / 100% Stacked Bars](patterns/070.html): 規模の違う項目の構成比を比べる。 - [071 横棒グラフ / Horizontal Bars](patterns/071.html): 長い項目名と数値を比較する。 - [072 散布図 / Scatter Plot](patterns/072.html): 2つの数値の関係を見る。 - [073 バブルチャート / Bubble Chart](patterns/073.html): 位置と円の大きさで3変数を示す。 - [074 ヒストグラム / Histogram](patterns/074.html): 数値の分布と偏りを見る。 - [075 箱ひげ図 / Box Plot](patterns/075.html): 中央値とばらつきを比べる。 - [076 バイオリンプロット / Violin Plot](patterns/076.html): 分布の形と密度を比べる。 - [077 レーダーチャート / Radar Chart](patterns/077.html): 複数の評価軸を一度に見渡す。 - [078 ゲージ / Gauge](patterns/078.html): 現在値と上限の関係を示す。 - [079 ブレットチャート / Bullet Chart](patterns/079.html): 実績と目標をコンパクトに比べる。 - [080 ウォーターフォール / Waterfall](patterns/080.html): 増減が合計に至る過程を示す。 - [081 ファネル / Funnel Chart](patterns/081.html): 段階ごとの到達数と離脱を見る。 - [082 ツリーマップ / Treemap](patterns/082.html): 面積で内訳と構成比を示す。 - [083 サンバースト / Sunburst](patterns/083.html): 円の内外で階層と内訳を示す。 - [084 サンキー図 / Sankey Diagram](patterns/084.html): 流入・分岐・流出を帯で見せる。 - [085 ローソク足 / Candlestick](patterns/085.html): 始値・高値・安値・終値を表す。 - [086 レンジバンド / Range Band](patterns/086.html): 代表値と上下の幅を同時に示す。 - [087 スロープグラフ / Slope Graph](patterns/087.html): 2時点の変化を線で比べる。 - [088 ダンベルチャート / Dumbbell Chart](patterns/088.html): 2つの値の差を同じ軸で示す。 - [089 ロリポップ / Lollipop Chart](patterns/089.html): 棒より軽い表現で大小を示す。 - [090 ポーラーエリア / Polar Area](patterns/090.html): 角度をそろえ、扇の面積で量を示す。 - [091 日本地図・色分け / Japan Choropleth](patterns/091.html): 都道府県ごとの違いを色で示す。 - [092 日本地図・バブル / Japan Bubble Map](patterns/092.html): 地域の規模を円の面積で示す。 - [093 日本地図・ドット / Japan Dot Map](patterns/093.html): 地域の件数を同じ大きさの点で示す。 - [094 都道府県タイル / Prefecture Tile Map](patterns/094.html): 地域を同じ面積で比較する。 - [095 ルートマップ / Route Map](patterns/095.html): 拠点間の移動と順序を示す。 - [096 ロケーションマップ / Location Map](patterns/096.html): 地点の位置をピンで示す。 - [097 ヘックスマップ / Hexbin Map](patterns/097.html): 六角形の区画で密度を比べる。 - [098 フロアマップ / Floor Plan](patterns/098.html): 空間と部屋の配置を示す。 - [099 カレンダーヒートマップ / Calendar Heatmap](patterns/099.html): 日ごとの活動量をカレンダーで見る。 - [100 コホート表 / Cohort Table](patterns/100.html): 開始時期別の継続率を比べる。 - [101 相関行列 / Correlation Matrix](patterns/101.html): 複数の変数の関係を一覧にする。 - [102 ワッフルチャート / Waffle Chart](patterns/102.html): 100個のセルで割合を直感的に示す。 - [103 ピクトグラム / Pictogram](patterns/103.html): アイコンの個数で量感を伝える。 - [104 円形プログレス / Radial Progress](patterns/104.html): 進捗を円と数値で見せる。 - [105 目標トラッカー / Goal Tracker](patterns/105.html): 実績と残りを分かりやすく示す。 - [106 ビッグナンバー / Big Number](patterns/106.html): ひとつの重要数値を大胆に見せる。 - [107 比較カード / Comparison Cards](patterns/107.html): 同じ指標の前後を並べる。 - [108 ランキングバー / Ranked Bars](patterns/108.html): 順位と量の差をひと目で伝える。 - [109 リーダーボード / Leaderboard](patterns/109.html): 上位の項目を強調して並べる。 - [110 マーケットティッカー / Market Ticker](patterns/110.html): 複数指標の現在値と変化を並べる。 - [111 数字カウンター / Number Counter](patterns/111.html): 数値の変化を段階的に見せる。 - [112 テーブル内バー / In-cell Bars](patterns/112.html): 表の数値に小さな棒を添える。 - [113 カンバン / Kanban Board](patterns/113.html): 状態ごとに作業を並べる。 - [114 ガントチャート / Gantt Chart](patterns/114.html): 期間と作業の重なりを見せる。 - [115 ロードマップ / Roadmap](patterns/115.html): 計画を時期ごとに整理する。 - [116 ツリーダイアグラム / Tree Diagram](patterns/116.html): 親子の階層構造を示す。 - [117 ネットワーク図 / Network Graph](patterns/117.html): 項目どうしのつながりを見せる。 - [118 フローチャート / Flowchart](patterns/118.html): 処理の順序と分岐を示す。 - [119 ベン図 / Venn Diagram](patterns/119.html): 集合の重なりを示す。 - [120 四象限マトリクス / Quadrant Matrix](patterns/120.html): 2軸で優先順位や位置を整理する。 ## Usage Resolve links relative to this file/site root. Read only requested pattern specs when possible. Preserve stable IDs. All numeric examples are synthetic. If a URL is inaccessible, report the failure instead of claiming it was read. This index is a convenience; automatic support depends on the reader.