• アセット
  • バリエーション
  • コンテキスト
  • コントロール

AIを活用してUIレイアウトにプレースホルダー画像を自動挿入する方法

UnsplashをAIクライアントに接続すれば、プロトタイプに本物の画像を取り込めます。グレーのボックスやリンク切れに悩まされる必要はありません。

このページについてAIに聞く

すぐに答え

AIを使ってUIにプレースホルダー画像を追加するには？

AIがUnsplashを使用して、特定のテーマやランダムな高解像度写真を見つけ出し、コードに直接使えるURLを提供します。汎用的なプレースホルダーではなく、そのまま制作に使えるアセットが手に入ります。このページでは、アセット収集を自動化する手順を解説します。

活用例

アセットの活用方法

コマンドを実行した際の結果です。

アセット

画像の直接リンク

AIが特定の写真を見つけ、そのURLを返します。imgタグやCSSにそのまま貼り付けて使用可能です。

バリエーション

ランダムなプレースホルダー

単なる埋め合わせが必要な場合は、AIが高品質な写真をランダムに取得します。モックアップのリアリティを損ないません。

コンテキスト

テーマへの適合

AIはUIの説明に沿った画像を検索します。アプリの雰囲気にぴったりのビジュアルを取得できます。

コントロール

手動による選択

AIがリンクを提供しますが、どの画像がデザインに最適かはあなたが判断します。最終的なクリエイティブの主導権は常にあなたにあります。

ワークフロー

リクエストを受けた際のAIの動作

AIが検索と取得を代行するため、わざわざウェブサイトを閲覧する必要はありません。

  1. 要件の分析

    AIがUIの説明を確認し、特定の被写体が必要なのか、あるいは汎用的な画像でよいのかを判断します。

    search_photos

  2. 特定のビジュアルを検索

    「ミニマルな建築」や「カフェのインテリア」など、キーワードに一致する画像を探します。

    search_photos

  3. 汎用画像の取得

    特定の指定がない場合、AIはスペースを埋めるための高品質な画像をランダムに取得します。

    get_random_photo

  4. URLの提供

    プロジェクトファイルですぐに利用できる、画像の直接リンクをAIが提供します。

    search_photosget_random_photo

試してみる

以下のプロンプトをコピーして開始

これらのプロンプトを使用してUnsplashのツールを起動できます。

出発点

これらはあくまで例です。括弧内のテキストを実際のデザイン要件に合わせて書き換えてください。

Unsplash Connector

準備完了です。MCPクライアントを選択し、セットアップ手順に従ってください。

コネクタリンクhttps://edge.vinkius.com/vk_preview_tVCspzUWSyNRd0SNraQ4VaQPmfAvyOIBUjZ8zjsu/mcp

Claude Desktop

以下の手順で数秒で接続できます。

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — Unsplash capabilities are ready to use.
設定 · claude_desktop_config.jsonコピー
{
  "mcpServers": {
    "unsplash-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_tVCspzUWSyNRd0SNraQ4VaQPmfAvyOIBUjZ8zjsu/mcp"
    }
  }
}
チャットにコピー04

  • ダッシュボードのモックアップ用に、モダンなワークスペースの高解像度写真を見つけてください。

  • ランディングページの背景として使うための、ランダムな写真を取得してください。

  • 旅行アプリのUIを埋めるために、「山の風景」の画像を検索してください。

  • ユーザープロフィールのアイコンとして使うプレースホルダー画像が必要です。ランダムなものを取得してください。

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

ここから始める

一度接続すれば、あとは指示するだけ

一度接続するだけで、UnsplashがAIクライアントと連携します。認証情報は当社のシステム内で暗号化され、安全に管理されます。

UnsplashをAIに接続する

FAQ

動作に関する詳細

  • 01

    AIは画像を直接コンピュータにダウンロードできますか？

    いいえ。AIは画像のURLを提供します。そのリンクをコードに貼り付けるか、手動でファイルを保存する必要があります。

  • 02

    AIは画像の解像度を変更しますか？

    いいえ。AIはUnsplashのツールを通じて利用可能な高解像度のアセットを取得します。

  • 03

    AIは写真の編集やトリミングを行えますか？

    いいえ。AIは既存の写真を検索してリンクを提供するのみであり、画像の加工は行えません。

  • 04

    AIは私が以前どの画像を使用したかを知っていますか？

    いいえ。以前の作業内容に関するコンテキストを伝えない限り、AIはすべてのリクエストを新しい検索として扱います。

  • 05

    これらの画像を商用プロジェクトで使用できますか？

    AIはリンクを提供しますが、使用にあたってはUnsplashのライセンス条項に従う責任はユーザーにあります。

  • Unsplashについてさらに質問がありますか？ Unsplash Connectorの全機能を見る

『Unsplash』を Claude、Cursor、ChatGPT などに接続