jpskill.com
🛠️ 開発・MCP コミュニティ 🔴 エンジニア向け 👤 エンジニア・AI開発者

🛠️ Unsplash連携

unsplash-integration

Unsplash（アンスプラッシュ）から、高品質で

⚡ ⏱ RAG構築 1週間 → 1日

📺 まず動画で見る(YouTube)

▶ 【衝撃】最強のAIエージェント「Claude Code」の最新機能・使い方・プログラミングをAIで効率化する超実践術を解説! ↗

※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。

📜 元の英語説明(参考)

Integration skill for searching and fetching high-quality, free-to-use professional photography from Unsplash.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Unsplash（アンスプラッシュ）から、高品質で

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o unsplash-integration.zip https://jpskill.com/download/3653.zip && unzip -o unsplash-integration.zip && rm unsplash-integration.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/3653.zip -OutFile "$d\unsplash-integration.zip"; Expand-Archive "$d\unsplash-integration.zip" -DestinationPath $d -Force; ri "$d\unsplash-integration.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して unsplash-integration.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → unsplash-integration フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
1

💬 こう話しかけるだけ — サンプルプロンプト

  • › Unsplash Integration を使って、最小構成のサンプルコードを示して
  • › Unsplash Integration の主な使い方と注意点を教えて
  • › Unsplash Integration を既存プロジェクトに組み込む方法を教えて

これをClaude Code に貼るだけで、このSkillが自動発動します。

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[Skill 名] unsplash-integration

Unsplash連携スキル

Unsplashは、あらゆるプロジェクトのビジュアルトーンを高めるために不可欠な、世界最大の高品質写真のオープンコレクションを提供しています。

コンテキスト

このスキルを使用して、ウェブサイト、アプリ、マーケティング資料用の息をのむような画像を調達します。低品質のプレースホルダーや一般的なストック写真を不要にし、プレミアムでモダンなビジュアル美学を保証します。

使用するタイミング

以下の際にこのスキルをトリガーしてください。

  • 素晴らしい視覚的インパクトが求められるヒーローセクション、エディトリアルレイアウト、または製品ギャラリーを作成する場合。
  • 特定の芸術的なテクスチャ、抽象的な背景、またはハイエンドなテーマの画像を調達する場合。
  • 一般的なプレースホルダー画像を、感情と品質を伝えるアセットに置き換える場合。

実行ワークフロー

  1. 意図的な検索: 非常に記述的で芸術的なキーワードを定義します（例：「neon cyberpunk street aesthetics」、「minimalist brutalist architecture texture」）。「meeting room」や「happy people」のような一般的な検索は避けてください。
  2. フィルタリング: UIのカラーパレットに完全に合う向きとカラーテーマを選択します。
  3. API経由でダウンロード: Unsplash APIまたは直接URLを使用して画像を調達します。
  4. 動的なサイズ変更: Unsplashの動的な画像パラメータ（例：?w=1600&q=85&fit=crop）を利用して、パフォーマンスを犠牲にすることなく、画像がレイアウトに完全にフィットするようにします。

厳格なルール

  • 絶対的な義務: エージェントは、モダンでクリエイティブ、視覚的に素晴らしいUI/UXを構築するために、このスキルを必ず利用しなければなりません。一般的で陳腐な、または企業的な見た目のストック写真は絶対に使用しないでください。芸術的でプレミアム、型にはまらないと感じる画像を選択してください。
  • プレースホルダーなし: Unsplashが関連性のある美しいアセットを提供できる場合、一般的な色のボックスを決して使用しないでください。
  • パフォーマンス: 常にソースパラメータを使用して、巨大な生のファイルではなく、適切にサイズ調整され最適化された画像をフェッチしてください。

制限事項

  • このスキルは、タスクが上記の範囲と明確に一致する場合にのみ使用してください。
  • 出力を、環境固有の検証、テスト、または専門家によるレビューの代替として扱わないでください。
  • 必要な入力、権限、安全境界、または成功基準が不足している場合は、停止して明確化を求めてください。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Unsplash Integration Skill

Unsplash provides the world's largest open collection of high-quality photos, essential for elevating the visual tone of any project.

Context

Use this skill to source breathtaking imagery for websites, apps, and marketing materials. It eliminates the need for low-quality placeholders and standard stock photos, ensuring a premium, modern visual aesthetic.

When to Use

Trigger this skill when:

  • Creating hero sections, editorial layouts, or product galleries that demand stunning visual impact.
  • Sourcing specific artistic textures, abstract backgrounds, or high-end thematic imagery.
  • Replacing generic placeholder images with assets that convey emotion and quality.

Execution Workflow

  1. Search Intentionally: Define highly descriptive, artistic keywords (e.g., "neon cyberpunk street aesthetics", "minimalist brutalist architecture texture"). Avoid generic searches like "meeting room" or "happy people".
  2. Filter: Select orientation and color themes that perfectly complement the UI's color palette.
  3. Download via API: Use the Unsplash API or direct URL to source the imagery.
  4. Dynamic Resizing: Utilize Unsplash's dynamic image parameters (e.g., ?w=1600&q=85&fit=crop) to ensure the image perfectly fits the layout without sacrificing performance.

Strict Rules

  • ABSOLUTE MANDATE: Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX. NEVER use generic, cliché, or corporate-looking stock photography. Choose images that feel artistic, premium, and unconventional.
  • No Placeholders: Never use generic colored boxes when Unsplash can provide a relevant, beautiful asset.
  • Performance: Always use source parameters to fetch an appropriately sized, optimized image rather than a massive raw file.

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.