図解作成が驚くほど楽に！Claude SkillでSVG自動生成 | SIOS Tech. Lab

企業テック

はじめに

ども！Claude Code を執筆に贅沢活用している龍ちゃんです。気づいたら3年でブログを200本書いていて、そろそろブログの本数をカウントするのを取りやめですね（笑）。

最近は週に5本くらいブログを書くことが習慣づいているんですが、これだけブログを書いてると、だんだん図を作るのが億劫になってしまうんですよね。Claude Code のおかげで Mermaid での図解作成はすごく短縮できました（参考：ClaudeでMermaid図作成を自動化！2時間→5分の劇的時短術【Live Editor活用】）。

今月は社内でそういう環境を提供する活動を始めていまして、その過程で「今まで SVG で作ることを諦めていたけど、もうちょっと頑張ってみようかな」ってところでスキル化したりしてます。

正直に言うと、完璧に動くものはまだできてないんですよね。 でも、比較的質の高い図を作れるようになったので、その方法を共有します。

作ってみて感じたこと

完璧なものを一発で作ることは不可能でした。ライトなブログなら そのまま使えますが、ちゃんとした図を作るなら Figma などの専用ツールが必要です。

それでも、図解作成時間を67%削減（45分 → 15分）できたので、方法と課題・解決策を共有します。

この記事で伝えたいこと

完璧なものは絶対一発で作れません。 でも、現状の Skill を共有するので、一緒にベストプラクティスを模索していきましょう！

この記事で扱う内容:

  • SVG 図解自動生成 Skill の実装
  • 実運用で遭遇した問題点と対処法（重要！）
  • Mermaid.js との使い分け

🎯 Claude Code Skill とは？

.claude/skills/ ディレクトリに Markdown 形式のプロンプトファイルを配置することで、Claude がタスクを自動実行できる機能です。

Skill のメリット:

  • 一度作成すれば繰り返し使える
  • キーワードで自動トリガー
  • チーム全体で共有可能

📝 Note:

SVG 図解自動生成 Skill の実装

なぜ SVG を選んだのか？

一番の理由はFigmaで後から人力編集できるって点ですね。

アプローチ 用途
Mermaid.js システム図（クラス図、シーケンス図）→ 高精度で素早く生成
SVG 直接生成 概念図、ビジュアル重視の図解 → デザインの完全制御が可能
HTML + CSS インタラクティブな図解

結論: デザインの自由度とアクセシビリティを重視し、SVG 直接生成を選択しました。Mermaid だと無機質になるケースで SVG が活躍します。

📊 図解デザインの基本原則

正直に言うと、僕はデザイナーではないのでデザインパターンやコントラストの知識はないんですよね。 そこで、いったん Claude に調査を依頼して、それを Skill に取り込むという手法を採用しています。

以下は Claude に調査させて得られたデザインパターンです：

  • 1. C4 Model（階層化）
    • Context: システム全体の概念図
    • Container: サービス間の相互作用
    • Component: 個別コンポーネントの詳細
    • Code: クラス図・シーケンス図（Mermaid が得意）
  • 2. 60-30-10 ルール（色使い）
    • 60%: 背景、30%: 矩形、10%: アクセント（矢印）
  • 3. 視覚的ヒエラルキーの7原則
    • Size / Color / Contrast / Alignment / Repetition / Proximity / Whitespace（padding 50px の根拠）

ポイント: デザインの専門知識がなくても、Claude に「効果的な図解デザインのベストプラクティスを調査して」と依頼すれば、これらの原則を教えてくれます。それを Skill のプロンプトに組み込むことで、質の高い図解が生成できるようになるんですよね。

Skill ファイルの構成

.claude/skills/diagram-generator-svg.md を作成し、以下の要素を含めます：

