この記事を読むのに必要な時間は約 8 分です。
Photoshop（フォトショップ）でWEBサイトのデザインを作るとヘッダーやフッターといった共通パーツが出てきます。
トップページ、会社概要、事業内容、採用情報、問い合わせ等、複数のPSDファイルを作成して各PSDにバラバラと共通パーツを入れると変更した際に全てのPSDを変更する必要が出てきます。
…面倒くさいですよね。
ヘッダーはヘッダーだけ入れたPSDを作成、フッターはフッターだけ入れたPSDを作成し、別のPSDに共通パーツ用のPSDを配置すると、共通パーツの大元となるPSDを変更すると全てのPSDの共通パーツが更新されます。
WEBでもよく使う共通部分のインクルードをPhotoshop（フォトショップ）の「リンクを配置」で行い、効率的に作業を進める方法について例を交えながら詳しく解説します。
では早速始めていきましょう！
この記事の目次
もしも共通化せずに10ページ分のPSDをそれぞれ作成し、ヘッダーだけ少し変更を入れると10全てのPSDを手直ししないといけません。
…めんどくさい。
まだPhotoshopが未導入の方はAdobe公式サイトから入手しておきましょう。
なお、AdobeCCのプランはコチラの記事で徹底解説しています。
他は何も入れません。
名称は「header.psd」等にしておきます。
同様の手順でフッターなら「footer.psd」、左メニューは「rightmenu.psd」等にしておきます。
PSD内に別のPSD（先のheader.psd）を読み込ませる方法について解説します。
サンプルの名称はcontents.psdにしています。
※全てのPSDは同じフォルダにまとめておきます。
便利！
リンク配置すると左図のようにレイヤーパネルに鎖アイコンが表示されます。
上記で解説している共通パーツはもちろん可能！ワイヤーフレームの作成だけでなく、現バージョンのXdはデザイン自体も行えるのでXd上で全て完結します。
シンプルデザインのサイトならPhotoshopよりAdobeXdの方が素早く作れますよ。
サンプルファイルを参考にすると、さらに理解が深まりますよ！
Photoshopの学習をする上で、プロが作成した生データを研究する事は重要です。
普段からデザイン業務をされている方にとって自分以外のプロのクリエイターが作成したデータを見る事は日常茶飯事ですが、そうでない方は見る機会がありません。
AdobeStockのテンプレート素材はプロによる高品質な作品ばかり！
全て商用利用可能なので、テキストを変えるだけでそのまま使えます。
制作の手間を格段に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。
想像だけで作るとイマイチな仕上がりになりがちですが、良質なサンプルを参考に作ると吸収できる情報の質が段違いです。
相手に舐められない名刺テンプレート50選
文字に高品質なエフェクトを追加するモックアップ
時短と品質の向上をされたいかたに超オススメ！
写真を全く違うグラフィックに変える事が出来る高品質なエフェクト50選
下記記事で良質な素材を紹介しております。併せてチェックしてください！
以上、Photoshop（フォトショップ）で作成したPSDに別のPSDをインクルード（リンクを配置）する方法でした。
WEBのカンプをフォトショで作成する際に役立つ方法の一つです。
ページ数が多いとヘッダーのちょっとした修正でも手間が掛かるので、共通化して無駄な工数を減らしましょう。
その浮いた工数を品質向上に費やすとさらに良い感じになる事間違いなしです！
ではまた！
まだIllustratorを導入されていない方はAdobe公式サイトから入手できます。
なお、学生や教職員の方は公式サイトの学割コンプリートプランが最強にお得！
Illustratorの使い方はゼロから始めるIllustratorで徹底解説しています。
現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう！
