本文へ移動
Neumorphism UI
ドキュメントスタイリングチャートテンプレート
—
JA
English한국어简体中文日本語
8件のテンプレート

テンプレート

例を試してから、必要な画面のソースをshadcnで導入できます。

成果ダッシュボード

選択した期間と流入経路の売上、訪問数、転換率を確認します。

2026-09-17 – 2026-09-30 · 記録日数: 14 / 14

売上
$60,644.00
訪問
23,778
コンバージョン訪問
1,210
転換率
5.09%

売上と目標

日別売上を通貨で表示します。破線は目標です。

売上: $60,644.00 · 目標: $75,810.00

正確なデータを見る
売上と目標
日付売上目標
2026-09-17$3,682.00$5,064.00
2026-09-18$3,842.00$5,118.00
2026-09-19$4,292.00$5,172.00
2026-09-20$4,542.00$5,226.00
2026-09-21$3,640.00$5,280.00
2026-09-22$4,040.00$5,334.00
2026-09-23$4,142.00$5,388.00
2026-09-24$4,642.00$5,442.00
2026-09-25$4,842.00$5,496.00
2026-09-26$3,890.00$5,550.00
2026-09-27$4,340.00$5,604.00
2026-09-28$4,550.00$5,658.00
2026-09-29$5,000.00$5,712.00
2026-09-30$5,200.00$5,766.00

流入経路の比較

選択期間の経路別合計。棒はゼロから始まります。

訪問: 23,778

正確なデータを見る
流入経路の比較
流入経路訪問コンバージョン訪問転換率
Organic9,4703864.08%
Direct8,0114205.24%
Referral6,2974046.42%

訪問の転換率

コンバージョン訪問数を訪問数で割ります。縦軸は0–100%に固定します。

5.09% · 1,210 / 23,778

正確なデータを見る
訪問の転換率
日付訪問コンバージョン訪問転換率
2026-09-171,557734.69%
2026-09-181,547774.98%
2026-09-191,622865.3%
2026-09-201,612915.65%
2026-09-211,602724.49%
2026-09-221,677804.77%
2026-09-231,667834.98%
2026-09-241,742935.34%
2026-09-251,732975.6%
2026-09-261,722774.47%
2026-09-271,797864.79%
2026-09-281,787915.09%
2026-09-291,8621005.37%
2026-09-301,8521045.62%

欠測日はゼロではなく空白です。訪問数ゼロの転換率は未定義です(—)。

合計は提供された記録のみで完全性を保証しません。期間は最後に提供された日付を基準にします。

サンプルデータ · 2026年9月 · USD。実際のサービスには接続されていません。

分析ダッシュボード

期間と流入経路別の売上・転換率を比較し、元データを表やCSVで確認できます。

@neumorphism-ui/template-analyticsテンプレートを見る

アカウント設定

プロフィールと通知設定を変更します。

公開プロフィール通知設定
AL

Alex Kim

alex@example.com

ワークスペースのプロフィール

公開プロフィール

チームにわかりやすい名前を使ってください。

アカウントとワークスペースのお知らせに使います。

240文字以内で紹介してください。

53/240

通知設定

メンション、担当と重要な変更を通知します。

プロジェクトの更新を週ごとにまとめて受け取ります。

すべて保存済み

ローカル動作例です。再読み込みで初期化されます。実際の保存先を onSave に接続してください。

設定とプロフィール

プロフィールと通知設定を編集します。デモの変更は再読み込みでリセットされます。

@neumorphism-ui/template-settingsテンプレートを見る

タスク一覧

タスクのタイトル、担当者、状態、期限を管理します。

すべてのデータ
12
進行中
6
下書き
4

データ

12 件の結果 · 0 件選択
データ
状態操作
Archived campaignMina保管済み2026-08-20
Content planningMina下書き2026-10-15
Customer onboardingJun進行中2026-10-08
Keyboard navigation auditJun進行中2026-10-14
Legacy welcome screenJun保管済み2026-09-01
ページ 1 / 3

最近の変更

この画面での変更がここに表示されます。

ローカル例です。再読み込みで初期化されます。onSave と onDelete にサービスを接続してください。

データ管理

タスクを検索し、担当者と期限を管理します。デモは再読み込みでリセットされます。

@neumorphism-ui/template-data-managerテンプレートを見る
N

Neumorphism UI

ドキュメント、コンポーネントの使用例、ソースコード。

リンク

5 件のリンク

  • ドキュメントhttps://neumorphism-ui.andongmin.com/ja/docs新しいタブで開きます
  • コンポーネントhttps://neumorphism-ui.andongmin.com/ja/components新しいタブで開きます
  • GitHubhttps://github.com/andongmin94/neumorphism-ui新しいタブで開きます
  • 問題を報告https://github.com/andongmin94/neumorphism-ui/issues新しいタブで開きます
  • メールhello@example.com