主要な指示内容:

  1. Material Icons の統一使用（desktop_windows、settings、storage など）
  2. WCAG Level AA 準拠（コントラスト比 4.5:1）
  3. レイアウトガイドライン（padding 50px、font-size 16-32px）
  4. アクセシビリティ対応（</code> と <code><desc/></code> 要素）</li> </ol> <p class="is-style-sango-paragraph-idea-alt">SVG 図解生成 Skill の完全版は <a target="_blank" href="https://gist.github.com/Ryunosuke-Tanaka-sti/721fc925eac69fa9f19f478e000454d2" target="_blank" rel="noopener" title="">Gist で公開中</a></p> <h3 class="wp-block-heading"><span id="shi_zhuangnopointo">実装のポイント</span></h3> <p>これだけ設定していてもがっつり無視してきたりするので、きれずに根気よく会話していきましょう。</p> <p><strong>1. Material Icons の統一使用</strong></p> <p>Skill のプロンプトで「Material Icons を使用」と指示しても、Claude は時々カスタム矢印（<code><path/></code> + <code>marker-end</code>）を生成してしまいます。これを防ぐため、以下を明記：</p> <p>これを書いていても無視しますよｗｗ</p> <div class="wp-block-syntaxhighlighter-code "> <pre class="brush: plain; title: ; notranslate" title=""> 3. **Layout Guidelines** - Arrows should use Material Icons (arrow_downward, arrow_forward) - DO NOT use custom `<marker>` or `<marker-end>` </pre> </div> <p><strong>2. アクセシビリティ対応</strong></p> <p>WCAG Level AA 準拠のため、コントラスト比を明示：</p> <div class="wp-block-syntaxhighlighter-code "> <pre class="brush: plain; title: ; notranslate" title=""> 2. **Accessibility (WCAG Level AA)** - Color contrast ratio ≥ 4.5:1 - Text color on background must meet WCAG AA standards </pre> </div> <p><strong>3. 配置の明確化</strong></p> <p>要素間の余白を明示的に指定：</p> <div class="wp-block-syntaxhighlighter-code "> <pre class="brush: plain; title: ; notranslate" title=""> - Use consistent spacing (50px padding between elements) - Text should not overflow rectangles </pre> </div> <h2 class="wp-block-heading"><span id="shi_yun_yongde_zao_yusuru_wen_ti_dian">実運用で遭遇する問題点</span></h2> <p>ここからが重要です。実際に Skill を使ってみると、<strong>プロンプト通りに生成されないことが多々あります</strong>。以下、僕が実際に遭遇した問題と対処法です。</p> <h3 class="wp-block-heading"><span id="wen_ti1_wen_zi_lie_funo_bu_yi_zhi">問題1: 文字列幅の不一致</span></h3> <p><strong>症状</strong>: 説明文（例: “UI・ユーザーインターフェース (React, Vue.js, Angular)”）が矩形からはみ出す</p> <p><strong>原因</strong>: Claude が文字列の実際の表示幅を正確に計算できない</p> <p><strong>対処法</strong>:</p> <div class="wp-block-syntaxhighlighter-code "> <pre class="brush: plain; title: ; notranslate" title=""> <!-- Before: font-size="18" だと長い --> <text font-size="18">UI・ユーザーインターフェース (React, Vue.js, Angular)</text> <!-- After: font-size="16" に縮小 --> <text font-size="16">UI・ユーザーインターフェース (React, Vue.js, Angular)</text> </pre> </div> <p>僕の場合、最初に生成されたSVGを見て「あ、これ文字はみ出てるな」って気づいたら、すぐにfont-sizeを調整するようにしています。</p> <h3 class="wp-block-heading"><span id="wen_ti2_yao_suno_zhongnari">問題2: 要素の重なり</span></h3> <p><strong>症状</strong>: 矢印と矩形が重なって見える</p> <p><strong>原因</strong>: padding が不十分（40px では足りない）</p> <p><strong>対処法</strong>:</p> <div class="wp-block-syntaxhighlighter-code "> <pre class="brush: plain; title: ; notranslate" title=""> <!-- Before: padding 40px --> <rect y="80" height="140"/> <g transform="translate(620, 220)"> <!-- 80 + 140 = 220 --> <!-- Arrow --> </g> <rect y="260" height="140"/> <!-- 220 + 40 = 260 --> <!-- After: padding 50px --> <rect y="80" height="140"/> <g transform="translate(620, 230)"> <!-- 80 + 140 + 10 = 230 --> <!-- Arrow --> </g> <rect y="270" height="140"/> <!-- 230 + 40 = 270 --> </pre> </div> <p>これは視認性の問題なんですが、40pxだと視覚的に「ちょっと詰まってるな」って感じがしたので、50pxにしたら見やすくなりました。</p> <h3 class="wp-block-heading"><span id="wen_ti3_kasutamu_shi_yinno_sheng_cheng">問題3: カスタム矢印の生成</span></h3> <p><strong>症状</strong>: Material Icons を指示しても、<code><path/></code> + <code>marker-end</code> のカスタム矢印を生成してしまう</p> <p><strong>Claude が生成するコード（NG）</strong>:</p> <div class="wp-block-syntaxhighlighter-code "> <pre class="brush: plain; title: ; notranslate" title=""> <!-- NG: カスタム矢印 --> <path d="M 640 220 L 640 260" stroke="#424242" stroke-width="3" marker-end="url(#arrowhead)"/> <defs> <marker id="arrowhead" markerWidth="10" markerHeight="10"> <polygon points="0 0, 10 5, 0 10" fill="#424242"/> </marker> </defs> </pre> </div> <p><strong>対処法</strong>: Material Icons の <code>arrow_downward</code> を直接指定</p> <div class="wp-block-syntaxhighlighter-code "> <pre class="brush: plain; title: ; notranslate" title=""> <!-- OK: Material Icons --> <g transform="translate(620, 230)"> <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" fill="#757575" transform="scale(1.5)"/> </g> </pre> </div> <p>これ、本当によくあるんですよね。プロンプトに明記してても無視されるので、生成後に手動で置き換えるのが確実です。</p> <h3 class="wp-block-heading"><span id="wen_ti4_pei_zhinobaratsuki">問題4: 配置のバラつき</span></h3> <p><strong>症状</strong>: 矩形の高さや幅、要素間の距離が統一されていない</p> <p><strong>対処法</strong>: プロンプトで数値を明示</p> <div class="wp-block-syntaxhighlighter-code "> <pre class="brush: plain; title: ; notranslate" title=""> ## Layout Specifications - Rectangle width: 900px - Rectangle height: 140px - Padding between elements: 50px - Icon size: 48px (Material Icons scale(2)) - Arrow size: 36px (Material Icons scale(1.5)) </pre> </div> <p>数値を具体的に指定しておくと、生成される図の一貫性が上がります。ただし、それでもズレることはあるので、最終的には目視確認が必要ですね。</p> <h2 class="wp-block-heading"><span id="xiu_zhengwakufuro">修正ワークフロー</span></h2> <p>実際の図解作成は以下のフローで進めます：</p> <ol class="wp-block-list is-style-sango-list-main-color"> <li><strong>Skill で初回生成</strong>（所要時間: 5分） <ul class="wp-block-list is-style-sango-list-simple"> <li>プロンプトを渡して SVG を生成</li> <li>構造は正しいが、細かい問題がある状態</li> </ul> </li> <li><strong>手動修正</strong>（所要時間: 10分） <ul class="wp-block-list is-style-sango-list-simple"> <li>文字列のはみ出しをチェック → font-size 調整</li> <li>要素の重なりをチェック → padding 調整</li> <li>カスタム矢印をチェック → Material Icons に置換</li> <li>配置のバラつきをチェック → 数値を統一</li> </ul> </li> <li><strong>ブラウザで確認</strong> <ul class="wp-block-list is-style-sango-list-simple"> <li>SVG ファイルを VScode で開いて視覚確認</li> <li>問題があれば 2 に戻る</li> </ul> </li> </ol> <p><strong>合計所要時間: 15分</strong>（従来の45分から67%削減！）</p> <p>僕の場合、Figmaで一から作ると構造を考えるところから始まって45分くらいかかってたんですが、Skillで構造を生成してもらえるだけで圧倒的に楽になりましたね。</p> <h2 class="wp-block-heading"><span id="sheng_cheng_liBefore_After_bi_jiao">生成例：Before → After 比較</span></h2> <p>実際の図解生成プロセスを、<strong>初回プロンプト → オリジナル画像 → 修正プロンプト → 修正後画像</strong>の流れで紹介します。</p> <h3 class="wp-block-heading"><span id="li1_3cengakitekucha_tu">例1: 3層アーキテクチャ図</span></h3> <h4 class="wp-block-heading"><span id="suteppu1_chu_huipuronputo">ステップ1: 初回プロンプト</span></h4> <div class="wp-block-syntaxhighlighter-code "> <pre class="brush: plain; title: ; notranslate" title=""> SVG図解を生成してください。 タイトル: 3層アーキテクチャ 内容: Presentation Layer、Business Logic Layer、Data Access Layerの3層構造を示す図 各層に以下の情報を含めてください: - Presentation Layer: desktop_windows アイコン、説明「UI・ユーザーインターフェース (React, Vue.js, Angular)」 - Business Logic Layer: settings アイコン、説明「ビジネスロジック (Services, Use Cases, Domain Logic)」 - Data Access Layer: storage アイコン、説明「データアクセス (Repository, ORM, Database Queries)」 各層を矢印で接続してください。 </pre> </div> <h4 class="wp-block-heading"><span id="suteppu2_orijinaru_sheng_cheng_jie_guo">ステップ2: オリジナル生成結果</span></h4> <figure class="wp-block-image size-full"><img decoding="async" src="https://tech-lab.sios.jp/wp-content/uploads/2025/11/svg-generator-layered-architecture.svg" alt="" class="wp-image-50236"/></figure> <p><strong>問題点</strong>:</p> <ul class="wp-block-list is-style-sango-list-stitch-red"> <li>❌ 説明文の font-size が大きすぎる（18px）</li> <li>❌ 矢印が <code><path/></code> + <code>marker-end</code> のカスタム実装</li> <li>❌ padding が不十分（40px）で要素が詰まって見える</li> </ul> <p>このとき僕は「あー、やっぱり文字はみ出てるし、矢印も微妙だな」って思いました。でも構造自体は正しいので、修正するだけで済むのが楽なんですよね。</p> <h4 class="wp-block-heading"><span id="suteppu3_xiu_zhengpuronputo">ステップ3: 修正プロンプト</span></h4> <p>Claude に以下を指示：</p> <div class="wp-block-syntaxhighlighter-code "> <pre class="brush: plain; title: ; notranslate" title=""> 以下の修正を適用してください： 1. 説明文の font-size を 18px → 16px に縮小 2. 矢印を Material Icons `arrow_downward` に置換 3. padding を 40px → 50px に拡大して余白を確保 </pre> </div> <h4 class="wp-block-heading"><span id="suteppu4_xiu_zheng_houno_jie_guo">ステップ4: 修正後の結果</span></h4> <figure class="wp-block-image size-full"><img decoding="async" src="https://tech-lab.sios.jp/wp-content/uploads/2025/11/svg-generator-layered-architecture-1.svg" alt="" class="wp-image-50237"/></figure> <p><strong>改善点</strong>:</p> <ul class="wp-block-list is-style-sango-list-stitch-blue"> <li>✅ 説明文が矩形内に余裕を持って収まる</li> <li>✅ Material Icons で統一されたデザイン</li> <li>✅ 適切な余白で視認性が向上</li> </ul> <p>これで見た目がかなりすっきりしました。僕的にはこのレベルなら公開用として十分使えると思います。</p> <hr class="wp-block-separator has-alpha-channel-opacity"/> <h3 class="wp-block-heading"><span id="li2_yuza_ren_zhengfuro">例2: ユーザー認証フロー</span></h3> <h4 class="wp-block-heading"><span id="suteppu1_chu_huipuronputo1">ステップ1: 初回プロンプト</span></h4> <div class="wp-block-syntaxhighlighter-code "> <pre class="brush: plain; title: ; notranslate" title=""> SVG図解を生成してください。 タイトル: ユーザー認証フロー 内容: ログインから認証情報検証、セッション確立までのプロセスフロー 以下のステップを含めてください: 1. 開始（楕円形、緑色） 2. 認証情報入力（矩形、青色） 3. 認証情報検証（矩形、青色） 4. セッション確立（矩形、青色） 5. 完了（楕円形、赤色） 各ステップを矢印で接続してください。 </pre> </div> <h4 class="wp-block-heading"><span id="suteppu2_orijinaru_sheng_cheng_jie_guo1">ステップ2: オリジナル生成結果</span></h4> <figure class="wp-block-image size-full"><img decoding="async" src="https://tech-lab.sios.jp/wp-content/uploads/2025/11/svg-generator-user-auth-flow.svg" alt="" class="wp-image-50238"/></figure> <p><strong>問題点</strong>:</p> <ul class="wp-block-list is-style-sango-list-stitch-red"> <li>❌ 全4箇所の矢印がカスタム実装（<code>marker-end</code> 使用）</li> <li>❌ 矢印とステップの重なりが見える</li> <li>❌ ステップ間の padding がバラバラ</li> </ul> <p>フロー図って矢印が命なんですが、カスタム矢印だと統一感がなくなるんですよね。</p> <h4 class="wp-block-heading"><span id="suteppu3_xiu_zhengpuronputo1">ステップ3: 修正プロンプト</span></h4> <div class="wp-block-syntaxhighlighter-code "> <pre class="brush: plain; title: ; notranslate" title=""> 以下の修正を適用してください： 1. 全4箇所の矢印を Material Icons `arrow_downward` に置換 2. ステップ間の padding を 50px に統一 3. 矢印とステップの位置を調整して重なりを解消 </pre> </div> <h4 class="wp-block-heading"><span id="suteppu4_xiu_zheng_houno_jie_guo1">ステップ4: 修正後の結果</span></h4> <figure class="wp-block-image size-full"><img decoding="async" src="https://tech-lab.sios.jp/wp-content/uploads/2025/11/svg-generator-user-auth-flow-1.svg" alt="" class="wp-image-50239"/></figure> <p><strong>改善点</strong>:</p> <ul class="wp-block-list is-style-sango-list-stitch-blue"> <li>✅ Material Icons で統一された矢印</li> <li>✅ 各ステップ間の余白が均一</li> <li>✅ すっきりとした視覚的な流れ</li> </ul> <p>これでフローが追いやすくなりました。技術ブログの図解としては十分なクオリティだと思います。</p> <hr class="wp-block-separator has-alpha-channel-opacity"/> <h3 class="wp-block-heading"><span id="li3_BeforeAfter_bi_jiao_tu">例3: Before/After 比較図</span></h3> <h4 class="wp-block-heading"><span id="suteppu1_chu_huipuronputo2">ステップ1: 初回プロンプト</span></h4> <div class="wp-block-syntaxhighlighter-code "> <pre class="brush: plain; title: ; notranslate" title=""> SVG図解を生成してください。 タイトル: 図解作成の時短効果比較 内容: 手動作成とSkill生成の作業時間・効率を比較するBefore/After図 Before側（左側、赤色）: - 作業時間: 45分 - ツール: Figma / PowerPoint - 課題: 時間がかかる After側（右側、緑色）: - 作業時間: 15分 - ツール: Claude Code Skill - 内訳: 生成5分 + 修正10分 - 効果バッジ: 67% 時短！ BeforeからAfterへ横向き矢印を配置してください。 </pre> </div> <h4 class="wp-block-heading"><span id="suteppu2_orijinaru_sheng_cheng_jie_guo2">ステップ2: オリジナル生成結果</span></h4> <figure class="wp-block-image size-full"><img decoding="async" src="https://tech-lab.sios.jp/wp-content/uploads/2025/11/svg-generator-before-after-comparison.svg" alt="" class="wp-image-50240"/></figure> <p><strong>問題点</strong>:</p> <ul class="wp-block-list is-style-sango-list-stitch-red"> <li>❌ 横向き矢印がカスタム実装（<code><path/></code> + <code>marker-end</code>）</li> <li>❌ Before/After の横にアイコン（警告・チェックマーク）があり、「作業時間」と重なる</li> <li>❌ 「作業時間」と数値（45分・15分）の間隔が狭い</li> <li>❌ 矢印の位置が中央からずれている</li> </ul> <p>このときは「うーん、情報詰め込みすぎて見づらいな」って感じでした。</p> <h4 class="wp-block-heading"><span id="suteppu3_xiu_zhengpuronputo2">ステップ3: 修正プロンプト</span></h4> <p>Claude に以下を指示：</p> <div class="wp-block-syntaxhighlighter-code "> <pre class="brush: plain; title: ; notranslate" title=""> 以下の修正を適用してください： 1. 横向き矢印を Material Icons `arrow_forward` に置換 2. Before/After の横のアイコンを削除してテキストを中央配置 3. 「作業時間」と数値の間隔を 30px → 40px に拡大 4. 矢印を Before/After セクション全体の中央（y=368付近）に配置 </pre> </div> <h4 class="wp-block-heading"><span id="suteppu4_xiu_zheng_houno_jie_guo2">ステップ4: 修正後の結果</span></h4> <figure class="wp-block-image size-full"><img decoding="async" src="https://tech-lab.sios.jp/wp-content/uploads/2025/11/svg-generator-before-after-comparison-1.svg" alt="" class="wp-image-50241"/></figure> <p><strong>改善点</strong>:</p> <ul class="wp-block-list is-style-sango-list-stitch-blue"> <li>✅ Material Icons で統一された横向き矢印</li> <li>✅ Before/After テキストがすっきりと中央配置</li> <li>✅ 「作業時間」と数値の間に適切な余白</li> <li>✅ 矢印が視覚的に中央に配置され、バランスが向上</li> </ul> <p>これで見やすくなりました。Before/After図は情報量が多いので、余白をしっかり取るのが大事ですね。</p> <h2 class="wp-block-heading"><span id="Mermaidjs_tono_shii_fenke">Mermaid.js との使い分け</span></h2> <p>僕が以前書いた記事「<a target="_blank" href="https://tech-lab.sios.jp/archives/48411" target="_blank" rel="noopener" title="">ClaudeでMermaid図作成を自動化！2時間→5分の劇的時短術【Live Editor活用】</a>」で紹介している Mermaid.js は、<strong>システムチックな内容</strong>を表現する際に結構高い精度で図を作ってくれる最高なツールです。</p> <p>一方で、<strong>概念的な話</strong>になると Mermaid だと無機質になってしまうケースがあるんですよね。そこで SVG 直接生成の出番です。</p> <h3 class="wp-block-heading"><span id="ju_ti_dena_shii_fenke">具体的な使い分け</span></h3> <div id="id-7cb2c0ad-34d9-4435-a1ef-8a62a04790fd"> <figure class="wp-block-table"> <div class="s_table"><table class="has-fixed-layout"> <thead> <tr> <th>用途</th> <th>推奨アプローチ</th> <th>理由</th> <th>例</th> </tr> </thead> <tbody> <tr> <td><strong>システム図</strong></td> <td><strong>Mermaid.js</strong></td> <td>記法が簡単、高精度</td> <td>クラス図、シーケンス図、ER図</td> </tr> <tr> <td><strong>概念図</strong></td> <td><strong>SVG 直接生成</strong></td> <td>ビジュアルで魅せられる</td> <td>アーキテクチャ概念図、比較図</td> </tr> <tr> <td><strong>データフロー</strong></td> <td>Mermaid.js</td> <td>専用記法で効率的</td> <td>パイプライン、処理フロー</td> </tr> <tr> <td><strong>デザイン重視</strong></td> <td>SVG 直接生成</td> <td>色・レイアウトの完全制御</td> <td>ブランディング重視の図解</td> </tr> <tr> <td><strong>Material Icons</strong></td> <td>SVG 直接生成</td> <td>Mermaid は非対応</td> <td>Google Cloud アイコン使用</td> </tr> </tbody> </table></div> </figure> </div> <h3 class="wp-block-heading"><span id="puno_shi_jian_dena_shii_fenke_ji_zhun">僕の実践的な使い分け基準</span></h3> <p><strong>開発フェーズ別</strong>:</p> <ul class="wp-block-list is-style-sango-list-main-color"> <li>📝 <strong>記事の下書き段階</strong>: Mermaid.js（速さ重視、素早くイメージ共有）</li> <li>🎨 <strong>公開用の図解</strong>: SVG 直接生成（品質重視、ビジュアルで差別化）</li> </ul> <p><strong>内容の性質別</strong>:</p> <ul class="wp-block-list is-style-sango-list-main-color"> <li>🔧 <strong>技術的な関係性</strong>: Mermaid.js（クラス継承、API 呼び出し順序など）</li> <li>💡 <strong>コンセプト・アイデア</strong>: SVG 直接生成（3層アーキテクチャの概念、Before/After など）</li> </ul> <p><strong>結論</strong>: Mermaid と SVG は競合ではなく<strong>補完関係</strong>。両方使いこなすことで、技術ブログの図解表現力が大幅に向上します。</p> <p>僕の場合、システム図はMermaidでさくっと作って、ビジュアルで魅せたい図はSVGで作る、みたいな使い分けをしていますね。</p> <h2 class="wp-block-heading"><span id="matome">まとめ</span></h2> <p>Claude Code Skill を使った SVG 図解自動生成により、<strong>図解作成時間を67%削減</strong>できました！ただし、完璧な図解が一発で生成されるわけではなく、以下のような修正が必要になることが多いですね：</p> <h3 class="wp-block-heading"><span id="yokuaru_xiu_zheng_nei_rong">よくある修正内容</span></h3> <ol class="wp-block-list is-style-sango-list-dashed"> <li>font-size の調整（18px → 16px）</li> <li>padding の拡大（40px → 50px）</li> <li>カスタム矢印を Material Icons に置換</li> <li>配置の微調整</li> </ol> <p>それでも、Figma で一から作るより圧倒的に速いです。僕の場合、図解作成が億劫で記事執筆が進まない…ということがなくなりました。</p> <h3 class="wp-block-heading"><span id="kono_ji_shide_derareru3tsunomeritto">この記事で得られる3つのメリット</span></h3> <p>✅ <strong>時短効果</strong>: 45分 → 15分（67%削減）<br />✅ <strong>再現性</strong>: Skill をコピーすればチーム全員が同じ品質で図解作成可能<br />✅ <strong>継続的改善</strong>: 修正プロンプトを蓄積してベストプラクティスを共有できる</p> <h3 class="wp-block-heading"><span id="ci_hui_yi_jiangno_ji_shu_jie_shuoshirizu">次回以降の技術解説シリーズ</span></h3> <p>今回は SVG 図解の自動生成に焦点を当てましたが、今後は以下の内容を解説していきます！</p> <ol class="wp-block-list is-style-sango-list-main-color"> <li><strong>HTML 図解自動生成</strong>（Tailwind CSS 使用）</li> <li><strong>SVG → PNG 変換自動化</strong>（CairoSVG）</li> <li><strong>HTML → PNG 変換自動化</strong>（Playwright）</li> </ol> <p>ブログやコンテンツを定期的に発信している方は、ぜひ参考にしてみてください！質問や感想は、コメント欄でお待ちしております。</p> <h2 class="wp-block-heading"><span id="can_kaorinku">参考リンク</span></h2> <h3 class="wp-block-heading"><span id="Claude_Code">Claude Code</span></h3> <ul class="wp-block-list is-style-sango-list-main-color"> <li><a target="_blank" href="https://code.claude.com/docs" target="_blank" rel="noopener" title="">Claude Code 公式ドキュメント</a></li> <li><a target="_blank" href="https://tech-lab.sios.jp/archives/48411" target="_blank" rel="noopener" title="">ClaudeでMermaid図作成を自動化！2時間→5分の劇的時短術【Live Editor活用】</a></li> </ul> <h3 class="wp-block-heading"><span id="Material_Design_Icons">Material Design & Icons</span></h3> <h3 class="wp-block-heading"><span id="akuseshibiriti">アクセシビリティ</span></h3> <h3 class="wp-block-heading"><span id="dezainpatan">デザインパターン</span></h3> <p><!-- Anyway Feedback Container //--></p> <p><!-- //Anyway Feedback Container --></div> <br /><a href="https://tech-lab.sios.jp/archives/50235">元の記事を確認する </a></p> </div> </div> <div class="c-share-button"> <ul class="c-share-button__list c-share-button--type1"> <li class="c-share-button__item"> <a class="c-share-button__item-link c-share-button--twitter" href="https://twitter.com/intent/tweet?text=%E5%9B%B3%E8%A7%A3%E4%BD%9C%E6%88%90%E3%81%8C%E9%A9%9A%E3%81%8F%E3%81%BB%E3%81%A9%E6%A5%BD%E3%81%AB%EF%BC%81Claude+Skill%E3%81%A7SVG%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90+%7C+SIOS+Tech.+Lab&url=https%3A%2F%2Fpokecon.jp%2Fjob%2F24010%2F&via=&tw_p=tweetbutton&related="> <i class="c-share-icon c-share-icon__twitter"></i> <span class="c-share-button__label">Post</span> </a> </li> <li class="c-share-button__item"> <a class="c-share-button__item-link c-share-button--facebook" href="//www.facebook.com/sharer/sharer.php?u=https://pokecon.jp/job/24010/&t=%E5%9B%B3%E8%A7%A3%E4%BD%9C%E6%88%90%E3%81%8C%E9%A9%9A%E3%81%8F%E3%81%BB%E3%81%A9%E6%A5%BD%E3%81%AB%EF%BC%81Claude+Skill%E3%81%A7SVG%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90+%7C+SIOS+Tech.+Lab" class="facebook-btn-icon-link" target="blank" rel="nofollow"> <i class="c-share-icon c-share-icon__twitter"></i> <span class="c-share-button__label">Share</span> </a> </li> <li class="c-share-button__item"> <a class="c-share-button__item-link c-share-button--hatena" href="https://b.hatena.ne.jp/add?mode=confirm&url=https%3A%2F%2Fpokecon.jp%2Fjob%2F24010%2F"> <i class="c-share-icon"></i> <span class="c-share-button__label">Hatena</span> </a> </li> <li class="c-share-button__item line_button"> <a class="c-share-button__item-link c-share-button--line" aria-label="Lline" href="http://line.me/R/msg/text/?%E5%9B%B3%E8%A7%A3%E4%BD%9C%E6%88%90%E3%81%8C%E9%A9%9A%E3%81%8F%E3%81%BB%E3%81%A9%E6%A5%BD%E3%81%AB%EF%BC%81Claude+Skill%E3%81%A7SVG%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90+%7C+SIOS+Tech.+Labhttps%3A%2F%2Fpokecon.jp%2Fjob%2F24010%2F"><span class="label c-share-button__label">LINE</span></a> </li> <li class="c-share-button__item"> <a class="c-share-button__item-link c-share-button--rss" href="https://pokecon.jp/job/feed/"> <i class="c-share-icon"></i> <span class="c-share-button__label">RSS</span> </a> </li> <li class="c-share-button__item"> <a class="c-share-button__item-link c-share-button--feedly" href="https://feedly.com/index.html#subscription/feed/https://pokecon.jp/job/feed/"> <i class="c-share-icon"></i> <span class="c-share-button__label">feedly</span> </a> </li> <li class="c-share-button__item"> <a class="c-share-button__item-link c-share-button--pinterest" rel="nofollow" href="https://www.pinterest.com/pin/create/button/?url=https%3A%2F%2Fpokecon.jp%2Fjob%2F24010%2F&media=https://pokecon.jp/job/wp-content/uploads/2025/11/61a38a6871225b3aa66256ea8abd9d05.png&description=%E5%9B%B3%E8%A7%A3%E4%BD%9C%E6%88%90%E3%81%8C%E9%A9%9A%E3%81%8F%E3%81%BB%E3%81%A9%E6%A5%BD%E3%81%AB%EF%BC%81Claude+Skill%E3%81%A7SVG%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90+%7C+SIOS+Tech.+Lab" data-pin-do="buttonPin" data-pin-custom="true"> <i class="c-share-icon"></i> <span class="c-share-button__label">Pin it</span> </a> </li> <li class="c-share-button__item note_button"> <a class="c-share-button__item-link c-share-button--note" href="https://note.com/intent/post?url=https%3A%2F%2Fpokecon.jp%2Fjob%2F24010%2F"><span class="label c-share-button__label">note</span></a> </li> </ul> </div> <div class="p-page-nav"> <div class="p-page-nav__inner"> <a class="p-page-nav__item p-page-nav__item--prev" href="https://pokecon.jp/job/24007/"> <span class="p-page-nav__title p-page-nav__title-pc c-line2"> <span>「得点が無限1UPみたいに増えてゆくんですけれども」高専ロボコンで優勝した旭川高専のとった戦法が話題に「合理的すぎて好き」「こういう発想大好き」 - Tog...</span> </span> <span class="p-page-nav__title-sp">前の記事</span> </a> <a class="p-page-nav__item p-page-nav__item--next" href="https://pokecon.jp/job/24013/"> <span class="p-page-nav__title p-page-nav__title-pc c-line2"> <span>「ウェブ魚拓サービスのArchive.todayに圧力をかける団体の実態は非常に怪しい」という調査結果をAdGuard DNSが公表 - GIGAZINE</span> </span> <span class="p-page-nav__title-sp">次の記事</span> </a> </div> </div> <section class="p-related-post"> <div class="p-related-post__inner"> <h2 class="p-related-post__headline c-single-section-title"> 関連記事 </h2> <div class="p-related-post__list u-flex-wrap"> <article class="p-archive--post-item "> <a class="p-archive--post-item__link" href="https://pokecon.jp/job/8922/"> <div class="p-archive--post-item__image c-hover-animation"> <div class="p-archive--post-item__image-bg c-hover-animation__image" style="background:url(https://pokecon.jp/job/wp-content/uploads/2025/10/https3A2F2Fi.gyazo_.com2F55309f9015949c58ed16a6d5e2803020-770x490.png) no-repeat center; background-size:cover;"></div> </div> <div class="p-archive--post-item__content"> <span class="p-archive--post-item__category c-post-category u-flex-center js-data-link" data-href="https://pokecon.jp/job/category/company-tec/"> 企業テック </span> <h3 class="p-archive--post-item__title c-line2 c-hover-color"> <span>Claude Code SDK からの Claude Agent SDK への移行でAI Agentのポータビリティを高める</span> </h3> <p class="p-archive--post-item__date c-date"> <time datetime="2025-10-10T15:00:30+00:00">2025.10.10</time> </p> </div> </a> </article> <article class="p-archive--post-item "> <a class="p-archive--post-item__link" href="https://pokecon.jp/job/25261/"> <div class="p-archive--post-item__image c-hover-animation"> <div class="p-archive--post-item__image-bg c-hover-animation__image" style="background:url(https://pokecon.jp/job/wp-content/uploads/2025/11/1764140403-770x490.png) no-repeat center; background-size:cover;"></div> </div> <div class="p-archive--post-item__content"> <span class="p-archive--post-item__category c-post-category u-flex-center js-data-link" data-href="https://pokecon.jp/job/category/company-tec/"> 企業テック </span> <h3 class="p-archive--post-item__title c-line2 c-hover-color"> <span>2025年12月技術イベント予定 – Sansan Tech Blog</span> </h3> <p class="p-archive--post-item__date c-date"> <time datetime="2025-11-26T07:45:35+00:00">2025.11.26</time> </p> </div> </a> </article> <article class="p-archive--post-item "> <a class="p-archive--post-item__link" href="https://pokecon.jp/job/9341/"> <div class="p-archive--post-item__image c-hover-animation"> <div class="p-archive--post-item__image-bg c-hover-animation__image" style="background:url(https://pokecon.jp/job/wp-content/uploads/2025/10/1759986676-770x490.png) no-repeat center; background-size:cover;"></div> </div> <div class="p-archive--post-item__content"> <span class="p-archive--post-item__category c-post-category u-flex-center js-data-link" data-href="https://pokecon.jp/job/category/company-tec/"> 企業テック </span> <h3 class="p-archive--post-item__title c-line2 c-hover-color"> <span>短いサイクルで意思決定を繰り返してデータガバナンスを漸進的に改善していく | HERP TechHub</span> </h3> <p class="p-archive--post-item__date c-date"> <time datetime="2025-10-13T16:05:26+00:00">2025.10.13</time> </p> </div> </a> </article> <article class="p-archive--post-item "> <a class="p-archive--post-item__link" href="https://pokecon.jp/job/7679/"> <div class="p-archive--post-item__image c-hover-animation"> <div class="p-archive--post-item__image-bg c-hover-animation__image" style="background:url(https://pokecon.jp/job/wp-content/uploads/2025/10/5PP1T5i-770x490.png) no-repeat center; background-size:cover;"></div> </div> <div class="p-archive--post-item__content"> <span class="p-archive--post-item__category c-post-category u-flex-center js-data-link" data-href="https://pokecon.jp/job/category/company-tec/"> 企業テック </span> <h3 class="p-archive--post-item__title c-line2 c-hover-color"> <span>Kaigi on Rails 2025 参加レポート (by @stomk)</span> </h3> <p class="p-archive--post-item__date c-date"> <time datetime="2025-10-01T05:51:26+00:00">2025.10.01</time> </p> </div> </a> </article> </div> </div> </section> </article> </main> <aside class="l-sidebar"> <div class="l-sidebar__inner u-flex-wrap"> <div class="p-widget u-clearfix widget_categories" id="categories-2"> <div class="p-widget-headline">登録コンテンツのジャンル</div> <ul> <li class="cat-item cat-item-3"><a href="https://pokecon.jp/job/category/hrog/">HRog</a> </li> <li class="cat-item cat-item-2"><a href="https://pokecon.jp/job/category/hatena-blog/">はてなブログ</a> </li> <li class="cat-item cat-item-4"><a href="https://pokecon.jp/job/category/company-tec/">企業テック</a> </li> </ul> </div> <div class="p-widget u-clearfix design_post_list_widget" id="design_post_list_widget-2"> <div class="p-widget-headline">最新の引用記事</div><div class="p-widget-posts"> <ul class="p-widget-posts__labels u-flex"> <li class="p-widget-posts__labels-item u-flex-center js-widget-tab-label is-active"> Hrog </li> <li class="p-widget-posts__labels-item u-flex-center js-widget-tab-label "> 企業テック </li> <li class="p-widget-posts__labels-item u-flex-center js-widget-tab-label "> はてなブログ </li> </ul> <div class="p-widget-posts__fields"> <div class="p-widget-posts__fields-item js-widget-tab-field is-active"> <article class="p-widget-posts__fields-article"> <a class="p-widget-posts__fields-article__link u-flex-align-center" href="https://pokecon.jp/job/66334/"> <div class="p-widget-posts__fields-article__image c-hover-animation"> <div class="p-widget-posts__fields-article__image-bg c-bg-image c-hover-animation__image" style="background:url(https://pokecon.jp/job/wp-content/uploads/2026/01/536b90bafc16c394351019b5caaac5fe-350x350.jpg) no-repeat center center; background-size:cover;"></div> </div> <div class="p-widget-posts__fields-article__title c-hover-color c-line3"> <span>【HRog決算解説】ディップ株式会社の2026年2月期第3四半期決算から見える人材業界の最新トレンドは？ | HRog | 人材業界の一歩先を照らすメディア</span> </div> </a> </article> <article class="p-widget-posts__fields-article"> <a class="p-widget-posts__fields-article__link u-flex-align-center" href="https://pokecon.jp/job/66331/"> <div class="p-widget-posts__fields-article__image c-hover-animation"> <div class="p-widget-posts__fields-article__image-bg c-bg-image c-hover-animation__image" style="background:url(https://pokecon.jp/job/wp-content/uploads/2026/01/7b030bc8b71acb83d3ac4aea636b352a-350x350.png) no-repeat center center; background-size:cover;"></div> </div> <div class="p-widget-posts__fields-article__title c-hover-color c-line3"> <span>12月の有効求人倍率は1.19倍、前月から0.01ポイント上昇 | HRog | 人材業界の一歩先を照らすメディア</span> </div> </a> </article> <article class="p-widget-posts__fields-article"> <a class="p-widget-posts__fields-article__link u-flex-align-center" href="https://pokecon.jp/job/66328/"> <div class="p-widget-posts__fields-article__image c-hover-animation"> <div class="p-widget-posts__fields-article__image-bg c-bg-image c-hover-animation__image" style="background:url(https://pokecon.jp/job/wp-content/uploads/2026/01/main-2-350x350.png) no-repeat center center; background-size:cover;"></div> </div> <div class="p-widget-posts__fields-article__title c-hover-color c-line3"> <span>サイバー攻撃激化でセキュリティ人材の求人倍率が42倍超えに、レバテック株式会社調査 | HRog | 人材業界の一歩先を照らすメディア</span> </div> </a> </article> <article class="p-widget-posts__fields-article"> <a class="p-widget-posts__fields-article__link u-flex-align-center" href="https://pokecon.jp/job/66326/"> <div class="p-widget-posts__fields-article__image c-hover-animation"> <div class="p-widget-posts__fields-article__image-bg c-bg-image c-hover-animation__image" style="background:url(https://pokecon.jp/job/wp-content/uploads/2026/01/image-4-350x350.jpeg) no-repeat center center; background-size:cover;"></div> </div> <div class="p-widget-posts__fields-article__title c-hover-color c-line3"> <span>株式会社ギークリー、東証スタンダード市場に上場 | HRog | 人材業界の一歩先を照らすメディア</span> </div> </a> </article> <article class="p-widget-posts__fields-article"> <a class="p-widget-posts__fields-article__link u-flex-align-center" href="https://pokecon.jp/job/66323/"> <div class="p-widget-posts__fields-article__image c-hover-animation"> <div class="p-widget-posts__fields-article__image-bg c-bg-image c-hover-animation__image" style="background:url(https://pokecon.jp/job/wp-content/uploads/2026/01/image-4-350x350.jpeg) no-repeat center center; background-size:cover;"></div> </div> <div class="p-widget-posts__fields-article__title c-hover-color c-line3"> <span>株式会社プレシャスパートナーズ、東証および福証プロマーケットに上場 | HRog | 人材業界の一歩先を照らすメディア</span> </div> </a> </article> </div> <div class="p-widget-posts__fields-item js-widget-tab-field "> <article class="p-widget-posts__fields-article"> <a class="p-widget-posts__fields-article__link u-flex-align-center" href="https://pokecon.jp/job/26925/"> <div class="p-widget-posts__fields-article__image c-hover-animation"> <div class="p-widget-posts__fields-article__image-bg c-bg-image c-hover-animation__image" style="background:url(https://pokecon.jp/job/wp-content/uploads/2025/12/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2FD2FDMMTech2F202512012F20251201191330.p-350x350.png) no-repeat center center; background-size:cover;"></div> </div> <div class="p-widget-posts__fields-article__title c-hover-color c-line3"> <span>失敗を武器に変える。決済手段追加でチームの開発効率に再現性をもたらすまで | DMM Developers Blog</span> </div> </a> </article> <article class="p-widget-posts__fields-article"> <a class="p-widget-posts__fields-article__link u-flex-align-center" href="https://pokecon.jp/job/26919/"> <div class="p-widget-posts__fields-article__image c-hover-animation"> <div class="p-widget-posts__fields-article__image-bg c-bg-image c-hover-animation__image" style="background:url(https://pokecon.jp/job/wp-content/uploads/2025/12/1765161000-350x350.png) no-repeat center center; background-size:cover;"></div> </div> <div class="p-widget-posts__fields-article__title c-hover-color c-line3"> <span>産業AXへの挑戦と私たちの現在地。4つの変化とこれからの課題 – Speee DEVELOPER BLOG</span> </div> </a> </article> <article class="p-widget-posts__fields-article"> <a class="p-widget-posts__fields-article__link u-flex-align-center" href="https://pokecon.jp/job/26913/"> <div class="p-widget-posts__fields-article__image c-hover-animation"> <div class="p-widget-posts__fields-article__image-bg c-bg-image c-hover-animation__image" style="background:url(https://pokecon.jp/job/wp-content/uploads/2025/12/1765157917_og-base-w1200-v2-350x350.png) no-repeat center center; background-size:cover;"></div> </div> <div class="p-widget-posts__fields-article__title c-hover-color c-line3"> <span>go_routerで型安全性と疎結合を両立する設計パターン | レスキューナウテックブログのフィード</span> </div> </a> </article> <article class="p-widget-posts__fields-article"> <a class="p-widget-posts__fields-article__link u-flex-align-center" href="https://pokecon.jp/job/26908/"> <div class="p-widget-posts__fields-article__image c-hover-animation"> <div class="p-widget-posts__fields-article__image-bg c-bg-image c-hover-animation__image" style="background:url(https://pokecon.jp/job/wp-content/uploads/2025/09/https3A2F2Fcdn.user_.blog_.st-hatena.com2Fdefault_entry_og_image2F1585296562F1704872217353595-350x350.png) no-repeat center center; background-size:cover;"></div> </div> <div class="p-widget-posts__fields-article__title c-hover-color c-line3"> <span>データエンジニアリングのAI駆動開発: Data Contractを応用したデータパイプラインの生成 – 電通総研 テックブログ</span> </div> </a> </article> <article class="p-widget-posts__fields-article"> <a class="p-widget-posts__fields-article__link u-flex-align-center" href="https://pokecon.jp/job/26903/"> <div class="p-widget-posts__fields-article__image c-hover-animation"> <div class="p-widget-posts__fields-article__image-bg c-bg-image c-hover-animation__image" style="background:url(https://pokecon.jp/job/wp-content/uploads/2025/09/Image_fx-7-350x350.png) no-repeat center center; background-size:cover;"></div> </div> <div class="p-widget-posts__fields-article__title c-hover-color c-line3"> <span>AI Coding Agentを “ツール” ではなく “部下” として扱うための開発環境</span> </div> </a> </article> </div> <div class="p-widget-posts__fields-item js-widget-tab-field "> <article class="p-widget-posts__fields-article"> <a class="p-widget-posts__fields-article__link u-flex-align-center" href="https://pokecon.jp/job/26931/"> <div class="p-widget-posts__fields-article__image c-hover-animation"> <div class="p-widget-posts__fields-article__image-bg c-bg-image c-hover-animation__image" style="background:url(https://pokecon.jp/job/wp-content/uploads/2025/12/1765171820_1-350x350.jpg) no-repeat center center; background-size:cover;"></div> </div> <div class="p-widget-posts__fields-article__title c-hover-color c-line3"> <span>「Google One」と「YouTube Premium」のセット割が日本にも……と思ったら罠が待っていた – PC Watch</span> </div> </a> </article> <article class="p-widget-posts__fields-article"> <a class="p-widget-posts__fields-article__link u-flex-align-center" href="https://pokecon.jp/job/26928/"> <div class="p-widget-posts__fields-article__image c-hover-animation"> <div class="p-widget-posts__fields-article__image-bg c-bg-image c-hover-animation__image" style="background:url(https://pokecon.jp/job/wp-content/uploads/2025/12/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fg2Fgnavi_developers2F202512082F2025120-350x350.png) no-repeat center center; background-size:cover;"></div> </div> <div class="p-widget-posts__fields-article__title c-hover-color c-line3"> <span>【アドベントカレンダー2025】検索エンジンを「解剖」する：Elasticsearchでの検索精度改善に役立つ3つの分析 – ぐるなびをちょっと良くするエンジニアブログ</span> </div> </a> </article> <article class="p-widget-posts__fields-article"> <a class="p-widget-posts__fields-article__link u-flex-align-center" href="https://pokecon.jp/job/26922/"> <div class="p-widget-posts__fields-article__image c-hover-animation"> <div class="p-widget-posts__fields-article__image-bg c-bg-image c-hover-animation__image" style="background:url(https://pokecon.jp/job/wp-content/uploads/2025/12/postal-bullet-paradise-20251208-370034-header-350x350.jpg) no-repeat center center; background-size:cover;"></div> </div> <div class="p-widget-posts__fields-article__title c-hover-color c-line3"> <span>“生成AIひっそり使用疑惑”で即開発中止ゲーム『POSTAL: Bullet Paradise』開発元、いちど疑惑を否定するも結局認める。スタジオも閉鎖へ – AUTOMATON</span> </div> </a> </article> <article class="p-widget-posts__fields-article"> <a class="p-widget-posts__fields-article__link u-flex-align-center" href="https://pokecon.jp/job/26916/"> <div class="p-widget-posts__fields-article__image c-hover-animation"> <div class="p-widget-posts__fields-article__image-bg c-bg-image c-hover-animation__image" style="background:url(https://pokecon.jp/job/wp-content/uploads/2025/12/251202_lab_column-1-350x350.jpg) no-repeat center center; background-size:cover;"></div> </div> <div class="p-widget-posts__fields-article__title c-hover-color c-line3"> <span>スキルと業務を体系的に引き継ぐ全手順。余裕が無いときの応急措置も【パウリ】 | レバテックラボ（レバテックLAB）</span> </div> </a> </article> <article class="p-widget-posts__fields-article"> <a class="p-widget-posts__fields-article__link u-flex-align-center" href="https://pokecon.jp/job/26910/"> <div class="p-widget-posts__fields-article__image c-hover-animation"> <div class="p-widget-posts__fields-article__image-bg c-bg-image c-hover-animation__image" style="background:url(https://pokecon.jp/job/wp-content/uploads/2025/12/1765157188_https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fk2Fkaminashi-developer2F202512062F2025-350x350.png) no-repeat center center; background-size:cover;"></div> </div> <div class="p-widget-posts__fields-article__title c-hover-color c-line3"> <span>【AWS re:Invent 2025】AWSサービスを使って能動的防御を実践 – カミナシ エンジニアブログ</span> </div> </a> </article> </div> </div> </div> </div> <div class="p-widget u-clearfix styled_review_list_widget" id="styled_review_list_widget-2"> <div class="p-widget-headline">求人のランダム選抜</div><div class="p-widget-reviews"> <article class="p-widget-reviews__item"> <a class="p-widget-reviews__item-link u-flex" href="https://pokecon.jp/job/detail/81bd8442934e05bb/"> <div class="p-widget-reviews__item-content u-flex-align-center"> <div class="p-widget-reviews__item-content-inner"> <div class="p-widget-reviews__item-title c-hover-color c-line2"> <span>一般事務・データ入力｜宮城県大崎市古川沢田の求人</span> </div> <div class="p-widget-reviews__item-stars p-star-review u-flex-align-center"> <span class="p-star-review__icon c-icon "></span><span class="p-star-review__icon c-icon "></span><span class="p-star-review__icon c-icon "></span><span class="p-star-review__icon c-icon "></span><span class="p-star-review__icon c-icon "></span> <span class="p-star-review__total">-</span> </div> </div> </div> </a> </article> <article class="p-widget-reviews__item"> <a class="p-widget-reviews__item-link u-flex" href="https://pokecon.jp/job/detail/processing-and-finishing-plywood-packaging-and-inspecting-wood-20260123-id132111/"> <div class="p-widget-reviews__item-content u-flex-align-center"> <div class="p-widget-reviews__item-content-inner"> <div class="p-widget-reviews__item-title c-hover-color c-line2"> <span>合板を加工や仕上げたり木材を梱包や検査したり｜青森県上北郡六戸町の求人</span> </div> <div class="p-widget-reviews__item-stars p-star-review u-flex-align-center"> <span class="p-star-review__icon c-icon "></span><span class="p-star-review__icon c-icon "></span><span class="p-star-review__icon c-icon "></span><span class="p-star-review__icon c-icon "></span><span class="p-star-review__icon c-icon "></span> <span class="p-star-review__total">-</span> </div> </div> </div> </a> </article> <article class="p-widget-reviews__item"> <a class="p-widget-reviews__item-link u-flex" href="https://pokecon.jp/job/detail/assembling-and-inspecting-small-motors-and-supplying-parts-at-denso-kosai-plant-20260111-id123735/"> <div class="p-widget-reviews__item-content u-flex-align-center"> <div class="p-widget-reviews__item-content-inner"> <div class="p-widget-reviews__item-title c-hover-color c-line2"> <span>小型モーターの組付や検査をしたりデンソー湖西製作所で部品供給をしたり｜静岡県湖西市梅田の求人</span> </div> <div class="p-widget-reviews__item-stars p-star-review u-flex-align-center"> <span class="p-star-review__icon c-icon "></span><span class="p-star-review__icon c-icon "></span><span class="p-star-review__icon c-icon "></span><span class="p-star-review__icon c-icon "></span><span class="p-star-review__icon c-icon "></span> <span class="p-star-review__total">-</span> </div> </div> </div> </a> </article> <article class="p-widget-reviews__item"> <a class="p-widget-reviews__item-link u-flex" href="https://pokecon.jp/job/detail/visually-inspect-ricoh-printer-parts-and-check-for-scratches-using-a-microscope-20260124-id134446/"> <div class="p-widget-reviews__item-content u-flex-align-center"> <div class="p-widget-reviews__item-content-inner"> <div class="p-widget-reviews__item-title c-hover-color c-line2"> <span>リコー製プリンター部品を目視検査したり顕微鏡で傷を確認したり｜神奈川県厚木市下荻野の求人</span> </div> <div class="p-widget-reviews__item-stars p-star-review u-flex-align-center"> <span class="p-star-review__icon c-icon "></span><span class="p-star-review__icon c-icon "></span><span class="p-star-review__icon c-icon "></span><span class="p-star-review__icon c-icon "></span><span class="p-star-review__icon c-icon "></span> <span class="p-star-review__total">-</span> </div> </div> </div> </a> </article> <article class="p-widget-reviews__item"> <a class="p-widget-reviews__item-link u-flex" href="https://pokecon.jp/job/detail/provide-bathing-assistance-recreational-activities-and-enter-records-20260109-id5501/"> <div class="p-widget-reviews__item-content u-flex-align-center"> <div class="p-widget-reviews__item-content-inner"> <div class="p-widget-reviews__item-title c-hover-color c-line2"> <span>入浴介助やレクリエーションの実施や記録入力をしたり｜兵庫県神戸市須磨区大田町の求人</span> </div> <div class="p-widget-reviews__item-stars p-star-review u-flex-align-center"> <span class="p-star-review__icon c-icon "></span><span class="p-star-review__icon c-icon "></span><span class="p-star-review__icon c-icon "></span><span class="p-star-review__icon c-icon "></span><span class="p-star-review__icon c-icon "></span> <span class="p-star-review__total">-</span> </div> </div> </div> </a> </article> </div> </div> </div> </aside> </div> <footer id="js-footer" class="l-footer"> <div class="l-footer__info"> <div class="l-inner"> <div class="l-footer__logo"> <a href="https://pokecon.jp/job/" class="c-logo" title="ポケコン"> <img class="c-logo__image c-logo__image-1" src="https://pokecon.jp/job/wp-content/uploads/2025/09/cropped-60e6aebbdd834c264e0babbff98283bc-1.png?1769759745" alt="ポケコン" title="ポケコン" width="506" height="266.5" style="height:266.5px;" /> </a> </div> </div> </div> <div class="l-footer__nav"> <div class="l-footer__nav-inner l-inner u-flex-wrap"> <div class="l-footer__nav-list"><ul id="menu-pokecon-jp%e3%81%ae%e9%81%b7%e7%a7%bb" class="menu"><li id="menu-item-5192" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5192 "><a href="https://pokecon.jp/category/jobcolumn/">職業別の体験談</a></li> <li id="menu-item-5196" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5196 "><a href="https://pokecon.jp/category/webhack/wordpress/">WordPress小技集</a></li> <li id="menu-item-5197" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5197 "><a href="https://pokecon.jp/category/webhack/programming/">プログラミング小技集</a></li> </ul></div><div class="l-footer__nav-list"><ul id="menu-%e6%b1%82%e4%ba%ba%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e5%85%a5%e5%8f%a3" class="menu"><li id="menu-item-5104" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5104 "><a href="https://pokecon.jp/pharmacist002/">薬剤師求人</a></li> <li id="menu-item-5105" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5105 "><a href="https://pokecon.jp/highcareer/">ハイキャリア求人</a></li> <li id="menu-item-5106" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5106 "><a href="https://pokecon.jp/recruit-haken/">エージェント求人</a></li> </ul></div> </div> </div> <div class="l-footer__copyright"> <div class="l-footer__copyright-inner l-inner"> Copyright © 2021 ポケコン </div> </div> </footer> </div> <div id="js-drawer" class="p-drawer-menu u-hidden-scroll-bar"> <button id="js-drawer-close-button" class="p-menu-button--close u-button-reset" type="button"> <span></span> <span></span> </button> <nav class="p-drawer-menu__nav-wrapper"><ul id="menu-%e3%83%8a%e3%83%93%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc" class="p-drawer-menu__nav"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22 "><a href="https://pokecon.jp/job/detail/">求人検索</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25 "><a href="#" data-menu-type="type3" data-megamenu="js-megamenu25">お役立ち情報</a></li> </ul></nav></div> <div id="js-close-overlay" class="p-drawer-menu__overlay"></div> <div class="p-return-top-button-wrapper"> <button id="js-return-top-button" class="p-return-top-button" type="button"></button> </div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/job/*"},{"not":{"href_matches":["/job/wp-*.php","/job/wp-admin/*","/job/wp-content/uploads/*","/job/wp-content/*","/job/wp-content/plugins/*","/job/wp-content/themes/rehub_tcd099/*","/job/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script type="text/javascript" src="https://pokecon.jp/job/wp-content/themes/rehub_tcd099/js/swiper-bundle.min.js?ver=1753236490" id="swiper-js"></script> <script type="text/javascript" src="https://pokecon.jp/job/wp-content/themes/rehub_tcd099/js/jquery.easing.1.4.js?ver=1753236490" id="jquery-easing-js"></script> <script type="text/javascript" src="https://pokecon.jp/job/wp-content/themes/rehub_tcd099/js/jquery.inview.min.js?ver=1753236490" id="inview-js"></script> <script type="text/javascript" src="https://pokecon.jp/job/wp-content/themes/rehub_tcd099/js/jscript.js?ver=1753236490" id="jscript-js"></script> <script type="text/javascript" src="https://pokecon.jp/job/wp-content/themes/rehub_tcd099/js/navigation-bar.js?ver=1753236490" id="navigation-bar-js"></script> <script type="text/javascript" src="https://pokecon.jp/job/wp-includes/js/comment-reply.min.js?ver=6.9" id="comment-reply-js" async="async" data-wp-strategy="async" fetchpriority="low"></script> <script type="text/javascript" src="https://pokecon.jp/job/wp-content/themes/rehub_tcd099/js/comment.js?ver=1753236490" id="comment-js"></script> <script type="text/javascript" src="https://pokecon.jp/job/wp-content/themes/rehub_tcd099/js/counter.js?ver=1753236490" id="counter-js"></script> <script type="text/javascript" src="https://pokecon.jp/job/wp-content/themes/rehub_tcd099/js/waypoints.min.js?ver=1753236490" id="waypoints-js"></script> <script type="text/javascript" id="ranking-js-extra"> /* <![CDATA[ */ var TCD_FUNCTIONS = {"ajax_url":"https://pokecon.jp/job/wp-admin/admin-ajax.php","ajax_error_message":"\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002\u3082\u3046\u4e00\u5ea6\u304a\u8a66\u3057\u304f\u3060\u3055\u3044\u3002"}; //# sourceURL=ranking-js-extra /* ]]> */ </script> <script type="text/javascript" src="https://pokecon.jp/job/wp-content/themes/rehub_tcd099/js/ranking.js?ver=1753236490" id="ranking-js"></script> <script type="text/javascript" src="https://pokecon.jp/job/wp-content/themes/rehub_tcd099/js/copy_title_url.js?ver=3.13.2" id="copy_title_url-js"></script> <script type="text/javascript" src="https://pokecon.jp/job/wp-content/themes/rehub_tcd099/functions/search/assets/filter-search.js?ver=1753236490" id="filter-search-js"></script> </body> </html> <!-- Page supported by LiteSpeed Cache 7.7 on 2026-01-30 07:55:45 -->