Shoma-DS/team-info（ちょっと良いイラスト取得スキル）

Tyoudoii Illust Fetcher スキル

目標

• サイト自体がJSレンダリングでスクレイピングしづらい場合、tyoudoii-illust の WordPress REST API を利用する。
• 絵文字やテキストアイコン、プレースホルダー画像を、ページデザインに合うダウンロード可能なイラストに置き換える。
• 周辺のレイアウトやカードUIも修正が必要な場合は、.agent/skills/web-design/frontend-design/SKILL.md と組み合わせて使用する。

ワークフロー

フェーズ 1: 必要なイラストを洗い出す

1. HTML / JSX / コンポーネント内の絵文字、テキストアイコン、仮画像を一覧化する。
2. 各箇所に必要なイラストのテーマをキーワード化する。
3. キーワードはまず意味が通る短いフレーズにする。
4. ダウンロード先ディレクトリを先に決める。

例:

• worry_man
• robot
• handshake
• {project}/images/
• {project}/public/images/

フェーズ 2: WordPress REST API で検索

1. まず REST API を使って候補投稿を探す。
2. エンドポイント:

https://tyoudoii-illust.com/wp-json/wp/v2/posts?search={keyword}&_embed=true&per_page=5

3. レスポンスの _embedded["wp:featuredmedia"][0].source_url からサムネイルURLを取得する。
4. サムネイルURLが取得できない場合は、日本語キーワードと英語キーワードを切り替えて再検索する。

サムネイルURL例:

https://tyoudoii-illust.com/wp-content/uploads/2024/01/example_サムネ.png

フェーズ 3: 実際のイラストURLを導出

1. サムネイルURL末尾の _サムネ.png を _color.png に置換して本命URLを作成する。
2. まず HTTP 200 になるかを確認する。

curl -s -o /dev/null -w "%{http_code}" "{candidate_url}"

3. _color.png が 404 の場合は次を順に試す。

• _カラー.png
• _illust.png

4. どれも 200 にならない場合は、別のキーワードで API 検索に戻る。

フェーズ 4: ダウンロード

1. プロジェクト内で意味が通る英語のファイル名にする。
2. 例:

• telework.png
• robot.png
• support.png

3. ダウンロード例:

curl -L "{url}" -o "{project}/images/{semantic_name}.png"

フェーズ 5: HTML と CSS への組み込み

1. 絵文字やテキストアイコンをローカル画像に置き換える。

<div class="icon-container">
  <img src="images/{name}.png" alt="{説明}">
</div>

2. カードや特徴一覧では、すべてのアイコンに同じコンテナサイズを使う。
3. 画像自体の縦横比は object-fit: contain で吸収する。

.icon-container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

品質ルール

• WebFetch やレンダリング済みHTMLの取得に固執せず、まず REST API を使う。
• サムネイルURLが取得できなかった場合は、日本語/英語の類義語で再試行する。
• _color.png が 404 の場合は _カラー.png と _illust.png も確認する。
• 同じカード群でアイコンコンテナサイズを混在させない。
• alt 属性は省略しない。
• 保存ファイル名はプロジェクト内で意味が通る英語名にする。
• 商用利用時は tyoudoii-illust.com の最新利用規約を必ず確認する。無料・商用可の前提で進めても、最終確認は省略しない。

連携

• themeisle-illustration-fetcher も候補に入る場合は、自動で選ばず必ずユーザーにどちらを使うか確認する。
• UI全体の改修やセクション設計も必要な場合は、frontend-design を先に読み、アイコン差し替え工程だけこのスキルで処理する。
• 既存デザインがある場合は、その余白・カード比率・画像サイズ方針に合わせて .icon-container の寸法だけ調整する。

検証

1. 新規Webプロジェクトでこのスキルを呼び出し、キーワードから API 検索を開始する。
2. 候補URLの 200 確認、PNG ダウンロード、HTML 組み込みまで一通り完了することを確認する。
3. ブラウザで全カード画像が同一サイズに揃って見えるか目視確認する。