連絡先

hello@example.com

メールアドレスはサンプルです。お問い合わせは受け付けていません。

リンクハブ

プロフィールの下にリンクを分類し、連絡先をコピーできます。

@neumorphism-ui/template-link-hubテンプレートを見る
Sora Han
主な実績連絡先

独立した仕事 / ソウル

Sora Han

プロダクトデザイナー · フロントエンド開発者

予定管理、レポート、在庫管理のツールをデザインしています。

画面設計から操作の試作、Reactでの実装まで担当します。

主な実績

配車待ち一覧プロダクトデザイン · React2026

朝のシフト前に、変更された配送ルートへ担当者を割り当てる画面です。

課題
ルート変更と担当者の割り当てが別々のメッセージで届いていました。
アプローチ
ルート、担当者、未解決の配送先を同じ行に配置しました。
提供したもの
待ち一覧、ルート詳細、担当者の変更フォーム。
成果
試作画面では、担当者を選ぶまで未割り当てのルートが一覧に残ります。
月次決算の確認プロダクトデザイン2025

勘定ごとの合計と、その元となる明細を確認する月次レポートです。

課題
不明な残高を調べるには、レポートを離れる必要がありました。
アプローチ
勘定の行と明細をつなぎ、比較対象の期間を表示しました。
提供したもの
勘定一覧、期間選択、明細画面。
成果
試作画面で、合計に含まれる明細と未確認の項目を区別できます。
共有機材の一覧Webデザイン · React2025

カメラ、マイク、照明の貸出状況を検索する一覧です。

課題
貸出状況と機材一覧は、別々の文書に記録されていました。
アプローチ
各機材の横に貸出状況を表示し、用途で分類しました。
提供したもの
機材一覧、分類フィルター、機材詳細。
成果
試作画面で、利用可能な機材と貸出中の機材を区別できます。

連絡先

メール

© 2026 Sora Han

先頭へ

この例の人物とプロジェクトは架空のものです。

ポートフォリオ

プロフィール、プロジェクトの説明、連絡先を掲載します。

@neumorphism-ui/template-portfolioテンプレートを見る

最新の記事

プロダクト、デザイン、フロントエンドの実務から得たメモです。

3 件

  1. 2026-09-18プロダクト · 4 分で読めます

    保存失敗後の下書きを復元する

    編集したタイトルと本文を保持し、エラーを表示して保存を再試行します。

  2. 2026-09-10開発 · 6 分で読めます

    ダイアログを閉じた後にフォーカスを戻す

    Escape、閉じる操作、開いたボタンへのフォーカス復帰を確認します。

  3. 2026-08-29デザイン · 5 分で読めます

    小さなコントロールのアイコンを揃える

    小さなボタン、メニューの印、開閉コントロールで同じアイコン領域を使います。

ブログアーカイブ

タイトルやトピックで記事を探し、日付順に並べ替えます。

@neumorphism-ui/template-blogテンプレートを見る
すべての記事

開発

保存に失敗しても下書きを残す

保存リクエストが失敗したときに、編集画面で保持する内容です。

2026年9月12日·4分で読めます

保存に失敗しても、編集したタイトル、概要、本文を消してはいけません。下書きをフォームに残し、保存ボタンの近くにエラーを表示します。

下書きと保存済みの内容を分ける

編集画面を開いたら、保存済みの記事とは別に編集用の下書きを用意します。入力は下書きだけを変更し、記事を保存済みにはしません。

保存コールバックが成功してから、保存済みの内容を更新します。失敗した場合は、下書きと前回の保存内容をどちらも保持します。

再入力せずにやり直す

リクエストが失敗した後も、項目を修正したり、同じ下書きのまま保存を再試行したりできるようにします。

  • 入力欄を空にせず、保存エラーを表示します。
  • リクエストが終わったら、保存ボタンを再び使えるようにします。
  • 未保存の下書きを破棄する前に確認します。
すべての記事先頭へ

ブログ記事

概要、公開情報、見出しを備えた記事の詳細画面です。

@neumorphism-ui/template-blog-postテンプレートを見る

記事管理

下書きを編集し、プレビューで確認して保存します。

全記事
3
公開済み
2
未保存
0

記事を編集

更新 2026-09-18

プレビュー
公開済み

9月の編集機能アップデート

下書きの復元と記事の確認リスト。

保存に失敗しても現在の下書きを保持します。タイトルや本文を再入力せずに再試行できます。

ローカルUIの例です。実際の保存は onSave に接続してください。

ローカル CMS

下書きの編集、プレビュー、保存を試せます。デモは再読み込みでリセットされます。

@neumorphism-ui/template-cmsテンプレートを見る
Neumorphism UI56 UI · 16 blocks · 80 registry items

shadcn 互換のソース Registry

GitHubCredits