mcpField
U
unsplash-asset-images

unsplash-asset-images

github.com/akillnessデザイン・UI5358 回インストール今日更新
リポジトリ

unsplash-asset-images について

デザイン用途に合う Unsplash の写真とトリミング寸法を提案するスキルです。写真ページの URL、比率の目安、ダウンロードと加工の手順、基本的なライセンス情報を提供します。

主な機能

  1. 01Unsplash 写真ページ URL の提案
  2. 02比率と画像寸法の提示
  3. 03ダウンロードとトリミングの案内
  4. 04ライセンスとクレジットの注意点
  5. 05用途別の写真候補の提示

活用シーン

  1. 01アバターやポートレートの選定
  2. 02Web サイトの横長ヒーロー画像探し
  3. 03モバイル・デスクトップ壁紙の選択
  4. 04デザイン工程向け画像の準備

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/akillness/jeo-skills --skill unsplash-asset-images

インストール後、Claude Code で/unsplash-asset-imagesを入力して読み込まれたか確認します。

同梱ファイルSKILL.toon

詳細

Unsplash の素材画像（アバター、ポートレート、背景、壁紙）

目的：Unsplash から 見栄えのよい 画像をすばやく見つけ、適切なサイズとアスペクト比で提供します。

このスキルを使う場面

  • アバター、顔写真、ポートレート、ヒーロー背景、抽象的な壁紙用に、プレースホルダーではない Unsplash の写真ページ URL が必要な場合。
  • 特定の用途に合わせて、推奨する出力アスペクト比とサイズ（1:1、4:5、3:4、16:9、9:16）とともに提案を受けたい場合。
  • デザインや画像パイプラインで使う Unsplash の写真のダウンロード、トリミング、リサイズ方法を知りたい場合。
  • アバター、顔写真カード、ヒーロー背景、モバイル壁紙にどのアスペクト比を使うか、すばやく判断したい場合。
  • Unsplash のライセンスやクレジット表記の慣例（例：依頼がない限り Unsplash+ を避ける）について確認したい場合。
  • Aura Assets（aura.build/assets）の検索には使わないでください。Unsplash ではなくタグで Aura 独自の素材ライブラリを検索する aura-asset-images を利用してください。

出力ルール

提案ごとに、以下を出力してください。

  1. Unsplash ページの URL（正規 URL）
  2. 用途に合わせた推奨 アスペクト比とサイズ

ファイルが必要な場合は、Unsplash の Download ボタンを使い、その後デザインツールまたは画像パイプラインでトリミングやリサイズを行うよう案内してください。

ライセンス／安全性（簡潔に）

  • Unsplash の画像は一般に無料で使えますが、ユーザーが明示的に希望しない限り、Unsplash+ の画像は避けてください。
  • 写真家の名前を「必須のクレジット表記」として案内しないでください（Unsplash では必須ではありません）。ただし、記載するのが望ましいです。

適切なサイズとアスペクト比で提供する方法

  1. Unsplash の写真ページを開き、Download ボタンを使います。
  2. デザインツールまたは画像パイプラインで、目的のアスペクト比にリサイズ／トリミングします。
  3. アバターや顔写真では顔が中央に来るようにし、横長の背景では地平線を保ちます。

注：Unsplash のソース画像や二次画像へのリンクは含めず、メインの写真ページ URL のみを記載してください。

おすすめ画像（各5点）

1) アバター（1:1）

顔がきれいに収まり、背景がシンプルな画像を選びます。

  1. https://unsplash.com/photos/man-wearing-black-shirt-aoEwuEH7YAs
  2. https://unsplash.com/photos/grayscale-photography-of-man-wearing-crew-neck-shirt-jmURdhtm7Ng
  3. https://unsplash.com/photos/grayscale-photography-of-woman-with-two-hands-on-her-face--Keh6vLM7w0
  4. https://unsplash.com/photos/man-in-black-crew-neck-shirt-QWa0TIUW638
  5. https://unsplash.com/photos/man-wearing-black-denim-jacket-near-building-2RFwLL-YX44

推奨する出力サイズ：

  • 1:1：256×256、512×512、1024×1024
