Claudeの使い方・活用術を実例で解説｜PSDコーディング・Webデザイン・WordPressプラグイン・アプリ開発まで

# psd_extract.py : PSDのレイヤー情報をJSONに書き出す
# 事前準備: pip install psd-tools
import json
import sys
from psd_tools import PSDImage
psd_path = sys.argv[1] if len(sys.argv) > 1 else "design/top.psd"
psd = PSDImage.open(psd_path)
# 全体のプレビュー画像を書き出す（Claudeが見た目を確認するため）
psd.composite().save("design/preview.png")
layers = []
for layer in psd.descendants():
    if not layer.is_visible():
        continue  # 非表示レイヤーは無視
    left, top, right, bottom = layer.bbox
    info = {
        "name": layer.name,
        "kind": layer.kind,  # type=テキスト / pixel=画像 / group=グループ など
        "x": left,
        "y": top,
        "width": right - left,
        "height": bottom - top,
    }
    if layer.kind == "type":
        info["text"] = layer.text  # テキストレイヤーの文字列
    layers.append(info)
with open("design/layers.json", "w", encoding="utf-8") as f:
    json.dump({"canvas": [psd.width, psd.height], "layers": layers}, f, ensure_ascii=False, indent=2)
print(f"{len(layers)} layers exported")

{
  "canvas": [1440, 4200],
  "layers": [
    { "name": "logo", "kind": "pixel", "x": 170, "y": 28, "width": 140, "height": 36 },
    { "name": "gnav_contact", "kind": "type", "x": 1150, "y": 36, "width": 120, "height": 20,
      "text": "お問い合わせ" },
    { "name": "hero_title", "kind": "type", "x": 170, "y": 260, "width": 420, "height": 120,
      "text": "Web制作を、\nやさしく。" },
    { "name": "hero_img", "kind": "pixel", "x": 730, "y": 180, "width": 560, "height": 420 }
  ]
}

