# Web Artifacts Builder Jp
> Simplified Japanese web artifacts builder skill for creating single-file HTML applications with Japanese UI components, i18n settings, and responsive design. Triggers on requests for Webアーティファクト, 単一HTMLファイル, HTMLツール作成, 日本語Webアプリ.
- Skill: `majiayu000/web-artifacts-builder-jp` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/web-artifacts-builder-jp`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/web-artifacts-builder-jp/raw
- Safety review: pending (external: skill-scanner PASS, skillspector CAUTION)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/web-artifacts-builder-jp
---
# Webアーティファクト構築支援スキル
## 概要
単一HTMLファイルで完結するWebアーティファクト（ミニアプリ・ツール・デモ）の構築を支援するスキルです。HTML + CSS + JavaScript を1ファイルにまとめ、日本語UIコンポーネントやi18n設定を組み込みます。
## 基本構成
```html
アプリ名
```
### 単一ファイルの原則
- 外部ファイルへの依存を最小限にする
- CDN経由のライブラリ読み込みは許可（Tailwind CSS, Alpine.js 等）
- 画像はBase64エンコードまたはSVGインラインで埋め込む
## 日本語UIコンポーネント
### 和暦日付ピッカー
```javascript
function toWareki(date) {
return new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
era: 'long', year: 'numeric', month: 'long', day: 'numeric'
}).format(date);
}
// 例: "令和8年3月4日"
```
### 都道府県セレクター
```html
```
### 郵便番号検索フォーム
```javascript
async function searchAddress(zipcode) {
const code = zipcode.replace("-", "");
const res = await fetch(
`https://zipcloud.ibsnet.co.jp/api/search?zipcode=${code}`
);
const data = await res.json();
if (data.results) {
const addr = data.results[0];
return {
prefecture: addr.address1, // 都道府県
city: addr.address2, // 市区町村
town: addr.address3 // 町域
};
}
return null;
}
```
### ふりがな自動入力
```html
```
## i18n設定
### 必須のHTML設定
```html
```
### 日本語ロケール対応
```javascript
// 日付フォーマット
new Intl.DateTimeFormat('ja-JP').format(date); // "2026/3/4"
// 数値フォーマット（カンマ区切り）
new Intl.NumberFormat('ja-JP').format(1234567); // "1,234,567"
// 通貨フォーマット
new Intl.NumberFormat('ja-JP', {
style: 'currency', currency: 'JPY'
}).format(1000); // "￥1,000"
```
## フォント読み込み
### Google Fonts: Noto Sans JP
```html
```
### フォント読み込みの注意点
- `display=swap` で FOIT（Flash of Invisible Text）を防止
- 使用するウェイトのみを指定してファイルサイズを削減
- `preconnect` でDNS解決を先行させる
## レスポンシブ対応の基本設定
```css
/* ベースのレスポンシブ設定 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: "Noto Sans JP", sans-serif;
line-height: 1.8;
padding: 1rem;
max-width: 800px;
margin: 0 auto;
}
/* モバイルファースト: タブレット以上 */
@media (min-width: 768px) {
body { padding: 2rem; }
}
/* 日本語テキストの折り返し */
p, li, td {
word-break: normal;
overflow-wrap: break-word;
}
/* フォームの入力欄（iOSでのズーム防止: 16px以上） */
input, select, textarea {
font-size: 16px;
}
```
## 生成時の確認事項
1. **用途**: ツール / デモ / プロトタイプ / ダッシュボード
2. **外部依存**: CDN利用の可否、使用ライブラリの指定
3. **データ永続化**: localStorage / IndexedDB の使用有無
4. **対象デバイス**: PC中心 / モバイル中心 / 両対応