【Photoshop】リンクを配置で共通パーツにする方法【PSDインクルード】

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop（フォトショップ）でWEBサイトのデザインを作るとヘッダーやフッターといった共通パーツが出てきます。
トップページ、会社概要、事業内容、採用情報、問い合わせ等、複数のPSDファイルを作成して各PSDにバラバラと共通パーツを入れると、変更した際に全てのPSDを変更する必要が出てきます。

…これって面倒くさいですよね。

ヘッダーはヘッダーだけ入れたPSDを作成、フッターはフッターだけ入れたPSDを作成し、別のPSDに共通パーツ用のPSDを配置すると、共通パーツの大元となるPSDを変更すると全てのPSDの共通パーツが更新されます。

WEBでもよく使う共通部分のインクルードをPhotoshop（フォトショップ）の「リンクを配置」で行い、効率的に作業を進める方法について例を交えながら詳しく解説します。

では早速始めていきましょう！

この記事の目次

共通部分、そうでないページ固有部分

仮に左図のような構成のページを作った場合、ヘッダーやフッター、右メニューなど共通部分が発生します。
もしも共通化せずに10ページ分のPSDをそれぞれ作成し、ヘッダーだけ少し変更を入れると10全てのPSDを手直ししないといけません。

…めんどくさいですよね。

共通部分は共通部分だけでPSDを作る

共通部分であるヘッダーは「ヘッダー部分単体」をPSDで作成します。
他は何も入れません。
名称は「header.psd」等にしておきます。

同様の手順でフッターなら「footer.psd」、左メニューは「rightmenu.psd」等にしておきます。

PSD内に外部PSDを読み込ませる

PSD内に別のPSD（先のheader.psd）を読み込ませる方法について解説します。
フォトショ初心者の方にも作れるように順を追って解説いたします！

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はAdobe公式サイトから導入できます。
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

STEP.1

本文用コンテンツのPSDを作成する

本文用コンテンツのPSDを作成します。
サンプルの名称はcontents.psdにしています。

※全てのPSDは同じフォルダにまとめておきます。

STEP.2

外部PSDをリンク配置する

画面左上の [ ファイル ] → [ リンクを配置 ] → [ 対象ファイル(header.psd)を選択 ]

STEP.3

位置の調整

位置を調整します。

STEP.4

配置を確定

位置が決まったら画面上部の [ 〇 ] をクリックして配置を確定します。

FINISH

完成

この状態でheader.psdに変更を加えるとcontents.psdのリンク配置しているヘッダー部分も変更されます。
便利！

リンク配置すると左図のようにレイヤーパネルに鎖アイコンが表示されます。

AdobeXdが超便利

WebサイトデザインのツールはPhotoshopも便利ですが、Adobe XDもメチャ便利です。
上記で解説している共通パーツはもちろん可能！ワイヤーフレームの作成だけでなく、現バージョンのXdはデザイン自体も行えるのでXd上で全て完結します。
シンプルデザインのサイトならPhotoshopよりAdobeXdの方が素早く作れますよ。

サンプルPSDをダウンロード

fantiaで今回作成したPSDを公開しています。
サンプルファイルを参考にすると、さらに理解が深まりますよ！

PSDを編集するにはPhotoshopが必須なので未導入の方はAdobe公式サイトから入手しておきましょう。

高品質なWEBデザインテンプレート

Photoshopで使える高品質なWEBデザインテンプレートです。
全て商用利用可能！
制作時間の短縮と作品のクオリティアップを重視したい方に超オススメのテンプレートです。

#01 Business Website Layout with Blue Accents

コーポレートサイトに向いているデザインカンプテンプレートです。
ブルーの差し色は簡単に別の色に変更できます。

ダウンロード

#02 4 Web Pages on a Smartphone Mockup

スマホ用のWebデザインカンプ4パターンセットです。
モバイル主体のサイトを考えられている方にオススメ！

ダウンロード

#03 Web Site Questionnaire Layout for Health Coach

フィットネス系のサイトデザインに適したテンプレートです。
もちろん画像とテキスト内容を変更するとフィットネス以外の分野でも活用が可能です。

ダウンロード

#04 User Interface E-Commerce Website Page Layout Set

通販サイトのデザインカンプです。
汎用的なレイアウトなのでどんなECサイトにも合うでしょう。

ダウンロード

#05 Personal Website Layout with Yellow Accents

様々なサイトで使える汎用的なWebサイトテンプレートです。
個人・企業、何でも使えます。

ダウンロード

Photoshop用とIllustrator用のバナーテンプレート

【商用可】Webサイトのデザインカンプ用テンプレート35選！サイトデザインを瞬殺【Photoshop・Illustrator】

フォトショップとイラストレーター用の高品質なWEBデザインテンプレート35選です。
全て商用利用可能！

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート40選

デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選

紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう！
デジタル媒体向けポートフォリオテンプレ素材35選

制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬！
様々なモックアップテンプレート57選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

まとめ

以上、Photoshop（フォトショップ）で作成したPSDに別のPSDをインクルード（リンクを配置）して共通パーツとして管理する方法でした。

WEBのカンプをフォトショで作成する際に役立つ方法の一つです。
ページ数が多いとヘッダーのちょっとした修正でも手間が掛かるので、共通化して無駄な工数を減らして効率化を行いましょう。
その浮いた工数を品質向上に費やすと、更に良い感じにのデザインに出来る事間違いなしですよ！

ではまた！