:root {
  --color-main: #3e8685;   /* PSDのメインカラー */
  --color-text: #1a1a1a;
  --content-width: 1100px;
  --fz-h1: clamp(28px, 4vw, 40px); /* スマホ28px〜PC40px */
}
.inner { max-width: var(--content-width); margin: 0 auto; padding: 0 20px; }
/* ヘッダー：ロゴとナビを左右に配置 */
.site-header .inner { display: flex; align-items: center; justify-content: space-between; height: 92px; }
.gnav ul { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.gnav a { color: var(--color-text); text-decoration: none; font-weight: 500; }
.gnav-cta { padding: 10px 20px; border-radius: 999px; background: var(--color-main); color: #fff !important; }
/* ファーストビュー：テキストと画像を2カラムに */
.fv { padding: 80px 0 100px; }
.fv-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.fv-title { font-size: var(--fz-h1); line-height: 1.4; margin: 0 0 20px; }
.fv-lead { color: #555; line-height: 1.9; margin: 0 0 32px; }
.fv-btn { display: inline-block; padding: 16px 40px; border-radius: 999px; background: var(--color-main); color: #fff; text-decoration: none; font-weight: 700; }
.fv-img { width: 100%; height: auto; border-radius: 12px; }
/* スマホ：1カラムに切り替え */
@media (max-width: 768px) {
  .gnav { display: none; } /* ハンバーガーメニューは次のステップで追加 */
  .fv-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* デザインガイド（Claudeにまとめさせた例） */
:root {
  /* カラー */
  --c-base: #faf7f2;    /* 背景：生成り */
  --c-text: #3b302a;    /* 文字：こげ茶 */
  --c-accent: #b8860b;  /* アクセント：からし色 */
  --c-line: #e6dfd3;    /* 罫線 */
  /* 文字サイズ（画面幅に合わせて最小〜最大で可変） */
  --fz-h1: clamp(28px, 5vw, 48px);
  --fz-h2: clamp(22px, 3vw, 32px);
  --fz-body: clamp(15px, 1.2vw, 17px);
  /* 余白（8の倍数で統一） */
  --sp-s: 8px;
  --sp-m: 24px;
  --sp-l: 64px;
  --sp-xl: 120px;
  /* 角丸・影 */
  --radius: 12px;
  --shadow: 0 8px 24px rgba(59, 48, 42, .08);
}

# ① pluginsフォルダへ移動（「mysite」は自分のサイト名に変更）
cd "$HOME\Local Sites\mysite\app\public\wp-content\plugins"
# ② 正しい場所にいるか確認（akismet などのフォルダ名が表示されればOK）
ls
# ③ Claude Codeを起動
claude

uni-reading-time/
├─ uni-reading-time.php   … プラグイン本体
└─ css/
   └─ reading-time.css    … 見た目（デザイン）

<?php
/**
 * Plugin Name: Uni Reading Time
 * Description: 記事の冒頭に「この記事は約○分で読めます」を表示します。ショートコード [reading_time] でも使えます。
 * Version:     1.0.0
 * Author:      Your Name
 * License:     GPL-2.0-or-later
 * Text Domain: uni-reading-time
 */
// WordPress以外から直接アクセスされたら終了（セキュリティ対策）
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
/**
 * 本文から読了時間（分）を計算する
 * 日本語は1分あたり約500文字で計算（フィルターで変更可能）
 */
function urt_get_minutes( $post_id = null ) {
	$content = get_post_field( 'post_content', $post_id ? $post_id : get_the_ID() );
	$text    = wp_strip_all_tags( strip_shortcodes( $content ) );
	$length  = mb_strlen( preg_replace( '/\s+/u', '', $text ) );
	$per_min = (int) apply_filters( 'urt_chars_per_minute', 500 );
	return max( 1, (int) ceil( $length / max( 1, $per_min ) ) );
}
/**
 * 表示用のHTMLを作る
 */
function urt_render( $post_id = null ) {
	$minutes = urt_get_minutes( $post_id );
	return sprintf(
		'<p class="urt-reading-time">この記事は約<strong>%s分</strong>で読めます</p>',
		esc_html( $minutes )
	);
}
/**
 * 投稿ページの本文の先頭に自動で追加する
 */
function urt_add_to_content( $content ) {
	if ( is_singular( 'post' ) && in_the_loop() && is_main_query() ) {
		return urt_render() . $content;
	}
	return $content;
}
add_filter( 'the_content', 'urt_add_to_content' );
/**
 * ショートコード [reading_time]
 */
function urt_shortcode() {
	return urt_render();
}
add_shortcode( 'reading_time', 'urt_shortcode' );
/**
 * 見た目用のCSSを読み込む（投稿ページのみ）
 */
function urt_enqueue_style() {
	if ( is_singular( 'post' ) ) {
		wp_enqueue_style( 'urt-style', plugin_dir_url( __FILE__ ) . 'css/reading-time.css', array(), '1.0.0' );
	}
}
add_action( 'wp_enqueue_scripts', 'urt_enqueue_style' );

/* 読了時間の表示（ピル型のラベル） */
.urt-reading-time {
  display: inline-block;
  margin: 0 0 24px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #e6f4f4;
  color: #326f6e;
  font-size: 14px;
}
.urt-reading-time strong {
  font-weight: 700;
}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mini Todo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="app">
    <h1 class="app-title">今日のタスク</h1>
    <form id="todo-form" class="todo-form">
      <input id="todo-input" type="text" placeholder="やることを入力" required>
      <button type="submit">追加</button>
    </form>
    <p class="todo-count"><span id="todo-left">0</span> 件残っています</p>
    <ul id="todo-list" class="todo-list"></ul>
  </main>
  <script src="app.js"></script>
</body>
</html>

body { margin: 0; background: #f4f7f7; font-family: "Noto Sans JP", sans-serif; color: #1a1a1a; }
.app { max-width: 480px; margin: 48px auto; padding: 32px 24px; background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(0, 0, 0, .06); }
.app-title { margin: 0 0 20px; font-size: 22px; }
.todo-form { display: flex; gap: 8px; }
.todo-form input { flex: 1; padding: 12px; border: 1px solid #d0d7d7; border-radius: 8px; font-size: 16px; }
.todo-form button { padding: 0 20px; border: none; border-radius: 8px; background: #3e8685; color: #fff; font-weight: 700; cursor: pointer; }
.todo-count { margin: 16px 0 8px; font-size: 13px; color: #6b6b6b; }
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-item { display: flex; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1px solid #eef2f2; }
.todo-item span { flex: 1; }
.todo-item.is-done span { color: #aaa; text-decoration: line-through; }
.todo-del { border: none; background: none; color: #c0392b; cursor: pointer; font-size: 13px; }

// Mini Todo : localStorage に保存するシンプルなタスク管理
const STORAGE_KEY = 'mini-todo';
const form = document.getElementById('todo-form');
const input = document.getElementById('todo-input');
const list = document.getElementById('todo-list');
const left = document.getElementById('todo-left');
// 保存済みのタスクを読み込む（なければ空の配列）
let todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
function save() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
}
// タスク一覧を描き直す
function render() {
  list.innerHTML = '';
  todos.forEach((todo) => {
    const li = document.createElement('li');
    li.className = 'todo-item' + (todo.done ? ' is-done' : '');
    const check = document.createElement('input');
    check.type = 'checkbox';
    check.checked = todo.done;
    check.addEventListener('change', () => {
      todo.done = check.checked;
      save();
      render();
    });
    const text = document.createElement('span');
    text.textContent = todo.text; // textContent で安全に表示（XSS対策）
    const del = document.createElement('button');
    del.textContent = '削除';
    del.className = 'todo-del';
    del.addEventListener('click', () => {
      todos = todos.filter((t) => t.id !== todo.id);
      save();
      render();
    });
    li.append(check, text, del);
    list.appendChild(li);
  });
  left.textContent = todos.filter((t) => !t.done).length;
}
// 追加ボタン（フォーム送信）を押したとき
form.addEventListener('submit', (e) => {
  e.preventDefault(); // ページの再読み込みを止める
  const text = input.value.trim();
  if (!text) return;
  todos.push({ id: Date.now(), text, done: false });
  input.value = '';
  save();
  render();
});
render();

.claude/skills/
└─ wp-plugin-scaffold/
   ├─ SKILL.md           … スキル本体（必須）
   └─ templates/
      └─ plugin-main.php … 雛形ファイル（任意）