.md
Skill.mdサーチャーJP

Skill.md検索

2258件の Skill.mdから、あなたに最適なものを見つけましょう

T

高品質な画像をUnsplashから検索して挿入

by toiee-lab

Unsplash APIを使用して、高品質でロイヤリティフリーな画像を直接検索し、キーワードに合った最適な写真を取得できます 検索結果から複数の画像候補を提示し、用途やブランドに合った画像を選定できるので、時間をかけずに品質の高い素材が揃います ヒーロー画像、サムネイル、フルスクリーン背景など用途に応じて最適な画像サイズに自動最適化し、Webページ読み込み速度を向上させられます HTMLに統合する際にalt属性(代替テキスト)、lazy loading、async decoding などのWebアクセシビリティとパフォーマンス属性を自動付与できます 検索が失敗した場合も Unsplash Source エンドポイントで自動フォールバックし、確実に画像を取得できます Webサイトやブログで見栄えの良い画像をすぐに揃えたい Web デザイナー・コンテンツクリエイター 素材購入費用を抑えながら商用利用可能な高品質画像を確保したい中小企業・個人事業主 ヒーロー画像や風景写真など具体的な画像リクエストを素早く実装したいフロントエンド開発者 ロイヤリティフリーで著作権トラブルのない画像素材を一括管理したい Web 運用担当者 Unsplash API 使用のため初回セットアップで .env.local に UNSPLASH_ACCESS_KEY を設定。検索実行は node .claude/skills/unsplash-image-finder/scripts/unsplash-search.js "キーワード" で実施。検索のコツ:具体的キーワード、同義語再検索、複数キーワード対応。フォールバック URL は https://source.unsplash.com/800x480/?keyword。画像最適化 URL 形式 https://images.unsplash.com/photo-[ID]?w=[WIDTH]&q=80&fm=webp&fit=crop。幅設定は用途別(標準 w=800、ヒーロー w=1200-1600、サムネイル w=400-600、フルスクリーン w=1920)。HTML 統合時は alt、loading="lazy"、decoding="async"、CSS クラスを必須。品質保証として URL 動作確認、品質・コンテンツ適合確認を実施。

記事
12032026-01-06