2) 顔写真（4:5 または 3:4）

肩から上が写る構図と、落ち着いた背景を目指し、「プロらしさがありながら人間味のある」印象にします。

  1. https://unsplash.com/photos/mans-grey-and-black-shirt-ILip77SbmOE
  2. https://unsplash.com/photos/man-facing-on-left-side-co2Nn11OP3k
  3. https://unsplash.com/photos/woman-with-blue-eyes-and-black-hair-VLJV46hPLSM
  4. https://unsplash.com/photos/woman-with-blonde-hair-and-red-lipstick-8f3yvMdkWJI
  5. https://unsplash.com/photos/a-young-woman-poses-with-hands-near-her-face-bF6wuOivk2M

推奨する出力サイズ：

  • 4:5：800×1000、1200×1500、1600×2000
  • 3:4：900×1200、1500×2000
3) ポートレート（エディトリアル／スナップ）

「企業向けの顔写真」ではなく、「人の物語」を感じさせる雰囲気にしたい場合に使います。

  1. https://unsplash.com/photos/woman-holding-vintage-camera-to-take-a-picture-O_UK4X6ekgI
  2. https://unsplash.com/photos/man-wearing-a-straw-hat-and-maroon-shirt-Rd2UXAg8Zc0
  3. https://unsplash.com/photos/brPuA0a0Uuk
  4. https://unsplash.com/photos/Plii16U9bOU
  5. https://unsplash.com/photos/man-leaning-on-wall-silhouette-2trSyEqR0pA

推奨する出力サイズ：

  • 3:4：1500×2000
  • 4:5：1200×1500
  • SNS 用の 1:1 トリミング：1080×1080
4) 大きな背景画像（ウェブサイトのヒーロー画像、バナー） — 16:9

広い構図で、余白がすっきりしており、グラデーションが見やすい写真を選びます。

  1. https://unsplash.com/photos/landscape-photography-of-mountains-twukN12EN7c
  2. https://unsplash.com/photos/a-black-landscape-with-mountains-in-the-background-X93tlrlx5kI
  3. https://unsplash.com/photos/a-landscape-with-trees-and-mountains-in-the-background-96mTBTH9MEw
  4. https://unsplash.com/photos/mountains-and-a-blue-sky-create-a-picturesque-landscape-fgCR4Yj3CLs
  5. https://unsplash.com/photos/landscape-with-milky-way-night-sky-with-stars-on-the-mountain-long-exposure-photograph-with-grain-Vt7Se0uqEpA

推奨する納品サイズ：

  • デスクトップのヒーロー画像：1920×1080、2400×1350、2880×1620
  • ソーシャルバナー：1500×500（3:1） — 手動でのトリミングを検討してください
5) 抽象的な壁紙（デスクトップ／モバイル）

「ブランドに適した」、特定の対象を示さないビジュアルが必要な場合に使用します。

  1. https://unsplash.com/photos/an-abstract-purple-background-with-a-black-background-5Q9Gf0WSyLk
  2. https://unsplash.com/photos/abstract-layered-shapes-with-a-gradient-orange-color-5q4zsTaVN4I
  3. https://unsplash.com/photos/abstract-organic-shapes-with-blue-and-yellow-gradients-c0B1HYG6ZK4
  4. https://unsplash.com/photos/blue-waves-form-a-soft-abstract-gradient-dYksH3vHorc
  5. https://unsplash.com/photos/abstract-purple-waves-on-a-dark-background-ZQSPIiFEMoU

推奨する納品サイズ：

  • デスクトップ：2560×1600 または 2880×1800
  • モバイル：1080×1920（9:16）

「どの比率を使う？」早見表

  • アバター：1:1
  • 顔写真カード：4:5（おすすめの標準）、3:4（縦長）
  • ウェブサイトのヒーロー背景：16:9
  • モバイル壁紙／ストーリー背景：9:16

ユーザーが「最適な画像」を求めている場合：

  • 余白がすっきりした画像を優先します
  • 背景がごちゃごちゃした画像は避けます
  • 顔が不自然に切り取られないようにします（本番用 URL では crop=faces を使用します）

参考資料

コメント

Markdown 対応