AI向け説明 AI Description

`S-008` は検索結果やリストが0件の場合に表示する「エンプティステート」です。単に「データなし」と伝えるだけでなく、イラスト（アイコン）、説明文、そして次の行動を促すCTAボタンをセットにして配置します。

`S-008` is an Empty State UI displayed when no data exists (e.g., zero search results). It combines an illustration (icon), descriptive text, and a Call-to-Action (CTA) button to guide usage.

調整可能パラメータ Adjustable Parameters

• --icon-size — アイコンの大きさIcon size
• --icon-color — アイコンの色Icon color

実装 Implementation

HTML + CSS

<div class="empty-state">
  <div class="icon">📂</div>
  <h3>No Data</h3>
  <p>Description...</p>
  <button>Create</button>
</div>

<style>
:root { --icon-size: 120px; --icon-color: #9ca3af; }
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px; }
.icon { width: var(--icon-size); height: var(--icon-size); color: var(--icon-color); font-size: calc(var(--icon-size) * 0.4); margin-bottom: 24px; animation: float 3s infinite ease-in-out; }
@keyframes float { 50% { transform: translateY(-10px); } }
</style>

React (JSX + CSS)

// react/S-008.jsx
import './S-008.css';

export default function EmptyState({ icon = '📂', title, description, actionText, onAction }) {
  return (
    <div className="empty-container">
      <div className="empty-icon">{icon}</div>
      <h3 className="empty-title">{title}</h3>
      <p className="empty-description">{description}</p>
      {actionText && (
        <button className="empty-action" onClick={onAction}>{actionText}</button>
      )}
    </div>
  );
}

/* react/S-008.css */
/* S-008: React styles */
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  border: 1px solid #e0e4f0;
  border-radius: 16px;
}

.empty-icon {
  width: 120px;
  height: 120px;
  background: #f5f7ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 48px;
  color: #5c6184;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

.empty-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px;
  color: #1d2242;
}

.empty-description {
  color: #5c6184;
  max-width: 300px;
  margin: 0 0 24px;
  line-height: 1.6;
}

.empty-action {
  background: #5c6ac4;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.empty-action:hover {
  background: #4f5cb3;
  transform: translateY(-2px);
}