Photoshop│「リンクを配置」の使い方

Photoshopの「リンクを配置」機能を使うと、外部ファイルの更新を自動でレイアウトに反映できます。

「リンクを配置」を使えば、PSDなどの別ファイルを参照して配置でき、元データを更新すると参照先にも反映されるため、複数人でのUI制作や共通パーツのレイアウト管理に便利です。

元データの自動反映に加えて、レイヤーカンプの切り替えにも対応しているため、デザインのバリエーション管理を効率化できます。

本記事では、基本手順と応用方法を解説します。

基本：「リンクを配置」の使い方

STEP 1：「リンクを配置」から画像を配置

1. ファイル > リンクを配置 を選択
2. 参照したい画像やPSDファイルを選択して配置

STEP 2：リンクの更新と確認

1. 配置先のPhotoshopドキュメントを開いた状態で、直接リンクした素材を編集・保存すると変更が反映されます。Photoshopアプリが起動しているだけとは区別してください。
2. Photoshopを閉じた状態で素材を編集した場合、再オープン時に更新が反映されていないと、レイヤーに「！」マークが表示される
3. 1つだけ更新する場合は該当レイヤーを右クリックして「変更されたコンテンツを更新」を選びます。まとめて更新する場合は[レイヤー] → [スマートオブジェクト] → [変更されたすべてのコンテンツを更新]を使います。

元データと連動して素材が更新されるため、修正作業の手間を省けます。

2. 実例：リンクされたスマートオブジェクトでの画像配置

STEP 1：サンプル素材の用意

• UIパーツを作成し、PSD形式で保存
• 別途レイアウト用のPSDデータも作成

STEP 2：「リンクを配置」でUIパーツを読み込む

1. ファイル > リンクを配置 からUIパーツを読み込む
2. プロパティパネル でリンク状態を確認

STEP 3：配置した素材を複製・整列

• リンクされたUIパーツを 複製・整列 して配置

STEP 4：参照元のPSDを変更してみる

1. UIパーツ（PSD）の色を変更して保存

2. レイアウトPSDを確認すると、変更内容が自動で反映される

UI素材の作り込みと画面レイアウトの作業を並行して進められます。

応用例：「リンクを配置」とレイヤーカンプの連携

「リンクを配置」と「レイヤーカンプ」を組み合わせることで、より柔軟なレイアウト管理が可能です。

具体的な手順

1. UIパーツPSDに複数のレイヤーカンプを作成して保存
2. レイアウトPSD側で「リンクを配置」 を実行して参照
3. プロパティパネルなどでレイヤーカンプを切り替え、別パターンのUIを表示

この方法を活用すれば、デザインのバリエーションを切り替えて比較できるため、修正や状態管理をスムーズに行えます。

3. まとめ

• 「リンクを配置」により、パーツとレイアウトを分離して効率的に管理できる
• 元データを更新すればリンク先にも自動反映され、修正漏れを防げる
• レイヤーカンプとの併用で、複数バリエーションの切り替えも容易になる

複数人での共同作業や共通コンポーネントを多用するデザインでは、ぜひ 「リンクを配置」 を活用してみてください。

Photoshopのほかの操作は、まとめからご覧いただけます。

別のスマートオブジェクトの中に入ったリンクまで自動更新されるとは限りません。

反映されない場合は、直接リンクしているファイルと入れ子の階層を確認します。

元ファイルを移動するとリンク切れになることがあります。

共同作業者へ渡すときは[ファイル] → [パッケージ]などでリンク素材も揃え、受け取った環境で開けるか確認してください。

レイヤーを操作するスクリプトは、ほかにもあります。