unsplash-asset-images について
用途に応じてUnsplash画像を選び、サイズとアスペクト比を提案するデザインスキルです。アバター、ヘッドショット、ポートレート、背景、壁紙のリンクと、基本的なライセンス上の注意を示します。
主な機能
- 015カテゴリのUnsplash画像リンクを掲載
- 02用途別のサイズと比率を提案
- 03形式に合わせたトリミングとリサイズを案内
- 04Unsplashの基本的なライセンス上の注意を説明
活用シーン
- 01アバター用の正方形画像探し
- 02ヘッドショットカード用ポートレートの選定
- 03横長背景やモバイル壁紙の選択
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ mengto/ skills --skill unsplash-asset-imagesインストール後、Claude Code で/unsplash-asset-imagesを入力して読み込まれたか確認します。
同梱ファイルdemo/index.htmldemo/PROMPT.md
詳細
Unsplash の素材画像(アバター、ポートレート、背景、壁紙)
目的:Unsplash から見栄えのよい画像をすばやく見つけ、適切なサイズと比率で提供します。
出力ルール
おすすめごとに、次の情報を出力します。
- Unsplash ページの URL(正式な URL)
- 用途に応じた推奨比率とサイズ
ユーザーがファイルを希望する場合は、Unsplash の Download ボタンを使ってから、デザインツールまたは画像処理パイプラインでトリミングやサイズ変更をするよう案内します。
ライセンス/安全性(簡潔に)
- Unsplash の画像は通常、無料で使用できますが、ユーザーが明示的に希望しない限り、Unsplash+ の画像は避けてください。
- 写真家の名前を「必須のクレジット」として提示しないでください(Unsplash では必須ではありません)。ただし、記載するのが望ましいです。
適切なサイズと比率で提供する方法
- Unsplash の写真ページを開き、Download ボタンを使います。
- デザインツールまたは画像処理パイプラインで、目的の比率に合わせてサイズ変更やトリミングを行います。
- アバターや顔写真では顔が中央にくるようにし、横長の背景では地平線を保ちます。
注:Unsplash のソースリンクやその他の画像リンクは含めず、メインの写真ページ URL のみを記載してください。
厳選画像(各5枚)
1) アバター(1:1)
顔がきれいに収まり、背景がシンプルな画像を選びます。
- https://unsplash.com/photos/man-wearing-black-shirt-aoEwuEH7YAs
- https://unsplash.com/photos/grayscale-photography-of-man-wearing-crew-neck-shirt-jmURdhtm7Ng
- https://unsplash.com/photos/grayscale-photography-of-woman-with-two-hands-on-her-face--Keh6vLM7w0
- https://unsplash.com/photos/man-in-black-crew-neck-shirt-QWa0TIUW638
- 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)
肩から上が写り、背景が落ち着いていて、「プロらしさと人間味」を感じられる画像を選びます。
- https://unsplash.com/photos/mans-grey-and-black-shirt-ILip77SbmOE
- https://unsplash.com/photos/man-facing-on-left-side-co2Nn11OP3k
- https://unsplash.com/photos/woman-with-blue-eyes-and-black-hair-VLJV46hPLSM
- https://unsplash.com/photos/woman-with-blonde-hair-and-red-lipstick-8f3yvMdkWJI
- 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) ポートレート(エディトリアル/スナップ写真)
「企業向けの顔写真」ではなく「人の物語」を感じさせたい場合に使用します。
- https://unsplash.com/photos/woman-holding-vintage-camera-to-take-a-picture-O_UK4X6ekgI
- https://unsplash.com/photos/man-wearing-a-straw-hat-and-maroon-shirt-Rd2UXAg8Zc0
- https://unsplash.com/photos/brPuA0a0Uuk
- https://unsplash.com/photos/Plii16U9bOU
- 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
余白がきれいに取れ、グラデーションが見やすい横長の画像を選びます。
- https://unsplash.com/photos/landscape-photography-of-mountains-twukN12EN7c
- https://unsplash.com/photos/a-black-landscape-with-mountains-in-the-background-X93tlrlx5kI
- https://unsplash.com/photos/a-landscape-with-trees-and-mountains-in-the-background-96mTBTH9MEw
- https://unsplash.com/photos/mountains-and-a-blue-sky-create-a-picturesque-landscape-fgCR4Yj3CLs
- 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
- SNS バナー:1500×500(3:1)— 手動でのトリミングを検討してください
5) 抽象的な壁紙(デスクトップ/モバイル)
ブランドイメージを損なわない、特定のテーマに限定されないビジュアルが必要な場合に使用します。
- https://unsplash.com/photos/an-abstract-purple-background-with-a-black-background-5Q9Gf0WSyLk
- https://unsplash.com/photos/abstract-layered-shapes-with-a-gradient-orange-color-5q4zsTaVN4I
- https://unsplash.com/photos/abstract-organic-shapes-with-blue-and-yellow-gradients-c0B1HYG6ZK4
- https://unsplash.com/photos/blue-waves-form-a-soft-abstract-gradient-dYksH3vHorc
- 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 対応