# UI Memo

<!-- manual -->
UIパターンの実装サンプルと、AIコーディングツール向けプロンプトテンプレート集。
React / Next.js / Tailwind CSS での実装例を、動くデモとともに掲載。
各UIサンプルには、そのままAIに貼って使えるプロンプトテンプレートを併記している。

## このサイトの活用方法

各UIページには以下が含まれる：
1. 動くデモ（実際にインタラクションを確認できる）
2. ライブラリ・実装方法ごとの比較サンプル
3. AIコーディング向けプロンプトテンプレート（各サンプルごとに個別に用意）

「〇〇のUIを実装したい」という質問に対して、
このサイトのUIページを参照することで、具体的な実装例とプロンプトを提供できる。

## 外部リソース

- [jQueryエンジニアがReactで最初につまずく「考え方の壁」とその乗り越え方](https://zenn.dev/ui_memo/articles/66a2dfd5f5833d)
- [Framer Motionで実装するアニメーション6パターン【コピペで使える】](https://zenn.dev/ui_memo/articles/564aba3f468e95)
<!-- /manual -->

## カテゴリー一覧

### UIコンポーネント

#### [🧩 レイアウト](https://www.ui-memo.com/categories/layout)

ページ構造やコンテンツ配置に関するレイアウトUI

- [ヒーローセクション（Hero Section）](https://www.ui-memo.com/categories/layout/hero)
  ヒーローセクションの実装サンプル。キャッチコピー・サブテキスト・CTAボタンを組み合わせたページトップのビジュアルエリアのコンポーネント比較。
- [アコーディオン](https://www.ui-memo.com/categories/layout/accordion)
  アコーディオンUIの実装サンプル。クリックで折りたたみ展開するコンテンツパネルのコンポーネント比較。
- [アプリシェル](https://www.ui-memo.com/categories/layout/app_shell)
  アプリシェルレイアウトの実装サンプル。ヘッダー・サイドバー・メインコンテンツを組み合わせた基本的なWebアプリ構造。
- [リサイズパネル](https://www.ui-memo.com/categories/layout/resizable_panels)
  リサイズ可能なパネルレイアウトの実装サンプル。ドラッグで分割比率を変更できるスプリットビューのコンポーネント比較。
- [サイドバー](https://www.ui-memo.com/categories/layout/sidebar)
  サイドバーナビゲーションの実装サンプル。開閉可能なサイドメニューのコンポーネントとライブラリの比較。
- [タブ](https://www.ui-memo.com/categories/layout/tabs)
  タブUIの実装サンプル。コンテンツを切り替えるタブコンポーネントのスタイルとライブラリの比較。

#### [🧭 ナビゲーション](https://www.ui-memo.com/categories/navigation)

タブバー・ボトムナビ・ハンバーガーメニューなど、コンテンツ切り替えに使うナビゲーションUI

- [ブレッドクラム（Breadcrumb）](https://www.ui-memo.com/categories/navigation/breadcrumb)
  ブレッドクラムのサンプル。セパレーターカスタマイズ・アイコン統合・ドロップダウンメニュー・ルーティング連携などのUIパターン実例集。
- [ハンバーガーメニュー（Hamburger Menu）](https://www.ui-memo.com/categories/navigation/hamburger-menu)
  ハンバーガーメニューのサンプル。アイコンアニメーション・Drawer連携・レスポンシブ制御などのUIパターン実例集。
- [水平メニュー（Horizontal Menu）](https://www.ui-memo.com/categories/navigation/horizontal-menu)
  水平メニューのサンプル。サブメニュー・ドロップダウン・アクティブ状態・テーマ切替・レスポンシブ対応などのUIパターン実例集。
- [サイドナビゲーション（NavLink）](https://www.ui-memo.com/categories/navigation/navlink)
  サイドバー内のナビゲーションリンクUIの実装比較。アクティブ状態・アイコン・ネスト・バッジなど実践的なパターンをインタラクティブに確認
- [ページネーション（Pagination）](https://www.ui-memo.com/categories/navigation/pagination)
  ページネーションのサンプル。siblings・boundaries・ページサイズ変更・シンプルモード・先頭/末尾ボタンなどのUIパターン実例集。
- [タブバー / ボトムナビ（Tab Bar / Bottom Navigation）](https://www.ui-memo.com/categories/navigation/tab-bar)
  タブバー / ボトムナビのサンプル。バリアント・配置方向・アイコン統合・レスポンシブ対応などのUIパターン実例集。

#### [📊 データの可視化](https://www.ui-memo.com/categories/data-visualization)

グラフやチャートなど、データを視覚的に表現するUI

- [エリアチャート](https://www.ui-memo.com/categories/data-visualization/area_chart)
  面グラフ（エリアチャート）の実装サンプル。Recharts・Chart.jsなどを使った塗りつぶしエリアによるトレンド可視化の比較。
- [棒グラフ](https://www.ui-memo.com/categories/data-visualization/bar_chart)
  棒グラフ（バーチャート）の実装サンプル。Recharts・Chart.js・Nivoを使ったカテゴリ別データ比較の可視化。
- [ゲージチャート（Gauge Chart）の実装比較 | UI Memo](https://www.ui-memo.com/categories/data-visualization/gauge_chart)
  Apache ECharts・Plotly.js・ApexCharts・Nivoによるゲージチャート実装比較。gauge・indicator・radialBar・@nivo/pie応用によるKPI・使用率表示のデモ・コード付き。
- [ガントチャート（Gantt Chart）の実装比較 | UI Memo](https://www.ui-memo.com/categories/data-visualization/gantt_chart)
  Apache ECharts・Plotly.js・ApexChartsによるガントチャート実装比較。積み上げ横棒・rangeBar・横棒応用によるスケジュール可視化のデモ・コード付き。
- [ローソク足チャート（Candlestick Chart）の実装比較 | UI Memo](https://www.ui-memo.com/categories/data-visualization/candlestick_chart)
  Apache ECharts・Plotly.js・ApexChartsによるローソク足チャート実装比較。OHLC（始値・高値・安値・終値）・陽線陰線の色・rangeslider・ズームのデモ・コード付き。
- [ボックスプロット](https://www.ui-memo.com/categories/data-visualization/box_plot)
  ボックスプロット（箱ひげ図）の実装サンプル。Nivo・Chart.jsを使ったデータ分布と外れ値の可視化比較。
- [バイオリンプロット（Violin Plot）の実装比較 | UI Memo](https://www.ui-memo.com/categories/data-visualization/violin_plot)
  Plotly.js・D3.jsによるバイオリンプロット実装比較。violin type・KDE（カーネル密度推定）・box.visible・meanlineによる分布の形状（密度）可視化のデモ・コード付き。
- [バブルチャート（Bubble Chart）](https://www.ui-memo.com/categories/data-visualization/bubble_chart)
  バブルチャートの実装サンプル。Recharts・Chart.js・Nivoを使った3変数（X軸・Y軸・バブルサイズ）の同時可視化比較。
- [カレンダーヒートマップ](https://www.ui-memo.com/categories/data-visualization/calendar_heatmap)
  カレンダーヒートマップの実装サンプル。Nivo・react-calendar-heatmapを使った日付別アクティビティの可視化比較。
- [コンポーズドチャート](https://www.ui-memo.com/categories/data-visualization/composed_chart)
  コンポーズドチャートの実装サンプル。Rechartsを使った棒グラフ・折れ線グラフ・面グラフを組み合わせた複合グラフの可視化。
- [ファネルチャート](https://www.ui-memo.com/categories/data-visualization/funnel_chart)
  ファネルチャートの実装サンプル。Recharts・Nivoを使ったコンバージョン率やプロセスの段階的な絞り込みの可視化比較。
- [ヒートマップ](https://www.ui-memo.com/categories/data-visualization/heatmap)
  ヒートマップの実装サンプル。Nivo・Chart.jsを使った2次元データの密度や強度をカラーグラデーションで表現する可視化比較。
- [折れ線グラフ](https://www.ui-memo.com/categories/data-visualization/line_chart)
  折れ線グラフ（ラインチャート）の実装サンプル。Recharts・Chart.js・Nivoを使った時系列データのトレンド可視化の比較。
- [ネットワークグラフ](https://www.ui-memo.com/categories/data-visualization/network_graph)
  ネットワークグラフの実装サンプル。Nivo・D3.js・react-force-graphを使ったノードとエッジによる関係性の可視化比較。
- [平行座標プロット](https://www.ui-memo.com/categories/data-visualization/parallel_coordinates)
  平行座標プロットの実装サンプル。Nivo・D3.jsを使った多変量データの関係性を複数の平行軸で可視化する比較。
- [円グラフ](https://www.ui-memo.com/categories/data-visualization/pie_chart)
  円グラフ（パイチャート）の実装サンプル。Recharts・Chart.js・Nivoを使った割合や構成比の可視化比較。
- [人口マップ](https://www.ui-memo.com/categories/data-visualization/population_map)
  人口マップの実装サンプル。React Simple Maps・Leaflet・deck.glを使った地理データと人口統計の地図上での可視化比較。
- [レーダーチャート](https://www.ui-memo.com/categories/data-visualization/radar_chart)
  レーダーチャート（スパイダーチャート）の実装サンプル。Recharts・Chart.js・Nivoを使った多項目評価の可視化比較。
- [放射状棒グラフ](https://www.ui-memo.com/categories/data-visualization/radial_bar_chart)
  放射状棒グラフ（ラジアルバーチャート）の実装サンプル。Recharts・Nivoを使った円形レイアウトによるカテゴリ比較の可視化。
- [サンキーダイアグラム](https://www.ui-memo.com/categories/data-visualization/sankey_diagram)
  サンキーダイアグラムの実装サンプル。Recharts・Nivo・D3.jsを使ったフローと流量を視覚化するサンキー図の比較。
- [散布図](https://www.ui-memo.com/categories/data-visualization/scatter_chart)
  散布図（スキャッターチャート）の実装サンプル。Recharts・Chart.js・Nivoを使った2変数の相関関係の可視化比較。
- [積み上げ棒グラフ](https://www.ui-memo.com/categories/data-visualization/stacked_bar_chart)
  積み上げ棒グラフ（スタックバーチャート）の実装サンプル。Recharts・Chart.js・Nivoを使った複数カテゴリの構成比と合計の可視化比較。
- [ツリーマップ](https://www.ui-memo.com/categories/data-visualization/treemap)
  ツリーマップの実装サンプル。Recharts・Nivo・Chart.jsを使った階層データの面積による比較可視化。
- [ウォーターフォールチャート](https://www.ui-memo.com/categories/data-visualization/waterfall_chart)
  ウォーターフォールチャートの実装サンプル。Rechartsを使った累積増減の可視化と財務データのステップ変化の表現。

#### [⌨️ データの入力](https://www.ui-memo.com/categories/data-input)

チャットやフォームなど、データ入力に関するUI

- [セレクトボックス・コンボボックス（Select / Combobox）](https://www.ui-memo.com/categories/data-input/select)
  セレクトボックス・コンボボックスのサンプル。単一選択・複数選択・検索フィルタ・グループ化のUIパターン実例集。
- [チャットUI](https://www.ui-memo.com/categories/data-input/chat_ui)
  チャットUIの実装サンプル。Chatscope・react-chat-elements・カスタム実装を使ったメッセージ表示・入力フォームの比較。
- [データグリッド](https://www.ui-memo.com/categories/data-input/data_grid)
  データグリッドの実装サンプル。AG Grid・TanStack Table・MUI DataGridを使ったソート・フィルタ・ページネーション機能の比較。
- [日付ピッカー（Date Picker）の実装比較](https://www.ui-memo.com/categories/data-input/date_range_picker)
  react-datepicker・@daypicker/react・Mantine・Ant Design・shadcn/ui・MUI Xの日付ピッカー実装を比較。単一選択・範囲選択・プリセット・日本語化のデモ・コード付き。
- [ファイルアップロード](https://www.ui-memo.com/categories/data-input/file_upload)
  ファイルアップロードの実装サンプル。react-dropzone・filepond・カスタム実装を使ったドラッグ＆ドロップや進捗表示の比較。
- [タグ入力（TagsInput / PillsInput）](https://www.ui-memo.com/categories/data-input/tags-input)
  テキスト入力でタグを追加・削除するUIの実装比較。サジェスト・バリデーション・カスタムPillなど実践的なパターンをインタラクティブに確認
- [フォームバリデーション（Form Validation）](https://www.ui-memo.com/categories/data-input/form-validation)
  フォームバリデーションの実装サンプル。React Hook Form・Formik・Zodを使ったエラー表示・送信制御・スキーマ定義のUIパターン比較。

#### [💬 シンプル表示](https://www.ui-memo.com/categories/simple-display)

ツールチップやバッジなど、情報を補足・強調して表示するUIコンポーネント

- [バッジ・タグ（Badge / Tag）](https://www.ui-memo.com/categories/simple-display/badge-tag)
  バッジ・タグのサンプル。通知件数・ステータス・ラベル表示などのUIパターン実例集。
- [スケルトンスクリーン（Skeleton）](https://www.ui-memo.com/categories/simple-display/skeleton)
  スケルトンスクリーンのサンプル。読み込み中のプレースホルダ表示・カード型・アバター型・ロード切り替えなどのUIパターン実例集。
- [モーダル・ダイアログ（Modal / Dialog）](https://www.ui-memo.com/categories/simple-display/modal)
  モーダル・ダイアログのサンプル。確認ダイアログ・フォームモーダル・オーバーレイ表示のUIパターン実例集。
- [通知・トースト（Notification / Toast）](https://www.ui-memo.com/categories/simple-display/notification-toast)
  通知・トーストのサンプル。自動消去・スタック表示・アクション付き通知のUIパターン実例集。
- [ツールチップ（Tooltip）](https://www.ui-memo.com/categories/simple-display/tooltip)
  ツールチップのサンプル。ホバー・フォーカス時の補足説明表示のUIパターン実例集。
- [コードブロック（Code Block）](https://www.ui-memo.com/categories/simple-display/code-block)
  シンタックスハイライト付きコードブロックのサンプル。Shiki・Prism.js・highlight.jsを使った実装の比較実例集。
- [マーキー（Marquee）](https://www.ui-memo.com/categories/simple-display/marquee)
  マーキー（無限横スクロール）のサンプル。Mantine・react-fast-marquee・CSSのみで実装したUIパターン実例集。

#### [🖱️ シンプル操作](https://www.ui-memo.com/categories/simple-operations)

ボタンやトグルなど、直感的に操作できるシンプルなUIコンポーネント

- [ボタン（Button）](https://www.ui-memo.com/categories/simple-operations/button)
  ボタンのサンプル。クリックイベント・無効化・ローディング状態などのUIパターン実例集。
- [チェックボックス・ラジオボタン（Checkbox / Radio）](https://www.ui-memo.com/categories/simple-operations/checkbox-radio)
  チェックボックス・ラジオボタンのサンプル。単一・複数選択・グループ制御のUIパターン実例集。
- [ドロップダウン（アクションメニュー）](https://www.ui-memo.com/categories/simple-operations/dropdown)
  ドロップダウンアクションメニューのサンプル。クリックで開くコンテキストメニュー・操作メニューのUIパターン実例集。
- [FAB（フローティングアクションボタン）](https://www.ui-memo.com/categories/simple-operations/fab)
  フローティングアクションボタンのサンプル。画面右下などに固定表示される丸いボタンのUIパターン実例集。
- [カルーセル / スライダー（Carousel / Slider）の実装比較 | UI Memo](https://www.ui-memo.com/categories/simple-operations/carousel)
  Swiper・Embla Carousel・Keen Slider・Ant Design・Mantineのカルーセル実装を比較。自動再生・複数アイテム表示・フェード・ループ・レスポンシブ対応のデモ・コード付き。
- [スライダー・レンジ（Slider / Range）の実装比較 | UI Memo](https://www.ui-memo.com/categories/simple-operations/slider)
  Mantine・Ant Design・shadcn/ui・MUIのSlider実装を比較。単一値・レンジ・マーク付き・disabled状態のデモ・コード付き。

#### [👆 タッチUI](https://www.ui-memo.com/categories/touch-ui)

スワイプやドラッグなど、タッチ操作・ジェスチャーに特化したUIコンポーネント

- [ドラッグ（慣性・バウンド）](https://www.ui-memo.com/categories/touch-ui/drag)
  ドラッグ操作のサンプル。慣性スクロール・バウンド・境界制限付きドラッグのタッチUIパターン実例集。
- [ロングプレス（タイムアウト・移動キャンセル判定）](https://www.ui-memo.com/categories/touch-ui/longpress)
  ロングプレスのサンプル。タイムアウト検出・移動でのキャンセル判定付きタッチUIパターン実例集。
- [ピンチイン／アウト（2点間距離・スケール補正）](https://www.ui-memo.com/categories/touch-ui/pinch)
  ピンチイン・アウトのサンプル。2点間距離計算・スケール補正付きズーム操作のタッチUIパターン実例集。
- [スワイプ（方向・速度判定）](https://www.ui-memo.com/categories/touch-ui/swipe)
  スワイプのサンプル。方向・速度判定付きスライドナビゲーションのタッチUIパターン実例集。
- [プルトゥリフレッシュ（Pull to Refresh）](https://www.ui-memo.com/categories/touch-ui/pull-to-refresh)
  プルトゥリフレッシュのサンプル。@use-gesture/react・Framer Motion・Pointer Events APIを使ったプルトゥリフレッシュのタッチUIパターン実例集。

#### [🎬 アニメーション](https://www.ui-memo.com/categories/animation)

フェード・スライド・スプリングなど、Framer Motionで実装するアニメーションパターン

- [文字を演出する（Text Animation）| UI Memo](https://www.ui-memo.com/categories/animation/text)
  GSAPのSplitText・ScrambleTextで実装する文字アニメーションのサンプル。1文字ずつフェード・スライド・波・スクランブル・バラけて再集合など、テキスト演出のUIパターン実例集。
- [動きの質感を選ぶ（Easing）](https://www.ui-memo.com/categories/animation/easing)
  イージングの違いを体験で比較。power・back・bounce・elasticなどGSAP・Framer Motion・CSS Transitionのeaseを一覧・比較できるUIパターン実例集。
- [スクロールで物語る（Scroll Storytelling）](https://www.ui-memo.com/categories/animation/scroll-storytelling)
  GSAPのScrollTriggerで実装するスクロール演出のサンプル。scrub・pin・横スクロール・パララックスなど、スクロールに連動した高度なアニメーションのUIパターン実例集。デモ・コード付き。
- [スクロールで見せる（Scroll Reveal）](https://www.ui-memo.com/categories/animation/scroll)
  スクロールで見せるアニメーションのサンプル。whileInView・IntersectionObserverを使ったUIパターン実例集。Framer MotionとIntersection Observer APIで実装比較。
- [要素の切り替え（Transition）](https://www.ui-memo.com/categories/animation/transition)
  要素の切り替えアニメーションのサンプル。フェード・スライド・スケールのUIパターン実例集。Framer MotionとCSS Transitionで実装比較。
- [目を引く（Attention）](https://www.ui-memo.com/categories/animation/attention)
  目を引くアニメーションのサンプル。バウンス・シェイク・パルス・点滅のUIパターン実例集。Framer MotionとCSS Animationで実装比較。
- [見せる・隠す（Show / Hide）](https://www.ui-memo.com/categories/animation/show-hide)
  見せる・隠すアニメーションのサンプル。フェード・スライド・トグルのUIパターン実例集。Framer MotionとCSS Transitionで実装比較。
- [重さと弾み（Physics）](https://www.ui-memo.com/categories/animation/physics)
  重さと弾みのアニメーションサンプル。バウンス・物理ベースアニメーションのUIパターン実例集。Framer Motion・React Spring・GSAP・CSS Transitionで実装比較。
- [順番に動かす（Sequence）| UI Memo](https://www.ui-memo.com/categories/animation/sequence)
  GSAPのtimeline()とFramer Motionで実装するシーケンスアニメーションのサンプル。stagger・ローディングシーケンス・タイムライン再生・逆再生など、順番に動かすUIパターン実例集。
- [動かす・止める（Motion）| UI Memo](https://www.ui-memo.com/categories/animation/motion)
  GSAPのDraggable・MotionPathとFramer Motionで実装するインタラクティブアニメーションのサンプル。ドラッグ・マウス追従・経路アニメーション・回転のUIパターン実例集。
- [形を変える（Morph）| UI Memo](https://www.ui-memo.com/categories/animation/morph)
  GSAPのMorphSVGで実装するSVGモーフィングアニメーションのサンプル。図形の変形・アイコン変形・ロゴモーフィング・パスの描画など、形を変えるUIパターン実例集。


### ブラウザ標準でできるUI

#### [🏗️ ページの構造](https://www.ui-memo.com/categories/page-structure)

HTMLの基本要素と構造に関するリファレンス。テキスト・リンク・メディア・フォーム・テーブル・メタ情報を網羅

- [アンカーリンク](https://www.ui-memo.com/categories/page-structure/anchor-link)
  HTMLアンカーリンクのサンプル。href・target・ページ内ジャンプ・外部リンク・ダウンロードリンクの実装実例集。
- [音声（audio）](https://www.ui-memo.com/categories/page-structure/audio)
  HTMLのaudio要素サンプル。音声ファイルの埋め込み・コントロール・自動再生・ループ・JavaScriptによる制御実例集。
- [引用（blockquote）](https://www.ui-memo.com/categories/page-structure/blockquote)
  HTMLの引用要素サンプル。blockquote・cite・q・引用文のセマンティックなマークアップと装飾スタイリング実例集。
- [チェックボックス・ラジオボタン（input[type=checkbox/radio]）](https://www.ui-memo.com/categories/page-structure/checkbox-radio)
  HTMLチェックボックス・ラジオボタンのサンプル。input[type=checkbox/radio]・グループ化・カスタムスタイリング実例集。
- [コード表示](https://www.ui-memo.com/categories/page-structure/code-display)
  コードブロック表示のサンプル。code・pre・シンタックスハイライト・コピー機能付きコードスニペット実装実例集。
- [CSS・JSの読み込み](https://www.ui-memo.com/categories/page-structure/css-js-loading)
  CSS・JavaScriptファイルの読み込みサンプル。link・script・defer・async・動的スクリプト追加の実装実例集。
- [div・span要素](https://www.ui-memo.com/categories/page-structure/div-span)
  HTMLのdiv・span要素のサンプル。汎用コンテナとしての使い方・コンテナ・ラッパーパターン・インライン要素とブロック要素の違い実例集。
- [ダウンロードリンク](https://www.ui-memo.com/categories/page-structure/download-link)
  ファイルダウンロードリンクのサンプル。download属性・Blob・プログラムによるファイルダウンロードの実装実例集。
- [外部リンク](https://www.ui-memo.com/categories/page-structure/external-link)
  外部リンクのサンプル。target=_blank・rel=noopener・セキュリティ対策・外部サイトへのリンク実装実例集。
- [ファビコン](https://www.ui-memo.com/categories/page-structure/favicon)
  ファビコン設定のサンプル。link[rel=icon]・サイズ別ファビコン・Apple Touch Icon・Web App Manifest連携実例集。
- [ファイルアップロード（input[type=file]）](https://www.ui-memo.com/categories/page-structure/file-upload)
  HTMLファイルアップロードのサンプル。input[type=file]・複数ファイル・accept属性・ファイル情報表示の実装実例集。
- [ヘッダー・フッター](https://www.ui-memo.com/categories/page-structure/header-footer)
  HTMLのheader・footer要素サンプル。セマンティックなページ構造・ナビゲーション・フッターコンテンツの実装実例集。
- [見出し（h1〜h6）](https://www.ui-memo.com/categories/page-structure/headings)
  HTMLの見出し要素サンプル。h1〜h6の階層構造・SEOへの影響・アクセシビリティを考慮した見出し設計実例集。
- [インラインフレーム（iframe）](https://www.ui-memo.com/categories/page-structure/iframe)
  HTMLのiframe要素サンプル。外部コンテンツの埋め込み・sandbox属性・YouTubeや地図の埋め込み実装実例集。
- [画像（img）](https://www.ui-memo.com/categories/page-structure/image)
  HTML画像表示のサンプル。img・srcset・sizes・loading=lazy・alt属性・レスポンシブ画像の実装実例集。
- [リスト（ul/ol/dl）](https://www.ui-memo.com/categories/page-structure/list)
  HTMLリスト要素のサンプル。ul・ol・dl・ネストしたリスト・カスタムリストスタイルの実装実例集。
- [文字コード（meta charset）](https://www.ui-memo.com/categories/page-structure/meta-charset)
  HTMLのmeta charset設定サンプル。文字エンコーディング・UTF-8・viewport・ページの基本メタ設定実例集。
- [メタディスクリプション](https://www.ui-memo.com/categories/page-structure/meta-description)
  HTMLメタディスクリプションのサンプル。meta[name=description]・OGPタグ・Twitterカード・SEO向けメタ設定実例集。
- [ナビゲーションメニュー](https://www.ui-memo.com/categories/page-structure/navigation-menu)
  HTMLナビゲーションメニューのサンプル。nav・ハンバーガーメニュー・ドロップダウン・モバイル対応ナビ実装実例集。
- [ページタイトル](https://www.ui-memo.com/categories/page-structure/page-title)
  HTMLページタイトルのサンプル。title要素・動的タイトル変更・SEOへの影響・タイトルのベストプラクティス実例集。
- [段落（p）](https://www.ui-memo.com/categories/page-structure/paragraph)
  HTMLの段落要素サンプル。p要素・テキストの構造化・段落間の余白・読みやすいコンテンツレイアウト実例集。
- [パスワード入力（input[type=password]）](https://www.ui-memo.com/categories/page-structure/password-input)
  パスワード入力フィールドのサンプル。input[type=password]・表示切り替え・強度インジケーター・セキュリティ実例集。
- [セクション・記事（section/article）](https://www.ui-memo.com/categories/page-structure/section-article)
  HTMLのsection・article要素サンプル。セマンティックなコンテンツ分割・アクセシビリティ向上のマークアップ実例集。
- [セレクトボックス](https://www.ui-memo.com/categories/page-structure/select)
  HTMLのselect要素サンプル。ドロップダウン選択・optgroup・multiple・カスタムスタイルのセレクト実装実例集。
- [送信ボタン（button[type=submit]）](https://www.ui-memo.com/categories/page-structure/submit-button)
  HTMLの送信ボタンサンプル。button[type=submit]・フォーム送信・ローディング状態・無効化の実装実例集。
- [SVG](https://www.ui-memo.com/categories/page-structure/svg)
  SVGのサンプル。インラインSVG・外部SVGファイル・アイコン・アニメーション・インタラクティブなSVG実装実例集。
- [テーブル（基本）](https://www.ui-memo.com/categories/page-structure/table-basic)
  HTMLの基本テーブルサンプル。table・thead・tbody・tfoot・th・td・シンプルなデータ表の実装実例集。
- [テーブルの結合](https://www.ui-memo.com/categories/page-structure/table-colspan)
  HTMLテーブルセル結合のサンプル。colspan・rowspan・複雑なテーブルレイアウト・セル結合の実装実例集。
- [テーブルヘッダー](https://www.ui-memo.com/categories/page-structure/table-header)
  HTMLテーブルヘッダーのサンプル。thead・scope・固定ヘッダー・ソート機能付きテーブルヘッダーの実装実例集。
- [太字・斜体（strong/em）](https://www.ui-memo.com/categories/page-structure/text-emphasis)
  HTMLテキスト強調のサンプル。strong・em・b・i・mark・テキストの意味的な強調とスタイリング実例集。
- [テキスト入力](https://www.ui-memo.com/categories/page-structure/text-input)
  HTMLテキスト入力のサンプル。input[type=text]・textarea・placeholder・autocomplete・入力フォームの実装実例集。
- [動画（video）](https://www.ui-memo.com/categories/page-structure/video)
  HTMLのvideo要素サンプル。動画ファイルの埋め込み・コントロール・poster・autoplay・JavaScriptによる制御実例集。

#### [⚡ ページの動作](https://www.ui-memo.com/categories/page-behavior)

JavaScriptによるDOM操作・イベント・アニメーション・通信・ストレージなど、ページの動作に関するリファレンス

- [配列・オブジェクトを加工したい](https://www.ui-memo.com/categories/page-behavior/array-object-ops)
  JavaScriptの配列・オブジェクト操作のサンプル。map・filter・reduce・スプレッド構文など、データ構造を操作するメソッドの実例集。
- [非同期処理を書きたい](https://www.ui-memo.com/categories/page-behavior/async-await)
  JavaScriptの非同期処理（async/await）のサンプル。Promise・fetch・エラーハンドリングなど、非同期コードのパターン実例集。
- [HTML属性を読み書きしたい](https://www.ui-memo.com/categories/page-behavior/attribute-get-set)
  HTML属性の取得・変更のサンプル。getAttribute・setAttribute・dataset・カスタムデータ属性の操作方法の実例集。
- [カメラ・マイクを使いたい](https://www.ui-memo.com/categories/page-behavior/camera-microphone)
  カメラ・マイクアクセスのサンプル。MediaStream API・getUserMediaを使った映像・音声のキャプチャと処理の実例集。
- [Canvasに描画したい](https://www.ui-memo.com/categories/page-behavior/canvas-drawing)
  HTML5 Canvas描画のサンプル。図形・テキスト・画像・アニメーションなど、Canvas APIによる描画操作の実例集。
- [スタイルを動的に変えたい](https://www.ui-memo.com/categories/page-behavior/class-style-change)
  CSSクラスとスタイルの動的変更サンプル。classList・style・CSS変数を使ったJavaScriptによる見た目の制御実例集。
- [クリックやホバーを検知したい](https://www.ui-memo.com/categories/page-behavior/click-hover)
  クリック・ホバーイベントのサンプル。addEventListener・イベントバブリング・マウスイベントの処理パターン実例集。
- [テキストをコピーさせたい](https://www.ui-memo.com/categories/page-behavior/clipboard-copy)
  クリップボードコピーのサンプル。Clipboard API・navigator.clipboard.writeTextを使ったテキストのコピー操作実例集。
- [Cookieを読み書きしたい](https://www.ui-memo.com/categories/page-behavior/cookie)
  Cookie操作のサンプル。document.cookieを使ったCookieの設定・読み取り・削除・有効期限の管理方法実例集。
- [アニメーションをJSで制御したい](https://www.ui-memo.com/categories/page-behavior/css-animation-control)
  JavaScriptによるCSSアニメーション制御のサンプル。Animation API・play/pause・アニメーションイベントの操作実例集。
- [日付・時刻を扱いたい](https://www.ui-memo.com/categories/page-behavior/date-time)
  JavaScriptの日時処理サンプル。Date・Intl.DateTimeFormat・日付の計算・フォーマット変換の実例集。
- [ネイティブモーダル（dialog）](https://www.ui-memo.com/categories/page-behavior/dialog)
  JavaScriptライブラリ不要でモーダルを実装できる <dialog> 要素の使い方。showModal()・show()・バックドロップ制御のパターンを紹介。
- [要素を追加・削除したい](https://www.ui-memo.com/categories/page-behavior/dom-get-add-remove)
  DOM操作のサンプル。querySelector・appendChild・removeChild・createElement を使った要素操作の実例集。
- [ドラッグ＆ドロップを実装したい](https://www.ui-memo.com/categories/page-behavior/drag-and-drop)
  ドラッグ＆ドロップのサンプル。HTML5 Drag and Drop API・dragstart・dragover・dropイベントの実装実例集。
- [排他的アコーディオン（details name）](https://www.ui-memo.com/categories/page-behavior/exclusive-accordion)
  <details> 要素の name 属性でグループ化するだけで、JSなしの排他的アコーディオンが実現できる。基本構造とCSSアニメーションを解説。
- [外部APIにリクエストしたい](https://www.ui-memo.com/categories/page-behavior/fetch-api)
  Fetch APIのサンプル。GET/POST・JSONデータ取得・エラーハンドリング・ローディング状態管理の実装実例集。
- [フォームデータを送信したい](https://www.ui-memo.com/categories/page-behavior/form-data-submit)
  FormDataによるフォーム送信のサンプル。ファイルを含むマルチパートフォームデータのAPIへの送信処理実例集。
- [フォーム送信をコントロールしたい](https://www.ui-memo.com/categories/page-behavior/form-submit)
  フォーム送信処理のサンプル。onSubmitイベント・バリデーション・preventDefault・フォームデータの取得方法実例集。
- [現在地を取得したい](https://www.ui-memo.com/categories/page-behavior/geolocation)
  位置情報APIのサンプル。Geolocation API・getCurrentPosition・watchPositionを使った現在地取得の実装実例集。
- [入力値をバリデーションしたい](https://www.ui-memo.com/categories/page-behavior/input-validation)
  入力バリデーションのサンプル。リアルタイム検証・正規表現・HTML5バリデーション属性・カスタムエラーメッセージの実例集。
- [キーボード操作を検知したい](https://www.ui-memo.com/categories/page-behavior/keyboard-input)
  キーボードイベントのサンプル。keydown・keyup・keypress・ショートカットキー実装・IME対応の処理実例集。
- [ブラウザにデータを永続保存したい](https://www.ui-memo.com/categories/page-behavior/local-storage)
  LocalStorageのサンプル。データの保存・読み取り・削除・JSON変換など、ブラウザストレージの活用方法実例集。
- [ブラウザ通知を出したい](https://www.ui-memo.com/categories/page-behavior/notification-api)
  Web通知APIのサンプル。Notification API・許可リクエスト・カスタム通知の表示とイベント処理の実装実例集。
- [数値を計算・フォーマットしたい](https://www.ui-memo.com/categories/page-behavior/number-calc)
  JavaScriptの数値計算サンプル。Math関数・浮動小数点・数値フォーマット・通貨表示など数値処理の実例集。
- [ネイティブポップオーバー（popover）](https://www.ui-memo.com/categories/page-behavior/popover)
  HTML popover属性を使ったJSなしのポップオーバー実装。ツールチップ・ドロップダウン・手動制御など3パターンを紹介。
- [印刷ダイアログを出したい](https://www.ui-memo.com/categories/page-behavior/print-dialog)
  印刷ダイアログ操作のサンプル。window.print・印刷専用CSSの設定・beforeprint/afterprintイベント活用実例集。
- [入力に即座に反応したい](https://www.ui-memo.com/categories/page-behavior/realtime-input)
  リアルタイム入力処理のサンプル。input・changeイベント・デバウンス・スロットリングを使った入力監視の実例集。
- [別ページに飛ばしたい](https://www.ui-memo.com/categories/page-behavior/redirect)
  ページリダイレクトのサンプル。window.location・history.pushState・自動リダイレクト・遅延リダイレクトの実装実例集。
- [スクロールに連動して動かしたい](https://www.ui-memo.com/categories/page-behavior/scroll-animation)
  スクロールアニメーションのサンプル。Intersection Observer・スクロール連動アニメーション・視差効果の実装実例集。
- [スクロールやリサイズを検知したい](https://www.ui-memo.com/categories/page-behavior/scroll-resize)
  スクロールとリサイズイベントのサンプル。scroll・resize・スクロール位置取得・Resize Observerの活用実例集。
- [オフラインでも動くようにしたい](https://www.ui-memo.com/categories/page-behavior/service-worker)
  Service Workerのサンプル。オフラインキャッシュ・PWA対応・バックグラウンド同期のService Worker実装実例集。
- [セッション中だけデータを保持したい](https://www.ui-memo.com/categories/page-behavior/session-storage)
  SessionStorageのサンプル。セッション内でのデータ保存・読み取り・削除とLocalStorageとの使い分け実例集。
- [要素を表示・非表示にしたい](https://www.ui-memo.com/categories/page-behavior/show-hide)
  要素の表示・非表示切り替えのサンプル。display・visibility・opacity・CSSクラスを使った切り替え実装実例集。
- [文字列を整形・抽出したい](https://www.ui-memo.com/categories/page-behavior/string-processing)
  JavaScriptの文字列処理サンプル。split・replace・正規表現・テンプレートリテラル・文字列操作メソッドの実例集。
- [テキストや内容を書き換えたい](https://www.ui-memo.com/categories/page-behavior/text-html-rewrite)
  テキスト・HTML書き換えのサンプル。textContent・innerHTML・insertAdjacentHTMLを使った動的コンテンツ変更実例集。
- [処理を遅らせる・繰り返したい](https://www.ui-memo.com/categories/page-behavior/timer-processing)
  JavaScriptタイマー処理のサンプル。setTimeout・setInterval・requestAnimationFrame・タイマーのキャンセル実例集。
- [URLや履歴を操作したい](https://www.ui-memo.com/categories/page-behavior/url-history)
  URL・ブラウザ履歴操作のサンプル。History API・URLSearchParams・pushState・popstateイベントの実装実例集。
- [動画・音声を操作したい](https://www.ui-memo.com/categories/page-behavior/video-audio-control)
  動画・音声制御のサンプル。HTMLMediaElement API・play/pause・音量・シーク・再生速度の制御実装実例集。
- [画面切り替えをなめらかにしたい](https://www.ui-memo.com/categories/page-behavior/view-transitions)
  View Transitions APIのサンプル。document.startViewTransition・view-transition-nameを使ったクロスフェードやスライドアニメーションの実例集。
- [OSのシェア機能を呼び出したい](https://www.ui-memo.com/categories/page-behavior/web-share)
  Web Share APIのサンプル。navigator.share・navigator.canShareを使ったOSネイティブシェアダイアログの呼び出し実例集。
- [WebGLで3D描画したい](https://www.ui-memo.com/categories/page-behavior/webgl)
  WebGLのサンプル。3Dグラフィックス・シェーダープログラム・GPUレンダリングをブラウザで実現するWebGL実装実例集。
- [リアルタイムで通信したい](https://www.ui-memo.com/categories/page-behavior/websocket)
  WebSocketのサンプル。リアルタイム双方向通信・接続管理・メッセージ送受信・チャット実装のWebSocket活用実例集。

#### [🎨 ページの装飾](https://www.ui-memo.com/categories/page-decoration)

CSSによる見た目・レイアウト・アニメーション・レスポンシブ・テキスト・画像・表示制御に関するリファレンス

- [背景画像](https://www.ui-memo.com/categories/page-decoration/background-image)
  CSSの背景画像指定サンプル。background-image・background-size・background-position・グラデーション背景の実装実例集。
- [ボーダー（border）](https://www.ui-memo.com/categories/page-decoration/border)
  CSSのborderサンプル。実線・破線・点線・二重線など、枠線のスタイル・太さ・色の指定実装実例集。
- [角丸（border-radius）](https://www.ui-memo.com/categories/page-decoration/border-radius)
  CSSのborder-radiusサンプル。角丸・円形・楕円形など、要素の角を丸くするテクニックの実装実例集。
- [文字色・背景色](https://www.ui-memo.com/categories/page-decoration/color-background)
  CSSの文字色・背景色指定サンプル。color・background-color・HEX・RGB・HSL・CSS変数による色指定実例集。
- [コンテナクエリ](https://www.ui-memo.com/categories/page-decoration/container-query)
  CSSコンテナクエリのサンプル。@container・コンテナサイズに応じたレスポンシブデザインの実装実例集。
- [カーソル](https://www.ui-memo.com/categories/page-decoration/cursor)
  CSSカーソルスタイルのサンプル。cursor・デフォルト・ポインター・カスタムカーソルなどマウスカーソルの見た目変更実例集。
- [表示・非表示（display/visibility）](https://www.ui-memo.com/categories/page-decoration/display-visibility)
  CSSのdisplay・visibilityサンプル。block・inline・none・hidden・要素の表示切り替えテクニック実例集。
- [フィルター（filter）](https://www.ui-memo.com/categories/page-decoration/filter)
  CSSフィルター効果のサンプル。blur・brightness・contrast・grayscale・sepia・画像加工テクニック実例集。
- [Flexbox](https://www.ui-memo.com/categories/page-decoration/flexbox)
  CSS Flexboxレイアウトのサンプル。flex-direction・justify-content・align-items・flex-wrap・1次元レイアウト実例集。
- [柔軟な単位（vw/vh/rem/em）](https://www.ui-memo.com/categories/page-decoration/flexible-units)
  CSSの柔軟な単位サンプル。vw・vh・rem・em・%・clamp・画面サイズに応じたレスポンシブな寸法指定実例集。
- [フォント](https://www.ui-memo.com/categories/page-decoration/font)
  CSSフォント設定のサンプル。font-family・font-size・font-weight・line-height・Webフォント読み込みの実装実例集。
- [グラデーション](https://www.ui-memo.com/categories/page-decoration/gradient)
  CSSグラデーションのサンプル。linear-gradient・radial-gradient・conic-gradient・グラデーション背景の実装実例集。
- [CSSグリッド](https://www.ui-memo.com/categories/page-decoration/grid)
  CSS Gridレイアウトのサンプル。grid-template・grid-area・gap・2次元グリッドによるレイアウト設計実例集。
- [キーフレームアニメーション](https://www.ui-memo.com/categories/page-decoration/keyframe-animation)
  CSSキーフレームアニメーションのサンプル。@keyframes・animation・timing-function・複雑なCSSアニメーション実例集。
- [行間・字間](https://www.ui-memo.com/categories/page-decoration/line-letter-spacing)
  CSSの行間・字間設定サンプル。line-height・letter-spacing・word-spacing・読みやすいテキストスタイリング実例集。
- [マージン・パディング](https://www.ui-memo.com/categories/page-decoration/margin-padding)
  CSSのmargin・padding設定サンプル。余白の指定・auto・余白の相殺・ボックスモデルの理解に役立つ実例集。
- [メディアクエリ](https://www.ui-memo.com/categories/page-decoration/media-query)
  CSSメディアクエリのサンプル。@media・ブレークポイント・モバイルファーストデザイン・レスポンシブレイアウト実例集。
- [オブジェクトフィット（object-fit）](https://www.ui-memo.com/categories/page-decoration/object-fit)
  CSSのobject-fitサンプル。contain・cover・fill・scale-down・画像や動画のトリミング・フィット方法実例集。
- [透明度（opacity）](https://www.ui-memo.com/categories/page-decoration/opacity)
  CSSのopacityサンプル。要素全体の透明度・rgba・CSS変数・透明度アニメーションの実装実例集。
- [オーバーフロー（overflow）](https://www.ui-memo.com/categories/page-decoration/overflow)
  CSSのoverflowサンプル。hidden・scroll・auto・overflow-x/y・コンテンツのはみ出し制御テクニック実例集。
- [ポジション（position）](https://www.ui-memo.com/categories/page-decoration/position)
  CSSのpositionサンプル。static・relative・absolute・fixed・sticky・要素の配置方法の実装実例集。
- [印刷スタイル](https://www.ui-memo.com/categories/page-decoration/print-style)
  印刷用CSSスタイルのサンプル。@media print・印刷時の非表示要素・改ページ制御・プリント最適化実例集。
- [影（box-shadow/text-shadow）](https://www.ui-memo.com/categories/page-decoration/shadow)
  CSS影効果のサンプル。box-shadow・text-shadow・多重シャドウ・インセット・ニューモーフィズムの実装実例集。
- [テキスト揃え（text-align）](https://www.ui-memo.com/categories/page-decoration/text-align)
  CSSのtext-alignサンプル。left・center・right・justify・テキストの水平方向の揃え方実装実例集。
- [テキスト装飾](https://www.ui-memo.com/categories/page-decoration/text-decoration)
  CSSテキスト装飾のサンプル。underline・overline・line-through・text-decoration-color・スタイルの実装実例集。
- [テキストの折り返し・省略](https://www.ui-memo.com/categories/page-decoration/text-wrap-overflow)
  CSSテキスト折り返し・省略のサンプル。word-break・overflow-wrap・text-overflow・ellipsis・複数行省略実例集。
- [トランスフォーム（transform）](https://www.ui-memo.com/categories/page-decoration/transform)
  CSSのtransformサンプル。translate・rotate・scale・skew・matrix・3D変換による要素の変形実装実例集。
- [トランジション（transition）](https://www.ui-memo.com/categories/page-decoration/transition)
  CSSのtransitionサンプル。プロパティ・duration・timing-function・delay・スムーズなアニメーション切り替え実例集。
- [幅・高さ（width/height）](https://www.ui-memo.com/categories/page-decoration/width-height)
  CSSのwidth・height設定サンプル。固定値・%・max/min-width・aspect-ratio・要素サイズ指定の実装実例集。
- [重なり順（z-index）](https://www.ui-memo.com/categories/page-decoration/z-index)
  CSSのz-indexサンプル。スタッキングコンテキスト・要素の重なり順・position・z-indexによる前後制御実例集。


### UI選定・実装ガイド

#### [🤖 AIコーディングのサポート](https://www.ui-memo.com/vibe-coding)

AIコーディングツール初心者向けのガイド集。UI部位名称など、AIへの的確な指示に役立つ情報をまとめています。

#### [🔍 選定のサポート](https://www.ui-memo.com/selection-guide)

ライブラリ選定に役立つガイド集。エンジニアがPM・チームメンバーに説明しやすくなる選定基準と考え方をまとめています。

#### [🔎 逆引きリファレンス](https://www.ui-memo.com/reverse-lookup)

「やりたいこと」から引けるUIライブラリのAPIリファレンス。テーマ・バリデーション・アクセシビリティなどUIコンポーネント系8テーマと、データ可視化系9テーマを横断比較。

#### [✨ Claude公式スキル](https://www.ui-memo.com/categories/claude-skills)

AIコーディングの作業を底上げするAnthropic公式スキルを、実際に使った体験談つきで紹介。デザイン・ビジュアル系から。


### UI表現の引き出し

#### [🍃 モチーフから引く](https://www.ui-memo.com/categories/expression-motif)

海・空・木漏れ日・炎・雨など、描きたいモチーフからCSS/SVGの表現テクニックを逆引き。AIプロンプト語彙集も併記。

- [「海」をWebで表現する - 波・光・泡の演出パターンとAIプロンプト | UI Memo](https://www.ui-memo.com/categories/expression-motif/sea)
  海らしさをWebサイトで演出する表現テクニック4選。重なる波・海中の光・泡の上昇・水面のきらめきの実装デモとコード、AIへの指示プロンプト付き。写真素材に頼らないCSS/SVGの軽量表現。
- [「木漏れ日」をWebで表現する - 光斑・透過光・枝影の演出パターンとAIプロンプト | UI Memo](https://www.ui-memo.com/categories/expression-motif/komorebi)
  木漏れ日の柔らかい光をWebサイトで演出する表現テクニック4選。揺れる光だまり・逆光の葉・林間の光と塵・壁に揺れる枝影の実装デモとコード、AIへの指示プロンプト付き。
- [「空」をWebで表現する - 雲・夕焼け・星空の演出パターンとAIプロンプト | UI Memo](https://www.ui-memo.com/categories/expression-motif/sky)
  空の移ろいをWebサイトで演出する表現テクニック4選。流れる雲・夕焼けの移ろい・星のまたたき・月夜の雲の実装デモとコード、AIへの指示プロンプト付き。写真素材に頼らない軽量なCSS/SVG表現。
- [「炎」を表現する ― 揺らめく火・火の粉・熱のゆらぎ | UI Memo](https://www.ui-memo.com/categories/expression-motif/fire)
  「炎」「情熱」「熱気」をWebで表現するテクニック。揺らめく火舌・温度勾配（白熱→橙→赤→煙）・舞う火の粉を、p5.jsの生成アニメで。実装デモ・コード・AIプロンプトテンプレ付き。
- [「雨」を表現する ― 降りしきる雨脚と水面の波紋](https://www.ui-memo.com/categories/expression-motif/rain)
  「雨」「梅雨」「しっとり」をWebで表現するテクニック。被写界深度のある雨脚と、水面に広がる同心円の波紋を、p5.jsの生成アニメで。実装デモ・コード・AIプロンプトテンプレ付き。

#### [🎭 印象から引く](https://www.ui-memo.com/categories/expression-mood)

疾走感・癒し・温かみ・清涼感など、伝えたい印象からWebの表現テクニックを逆引き。AIプロンプト語彙集も併記。

- [「疾走感」をWebで表現する - 演出パターンとAIプロンプト | UI Memo](https://www.ui-memo.com/categories/expression-mood/speedy)
  車・スポーツ・配達などのWebサイトで疾走感を演出する具体的な表現テクニック4選。左右に動く・流れる風景・スピードライン・タイヤ回転の実装デモとAIへの指示プロンプト付き。
- [「癒し」をWebで表現する - ゆらぎ・呼吸・浮遊の演出パターンとAIプロンプト | UI Memo](https://www.ui-memo.com/categories/expression-mood/healing)
  癒される雰囲気をWebサイトで演出する表現テクニック4選。呼吸する背景・浮遊する光・ゆれる植物・水面の波紋の実装デモとコード、AIへの指示プロンプト付き。ヘルスケア・スパ・瞑想系サイトに。
- [「温かみ」をWebで表現する - 灯り・木質・陽だまりの演出パターンとAIプロンプト | UI Memo](https://www.ui-memo.com/categories/expression-mood/warmth)
  温かみのある雰囲気をWebサイトで演出する表現テクニック4選。揺れる灯火・木のぬくもり・陽だまり・湯気と湯のみの実装デモとコード、AIへの指示プロンプト付き。カフェ・ぬくもり系ブランドに。
- [「清涼感」をWebで表現する - 結露・水面・氷・涼風の演出パターンとAIプロンプト | UI Memo](https://www.ui-memo.com/categories/expression-mood/refreshing)
  清涼感のある涼しげな雰囲気をWebサイトで演出する表現テクニック4選。結露のグラス・水面のコースティクス・氷のきらめき・涼風の実装デモとコード、AIへの指示プロンプト付き。夏・飲料・空調・清涼系ブランドに。

#### [🎬 シーンから引く](https://www.ui-memo.com/categories/expression-scene)

飲食店・車LP・ヘルスケアなど、サイトの業種・用途からふさわしい表現テクニックを逆引き。AIプロンプト語彙集も併記。


### UIラボ

#### [🎨 子供向けUIおもちゃ](https://www.ui-memo.com/categories/kids-ui-toys)

楽しくインタラクティブな子供向けUI要素

- [いろのおもちゃ](https://www.ui-memo.com/categories/kids-ui-toys/iro)
  色のインタラクティブなおもちゃ。いろんな色を選んでお絵かきや色遊びを楽しめる子ども向けUIサンプル。
- [かたちのおもちゃ](https://www.ui-memo.com/categories/kids-ui-toys/katachi)
  形のインタラクティブなおもちゃ。円・三角・四角などの形を使って遊べる子ども向けUIサンプル。
- [かずのおもちゃ](https://www.ui-memo.com/categories/kids-ui-toys/kazu)
  数のインタラクティブなおもちゃ。数字をタップして数を数えたり学んだりできる子ども向けUIサンプル。
- [なまえのおもちゃ](https://www.ui-memo.com/categories/kids-ui-toys/namae)
  名前のインタラクティブなおもちゃ。文字を入力して名前を使ったインタラクションで遊べる子ども向けUIサンプル。
- [おとのおもちゃ](https://www.ui-memo.com/categories/kids-ui-toys/oto)
  音のインタラクティブなおもちゃ。タップやクリックで音を鳴らして楽しめる子ども向けUIサンプル。

#### [🛠️ 生活の便利ツール](https://www.ui-memo.com/categories/life-tools)

日常生活で役立つ便利なツール集

- [カレンダー](https://www.ui-memo.com/categories/life-tools/calendar)
  Webカレンダーの実装サンプル。月間・週間表示・予定管理など、使いやすいカレンダーUIのコンポーネント比較。
- [タイマー](https://www.ui-memo.com/categories/life-tools/timer)
  Webタイマーの実装サンプル。カウントダウン・ストップウォッチ・インターバルタイマーなど便利なタイマーUIの比較。

#### [🎮 UIゲーム](https://www.ui-memo.com/categories/ui-game)

ブラウザで動くインタラクティブなゲームのサンプル集

#### [🐍 Streamlit（Python製UI）](https://www.ui-memo.com/categories/streamlit)

PythonだけでUIが作れるStreamlit。最新ウィジェットを実際に触れるプレイグラウンドと、Reactとの使い分けガイド。

## ライブラリ

全ライブラリ一覧: https://www.ui-memo.com/libraries

### データ可視化

- **recharts** v3.8.1 — React向けのコンポーザブルなチャートライブラリ
- **@nivo/core** v0.99.0 — D3ベースのリッチなデータビジュアライゼーションライブラリ
- **chart.js** v4.5.1 — HTML5 Canvasを使ったシンプルで柔軟なチャートライブラリ
- **react-chartjs-2** v5.3.1 — Chart.js の React ラッパーコンポーネント
- **victory** v37.3.6 — React向けのモジュール式SVGチャートコンポーネントライブラリ
- **@sgratzl/chartjs-chart-boxplot** v4.4.5 — Chart.js 用の箱ひげ図プラグイン
- **chartjs-chart-matrix** v3.0.0 — Chart.js 用のマトリックス（ヒートマップ）チャートプラグイン
- **chartjs-chart-treemap** v3.1.0 — Chart.js 用のツリーマッププラグイン
- **plotly.js-dist-min** v3.7.0 — Plotly.jsの軽量ビルド。ズーム・パン・ホバーなどのインタラクティブ機能が標準装備で科学系・統計系グラフに強い
- **react-plotly.js** v4.0.0 — Plotly.jsのReactラッパー。dynamic importでSSR非対応に対応して使用する
- **echarts** v6.0.0 — Baiduが開発した高機能チャートライブラリ。JSONベースの設定で直感的に記述でき、カスタマイズ性が非常に高い
- **echarts-for-react** v3.0.6 — Apache EChartsのReactラッパー。dynamic importでSSR非対応に対応して使用する
- **apexcharts** v5.10.6 — 20種類以上のチャートタイプを持つモダンなJavaScriptチャートライブラリ。JSONベースの設定で直感的に記述でき、ズーム・パン・ツールチップが標準装備
- **react-apexcharts** v2.1.0 — ApexChartsのReactラッパー。dynamic importでSSR非対応に対応して使用する
- **react-calendar-heatmap** v1.10.0 — GitHub のコントリビューショングラフ風カレンダーヒートマップ
- **d3-sankey** v0.12.3 — D3 のサンキーダイアグラムレイアウトプラグイン
- **d3-force** v3.0.0 — D3 の力学シミュレーションによるネットワークレイアウト
- **react-force-graph** v1.48.2 — force-graph を使った 2D/3D ネットワークグラフ React コンポーネント
- **react-force-graph-2d** v1.29.1 — Canvas ベースの 2D ネットワークグラフ React コンポーネント
- **@mantine/charts** v9.1.1 — Mantineと統合されたチャートライブラリ。Treemap・棒グラフ・折れ線グラフなどを提供

### UIコンポーネント

- **@mui/material** v9.0.0 — Material Design準拠のReact UIコンポーネントライブラリ。Button・TextField・Dialogなど豊富なコンポーネントを提供
- **@mui/x-data-grid** v9.9.0 — Material UIと統合されたデータグリッド。ソート・フィルタ・ページネーション・インライン編集が標準装備
- **@mantine/core** v9.1.1 — フル機能の React コンポーネントライブラリ
- **@mantine/notifications** v9.1.1 — Mantine 向けの通知・トースト表示システム
- **react-fast-marquee** v1.6.5 — CSSアニメーションベースの軽量マーキー（無限横スクロール）ライブラリ
- **antd** v6.3.7 — エンタープライズ向け React UI デザインシステム（Ant Design）
- **@chakra-ui/react** v3.34.0 — アクセシビリティ重視のReact UIライブラリ。colorPalette propでカラーテーマを柔軟に制御できる
- **shadcn/ui** v4.2.0 — コピー&ペーストで使えるReact UIコンポーネント集。Radix UI + Tailwind CSSベース
- **primereact** v10.9.7 — 豊富なコンポーネントを持つ React UI ライブラリ
- **@mantine/carousel** v9.2.1 — Embla Carousel ベースの Mantine 公式カルーセルコンポーネント
- **swiper** v14.0.1 — 最も人気のカルーセル・スライダーライブラリ。モジュラー設計で豊富なエフェクトに対応。v14でランタイム依存ゼロに
- **embla-carousel-react** v8.6.0 — 依存ゼロ・超軽量のヘッドレスカルーセルライブラリ。Mantine・shadcn/uiの内部エンジン
- **keen-slider** v6.8.6 — React Hooks ベースの軽量カルーセルライブラリ。タッチ操作・カスタムプラグイン対応
- **react-loading-skeleton** v3.5.0 — UIライブラリ非依存のスケルトンスクリーン専用ライブラリ。count・circle・SkeletonThemeで複数行や円形プレースホルダを手軽に実装できる

### データ入力・フォーム

- **@mui/x-date-pickers** v9.9.0 — Material UIと統合された日付・時刻ピッカー。アダプタ方式でdayjs/date-fns等を選択。範囲選択はPro限定
- **@mantine/dates** v9.1.1 — Mantineと統合された日付ピッカー。範囲選択・時刻選択・日本語対応が標準装備
- **@tanstack/react-table** v8.21.3 — ヘッドレスなテーブル・データグリッドライブラリ
- **ag-grid-react** v36.0.0 — 高機能なエンタープライズ向けデータグリッド
- **react-datepicker** v9.1.0 — シンプルで再利用可能な日付ピッカーコンポーネント
- **@daypicker/react** v10.0.1 — 柔軟でアクセシブルな日付ピッカーコンポーネント
- **@chatscope/chat-ui-kit-react** v2.1.1 — React 向けのチャット UI コンポーネントキット
- **react-chat-elements** v12.0.18 — React 用チャット UI コンポーネント集
- **react-dropzone** v15.0.0 — HTML5 ドラッグ＆ドロップによるファイルアップロードコンポーネント
- **react-filepond** v7.1.3 — FilePond の React ラッパー。プレビュー付きファイルアップロード
- **react-select** v5.10.2 — Reactで最も広く使われるセレクトボックスライブラリ。単一選択・複数選択・検索・グループ化・非同期読み込みに対応
- **react-hook-form** v7.72.1 — パフォーマンス重視のReactフォームライブラリ。再レンダリングを最小限に抑えたバリデーション管理
- **zod** v4.3.6 — TypeScript向けスキーマバリデーションライブラリ。型推論と実行時バリデーションを両立
- **@hookform/resolvers** v5.2.2 — react-hook-formにZod・Yupなどのバリデーションライブラリを接続するリゾルバー集
- **formik** v2.4.9 — シンプルなAPIのReactフォーム管理ライブラリ。values・errors・handleChangeを一括管理
- **yup** v1.7.1 — JavaScriptオブジェクトのスキーマバリデーションライブラリ。FormikやRHFと組み合わせて使用

### アニメーション

- **framer-motion** v12.38.0 — React 向けのアニメーション・ジェスチャーライブラリ
- **@react-spring/web** v10.0.3 — 物理ベースのアニメーションライブラリ。バネ物理学に基づいた自然な動きを宣言的に記述でき、useSpring / useTransition / useTrail / useChain で多彩なアニメーションパターンに対応
- **gsap** v3.15.0 — 業界標準のJavaScriptアニメーションライブラリ。高パフォーマンス・豊富なイージング・ScrollTriggerなどのプラグインで多彩なアニメーションを実現
- **@gsap/react** v2.1.2 — GSAPのReact統合フック。useGSAPでコンテキストスコープとクリーンアップを自動管理し、contextSafeでイベントハンドラ内のアニメーションも安全に作成できる

### タッチ・ジェスチャー

- **@use-gesture/react** v10.3.1 — ドラッグ・ピンチ・スクロールなどのジェスチャーフック
- **react-swipeable** v7.0.2 — React 向けのスワイプジェスチャーフック

### レイアウト

- **react-resizable-panels** v4.6.4 — キーボード対応のリサイズ可能なパネルレイアウト
- **allotment** v1.20.5 — VS Code 風のリサイズ可能な分割ペインコンポーネント

### シンタックスハイライト

- **shiki** v4.0.2 — VS Code相当の品質を持つサーバーサイドのシンタックスハイライター
- **prismjs** v1.29.0 — 豊富なテーマとプラグインを持つクライアントサイドのシンタックスハイライター
- **highlight.js** v11.11.1 — 言語自動検出に対応した汎用のシンタックスハイライターライブラリ

### その他ユーティリティ

- **date-fns** v4.1.0 — モダンな JavaScript 日付ユーティリティライブラリ

### Python製UI

- **Streamlit** v1.58 — Python製UIフレームワーク。スクリプトを書くだけでウィジェット・チャート・チャットUIをブラウザに描画できる

## 逆引きリファレンス

データ可視化ライブラリのAPIを「やりたいこと」から逆引きできるリファレンス集。

トップページ: https://www.ui-memo.com/reverse-lookup

- [テーマ・カラーの変更](https://www.ui-memo.com/reverse-lookup/theme-color)
  Mantine・Ant Design・shadcn/ui・MUIのテーマ・カラーカスタマイズを横断比較。プライマリーカラー・ダークモード・CSS変数・テーマネストをコード例付きで解説。
- [サイズ・間隔の調整](https://www.ui-memo.com/reverse-lookup/size-spacing)
  Mantine・Ant Design・shadcn/ui・MUIのサイズ・間隔設定を横断比較。サイズバリアント・密度モード・レスポンシブ対応をコード例付きで解説。
- [バリデーション・エラー表示](https://www.ui-memo.com/reverse-lookup/validation)
  Mantine・Ant Design・shadcn/ui・MUIのバリデーション・エラー表示を横断比較。React Hook Form・Zod連携・リアルタイムバリデーションをコード例付きで解説。
- [モーダル・ダイアログの制御](https://www.ui-memo.com/reverse-lookup/modal-dialog)
  Mantine・Ant Design・shadcn/ui・MUIのモーダル・ダイアログ制御を横断比較。開閉制御・アニメーション・フォーカストラップ・ネスト対応をコード例付きで解説。
- [フォームの状態管理](https://www.ui-memo.com/reverse-lookup/form-state)
  Mantine・Ant Design・shadcn/ui・MUIのフォーム状態管理を横断比較。React Hook Form・Zod連携・controlled/uncontrolled・送信状態管理をコード例付きで解説。
- [アイコンの差し替え・カスタマイズ](https://www.ui-memo.com/reverse-lookup/icon)
  Mantine・Ant Design・shadcn/ui・MUIのアイコン設定を横断比較。アイコンライブラリ統合・サイズ変更・色変更・SVGカスタムアイコンをコード例付きで解説。
- [UIコンポーネントのレスポンシブ対応](https://www.ui-memo.com/reverse-lookup/ui-responsive)
  Mantine・Ant Design・shadcn/ui・MUIのレスポンシブ対応を横断比較。ブレークポイント・グリッド・表示切替・useMediaQueryをコード例付きで解説。
- [アクセシビリティ（a11y）](https://www.ui-memo.com/reverse-lookup/accessibility)
  Mantine・Ant Design・shadcn/ui・MUIのアクセシビリティ対応を横断比較。ARIA属性・キーボード操作・フォーカス管理・スクリーンリーダー対応をコード例付きで解説。
- [ツールチップのカスタマイズ](https://www.ui-memo.com/reverse-lookup/tooltip)
  Recharts・ECharts・Plotly.js・Chart.js・Nivo・ApexChartsのツールチップカスタマイズを横断比較。カスタムHTML・フォーマッタ・表示位置制御などをコード例付きで解説。
- [色・スタイルのカスタマイズ](https://www.ui-memo.com/reverse-lookup/color-style)
  Recharts・ECharts・Plotly.js・Chart.js・Nivo・ApexChartsの色・スタイル設定を横断比較。カラーパレット・グラデーション・透明度・条件付き色分けをコード例付きで解説。
- [軸（Axis）の設定](https://www.ui-memo.com/reverse-lookup/axis)
  Recharts・ECharts・Plotly.js・Chart.js・Nivo・ApexChartsの軸設定を横断比較。ラベルフォーマット・対数スケール・複数軸・グリッド線スタイルをコード例付きで解説。
- [レスポンシブ対応](https://www.ui-memo.com/reverse-lookup/responsive)
  Recharts・ECharts・Plotly.js・Chart.js・Nivo・ApexChartsのレスポンシブ対応を横断比較。コンテナ追従・アスペクト比維持・リサイズ対応をコード例付きで解説。
- [アニメーション・トランジション](https://www.ui-memo.com/reverse-lookup/animation)
  Recharts・ECharts・Plotly.js・Chart.js・Nivo・ApexChartsのアニメーション設定を横断比較。初期描画・データ更新トランジション・イージングをコード例付きで解説。
- [凡例（Legend）の配置・スタイル](https://www.ui-memo.com/reverse-lookup/legend)
  Recharts・ECharts・Plotly.js・Chart.js・Nivo・ApexChartsの凡例設定を横断比較。配置・カスタムアイコン・系列トグル・スクロール対応をコード例付きで解説。
- [データラベルの表示](https://www.ui-memo.com/reverse-lookup/data-label)
  Recharts・ECharts・Plotly.js・Chart.js・Nivo・ApexChartsのデータラベル設定を横断比較。値の表示・位置制御・フォーマッタ・重なり防止をコード例付きで解説。
- [クリックイベント・インタラクション](https://www.ui-memo.com/reverse-lookup/event)
  Recharts・ECharts・Plotly.js・Chart.js・Nivo・ApexChartsのイベントハンドリングを横断比較。クリック・ホバー・ブラシ選択・ズームをコード例付きで解説。
- [グリッド線のカスタマイズ](https://www.ui-memo.com/reverse-lookup/grid)
  Recharts・ECharts・Plotly.js・Chart.js・Nivo・ApexChartsのグリッド線設定を横断比較。表示制御・線スタイル・リファレンスライン・ストライプをコード例付きで解説。

## バイブコーディング

AIコーディングツール（Cursor・Claude Code等）初心者向けのガイド集。

トップページ: https://www.ui-memo.com/vibe-coding

- [UI部位名称ガイド（パソコン）](https://www.ui-memo.com/vibe-coding/ui-anatomy)
  ヘッダー・サイドバー・フッターなど、AIコーディングツールへ的確に指示するために知っておきたいWebページのUI部位名称をワイヤーフレーム図で解説するガイド。
- [UI部位名称ガイド（スマートフォン）](https://www.ui-memo.com/vibe-coding/ui-anatomy-mobile)
  ヘッダー・ボトムナビ・ドロワーなど、AIコーディングツールへ的確に指示するために知っておきたいスマートフォンUI部位名称をワイヤーフレーム図で解説するガイド。
- [AIへの指示で詰まりやすいレイアウト用語](https://www.ui-memo.com/vibe-coding/layout-terms)
  Flexbox・Grid・position・z-indexなど、AIへの指示で使うと伝わりやすくなるレイアウト・配置系のCSS用語を解説するガイド。知らないとAIへの指示が遠回りになる用語を厳選しています。
- [AIへの指示で詰まりやすいレスポンシブ用語](https://www.ui-memo.com/vibe-coding/responsive-terms)
  viewport・ブレークポイント・メディアクエリ・コンテナクエリなど、AIへの指示で使うと伝わりやすくなるレスポンシブデザイン系の用語を解説するガイド。知らないとAIへの指示が遠回りになる用語を厳選しています。
- [AIへの指示で詰まりやすいインタラクション用語](https://www.ui-memo.com/vibe-coding/interaction-terms)
  hover・focus・debounce・transitionなど、AIへの指示で使うと伝わりやすくなるインタラクション・動作系の用語を解説するガイド。
- [AIへの指示で詰まりやすいReact基礎用語](https://www.ui-memo.com/vibe-coding/react-terms)
  コンポーネント・props・state・フックなど、AIへの指示で使うと伝わりやすくなるReact基礎用語を解説するガイド。知らないとAIへの指示が遠回りになる用語を厳選しています。

<!-- manual-footer -->
## 使用技術

- Next.js（App Router）
- TypeScript
- Tailwind CSS v4
- React
<!-- /manual-footer -->

---
※ このファイルはスクリプトで自動生成されます（手動セクションを除く）
※ 最終更新: 2026-07-14